Using Typst.ts in the browser

[AmeanAsad]

Hello! I have a use case and I want to confirm whether this library can achieve the functionality required since I wasn't able to determine that from the docs.

I want to embed a typst editor inside a web app that I'm building and I want it to be able to compile typst text and render it entirely client side in the browser.

From my current understanding of the docs, you can compile and render typst text in the browser but you need to supply the compiler with a {something}.typ file for it to work. Ideally, I would like to compile based on the typst text directly from the browser. Is that possible?

Note: Im also happy to contribute to the library and docs if changes are required.

[Myriad-Dreamin]

Making an editor with preview is not easy, as you have to load and maintain fonts, files, and state of the compiler and renderers. And I will tell you three different ways to have and improve one with typst.ts, with each increasing difficulty to implement.

---

You need to bind a input element and then keep rendering a SVG element with snippets API. The sample loads fonts from GitHub and start serving preview with input:

• Documentation
  • The underlying snippets doesn't increase functionality but wrap RenderSession for ease of use.

Minimal: Online Demo and Source Code

---

There is an incremental rendering API (RenderSession) but the documents are in source code so you may not find and learn that easily:

• Documentation
  • use manipulateData to change renderer data from remote server's compiler or browser's compiler.
  • use render apis to draw typst document to svg or canvas.

Typst Preview: Extension and Repository

---

There is also an incremental compiling API which further improves better performance, but I admit it is not ready for use. If you would like to go deeper, we can discuss a nice and stable incremental compiling API.

• No well document yet, but it is here.
  • creates an IncrementalServer which holds state for incremental compilation
  • compiles with passing that IncrementalServer instance to compiler

Underleaf: Online Demo and Source Code