Grida is an open-source canvas editor, SVG editor, and Supabase-backed Database/CMS and Forms toolkit written in TypeScript under the Apache-2.0 licence, aimed at designers and developers who want to design and build web apps on one open canvas instead of stitching together a design tool, an SVG editor, and a separate back end.

What it is

Grida is a canvas product built around the standalone gridaco/nothing 2D graphics engine, written in Rust on Skia and exposed to web and Node through the published @grida/canvas-wasm artifact. This repository consumes that engine and adds the editor surfaces around it: a canvas editor with an infinite canvas, a round-trip-faithful SVG editor, a Database/CMS, and Forms. Two renderer backends are supported — a DOM renderer bound to React for HTML/CSS website-builder workflows, and a Skia renderer compiled to WASM that runs on a WebGL2 surface in the browser and a raster surface in Node.js. Documents are stored as .grida files encoded with FlatBuffers against the format/grida.fbs schema, which is designed for large documents and schema evolution.

The concrete problem it solves is the split between proprietary design canvases and the code that has to build what they show. Grida imports Figma documents, either from offline .fig exports or from REST API JSON, through @grida/io-figma, and it replaces the manual re-export step those workflows usually require with @grida/refig, a headless renderer that turns a Figma document into PNG, JPEG, WebP, PDF, or SVG without a browser. The same engine backs the SVG editor, whose stated goal is a diff that shows exactly the one thing that changed, rather than a rewrite of surrounding markup. It lives in the TypeScript and npm ecosystem, and the Database/CMS and Forms surfaces are built to work against Supabase Tables, Views, Storage, and Auth.

Key capabilities

• .grida document format on FlatBuffers, defined by format/grida.fbs for large documents and schema evolution.
• Two renderer backends: a DOM renderer for HTML/CSS workflows and a Skia renderer via WASM using WebGL2 and raster.
• Headless rendering in Node.js with no browser, for CI and export pipelines — pnpm dlx @grida/refig ./design.fig --export-all --out ./out.
• Figma import from .fig exports or REST JSON, and export to PNG, JPEG, WebP, PDF, and SVG.
• SVG editor published as @grida/svg-editor with a headless core and React bindings.
• Canvas features including infinite canvas with pan and zoom, canvas-native rich text editing, time-bucketed undo/redo with preview, Markdown and HTML/CSS embeds, bitmap editor, vector network model for paths, holes, and compound shapes, and multi-page PDF export.
• Database/CMS and Forms integration against Supabase Tables, Views, Storage, and Auth.

Who uses it and how

• Teams running design export in CI, using the Node.js raster surface to render documents without launching a browser.
• Website builders that need the React-bound DOM renderer so canvas output maps onto HTML and CSS.
• Design teams that already hold Figma files and want offline .fig rendering, either through the @grida/refig CLI or the FigmaDocument and FigmaRenderer library API in Node.
• Workflows where people and AI edit the same SVG files, which the SVG editor addresses with built-in AI chat and a round-trip-faithful save model.
• Supabase-backed application teams adding a Database/CMS and Forms layer that speaks to their existing database, storage, and auth.

Getting started

The hosted canvas demo is at grida.co/canvas and the SVG editor at grida.co/svg. For local use, the headless path is the @grida/refig package run with pnpm dlx @grida/refig ./design.fig --export-all --out ./out, or imported as a library from @grida/refig; the SVG editor is installed from the npm package @grida/svg-editor.

How it compares

Grida is listed under the figma-alternative topic and imports Figma .fig exports and REST JSON, so it is positioned as an open canvas that works with Figma files rather than something that requires Figma to open them. Among the tools named in the project's own facts, its closest neighbours are Figma for the canvas itself and standalone SVG tooling for the SVG editor, with the Database/CMS, Forms, and Supabase integration being areas those tools do not cover.

When to use it — and when not to

A self-hoster adopting the Database/CMS and Forms parts must run Supabase for tables, views, storage, and auth, and anyone relying on headless export needs a Node.js environment plus the WASM Skia artifact. The component and instance model and the WebGPU backend are still unchecked on the project's own roadmap, and the Canvas SDK and @grida/svg-editor are documented as alpha, so teams needing a finished component system or WebGPU rendering should wait. The repository also carries a substantial open issue count, which is worth weighing before committing to it as a foundation.

pnpm dlx @grida/refig ./design.fig --export-all --out ./out
pnpm dlx @grida/refig ./design.fig --node "1:23" --format png --out ./out.png

import { writeFileSync } from "node:fs";
import { FigmaDocument, FigmaRenderer } from "@grida/refig";

async function main() {
  const doc = FigmaDocument.fromFile("design.fig");
  const renderer = new FigmaRenderer(doc);

  const { data } = await renderer.render("1:23", { format: "png", scale: 2 });
  writeFileSync("out.png", data);

  renderer.dispose();
}

main();

pnpm install
pnpm dev

pnpm dev:editor
pnpm dev:packages
pnpm typecheck
pnpm lint
pnpm test