Grida

Grida is an open-source canvas editor — powered by the nothing graphics engine (Rust + Skia + WASM) — plus an SVG editor, Database/CMS and Forms.

Canvas demo • SVG editor • Refig • Downloads • Website • Docs • Contributing • Slack Community

---

Why Grida

Grida is an open-source canvas editor built for performance and interoperability — with a stable on-disk document format. The 2D graphics engine that powers it lives in gridaco/nothing; this repo consumes it as the published @grida/canvas-wasm artifact.

• 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. The core engine (gridaco/nothing) is written in Rust (Skia) and is exposed to web/Node via @grida/canvas-wasm.

• Infinite canvas + fast pan/zoom
• .grida document format (FlatBuffers)
• Render backends: DOM + Skia/WASM (WebGL2 + raster)
• Import: Figma (@grida/io-figma), SVG
• SVG tooling (@grida/svg)
• Canvas-native rich text editing
• History — time-bucketed undo/redo with preview
• Markdown & HTML/CSS embeds (in-house Chromium-aligned renderer)
• Multi-page PDF export
• Bitmap editor (TP)
• SVG editor — see SVG
• Vector network model (paths, holes, compound shapes)
• 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 engine (gridaco/nothing) that renders HTML/CSS (Stylo + Taffy + Skia), validated against Chromium-rendered oracles (resvg-test-suite corpus, WPT-style harness).

---

Database / CMS

Demo

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

---

Forms

• 30+ Inputs (file upload, signature, richtext, sms verification, etc)
• Logic blocks & Computed Fields
• Hidden fields & search param seeding
• Powerful Builder & Beautiful Themes
• Custom CSS
• Realtime Sync & Partial Submissions
• Grida Database Integration
• Supabase Table Integration
• Inventory Management (for tickets)
• Simulator
• Headless Usage - API-only usage
• 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:

Package	Description	Demo
@grida/canvas-wasm	Grida Canvas rendering engine (Rust + Skia) as WASM — WebGL2 in the browser, headless raster in Node.js. Source: gridaco/nothing
@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). The engine lives in gridaco/nothing.
• 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

---