A01 / CANVAS DATA GRID ENGINE

Acheron Grid.
Your data. Your rules.

Open-source TypeScript data grid with a headless core, Canvas rendering, and React and Vue adapters.

Open the playground Integration guide ↗

MIT licensed / TypeScript / Development preview

TypeScript · Vue 3 · ReactCanvas + DOM interaction10,000-row live sampleMIT · Hao Duong

CHOOSE YOUR STACK

Vue. React. Or just TypeScript.

One engine, three ways into your application.

VUE 3

Your Vue component.

Typed props and refs, lifecycle cleanup and live theme, view and freeze updates.

@acheron-grid/vue REACT

Your React component.

Typed refs and events, stable options and lifecycle support for StrictMode.

@acheron-grid/react VANILLA TYPESCRIPT

Your own integration.

Mount the Canvas renderer directly. Keep the headless core independent of your UI framework.

@acheron-grid/canvas

Adapters are available in the source checkout. Development preview; packages are not published to npm. React & Vue TypeScript examples ↗

01 / PLAYGROUND

Grid playground

Real interactions, local sample data. Try a workflow below or explore freely.

Keyboard guide

Explore 8 focused demos with step-by-step instructions ↗

Sample sheet

All rows

10,000 rows × 13 columns

Click to select, double-click or F2 to edit. Right-click a header for sort and filter. Alt+Enter opens links. Use Keyboard shortcuts in the toolbar for help.

Select a cell to get started

Changes stay in this session.

LockedPermission restrictedFrozen boundary

Keyboard shortcuts

Focus the grid first. Editors keep native text-selection and undo behavior.

Move / extend selection
Arrow keys / Shift + Arrow
Select row / column
Shift + Space / Ctrl/Cmd + Space
Select all / add a range
Ctrl/Cmd + A / Shift + F8
Edit / cancel
F2 or Enter / Escape
Save / save and move
Enter / Tab
Newline while editing
Alt + Enter
Copy / paste
Ctrl/Cmd + C / Ctrl/Cmd + V
Undo / redo
Ctrl/Cmd + Z / Ctrl/Cmd + Shift + Z
Bold / italic
Ctrl/Cmd + B / Ctrl/Cmd + I
Find / context actions
Ctrl/Cmd + F / Shift + F10
Open cell links
Alt + Enter while not editing

Practice selection & keyboard ↗

Demo notes

The second row in each sample is read-only; AG-00003 Status also denies edits. Selection and copy remain available. Changes stay on this page and reload resets the sample. Screen-reader support still needs manual verification.

02 / CAPABILITIES

Built around
the way people work.

01

Work across cells

Select ranges, whole rows and columns. Copy styles, paste data, reorder, merge and group rows with undoable operations.

02

Edit with context

Multiline text, searchable choices, tags, checkboxes, safe rich text and per-link shortcuts. Validate inputs before saving.

03

Control the experience

Freeze panes, resize with guides, sort and filter local rows. Configure themes, custom renderers and independent capability permissions.

04

Keep the core portable

Pure TypeScript owns commands and history. Canvas handles the browser. Markdown parsing stays in an optional adapter.

03 / INTEGRATION

Your rows.
Your starting point.

Choose your columns, supply a data source and mount the renderer. Keep storage and server synchronization in your application.

Build and integration instructions →
import { LocalDataSource } from '@acheron-grid/core';
import { createGrid } from '@acheron-grid/canvas';

const grid = createGrid({
  container: document.querySelector('#grid'),
  columns: [{ key: 'title', title: 'Title', editable: true }],
  dataSource: new LocalDataSource([
    { id: 1, title: 'Your first row' }
  ], row => row.id)
});

04 / DOCUMENTATION FOR PEOPLE AND AGENTS

Human-readable.
Agent-ready.

Plain Markdown guides describe packages, working APIs, extension points and current limits. Give your coding assistant the same public documentation you use.

A separate MCP adapter provides documentation resources and host-controlled grid tools; the browser playground is not automatically connected.

Getting startedBuild, install, mount and clean up · Read guide ↗AI integration notesCapabilities, boundaries and MCP direction · Read guide ↗Documentation indexSmall, public reading map · Browse documentation ↗

EXPLORE THE IMPLEMENTED FEATURES

More than cells and columns.

Selection & keyboard

Work with cells, ranges and whole rows without leaving the keyboard.

Try the live demo ↗

Editors & validation

Try text, searchable choices, multiple tags and checkbox editors.

Try the live demo ↗

Rich text & links

Formatted text on screen, portable HTML or Markdown underneath.

Try the live demo ↗

Search, sort & filter

Find content and shape a local view while keeping your edits.

Try the live demo ↗

Headers, freeze & resize

Nested headers, frozen boundaries and deliberate sizing.

Try the live demo ↗

Rows & columns

Reorder, insert, delete and move with structural history.

Try the live demo ↗

Merged cells & row groups

Combine a range or collapse a group of rows.

Try the live demo ↗

Formatting & permissions

Distinguish user locks from application permissions.

Try the live demo ↗

Markdown and HTML inside cells

Bold, italic, inline code, links and line breaks. HTML also supports underline. Visual editing hides source markup; an optional Markdown adapter keeps the core dependency-free.

Try rich content ↗

A context menu you can search

Right-click or press Shift+F10, then type to filter actions. Select, copy, paste, lock, format, resize, freeze and change structure through available actions. Header menus also offer sorting and filtering.

Try menu and keyboard ↗

Read every package reference ↗