gridaco/grida — Gitpedia

<img src="./.readme/cover.png" alt="Grida" width="100%"/> <div align="center"> <h1>Grida</h1> Grida is an open-source canvas editor & rendering engine (Rust + Skia + WASM) — plus an SVG editor, Database/CMS and Forms. <a href="https://grida.co/canvas">Canvas demo</a> • <a href="https://grida.co/svg">SVG editor</a> • <a href="https://grida.co/docs/packages/@grida/refig">Refig</a> • <a href="https://grida.co/downloads">Downloads</a> • <a href="https://grida.co">Website</a> • <a href="https://grida.co/docs">Docs</a> • <a href="./CONTRIBUTING.md">Contributing</a> • <a href="https://grida.co/join-slack">Slack Community</a> </div>

Why Grida

Grida is an open-source 2D graphics engine and editor built for performance and interoperability — with a stable on-disk document format.

Renderer backends: a DOM renderer for HTML/CSS workflows and a Skia renderer via WASM (WebGL2 + raster).
Headless rendering: render in Node.js (no browser) for CI/export pipelines.
Document format: .grida on FlatBuffers (format/grida.fbs) for large documents and schema evolution.
Interop: import from Figma (.fig / REST JSON) and work with SVG.
Supabase integration: Database/CMS and Forms are built to work seamlessly with Supabase (Tables, Views, Storage, Auth).

If Grida is useful, consider starring this repo — it helps a lot.

Demo

Canvas (Skia/WASM): grida.co/canvas
SVG editor: grida.co/svg

Canvas

Grida Canvas

Grida Canvas is a node/property-based 2D graphics engine and editor surface.
Core engine is written in Rust (Skia) and is exposed to web/Node via @grida/canvas-wasm.

Backends

DOM backend: React-bound renderer for website-builder workflows.
Skia backend (Rust + skia-safe → @grida/canvas-wasm):
- Browser: WebGL2 surface (interactive)
- Node.js: raster surface (headless export)

Document format: `.grida`

Grida documents are stored as .grida files using FlatBuffers (format/grida.fbs).
The schema is designed to be evolvable and efficient for large documents.

Docs: Canvas SDK (alpha)

Milestone tracker: Grida Canvas milestone

Headless Figma rendering (Refig)

@grida/refig renders Figma documents from .fig exports (offline) or REST API JSON to PNG/JPEG/WebP/PDF/SVG in Node.js (no browser) or in the browser.

CLI

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

Library (Node)

ts
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();

Docs: @grida/refig

SVG

The clean SVG editor. Open an SVG, change one thing, save — and the diff shows exactly that. Nothing else moves. A round-trip-faithful editor and headless SDK, built for the era when people and AI edit the same files — AI chat built in.

Try it: grida.co/svg
SDK: @grida/svg-editor — headless core + React bindings (alpha), backed by @grida/svg for path data and trivia-preserving parsing
The file is the source of truth — byte-equal round trip when nothing changed; the editor leaves no fingerprints of its own

On the rendering side, Grida Canvas ships an in-house SVG renderer — Rust + Skia → WASM, a Chromium-shaped pipeline within the same in-tree engine that renders HTML/CSS (Stylo + Taffy + Skia), validated against Chromium-rendered oracles (resvg-test-suite corpus, WPT-style harness).

Database / CMS

Grida Database Editor

Grida Database Editor

</details>

Forms

Grida Forms

Quickstart (monorepo)

Requirements: Node.js 24+, pnpm 11+

bash
pnpm install
pnpm dev

Common tasks:

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

Packages

Published packages you can use independently:

Package	Description	Demo
`@grida/canvas-wasm`	Grida Canvas rendering engine (Rust + Skia) as WASM — WebGL2 in the browser, headless raster in Node.js
`@grida/refig`	Headless Figma renderer — render `.fig` / REST JSON to PNG/JPEG/WebP/PDF/SVG, with CLI	demo · docs
`@grida/svg-editor`	Headless, round-trip-faithful SVG editor SDK with React bindings (alpha)	demo
`@grida/svg`	SVG tooling — path data, attribute parsing, trivia-preserving round-trip parser
`@grida/hud`	Canvas-based heads-up display (overlays, handles) for editor viewports	demo
`@grida/tree-view`	Headless, agnostic tree-view controller (layer panels)	demo
`@grida/text-editor`	Backend-agnostic text editor engine (experimental)
`@grida/history`	Dependency-free transaction & undo/redo engine
`@grida/keybinding`	Declarative keybinding primitives — modifiers, platform resolution, event matching
`@grida/cmath`	Unopinionated canvas math — vectors, rects, transforms, snapping
`@grida/vn`	Vector network model (paths, holes, compound shapes)
`@grida/color`	Core graphics color library
`@grida/ruler`	Zero-dependency canvas ruler for infinite canvas	demo
`@grida/pixel-grid`	Pixel-perfect grid component for infinite canvas	demo
`@grida/transparency-grid`	Transparency (checkerboard) grid for infinite canvas	demo
`@grida/tailwindcss-colors`	Tailwind CSS color data (RGBA/HEX/OKLCH) for programmatic use

Interactive demos: grida.co/packages

Does it replace `(X)`..?

Google Forms / Typeform / …: Yes — Grida aims to replace them with a more powerful, beautiful, and customizable builder.
Notion: No — we’re not building a document management system (but we do aim for the same simplicity).
Figma: 50/50 — long-term we’re building a design tool; today we ship the foundation (canvas engine, interop/import, headless rendering). See Nothing Graphics Engine (not active atm).
Framer: 50/50 — Framer is website-interaction-first; we’re aiming for a data-first prototyping tool focused on query + state, with templates.

Keeping Grida as 'Free' as possible

Since 2020, I’ve dedicated myself full-time to building Grida, often facing challenges to sustain both my work and the company (and that's why we have grida.studio). My vision is simple: the world deserves a powerful, free tool that helps people get things done. To support students, solo founders, contributors, and open-source projects, we’re offering the Pro tier of our hosted service at no cost. Join our Slack channel and reach me out. My handle is @universe.

Bonus: You might also be interested in

The Bundle - A Collection of 3D-rendered illustrations
grida.studio - Our Creative Studio
fonts.grida.co - Fonts
code.grida.co - A Figma2Code project
cors.sh - A simple CORS proxy service
We're ~~hiring!~~ - But I am actively looking for co-founder who excels in engineering and market reach / sales.

If you are a robot trying to contribute, please refer to AGENTS.md.