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 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.

• [x] Infinite canvas + fast pan/zoom
• [x] .grida document format (FlatBuffers)
• [x] Render backends: DOM + Skia/WASM (WebGL2 + raster)
• [x] Import: Figma (@grida/io-figma), SVG
• [x] SVG tooling (@grida/svg)
• [x] Canvas-native rich text editing
• [x] History — time-bucketed undo/redo with preview
• [x] Markdown & HTML/CSS embeds (in-house Chromium-aligned renderer)
• [x] Multi-page PDF export
• [x] Bitmap editor (TP)
• [x] SVG editor — see SVG
• [x] Vector network model (paths, holes, compound shapes)
• [x] Headless rendering: @grida/refig (Node + browser)
• [ ] Component / instance model
• [ ] WebGPU backend (Skia Graphite)

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

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)

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

• [x] Connect your Supabase Project (Tables, Views, Storage, Auth)
• [x] Readonly Views
• [x] Storage Connected Rich Text Editor
• [x] CMS Ready
• [x] Virtual Attributes - Computed & FK References
• [x] Export as CSV
• [x] Filter, Sort, Search (Locally and FTS)
• [x] Create a Form View (Admin UI)
• [x] View in Gallery View
• [x] View in List View
• [x] View in Charts View (β)
• [ ] Joins & Relational Queries
• [ ] API Access
• [ ] Localization

Forms

• [x] 30+ Inputs (file upload, signature, richtext, sms verification, etc)
• [x] Logic blocks & Computed Fields
• [x] Hidden fields & search param seeding
• [x] Powerful Builder & Beautiful Themes
• [x] Custom CSS
• [x] Realtime Sync & Partial Submissions
• [x] Grida Database Integration
• [x] Supabase Table Integration
• [x] Inventory Management (for tickets)
• [x] Simulator
• [x] Headless Usage - API-only usage
• [x] 12 Supported Languages
• [ ] Client SDK - BYO (Bring your own) Component
• [ ] Localization
• [ ] Custom Auth Gate
• [ ] Accept Payments

Quickstart (monorepo)

Requirements: Node.js 24+, pnpm 11+

pnpm install
pnpm dev

Common tasks:

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

Packages

Published packages you can use independently:

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.

License

Grida is licensed under Apache License 2.0