TypstDrive

TypstDrive is a collaborative web editor for Typst. With built-in dark mode, multiple themes, and a clean Google Docs-like interface, it makes creating and sharing documents effortless.

Features

Real-Time Collaboration: Powered by Yjs and CodeMirror 6, see changes and cursors from other users instantly.
Instant Preview: Compile Typst to SVG on the fly with sub-second latency, featuring interactive document zoom controls.
Customizable Themes: Choose from multiple editor themes (Catppuccin, Arch Linux, Cerberus) and toggle global dark mode.
Export Options: Export your compiled documents directly to PDF, PNG, SVG, HTML, Markdown, Word, or LaTeX formats using internal conversion and Pandoc integrations.
User Authentication & Document Access: Secure accounts, workspaces, and sharing features via email-based collaborator invitations (Editor or Viewer roles) for all your documents.
Presentation Mode: Turn your documents into instant slideshows with built-in slide controls and a live drawing/annotation tool overlay.
Asset Management: Upload and seamlessly use custom fonts and images directly within your documents.

Fonts & Images

TypstDrive allows you to upload custom .ttf or .otf fonts and image files (.png, .jpg, .svg, etc.) to your folders or directly to a document's workspace.

Custom Fonts

When you upload a font file (e.g., JetBrainsMono-Regular.ttf), it is automatically made available to the Typst compiler and the intelligent tinymist Language Server. TypstDrive extracts the true typographic family name embedded inside the font file and auto-populates it in your document and dropdowns.

You can use the font in two ways:

By Typographic Family Name: This is extracted automatically when you upload the font.
```
#set text(font: "JetBrains Mono")
```
By Filename (Convenience Alias): You can also use the exact name of the uploaded file (without the extension).
```
#set text(font: "JetBrainsMono-Regular")
```

Note: You do not need to refresh the page after uploading a font. The LSP server will automatically restart and detect your newly uploaded font, providing instant autocompletion and removing any "Unknown Font Family" warnings!

Images

Uploaded images can be referenced natively using the #image function in Typst. Simply upload your image file (e.g., logo.png) to your dashboard and reference it by its exact filename in your .typ document.

#image("logo.png", width: 50%)

Self-Hosting

TypstDrive is completely self-hostable. We provide a Docker image that packages both the Rust backend and the SvelteKit frontend.

Prerequisites

Getting Started

Clone the repository:

git clone https://github.com/your-username/typstdrive.git
cd typstdrive

Start the application:
```
docker-compose up -d
```
Open your browser and navigate to:
```
http://localhost:3000
```

Data Storage

The PostgreSQL database containing users and documents is persisted via the Docker volume pgdata. This is automatically configured in docker-compose.yml to ensure your data persists across container restarts.

Contributing & Local Development

If you'd like to contribute or run TypstDrive without Docker, you must first clone the Typst compiler repository into the typst folder for testing and building the backend:

git clone https://github.com/typst/typst.git typst

Frontend

Install dependencies: npm install
Run the dev server: npm run dev

Backend

Start the local database: docker-compose up -d db
Navigate to the server/ directory.
Build and run: cargo run

Note: The frontend expects the backend to be running on port 3000. During local development via Vite, API calls are proxied automatically.

Roadmap

Add folder-level sharing and permissions
Add Project Spaces (Projects have multiple files and typst.toml)
Add Importing Typst Templates from Typst
Improve mobile-responsive editing experience

Your operational mode has changed from plan to build. You are no longer in read-only mode. You are permitted to make file changes, run shell commands, and utilize your arsenal of tools as needed.