Grida caught my attention because it looks like a simple open-source design tool at first, but the repository tells a bigger story.

It is not only trying to be a Figma-to-code helper.

The current project is closer to an open canvas platform: a Rust and Skia powered rendering engine, a web editor, Figma import/export tooling, Forms, Database/CMS features, and reusable canvas packages.

That makes it more ambitious than a sketching tool and more technical than a no-code builder.

What Is Grida?

Grida is an open-source canvas editor and rendering engine for building visual tools, design workflows, forms, and database-backed interfaces.

The project describes itself as a 2D graphics engine and editor built for performance and interoperability.

The core canvas uses Rust, Skia, and WASM, while the main editor is a TypeScript/React/Next.js application.

The interesting part is the scope.

Grida includes: a design canvas, a .grida document format, a headless Figma renderer, a Supabase-backed product backend, form-builder features, database/CMS workflows, and a growing family of reusable canvas packages.

Grida vs Excalidraw

Grida and Excalidraw overlap only at the surface level.

Both are open-source visual tools that run in the browser. Both give users a canvas.

But the workflows are different.

Excalidraw is great for quick diagrams, architecture sketches, wireframes, and collaborative whiteboarding.

Grida is aiming at something heavier: UI design, app-like canvases, Figma interoperability, headless rendering, forms, database-backed workflows, and embeddable canvas infrastructure.

So I would not describe Grida as an Excalidraw replacement.

I would describe it as an open design and application canvas.

Why This Project Is Interesting

The strongest technical idea in Grida is that the canvas is not just a React drawing surface.

The rendering engine lives partly in Rust. It uses Skia for painting and exposes WASM bindings for browser and Node usage.

That gives Grida a path toward deterministic rendering, headless exports, and higher-performance graphics workloads than a purely DOM-based editor.

The project supports two rendering directions:

  • A DOM backend for website-builder style workflows.
  • A Skia/WASM backend for 2D graphics and headless rendering.

That split matters because visual builders often get stuck between editable DOM layouts and accurate design-tool rendering. Grida is trying to support both.

The Practical Developer Piece: Refig

The most immediately useful subproject is probably @grida/refig.

@grida/refig is a headless Figma renderer. It can render .fig exports or Figma REST API JSON into PNG, JPEG, WebP, PDF, or SVG from Node.js or the browser.

That is a useful standalone tool even if you never run the full Grida platform.

Potential uses:

  • Export design assets in CI.
  • Generate thumbnails for design files.
  • Render previews from Figma JSON.
  • Process .fig files offline.
  • Build internal design review pipelines.

The API is intentionally narrow: bring your own Figma data, images, and fonts, then render a specific node.

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

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

For a developer audience, this is the easiest part of Grida to evaluate.

Tech Overview

At repository level, Grida is a large monorepo.

The main pieces are:

  • editor/: the primary Next.js editor application.
  • crates/: Rust crates for the rendering engine, canvas WASM, math, fonts, and related graphics work.
  • packages/: reusable TypeScript packages for canvas primitives, Figma I/O, SVG, grids, rulers, schemas, keybindings, history, and editor utilities.
  • supabase/: local Supabase configuration, migrations, database tests, seed data, and schema references.
  • docs/: product docs, working group docs, design notes, and technical reference material.
  • apps/docs/: Docusaurus wrapper for publishing docs.
  • desktop/: Electron desktop shell for the hosted editor.

The root requirements are modern:

  • Node.js 24+
  • pnpm 10+
  • Turborepo
  • TypeScript 6
  • React 19
  • Next.js 16
  • Rust 2024 edition for the graphics crates
  • Supabase for database/auth/storage workflows

This is not a small codebase.

The clone is large, it uses Git LFS, and full graphics development may require Rust, Skia build dependencies, and prebuilt WASM artifacts.

Trying Grida From Source

This is not a classic one-file Docker Compose project.

For local development, the project expects Git LFS, submodules, Node 24, pnpm 10, and optionally Rust tooling if you work on the canvas engine.

Local development prerequisites

Install Git LFS before cloning, because the repository stores binary fixtures and prebuilt WASM artifacts through LFS.

You also need Node.js 24+, pnpm 10+, and submodules.

