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.
.grida on FlatBuffers (format/grida.fbs) for large documents and schema evolution..fig / REST JSON) and work with SVG.If Grida is useful, consider starring this repo — it helps a lot.
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.
.grida document format (FlatBuffers)@grida/io-figma), SVG@grida/svg)@grida/refig (Node + browser)skia-safe → @grida/canvas-wasm):.gridaGrida 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
@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.
pnpm dlx @grida/refig ./design.fig --export-all --out ./out
pnpm dlx @grida/refig ./design.fig --node "1:23" --format png --out ./out.png
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
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.
@grida/svg-editor — headless core + React bindings (alpha), backed by @grida/svg for path data and trivia-preserving parsingOn 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).
Requirements: Node.js 24+, pnpm 11+
pnpm install
pnpm dev
Common tasks:
pnpm dev:editor
pnpm dev:packages
pnpm typecheck
pnpm lint
pnpm test
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 |
暂无开放 Issues，或尚未同步最近议题。