Show HN: Typst-WASM – Compile Typst in browsers, Node, and serverless runtimes

today i am releasing typst-wasm and an experimental version of vite-plugin-typst!

the goal of this project is to provide a pragmatic promise based API for compiling typst using wasm in as many runtimes as possible.

the api is consistent across all supported runtimes and closely mirrors what you see in the rust crate. it gives you full control over where and how you load the wasm blobs, which allows you to provide the best possible user experience.

running typst in wasm/serverless environments like cloudflare workers or vercel allows you to do SSR, easily offload compilation to the server for low bandwidth devices while reusing code, run typst in sandboxes for AI agents, etc.

here's an example of the API:

await compiler.addSource("main.typ", "= Hello from typst-wasm!"); const result = await compiler.compile({ main: "main.typ", format: "svg", });

console.log(result.pages[0]?.output); ```

how does it differ from typst.ts?

the goals are different! typst-wasm aims to support many runtimes and provide a consistent api without the use of deprecated APIs.

@typst-wasm/vite-plugin-typst

I am also releasing vite-plugin-typst, built on typst-wasm, to provide an easy way to use the new html output in your vite apps! to give you ideas, this is a cool alternative to markdown for content in vite-based websites/blogs!

``` import typstDocument from "./post.typ?typst=html";

document.querySelector("#output")!.innerHTML = typstDocument.html; ```

links and examples for you to look at !

* GitHub: [https://github.com/typst-wasm/typst-wasm](https://github.com/typst-wasm/typst-wasm)

* npm — typst-wasm: [https://www.npmjs.com/package/typst-wasm](https://www.npmjs.com/package/typst-wasm), vite-plugin-typst: [https://www.npmjs.com/package/@typst-wasm/vite-plugin-typst](https://www.npmjs.com/package/@typst-wasm/vite-plugin-typst)

* Docs: [https://typst-wasm.github.io/typst-wasm/](https://typst-wasm.github.io/typst-wasm/)

* example blog: [https://typst-wasm-blog.will-bradshaw50.workers.dev/](https://typst-wasm-blog.will-bradshaw50.workers.dev/)
source: [https://github.com/typst-wasm/typst-wasm/tree/main/packages/...](https://github.com/typst-wasm/typst-wasm/tree/main/packages/example-typst-blog)

* example typst-wasm playground with SSR'd typst on cloudflare workers: [https://typst-wasm-playground-cloudflare.will-bradshaw50.wor...](https://typst-wasm-playground-cloudflare.will-bradshaw50.workers.dev/)
source: [https://github.com/typst-wasm/typst-wasm/tree/main/packages/...](https://github.com/typst-wasm/typst-wasm/tree/main/packages/example-typst-playground-cloudflare)

* example typst-wasm playground with SSR'd typst on vercel: [https://example-typst-playground-vercel.vercel.app/](https://example-typst-playground-vercel.vercel.app/)
source: [https://github.com/typst-wasm/typst-wasm/tree/main/packages/...](https://github.com/typst-wasm/typst-wasm/tree/main/packages/example-typst-playground-vercel)

* simple node example
source: [https://github.com/typst-wasm/typst-wasm/tree/main/packages/...](https://github.com/typst-wasm/typst-wasm/tree/main/packages/example-node)

* my own website: [https://w.bradshaw.page/](https://w.bradshaw.page/)
source: [https://github.com/wra-bradshaw/personal-website](https://github.com/wra-bradshaw/personal-website)

Comments URL: [https://news.ycombinator.com/item?id=48947016](https://news.ycombinator.com/item?id=48947016)

Points: 1