Markdown | typst | Online SVG | Online Canvas
typst.ts
is a project dedicated to bring the power of
typst to the world of JavaScript. In short, it
provides an typst::World
implementation and several exporters to help compile
and render your Typst document typically inside Browser Environment. In the scope of server-side rendering
collaborated by
$\textcolor{#3c9123}{\textsf{server}}$ and $\textcolor{#0074d9}{\textsf{browser}}$, there would be a data flow like this:
Specifically, it first typically presents a typst document in three forms: - [Form1](https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/ts-cli.html): Render to SVG and then embed it as a high-quality vectored image directly. - [Form2](https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/ts-cli.html): Preprocessed to a Vector Format artifact. - [Form3](https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/serverless.html): Manipulate a canvas element directly. The _Form2: Vector Format_ is developed specially for typst documents, and it has several fancy features:
So with _Form2_, you can continue rendering the document in different ways: ##### Static but responsive rendering Example Application: [single-file](https://github.com/Myriad-Dreamin/typst.ts/blob/main/packages/typst.ts/index.html), [typst-book](https://github.com/Myriad-Dreamin/typst-book) and [hexo-renderer-typst](https://github.com/Myriad-Dreamin/typst.ts/tree/main/projects/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](https://github.com/Enter-tainer/typst-preview-vscode) Build a server for compilation with [Compiler Service](https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/service.html), streaming the artifact, and render it incrementally. ##### Serverless client-side rendering Example Application: [single-file](https://github.com/Myriad-Dreamin/typst.ts/blob/main/github-pages/preview.html) Run the entire typst directly in browser, like [typst.app](https://typst.app). ### Application - [A Website built with Typst.ts](https://myriad-dreamin.github.io/typst.ts/) - [Instant VSCode Preview Plugin](https://github.com/Enter-tainer/typst-preview-vscode) - [typst-book - A simple tool for creating modern online books in pure typst.](https://github.com/Myriad-Dreamin/typst-book) - [Renderer Plugin for Hexo, a Blog-aware Static Site Generator](https://www.npmjs.com/package/hexo-renderer-typst) - Renderer/Component Library for [JavaScript](https://www.npmjs.com/package/@myriaddreamin/typst.ts), [React](https://www.npmjs.com/package/@myriaddreamin/typst.react), and [Angular](https://www.npmjs.com/package/@myriaddreamin/typst.angular) ### Installation (CLI) Install latest CLI of typst.ts via cargo: ```shell cargo install --locked --git https://github.com/Myriad-Dreamin/typst.ts typst-ts-cli ``` Or Download the latest release from [GitHub Releases](https://github.com/Myriad-Dreamin/typst.ts/releases). ### Installation (Packages) The JavaScript packages are published on [npm](https://www.npmjs.com/). - Core (Wrapper) Library: [@myriaddreamin/typst.ts][npm::typst.ts] - React Library: [@myriaddreamin/typst.react][npm::typst.react] - Angular Library: [@myriaddreamin/typst.angular][npm::typst.angular] - (Internal) Web compiler WASM module: [@myriaddreamin/typst-ts-web-compiler](https://www.npmjs.com/package/@myriaddreamin/typst-ts-web-compiler) - (Internal) Renderer WASM module: [@myriaddreamin/typst-ts-renderer](https://www.npmjs.com/package/@myriaddreamin/typst-ts-renderer) The rust crates are not published on [crates.io](https://crates.io/) yet, since it has the git dependency on [typst](https://github.com/typst/typst). - Compiler Library: [reflexo-typst](./crates/reflexo-typst/) - CLI as a Library: [typst-ts-cli](./cli/) ### Installation (All-in-one Bundle) Download the latest bundle file from [GitHub Releases](https://github.com/Myriad-Dreamin/typst.ts/releases). ### Documentation See [Documentation](https://myriad-dreamin.github.io/typst.ts/cookery). ### Templates Please check [Templates](./templates) and usage in [Get Started](https://myriad-dreamin.github.io/typst.ts/cookery/get-started.html). ### Minimal Example Note: In default, `all-in-one.bundle.js` will download the font assets from GitHub in browser, so you need to connect to the Internet. Download `all-in-one.bundle.js` from [GitHub Releases](https://github.com/Myriad-Dreamin/typst.ts/releases) and start a local server with following content of `index.html`: ```html
C_L
like the following equation.
L = 1/2 rho v^2 S C_L
```
[npm::typst.ts]: https://www.npmjs.com/package/@myriaddreamin/typst.ts
[npm::typst.react]: https://www.npmjs.com/package/@myriaddreamin/typst.react
[npm::typst.angular]: https://www.npmjs.com/package/@myriaddreamin/typst.angular
[npm::typst.vue3]: ./packages/typst.vue3/README.md
[npm::rehype-typst]: https://www.npmjs.com/package/@myriaddreamin/rehype-typst