reflexo-typst Documentation

Get Started

In this chapter, you will learn the core libraries and assets provided by typst.ts, a starter example, and practical examples.

Core Libraries and Assets

The functionalities of typst is split into two parts, compilation and rendering functionality, because no all applications need both functionalities running in the browsers. It will take 350 KB network bandwidth if you want to use the renderer in browser, but it will take 12MB (7.62 MB wasm and 4.42 MB fonts) to run a compiler. Therefore, the two parts are separated into two Wasm modules, typst-ts-renderer and typst-ts-web-compiler, and they can be loaded on demand.

Assets	Size (gziped)	Description
`typst-ts-renderer`	351.15 KB	For rendering
`typst-ts-web-compiler`	7.62 MB	For compiling
`Text+Math+Raw Fonts`	4.42 MB	To typeset text
`CJK Fonts`	1.42 MB	To typeset CJK text
`Emoji Fonts`	14.74 MB	To typeset emojis

typst.ts provides core JavaScript libraries along with two Wasm modules:

typst.ts: the core JavaScript library which wraps Wasm modules with more friendly JavaScript APIs.
typst-ts-renderer: a Wasm module providing rendering functionality.
typst-ts-web-compiler: a Wasm module providing compilation functionality.
typst-ts-node-compiler: a Node-native library providing both compilation and rendering functionality.

The server-side rendering is also supported by following packages:

typst-ts-cli: A command line tool providing compilation functionality.
reflexo-typst: A Rust library providing compilation functionality.
typst.ts + typst-ts-renderer: The JavaScript library mentioned above providing rendering functionality.

There is also a vite integration providing both compilation and rendering functionality. It is experimental and has not been finished, but I put it here to let you know.

vite-plugin-typst: A vite plugin providing both compilation and rendering functionality.

#

Web Integration

You can install them via npm or Yarn separately (npm as an example):

npm install @myriaddreamin/typst.ts

# Optional: if you want to run a typst renderer.

npm install @myriaddreamin/typst-ts-renderer

# Optional: if you want to run a typst compiler.

npm install @myriaddreamin/typst-ts-web-compiler

npm install @myriaddreamin/typst.ts

# Optional: if you want to run a typst renderer.

npm install @myriaddreamin/typst-ts-renderer

# Optional: if you want to run a typst compiler.

npm install @myriaddreamin/typst-ts-web-compiler

#

Node.js Integration

The compiler and renderer are integrated into a same node library for simpler and cleaner APIs, because there is no urgent need to tree-shake the components in node.js applications.

npm install @myriaddreamin/typst-ts-node-compiler

npm install @myriaddreamin/typst-ts-node-compiler

#

A starter example

To simplify the build up, we provide all-in-one libraries for both web and node.js integration. We show the way to render typst documents into a single SVG in the browser and node.js.

#

The starter example in Web

To get it in browser, you can load a all-in-one bundle script from CDN and use it directly:

<script

  type="module"

  src="https://cdn.jsdelivr.net/npm/@myriaddreamin/typst-all-in-one.ts@0.6.0/dist/esm/index.js"

  id="typst"

  console.log($typst.svg({

    mainContent: 'Hello, typst!',

  }));

</script>

<script

  type="module"

  src="https://cdn.jsdelivr.net/npm/@myriaddreamin/typst-all-in-one.ts@0.6.0/dist/esm/index.js"

  id="typst"

  console.log($typst.svg({

    mainContent: 'Hello, typst!',

  }));

</script>

There is also a simple and heavily-documented single-file typst previewer that compiles and renders a typst document on editing.

Warning: the all-in-one.bundle.js is not practical to use since it bundles all of the resource regardless you need or not, including the wasm modules and scripts.

#

The starter example in Node.js

It is even simpler in Node.js, you can use the all-in-one node library practically:

import { $typst } from '@myriaddreamin/typst-ts-node-compiler';

const compiler = NodeCompiler.create();

console.log(await compiler.svg({

  mainFileContent: 'Hello, typst!',

})); // :-> 7317

import { $typst } from '@myriaddreamin/typst-ts-node-compiler';

const compiler = NodeCompiler.create();

console.log(await compiler.svg({

  mainFileContent: 'Hello, typst!',

})); // :-> 7317

#

Practical Examples

