@libraz/formulon-cell

A working spreadsheet for any web page, no framework required. Mount it into a DOM element and you get a canvas-rendered grid with desktop-spreadsheet chrome (formula bar, ribbon, sheet tabs, context menu) over the formulon WASM calc engine. Features are composed from presets and extension factories, and locales and themes swap at runtime without re-mounting.

Try it in the live demo.

This is the vanilla TypeScript / DOM core. @libraz/formulon-cell-react and @libraz/formulon-cell-vue are thin adapters over the same mount call.

Basic workbook workflows are ready to use. Dialogs, detailed control behaviour, keyboard interaction, and accessibility do not yet match desktop spreadsheets in every case, so do not present this as a finished end-user product yet.

Install

npm install @libraz/formulon-cell zustand

zustand is a peer dependency. The default WASM engine is single-threaded and needs no COOP/COEP headers. WorkbookHandle.createDefault() rejects if the engine fails to initialize; the in-memory stub is used only when you pass preferStub: true. Bundler settings are in the project README.

Quick start

import { Spreadsheet, WorkbookHandle, presets } from '@libraz/formulon-cell';
import '@libraz/formulon-cell/styles.css';

const wb = await WorkbookHandle.createDefault();
const sheet = await Spreadsheet.mount(document.getElementById('sheet')!, {
  workbook: wb,
  features: presets.full(),
  locale: 'en',
  toolbar: true, // ribbon mounted in the same call, available as sheet.toolbar
});

sheet.i18n.setLocale('ja');
sheet.setTheme('ink'); // themes the grid and the ribbon together

For a grid-only form or viewer, mount with ui: { profile: 'embedded' } and a policy such as fixedFormPolicy(ranges) or viewerPolicy(). See Embedding and use cases.

Presets

| preset | what's in it | |--------|--------------| | presets.minimal() | formula bar, status bar, basic keymap | | presets.standard() | + Quick Analysis, context menu, find/replace, clipboard, format painter | | presets.full() | + format dialog, paste special, conditional formatting, named ranges, hyperlink dialog, PivotTable creation, validation, autocomplete, hover comments |

Subpath exports

| import path | contents | |---|---| | @libraz/formulon-cell | Spreadsheet, WorkbookHandle, presets, policies, extension factories | | @libraz/formulon-cell/extensions | all extension factories | | @libraz/formulon-cell/extensions/* | one extension (statusBar, findReplace, contextMenu, …) | | @libraz/formulon-cell/i18n/ja, /i18n/en | locale dictionaries | | @libraz/formulon-cell/styles.css | grid, dialogs, overlays, ribbon, and all themes in one file | | @libraz/formulon-cell/styles/{tokens,paper,ink,contrast,toolbar}.css | individual stylesheets for granular setups |

Key APIs

| API | description | |-----|-------------| | Spreadsheet.mount(host, opts) | mount the spreadsheet into a DOM element | | WorkbookHandle.createDefault() | create a workbook backed by the WASM engine | | workbook.withBatchedRecalc(fn) | run a multi-cell write with a single recalc | | instance.i18n.setLocale(loc) / instance.setTheme(theme) | swap locale or theme at runtime | | instance.setPolicy / setViewportOptions / setContextMenu / setUi / setToolbar | change embedding settings at runtime | | instance.applyChanges(changes) | trusted host update that bypasses the user policy | | instance.on(event, handler) | cellChange, selectionChange, changeBatch, recalc, … |

The full option and API reference is on the documentation site.

Documentation

• Live demo
• Getting started
• Options
• Embedding and use cases
• Modals and fullscreen
• React / Vue
• Theming
• Language and labels

License

Apache-2.0