Getting started

The easiest way to get started with meowshapes is to use the online editor. You can create and edit visualizations and graphs directly in your browser without any setup. These can be embedded into your own website.

Using the editor

The code edited in the online editor runs inside a predefined environment. A rendering context ctx is provided that contains all the methods to create shapes and visualizations. The code you write in the editor is executed inside a drawing function.

For convenience, all the Ctx methods are "globally destructured" and available without the ctx. prefix.

This code in the editor:

grid();
sphere(32).color("red");

Looks something like this under the hood:

const draw = (ctx) => {
	const { grid, sphere } = ctx;
	grid();
	sphere(32).color("red");
};

It's more complicated than this, but you get the idea. I hope.

Package installation and setup

If instead, you want to integrate meowshapes into your own project without embedding, you can install the meowshapes package via npm:

npm install meowshapes

Define a drawing function that receives a rendering context. Use this context to create shapes and visualizations:

const draw = (ctx) => {
	ctx.grid();
	ctx.sphere(32).color("red");
};

Then, you can set up the renderer and add the canvas to your website:

import { Renderer } from "meowshapes";

const renderer = new Renderer(draw);

document.body.appendChild(renderer.element());

import { useEffect, useRef } from "react";
import { Renderer } from "meowshapes";

const Renderer = () => {
	const ref = useRef(null);

	useEffect(() => {
		const renderer = new Renderer(draw);
		ref.current.appendChild(renderer.element());

		return () => renderer.dispose();
	}, []);

	return <div ref={ref}></div>;
};

<script lang="ts">
	const attachment = (element) => {
		const renderer = new Renderer(draw);

		element.appendChild(renderer.element());

		return () => renderer.dispose();
	};
</script>

<div {@attach attachment}></div>