Typster

The Typst editor for writing that ships.

Typst is a modern LaTeX alternative — a markup-based language for producing beautiful, structured documents. Typster is the browser IDE around it: a polished three-pane editor (files · source · live preview) with cloud projects, auto-save, keyboard-first UX, and zero install. Write Typst, compile to PDF in ~200 ms, share a link.

Light	Dark

---

Stack

Layer	Technology
Backend	Elixir 1.19 + Phoenix 1.8 + LiveView 1.1 on BEAM (Erlang/OTP 28)
Frontend	Bun 1.3 · Tailwind CSS · salad_ui components
Database	PostgreSQL 16 (Ecto)
Object storage	MinIO (S3-compatible)
Background jobs	Oban 2.17
Testing	ExUnit · Playwright (browser E2E)
Dev environment	Pixi · prek · Docker Compose

---

Quick start

The fastest way to run Typster is with Docker. Everything runs in containers — no toolchain setup needed.

docker compose up

Open http://localhost:4000

That's it. Docker Compose starts PostgreSQL, MinIO, and the app together. The app container waits for both services to be healthy before booting

Looking to set up a local dev environment, use Pixi, or work inside a Dev Container? See CONTRIBUTING.md

---

Running tests

mix test                        # Elixir unit tests
cd assets && bun run test:e2e   # Browser E2E tests (Playwright)

---

Roadmap

codemirror-lang-typst — a proper Lezer grammar (planned, standalone npm package). Typst syntax highlighting in the editor is currently powered by Shiki's official Typst TextMate grammar, painted as CodeMirror decorations (assets/js/typst_highlight.js). That gives VS Code-quality colors today, but it is highlighting only — there is no real grammar, so we don't get structural features (code folding, indentation, bracket matching, structure-aware selection, incremental parsing). The ecosystem currently has no CodeMirror 6 Lezer grammar for Typst.

The plan is to author one as its own repo/npm package (codemirror-lang-typst) and consume it here, swapping it in behind the existing typst() entry point. It's a sizeable effort — Typst interleaves markup, # code, and $ $ math modes plus content blocks, so the grammar needs external tokenizers/nesting. frozolotl/tree-sitter-typst (correctness-focused) is a useful reference, though Lezer's tree-sitter importer handles complex grammars poorly, so it'd be largely from scratch.

---

Contributing

See CONTRIBUTING.md for the full guide — dev workflow, code style, commit conventions, and design system reference

Quick checklist before opening a PR:

• prek runs automatically on commit (pre-commit hooks). Fix any failures before pushing
• Run mix precommit manually to catch compile warnings, unused deps, formatting, and test failures
• Follow Conventional Commits (TODO — enforced on main by GitHub rulesets)
• Keep CSS changes consistent with the --mk-* design tokens in assets/css/app.css