Grida

At a Glance:

Grida is an open-source 2D graphics engine and canvas editor built with a Rust/Skia/WASM stack, paired with a Supabase-integrated database/CMS and a form builder, supporting a FlatBuffers-based .grida document format, DOM and Skia rendering backends, and headless Figma-to-image rendering in Node.js.

Overview:

Grida is an open-source project structured around a core 2D graphics engine and editor, a database/CMS, and a form builder. The graphics engine, written in Rust using Skia, provides an infinite canvas editor with fast pan/zoom and a stable .grida document format built on FlatBuffers. It offers both a DOM backend for web workflows and a Skia/WASM backend for high-performance rendering in browsers and headless rendering in Node.js. The database module connects directly to a Supabase project for managing tables, views, and storage, while the forms builder provides over 30 input types with logic and Supabase table integration. This combination is designed for developers who need a programmable design tool, a data-connected canvas, or a headless rendering pipeline.

Key Decision Points:

• Rust/WASM Rendering Engine: The core engine is compiled from Rust to WASM, targeting WebGL2 and raster surfaces, which indicates a focus on raw 2D graphics performance for canvas-based applications.

• Headless and Server-Side Rendering: The @grida/refig package can render Figma (.fig and REST JSON) documents to images (PNG, JPEG, WebP, PDF, SVG) in a Node.js environment without a headless browser, enabling CI/CD export pipelines.

• Structured Document Format: Documents are stored in FlatBuffers-based .grida files, which are designed for efficiency and schema evolution, contrasting with projects that use loosely structured JSON.

• Supabase-Centric Data Layer: The Database/CMS and Forms features require a connected Supabase project for their core functionality, including tables, views, storage, and authentication.

• Component and GPU Expansion in Progress: The roadmap explicitly lists the component/instance model and a WebGPU (Skia Graphite) backend as future items, indicating a current scope focused on the core rendering and document model.

Core Features:

• Dual rendering backends: A DOM renderer for HTML/CSS integration and a WASM-based Skia renderer for WebGL2 and raster output in both browser and Node.js environments.

• Headless Figma rendering (@grida/refig): A package with a CLI and Node.js library that renders Figma documents from .fig exports or REST API JSON to PNG, JPEG, WebP, PDF, and SVG.

• .grida document format: A stable, binary on-disk format built on FlatBuffers schema (format/grida.fbs), designed for large documents and schema evolution.

• Vector network model: A node and property-based system for handling complex vector paths, holes, and compound shapes within the canvas editor.

• Supabase-integrated Database/CMS: Tools to connect a Supabase project and manage data through tables, views, storage, with virtual attributes, CSV export, and gallery/list/chart views.

• Form builder with 30+ input types: A form builder supporting file upload, signature, rich text, and SMS verification, along with logic blocks, computed fields, custom CSS, and direct integration with Supabase tables.

Use Cases:

• Developers building a custom web-based 2D editor, such as a prototyping tool or a website builder, can embed the @grida/canvas-wasm engine and its DOM or Skia renderer backends.

• Automation engineers and developers can use the @grida/refig library to programmatically convert offline Figma (.fig) exports into PNG or PDF images within a headless server environment.

• Developers using Supabase for their backend can deploy the Grida Forms builder to create complex, styled forms with real-time sync and direct submission to a Supabase table.

Open-Source Alternative Value:

Grida’s open-source nature is most concretely valuable in its rendering engine and document format. The Rust/Skia/WASM engine, distributed as a package, provides a transparent and embeddable 2D rendering layer that developers can modify or inspect. The documented, FlatBuffers-based .grida file format offers a stable and efficient way to handle design documents, reducing data lock-in. Additionally, the headless Figma rendering tool (@grida/refig) provides a free, source-available option for automated asset generation that runs without a browser, contrasting with cloud-dependent rendering services. The project’s explicit aim, as stated in the README, is to replace proprietary form tools like Google Forms or Typeform with a more customizable builder.