Masax Typst PDF Editor

Live PDF preview for .typ files in VS Code, powered by masax-typst-pdf.

Features

• Live SVG Preview — Edit .typ files, preview updates in real-time beside the editor
• JSON Data Injection — Use {{DATA}} placeholder + Typst-native scripting (#if, #for, #let)
• Realtime JSON File Watch — Link a .json file on disk; preview auto-updates whenever the file changes
• Local Image Support — Images referenced via relative paths (./logo.png) are read from disk and embedded automatically
• HTTPS Image Support — Images referenced via https:// are fetched and embedded (with CORS proxy fallback)
• PDF Export — Compile and save PDF directly from VS Code
• Output Channel Logging — All logs go to the "Masax Typst" Output Channel (View → Output)
• Auto Preview — Preview opens automatically when you open a .typ file
• Cross-platform — Same injectData() logic works in any engine (Flutter, .NET, Java...)

Architecture

.typ template + JSON data
       │
       ▼
  injectData(template, json)     ← Extension host (Node.js)
  = template.replace("{{DATA}}", escapedJson)
       │
       ▼
  Pure Typst markup              ← No Handlebars, no eval()
       │
       ▼
  Typst WASM compile → SVG/PDF  ← Webview

1. Data injection runs in the Node.js extension host — simple string replace, no eval() or new Function()
2. Typst WASM compilation runs in the webview — receives pure Typst markup, compiles to SVG/PDF
3. Local images are read from disk by the extension, base64-encoded, and preloaded into the WASM virtual filesystem
4. HTTPS images are fetched directly by the webview (with CORS proxy fallback via allorigins.win)
5. Image errors never break compilation — if an image fetch fails (e.g. HTTP 522), it is skipped

Usage

Preview

1. Open any .typ file — preview opens automatically beside the editor
2. Or use the keyboard shortcut / command palette:

Right-click in the editor or file explorer for context menu options.

Template Syntax

Templates use Typst-native scripting with a {{DATA}} placeholder for JSON injection:

#let data = json.decode("{{DATA}}")
#let candidate = data.candidate

= #candidate.name
Position: #candidate.position

#if candidate.salary > 20000000 [
  *Senior level*
]

#for skill in data.skills [
  - #skill \
]

JSON Data Binding

Open the JSON Data panel, then either:

A) Type directly in the textarea:

{
  "candidate": {
    "name": "Nguyen Van A",
    "position": "Software Engineer",
    "salary": 25000000
  },
  "skills": ["JavaScript", "Typst", "Rust"]
}

B) Load a .json file — click Load File, select a file. The panel shows a green watch bar:

● data.json          [Unwatch]

The preview auto-updates every time the file is saved. Click Unwatch to stop.

What you can do in Typst templates

Local Images

#image("./logo.png")
#image("assets/photo.jpg")

HTTPS Images

#image("https://example.com/banner.png")

External images are fetched automatically. If CORS blocks direct access, a proxy is used as fallback.

Logging

All logs go to "Masax Typst" Output Channel:

1. Open Output panel: Ctrl+Shift+U
2. Select "Masax Typst" from the dropdown

Requirements

• VS Code 1.85.0+
• Internet connection (Typst WASM compiler loaded from CDN on first use)

Development

# Build the web library first
cd draw-pdf
npm run build

# Then package the extension
cd typst-pdf-vscode
npm run package

# Install in VS Code: Ctrl+Shift+P → "Install from VSIX"

Release Notes

0.0.4

• Removed Handlebars — switched to Typst-native data injection via {{DATA}} placeholder
• No more unsafe-eval CSP issues
• Cross-platform: same injectData() logic works in any engine
• Bundle size reduced: vsix from 1.4MB to 270KB, full.js from 751KB to 605KB
• Zero runtime dependencies

0.0.3

• Output Channel logging — all logs go to "Masax Typst" Output Channel
• Robust image error handling
• Extension icon

0.0.2

• Output Channel logging
• Robust image error handling
• Extension icon

0.0.1

• Live SVG preview with auto-open on .typ files
• JSON data panel
• Local image embedding
• HTTPS image support with CORS proxy fallback
• PDF export
• XSS-safe SVG rendering