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

Typst-WASM, a WebAssembly-based compiler for the Typst document typesetting system, has been released for browsers, Node.js, and serverless runtimes including Cloudflare Workers and Vercel. The project also introduces a Vite plugin for integrating Typst's HTML output into web applications, enabling server-side rendering and AI agent sandbox usage.

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.addFonts readFile new URL import.meta.resolve "@typst-wasm/fonts/NewCMMath-Regular.otf", , ; 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 Comments: 0