Structured like LaTeX, editable like Word, output as free as the web.
CallioText is a React library for building structured document editors, based on Slate and MUI. A document here is a tree with semantics: authors manipulate the semantics, while styling and numbering are maintained uniformly by rendering rules.
- Writing serious documents in a Word-like editor means maintaining styling and numbering by hand: insert a theorem in the middle and every number after it must be fixed one by one.
- LaTeX hands structure to the system, but its input is code that grows hard to read and change, and its output targets print, giving up the interactivity of the web.
- General-purpose rich text editors have formatting but no semantics: bold is just bold, the editor does not know "this is a theorem", so automatic numbering and cross references are out of reach.
CallioText models semantics explicitly as concepts: editing happens in a graphical interface, appearance is decided uniformly by rendering rules, and numbering and references are maintained by the library.
- Structure separated from styling: a document is a tree with semantics, its appearance decided uniformly by rendering rules; restyling never touches the text.
- Two appearances for one document: a working interface with buttons and auxiliary information while editing, clean typeset output when reading, each customizable on its own.
- A two-level concept system: first-class concepts define parameters and rendering logic in code, second-class concepts can be created at runtime; authors derive new document components without writing code.
- Automatic numbering and cross references: theorem numbers, figure numbers and "see Theorem 3" references are maintained by the library and rearrange themselves after edits.
- Full keyboard operation: built-in spatial navigation and key hints; hands never leave the keyboard.
- Replaceable at every layer: from the ready-made default interface down to how each node kind renders, every layer can be swapped for your own.
projectcallio.github.io/CallioText/demo is a complete editor built with CallioText, running entirely in the browser: the left pane is the editor, the right pane the typeset output, preloaded with a short mathematical note. No installation required.
- Tutorial: seven chapters, from the core ideas to automatic numbering, building a complete structured editor from zero.
- Default implementation: the ready-made editor in depth, its interface, keyboard scheme, renderer factories and customization points.
- API docs: the public API organized by module, for daily lookup.
- TypeDoc full reference: generated from source comments, covering every export.
The documentation site starts at
projectcallio.github.io/CallioText/en,
and can also be read locally by serving the repository's docs/ directory with any static server
(for example npx serve docs).
npm install @project-callio/calliotext| Directory | Content |
|---|---|
lib/ |
Library source |
test/unit/ |
Unit tests (vitest) |
demo/ |
Source of the live demo |
docs/ |
Documentation site (GitHub Pages deploys from this directory) |
npm test # run the unit tests
npm run build # build the library (dist/)
npm run docs:api # regenerate the TypeDoc reference (docs/reference/)
npm run webdemo:dev # run the live demo locally
npm run webdemo:build # build the live demo into docs/demo/Issues and ideas are welcome.
GPL-3.0, see LICENSE.