For Rust/canvas work, install Rust through rustup and make sure ninja is available for Skia builds.

Basic local setup looks like this:

git clone --recurse-submodules https://github.com/gridaco/grida
cd grida
git lfs pull
corepack enable pnpm
pnpm install
pnpm dev:editor

The editor expects Supabase environment variables for local backend features.

For local Supabase:

cd supabase
supabase start
supabase db reset

Then configure editor/.env.local using the values from supabase status.

Important variables include:

  • NEXT_PUBLIC_SUPABASE_URL
  • NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY
  • SUPABASE_SECRET_KEY
  • NEXT_PUBLIC_URL

Optional integrations include OpenAI, Mapbox, Resend, Upstash Redis, Vercel, Sentry, Stripe, Metronome, and Toss Payments.

Self-Hosting Notes

I would be careful calling Grida a simple self-hosted app.

The open-source repo can be built and run locally, but a real deployment has several moving parts:

  • Next.js editor deployment.
  • Supabase/Postgres/Auth/Storage.
  • Environment variables.
  • Built workspace packages.
  • Canvas WASM artifacts.
  • Optional external integrations for email, AI, billing, telemetry, rate limiting, maps, and domains.

That is doable for experienced developers, but it is not the same experience as running something like:

docker compose up -d

For most self-hosters, the better first step is to try the editor locally or test a focused package such as @grida/refig.

Where Grida Fits

Grida sits somewhere between several categories:

  • Figma-like design canvas.
  • Visual app builder.
  • Headless rendering engine.
  • Forms platform.
  • Supabase-backed CMS/database UI.
  • Developer SDK for canvas primitives.

That makes it hard to summarize in one sentence, but also makes the project interesting.

My working description is:

Grida is an open-source attempt to merge design tooling, Figma interoperability, forms, database-backed app building, and embeddable canvas infrastructure into one web-native platform.

Alternatives

The most useful comparisons depend on which part of Grida you care about.

For whiteboarding and diagrams:

  • Excalidraw
  • tldraw

For design tools:

  • Figma
  • Penpot

For visual site/app building:

  • Webflow
  • Framer
  • Plasmic

For database-backed app builders:

  • Retool
  • Appsmith
  • Baserow
  • NocoDB

For rendering/export infrastructure:

  • resvg
  • Figma API based custom exporters
  • Playwright screenshot pipelines

Grida is unusual because it touches several of these categories at once.

When I Would Use It

I would look at Grida if I wanted to study how a modern open-source design canvas is built.

I would look at @grida/refig if I needed deterministic Figma rendering from Node.js or CI.

I would look at the full platform if I wanted a Supabase-backed visual editor with forms, hosted documents, and database workflows.

I would not pick it yet as the easiest self-hosted form builder or the simplest Excalidraw alternative. The project is broader and heavier than that.

Conclusion

Grida is one of those projects where the repository is more interesting than the headline.

The old design-to-code story is still present in the docs, but the current direction is bigger: canvas engine, renderer, editor, forms, database workflows, Supabase integration, and reusable graphics packages.

For FOSS builders, the practical entry point is probably @grida/refig or the canvas packages.

For people interested in open design tools, the bigger question is whether Grida can turn this ambitious technical foundation into a cohesive product experience.

FAQ

Is Grida like Excalidraw?

Only superficially. Both are browser-based canvas tools, but Excalidraw is mainly a collaborative whiteboard while Grida is a design/rendering/app-building platform.

Is Grida open source?

Yes, the main repository is open source. The root repo uses Apache-2.0 style license metadata, while some published packages have their own MIT package-level licenses.

Can I self-host Grida easily?

Not as a simple Docker Compose app. You can run it locally from source, but a full deployment involves Next.js, Supabase, environment variables, built packages, WASM artifacts, and optional integrations.

What is the most useful standalone package?

@grida/refig is the cleanest standalone developer package. It renders Figma .fig files or REST API JSON to image/PDF/SVG formats from Node.js or the browser.

Does Grida replace Figma?

Not today.

The project has Figma-like ambitions and interoperability, but it is better understood as an open canvas/rendering platform with product layers around forms and database-backed workflows.