Given the Core Libraries and Assets, we can start to build typst applications for web.

Rust Tools:

shiroa: It is a Rust tool using reflexo-typst, producing static HTML files or dynamic ones utilizing typst.ts + typst-ts-renderer.
- This documentation is built using shiroa, the HTML version (browser typesetting) of the documentation.
- the Paged version (typst typsetting) of the documentation.
typst-preview: It is a Rust tool using reflexo-typst, incrementally rendering typst documents to provide preview editing. The data is streamed and rendered in browser using typst.ts + typst-ts-renderer.

JavaScript Tools:

The starter example, a simple typst previewer, is already good. It is a single-file HTML using typst-ts-web-compiler, producing <svg/> and <canvas/> for preview utilizing typst.ts + typst-ts-renderer.
The underleaf is a web-based tex editor. It uses same components as the starter example, but arranges source code in a more complex way. It renders tex files by running a simple tex converter in typst compiler.
The rehype-typst compiles typst equations in markdown files using typst-ts-node-compiler.
The hexo-renderer-typst renders typst documents as web pages for the blog engine, Hexo, using typst-ts-node-compiler.
The Typst CN News watches and translates typst documents into HTML files by Node.js scripts, using typst-ts-node-compiler.
The vite-plugin-typst watches and translates typst documents into HTML files for vite, using typst-ts-node-compiler.

Wrappers of typst.ts + typst-ts-renderer to integrate into frameworks, which can load artifacts of compilers, are also good examples to study.

First, compiles the artifacts like the rust and javascript tools above:

typst-ts-cli to compile in terminal or bash scripts.
reflexo-typst to compile in Rust applications.
vite-plugin-typst to compile and process with vite (this hasn't been published yet).
typst-ts-node-compiler to compile in Node.js scripts.
typst.ts + typst-ts-web-compiler to compile in browsers.

Then, renders the artifacts using the wrappers:

Using @myriaddreamin/typst.react:
```
import { TypstDocument } from '@myriaddreamin/typst.react';
```
```
export const App = (artifact: Uint8Array) => {
```
```
  return (
```
```
    <div>
```
```
      <h1>Demo: Embed Your Typst Document in React</h1>
```
```
      <TypstDocument fill="#343541" artifact={artifact} />
```
```
    </div>
```
```
  );
```
```
};
```
```
import { TypstDocument } from '@myriaddreamin/typst.react';
```
```
export const App = (artifact: Uint8Array) => {
```
```
  return (
```
```
    <div>
```
```
      <h1>Demo: Embed Your Typst Document in React</h1>
```
```
      <TypstDocument fill="#343541" artifact={artifact} />
```
```
    </div>
```
```
  );
```
```
};
```
Using @myriaddreamin/typst.angular:

In the module file of your awesome component.
```
/// component.module.ts
```
```
import { TypstDocumentModule } from '@myriaddreamin/typst.angular';
```
```
/// component.module.ts
```
```
import { TypstDocumentModule } from '@myriaddreamin/typst.angular';
```
Using directive typst-document in your template file.
```
<typst-document fill="#343541" artifact="{{ artifact }}"></typst-document>
```
```
<typst-document fill="#343541" artifact="{{ artifact }}"></typst-document>
```
Using @myriaddreamin/typst.vue3:
```
<template>
```
```
  <Typst v-bind:content="sourceCode" />
```
```
</template>
```
```
<template>
```
```
  <Typst v-bind:content="sourceCode" />
```
```
</template>
```
Using @myriaddreamin/typst.solid:
```
import { TypstDocument } from '@myriaddreamin/typst.solid';
```
```
export const App = (artifact: Uint8Array) => {
```
```
  return (
```
```
    <div>
```
```
      <h1>Demo: Embed Your Typst Document in Solid </h1>
```
```
      <TypstDocument fill="#343541" artifact={vec()} />
```
```
    </div>
```
```
  );
```
```
};
```
```
import { TypstDocument } from '@myriaddreamin/typst.solid';
```
```
export const App = (artifact: Uint8Array) => {
```
```
  return (
```
```
    <div>
```
```
      <h1>Demo: Embed Your Typst Document in Solid </h1>
```
```
      <TypstDocument fill="#343541" artifact={vec()} />
```
```
    </div>
```
```
  );
```
```
};
```