Grida

Grida Canvas Packages

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

@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/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