Back to Editor

User Guide

This editor supports both Markdown and Typst. Use the format toggle at the top of the workspace to switch between the two editing experiences.

Core Workflow

• Use the Markdown or Typst toggle to choose the editor experience.
• Use New to create a Markdown document, or New Typst to create a Typst document.
• Write content in the editor pane.
• In Markdown mode, use the live preview and formatting toolbar. In Typst mode, write Typst source directly.
• Use PDF to export your document. Typst files are compiled on the server.
• Use Upload .md and Download .md for Markdown files (Download .typ for Typst documents).

Markdown and Typst Modes

Markdown mode provides the rich editor, formatting toolbar, live preview, code blocks, tables, Mermaid, SVG, HTML blocks, and AI autocomplete. Typst mode shows a plain source editor and uses Typst’s typesetting syntax for PDF output. Switching the toggle changes the editor view while preserving your source.

Signed-in documents remember the selected format and save changes automatically. Typst PDF export requires signing in; Markdown PDF export is available from the rendered preview.

Typst Documents

Typst documents are written directly in the Typst markup language and compiled to print-quality PDF when you press PDF. Use the format toggle to switch between Markdown and Typst views when needed. Keep Typst source in Typst mode so it is not interpreted as Markdown.

= Hello Typst

This is a #strong[print-quality] document.

- Real pagination and page numbers
- Excellent math: $integral_0^1 x^2 dif x = 1/3$
- Syntax-highlighted code blocks

```rust
fn main() {
    println!("Hello from Typst!");
}
```
      

Notes: Typst export requires signing in (the document is compiled on our server), compilation errors are shown under the toolbar, and Mermaid diagrams are not available in Typst mode.

Markdown Basics

Common syntax examples:

# Heading 1
## Heading 2
### Heading 3

**bold** and *italic*

- bullet item
- another item

1. first
2. second

[link text](https://example.com)

![alt text](https://example.com/image.png)

> blockquote
      

Code Blocks

Use fenced blocks with a language label:

```javascript
const message = 'hello'
console.log(message)
```
      

Mermaid Diagrams

Use Mermaid fences to define diagrams:

```mermaid
graph TD
  A[Start] --> B[End]
```
      

For more information, see the Mermaid documentation.

Inline SVG

Use svg fences to embed inline SVG markup. It is rendered in the preview, included in PDF exports, and sanitized for safety before display:

```svg
<svg viewBox="0 0 120 60" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="30" r="20" fill="currentColor" />
</svg>
```
      

Tip: the SVG toolbar button inserts a starter block you can edit in place.

Tables

Table syntax:

| Column 1 | Column 2 |
| --- | --- |
| A | B |
| C | D |
      

Emoji Shortcodes

Use shortcode syntax to insert emojis in normal Markdown text:

:smile: :rocket: :tada: :heart: :white_check_mark: :+1: :-1:
      

These shortcodes render in preview and PDF output.

Detailed documentation

For more detailed documentation on Markdown syntax, see the Basic Syntax Guide and Extended Syntax Guide.

Modes

• Public: editable in the browser; sign in to save changes.
• Free: saved to your account with a document limit.
• Paid: saved to your account with no document limit.

Sharing

Signed-in Markdown documents can be shared with a public link. You can use a generated link or choose a custom slug such as /p/custom-name. Custom share link slugs are available on all plans. Typst documents cannot currently be shared through the public document viewer.