Important Notice

The contents of this repository have been consolidated into tinymist. It is an all-in-one language server for typst.

We recommend all users migrate to tinymist for the following benefits:

• More centralized resource management
• Reduced redundancy and lower resource usage
• Easier updates and maintenance

This repository will no longer be updated in future. All development will move to tinymist. Thank you for your support and understanding!

• We still maintain the typst-preview extension for a while in a best effort way.
  • The lazy people can continue using their setting, as all old things are still working.
  • This respect people who love minimal env, like a treesitter plugin plus preview.
• Tinymist will ensure compatibility to typst-preview as much as possible.
  • for vscode users: uninstall the preview extension and install the tinymist extension.
  • for standalone cli users: typst-preview -> tinymist preview

If you have any questions, please open an issue in the new repository.

Typst Preview VSCode

Preview your Typst files in vscode instantly!

Install this extension from marketplace, open command palette (Ctrl+Shift+P), and type >Typst Preview:.

slides.mp4

2023-06-30.15-31-19.mp4

This repo contains:

• the native part of the extension, in rust
• a vscode extension, in typescript

Features

• Low latency preview: preview your document instantly on type. The incremental rendering technique makes the preview latency as low as possible.
• Open in browser: open the preview in browser, so you put it in another monitor. https://github.com/typst/typst/issues/1344
• Cross jump between code and preview: We implement SyncTeX-like feature for typst-preview. You can now click on the preview panel to jump to the corresponding code location, and vice versa.

For comparison between alternative tools, please refer to Comparison with other tools.

Bug report

To achieve high performance instant preview, we use a different rendering backend from official typst. We are making our best effort to keep the rendering result consistent with official typst. We have set up comprehensive tests to ensure the consistency of the rendering result. But we cannot guarantee that the rendering result is the same in all cases. There can be unknown corner cases that we haven't covered.

Therefore, if you encounter any rendering issue, please report it to this repo other than official typst repo.

How it works?

The extension watches for file changes, and incrementally compile your document to svg files. Then we use a websocket to send the rendered svg to the client. The client calculates the diff between the new svg and the old one, and apply the diff to the old one. This is done by a VDOM based incremental rendering technique.

If you are interested in the details, please refer to Typst-Preview Architecture.

Use without VSCode

You can use the binary typst-preview as a standalone typst preview server. It can be used to preview your document in browser. For example: typst-preview ./assets/demo/main.typ --partial-rendering. This should be useful if you don't use VSCode but still want to experience the low latency preview.

Use with other editors

• nvim: typst-preview.nvim
• emacs: typst-preview.el

Acknowledgements

• typst.ts: typst.ts provide incremental svg export.
• typst-lsp: The CI and the vscode extension are heavily inspired by typst-lsp.

Related projects

• typstyle: Beautiful and reliable typst code formatter
• tinymist: Feature rich typst language server

Legal

This project is not affiliated with, created by, or endorsed by Typst the brand.