Typst for Obsidian

Typst for Obsidian is a Typst editor integrated directly into Obsidian, enabling you to create and preview Typst documents seamlessly within your notes. Create .typ files, edit with syntax highlighting, and render PDFs that adapt to your Obsidian theme.

Features

Open .typ files in Obsidian
VSCode-Like editor with Typst syntax highlighting
Customizable syntax highlighting colors for dark and light themes
Toggle between source and PDF preview modes
PDF export to vault
Theme integration - rendered PDFs adapt to Obsidian themes
Template variables for dynamic theming (%TEXTCOLOR%, %FONTSIZE%, etc.)
Package support - use local packages from data directory or auto-download from preview namespace
System font support (desktop only)

Screenshot

Usage

Create a new .typ file or open an existing one
Edit in source mode with syntax highlighting
Click the preview icon to render PDF
Click the export icon to save PDF to vault

More usage information, including commands and settings, can be found in the docs.

Template Variables

Template variables allow you to use Obsidian CSS styles in your Typst documents. You can use these variables directly in the editor, or in custom layout functions in settings to create dynamic themes that adapt to Obsidian's light/dark modes.

For example, to set the text color and page background color to match the Obsidian theme, you can use the following layout function:

#set text(fill: rgb("#%TEXTCOLOR%"), size: %FONTSIZE%)
#set page(fill: rgb("#%BGCOLOR%"), width: %LINEWIDTH%)

All template variables are listed in the docs.

Custom Layout Functions

Default page layouts functions can be configured in the settings:

Default Layout Functions - Applied to all internal previews
PDF Export Layout Functions - Applied only when exporting PDFs

More on layout functions and examples can be found in the docs.

Custom Snippets

You can add custom Typst snippets as JSON for autocomplete in settings. Each snippet has a prefix (trigger) and body (lines to insert). Use $1, $2, etc., for tab stops.

Example (inserting a table aligned to the center):

{
  "table": {
    "prefix": "tbl",
    "body": [
      "#align(center,",
      "\ttable(",
      "\t\tcolumns: $1,",
      "\t\t[$2],",
      "\t)",
      ")"
    ]
  }
}

Settings

Default file mode - Choose how .typ files open (source, preview, split)
Custom layout functions - Set default page layout functions for previews and exports
Custom snippets - Add custom Typst snippets for autocomplete
Font families - Add custom font families for use in Typst documents
Auto-download packages - Automatically download packages from the preview namespace when rendering
PDF settings - Configure PDF export options (save location, open after export, etc.)
Syntax highlighting colors - Customize syntax highlighting colors for light and dark themes
Editor settings - Configure editor options (font size, line height, hotkeys, etc.)

A list of all settings and explanations can be found in the docs.

Commands

Create new Typst file - Create a new .typ file in the current folder
Toggle preview - Toggle between source and PDF preview modes
Export PDF - Export the rendered PDF to your vault
Open PDF in split pane - Open the rendered PDF in a split pane next to the source file
Insert snippet - Insert a custom snippet at the cursor position

A list of all commands and explanations can be found in the docs.

Official Template

You can use the official template designed for Typst in Obsidian. It includes support for light/dark modes, titles, headers, and useful functions for displaying notes.

To get started, import the template at the top of your Typst file:

#import "@preview/typsidian:0.0.2": *;

#show: typsidian.with(
  theme: "dark",
  title: "My Document",
  course: "CS4999",
  standalone: false
)

This template is an Obsidian-like theme for Typst, with support for light/dark modes, titles, headers, and some useful functions for displaying notes.

When using this template, I recommend setting the custom layout function in the settings to:

#set page(
  width: %LINEWIDTH%,
  height: auto,
  margin: (x: 0.25em, y: 0.25em),
  fill: rgb("%BGCOLOR%")
)

Make sure to set standalone: false. This will prevent the template from adding its own page layout. Additionally, make sure you have the required fonts installed and added to the font families in settings:

Installation

Obsidian Community Plugins

Coming soon...

Manual Installation

Download the latest release from the Releases page
Extract main.js, manifest.json, styles.css, and obsidian_typst_bg.wasm to your Obsidian plugins folder (.obsidian/plugins/typst-for-obsidian)
Enable the plugin in Obsidian settings

Contributing

Contributions are welcome, feel free to open issues or submit pull requests for bug fixes and new features. For development information, see the docs.

Future Plans/Issues to Fix

Acknowledgements

Compiler implementation inspired by fenjalien/obsidian-typst.

Tinymist TextMate grammar

License

MIT

Typst For Obsidian