Getting started

Acheron Grid — Getting started

Acheron Grid combines spreadsheet interactions with application data. Its headless TypeScript core owns selection, commands, permissions, sparse layout and history. The Canvas package adds browser rendering and interaction. Licensed under MIT by Hao Duong.

Status

Experimental development preview. APIs may change. Version 0.1.0 is prepared for publication; packages are not yet published to npm. Demo edits remain local to the browser session; reloading resets sample data.

Build

Requires Node.js 22 or later.

git clone https://github.com/haodn-dev/acheron-grid.git
cd acheron-grid
npm ci
npm run build
npm run playground

For a separate application with an ESM-capable bundler:

npm install /path/to/acheron-grid/packages/core /path/to/acheron-grid/packages/canvas

Mount

The container must have a non-zero width and height.

<div id="grid" style="height: 480px; width: 100%"></div>

import { LocalDataSource } from '@acheron-grid/core';
import { createGrid } from '@acheron-grid/canvas';

const source = new LocalDataSource([
  { id: 1, title: 'Hello grid' }
], row => row.id);

const grid = createGrid({
  container: document.querySelector('#grid'),
  columns: [{ key: 'title', title: 'Title', editable: true }],
  dataSource: source
});

// Release listeners, observers and grid-owned DOM on unmount.
grid.destroy();

Continue learning

• Practical guide: validation, editors, selection, clipboard, history, views, layout, structure, rich text and permissions.
• Feature examples: focused live grids with instructions.
• HTML guide: readable integration and feature documentation.

Try the demo

• Sample sheet: grouped headers, searchable tags, multiline Markdown/HTML text and availability choices.
• Records: text editing, images, safe links and validation.
• Right-click a header for sorting/filtering; use Shift+F10 for context actions.
• Select whole rows/columns before dragging to reorder.
• Ctrl/Cmd+B or I formats the selected cells. Undo/redo restores format changes.
• Hover or select a link cell to reveal a shortcut for each safe link.
• Enable the formatting lock to exercise an application permission policy.

Packages and extension points

• @acheron-grid/react and @acheron-grid/vue: separate lifecycle adapters. See frameworks.md.

• @acheron-grid/core: pure TypeScript, no runtime dependencies; local sources, commands, permissions, history and layout.

• @acheron-grid/canvas: browser Canvas, DOM editors, menus and accessibility mirrors; depends on core.

• @acheron-grid/markdown: optional Markdown adapter using marked. Core and Canvas do not depend on marked.

• Customize drawing through renderCell, options through choiceEditor.renderOption, editing through createEditor, and validation through column parsers.

• CellFormat includes background, textColor, contentFormat, fontWeight and fontStyle. Custom renderers must honor the format fields they support.

• Keep persistence and server authorization in the host application.

Limits

Remote data sources, realtime collaboration, formulas and an automatic MCP browser bridge are not included. The optional MCP adapter provides a documentation server and host-controlled grid tools. Virtualization limits rendering work, not the cost of in-memory filtering or storage. Accessibility support is partial and not certified. No benchmark claim is made for the demo's 10,000 rows.

Read the checked-out source repository's package README files and exported TypeScript contracts for the full API. The public guide may describe features newer than the repository's default branch.