Typst App Integration
Typst App Integration is a VS Code extension that opens Typst.app projects as a collaborative workspace. It mirrors the Typst web editor by streaming Y.js updates over the Typst WebSocket protocol, synchronizing file changes, presence, and cursor locations in real time.
Features
- Login with existing Typst.app session cookies
- Browse and clone remote projects directly into VS Code
- Bidirectional sync for Typst source and binary assets
- Automatic drift detection, auto-save, and cursor awareness for cloned projects
- Fully local development experience backed by Typst cloud storage
Requirements
- VS Code 1.85+
- Bun for building/running scripts
- A Typst.app account with active projects
Installation
bun install
bun run compile
bunx @vscode/vsce package --no-dependencies
code --install-extension typst-app-integration-1.0.0.vsix
Getting Started
- Press
Ctrl+Shift+P and run Typst.app: Login.
- Paste the
cookie header captured from your browser DevTools (see docs/authentication.md).
- Run Typst.app: Open Project to browse your projects and select one to open.
- The project mounts as a workspace folder and begins syncing files immediately.
Commands
| Command |
Description |
| Typst.app: Login |
Authenticate with cookie header |
| Typst.app: Logout |
Clear stored credentials |
| Typst.app: Open Project |
Choose a remote project and open it in VS Code |
| Typst.app: Clone Project |
Download project contents to a local folder |
| Typst.app: Initialize Sync |
Retry workspace sync detection |
| Typst.app: Check for Drift |
Compare local vs remote files in a cloned workspace |
Settings
All settings live under the typst-app-integration namespace:
| Setting |
Description |
typst-app-integration.apiUrl |
Typst.app API endpoint (default https://api.typst.app) |
typst-app-integration.autoConnect |
Automatically connect to Typst.app when opening files |
typst-app-integration.checkDriftOnStartup |
Run drift detection after initializing local sync |
typst-app-integration.autoSave |
Automatically save locally edited files after a short debounce |
typst-app-integration.cursorPublishName |
Display name broadcast in cursor presence messages |
typst-app-integration.showRemoteCursors |
Toggle remote cursor rendering in VS Code |
typst-app-integration.strictDriftDetection |
Fetch Y.js docs during drift detection to capture offline Typst edits |
Log levels can be configured with typst-app-integration.logLevel (debug, info, warn, error, off).
Development
bun install
bun run compile
bun run watch # Rebuild on file changes
bunx tsc --noEmit # Type-check the project
Press F5 in VS Code to launch the Extension Development Host. For packaging, use bun run package which invokes vsce package and produces typst-app-integration-1.0.0.vsix.
Documentation
License
MIT
