Grida

Grida Canvas Packages

A collection of high-performance canvas components for building infinite canvas applications

@grida/svg-editor

Headless, clean SVG editor. Open a file, edit it, save it — the diff is exactly the change you made. Round-trips by default, adds no proprietary noise, backend-agnostic. Experimental.

Key Features

  • •Round-trips by default (byte-equal open + save)
  • •Minimal-diff mutations, no proprietary noise
  • •Headless core, DOM surface + React layer
  • •Selection, transform, insert, inline text edit
  • •Typed paint, properties, and defs/gradients
  • •Core, not customizable — narrow public surface

@grida/refig

Headless Figma renderer — render Figma documents to PNG, JPEG, WebP, PDF, or SVG in Node.js (no browser) or in the browser. Deterministic exports, offline rendering from .fig, CLI and library API.

Key Features

  • •Node.js and browser entrypoints
  • •CLI and library API
  • •Offline rendering from .fig files
  • •REST API JSON input
  • •Deterministic, CI-friendly exports
  • •Rich text (attributed text) support

@grida/ruler

Zero-Dependency Canvas Ruler Component for Infinite Canvas. A lightweight, performant ruler component that supports zooming, panning, and custom markers.

Key Features

  • •Zero dependencies
  • •High performance canvas-based rendering
  • •Support for zooming and panning
  • •Custom markers and ranges
  • •Customizable appearance
  • •Responsive design
  • •Both React and vanilla JS support

@grida/transparency-grid

Transparency Grid component for Infinite Canvas. A lightweight, performant transparency grid component that supports zooming, panning, and custom transformations.

Key Features

  • •Zero dependencies
  • •High performance canvas-based rendering
  • •Support for zooming and panning
  • •Customizable appearance
  • •Responsive design
  • •Both React and vanilla JS support
  • •WebGPU support (experimental)

@grida/tree-view

Headless, agnostic tree-view controller for editors and IDEs. Zero runtime dependencies, no DOM coupling in the core, no widget library on top. React is the only optional peer.

Key Features

  • •Zero runtime dependencies
  • •Headless state machine (no DOM imports in the core)
  • •Drag & drop with composable move constraints
  • •Six subscription channels (rows, expanded, focus, drag, selection, intent)
  • •Configurable keymap + type-ahead helpers
  • •Virtualization-ready stable row list
  • •Optional React peer (TreeProvider + useTreeSnapshot)

@grida/hud

Canvas-based heads-up display for the Grida editor viewport. Selection chrome, handles, hover, marquee, gesture state, hit-testing — rendered to a single canvas from a pure-logic state machine. No DOM overlay, no data-id traversal, no per-element React reconciliation in the hot path.

Key Features

  • •Canvas-rendered (one draw per frame)
  • •Pure-logic state machine, headless event core
  • •Render and hit-testing as separate outputs
  • •Rotation-aware selection chrome and cursors
  • •Vector edit chrome (vertices, tangents, segments)
  • •Host-fed extras via surface.draw(extra)
  • •Tree-shakable rotation-aware cursors subpath

@grida/pixel-grid

A React component for rendering pixel-perfect grids in infinite canvas applications. This package provides a flexible and performant way to display grid patterns with zoom and pan capabilities.

Key Features

  • •Pixel-perfect grid rendering
  • •Zoom and pan support
  • •Customizable grid appearance
  • •High performance with React
  • •Responsive design support