Typst editor components for the web, CodeMirror 6 extensions with compilation, autocompletion, hover, formatting, syntax highlighting, and live preview, all from a single Typst engine compiled to WebAssembly.
| Package | Install | Purpose |
|---|---|---|
@vedivad/codemirror-typst |
npm install @vedivad/codemirror-typst |
CodeMirror 6 editor integration, most users start here |
@vedivad/typst-web-service |
npm install @vedivad/typst-web-service |
Editor-agnostic engine (compile, render, format, IDE) |
@vedivad/typst-web-yjs |
npm install @vedivad/typst-web-yjs yjs |
Optional Y.js adapters for collaborative Typst projects |
@vedivad/codemirror-typst re-exports everything from @vedivad/typst-web-service, so you only need one dependency.
import { basicSetup, EditorView } from "codemirror";
import { EditorState } from "@codemirror/state";
import { createTypstSetup, TypstProject } from "@vedivad/codemirror-typst";
const project = await TypstProject.create();
await project.setText("/main.typ", "= Hello, Typst!");
// Bundles highlighting (colored out of the box), diagnostics, completion,
// hover, and compile-on-edit. Override colors with the `theme` option.
const setup = createTypstSetup({ project, sync: "editor-driven" });
new EditorView({
parent: document.querySelector("#app")!,
state: EditorState.create({
doc: project.getText("/main.typ") ?? "",
extensions: [basicSetup, ...setup],
}),
});See the @vedivad/codemirror-typst README for preview, formatting, theming, and multi-file setups.
just devTwo pages: / (tabbed multi-file editor with preview, diagnostics, completion/hover, PDF export, and formatting) and /minimal.html (single file + preview).
| Command | Description |
|---|---|
just install |
Install dependencies |
just build |
Build the packages (the engine wasm builds via bun run build:wasm) |
just test |
Run tests with Vitest |
just format |
Format with Oxc Formatter (oxfmt) |
just lint |
Lint with Oxlint |
just dev |
Build packages and start the demo dev server |
MIT, see LICENSE.
This project compiles the Typst engine (and typstyle) to WebAssembly under Apache-2.0, with the default fonts from typst-assets embedded under their own permissive licenses. See THIRD_PARTY_LICENSES.