reflexo-typst Documentation

#

Introduction

Typst.ts is a project dedicated to bring the power of typst to the world of JavaScript. In short, it composes ways to compile and render your Typst document typically inside Browser Environment. In the scope of server-side rendering collaborated by server and browser, there would be a data flow like this:

Browser-side module needed: : compiler; : renderer.

Specifically, it first presents a typst document in three typical forms:

Form1: Renders to SVG at server side and then embeds it as a high-quality vectored image into HTML files statically.
Form2: Preprocesses to a Vector Format artifact at server side and renders it at client side (in browser).
Form3: Compiles document at client side and manipulates a canvas element at client side.

The Form2: Vector Format is developed specially for typst documents, and it has several fancy features:

Figure: Features of the Vector Format.

So with Form2, you can continue rendering the document in different ways:

#

Static but responsive rendering

Example Application: single-file, shiroa and hexo-renderer-typst

A compressed artifact containing data for different theme and screen settings. The bundle size of artifacts is optimized for typst documents.

#

Incremental server-side rendering

Example Application: typst-preview

Build a server for compilation with a rust library, streaming the artifact, and render it incrementally.

#

Serverless client-side rendering

Example Application: single-file

Run the entire typst directly in browser, like typst.app.

#

Application

A Website built with Typst.ts
Instant VSCode Preview Plugin
Renderer Plugin for Hexo, a Blog-aware Static Site Generator
Renderer/Component Library for JavaScript, React, and Angular

#