Typst.ts

https://myriad-dreamin.github.io/typst.ts
Admin
Typst.ts is a project dedicated to bringing the power of Typst to JavaScript environments, offering...
Tokens:38,628
Snippets:537
Trust Score:8.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### Installation and Basic Usage

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/all-in-one.html

Instructions on how to install the Typst.ts web compiler and import the library for basic usage, including a simple example of compiling text to SVG.

```APIDOC
## Installation

Optional: if you want to run a typst compiler.
```bash
npm install @myriaddreamin/typst-ts-web-compiler
```

## Basic Usage

Then, you can import the library in your code:

```javascript
import { $typst } from '@myriaddreamin/typst.ts';

console.log((await $typst.svg({
  mainContent: 'Hello, typst!'
})).length);
// :-> 7317
```

**Note:** In Node.js, it reads and loads the Wasm modules from `node_modules` in the filesystem. If you aim to use the library in browsers, you may need to configure the library to load the wasm module files. Please check the relevant section for browser-specific configurations.
```

--------------------------------

### Install Hexo Plugin

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/renderer/hexo.html

Install the hexo-renderer-typst plugin.

```bash
npm install hexo-renderer-typst
```

--------------------------------

### Example: Compile to Vector Format with Responsive Layout

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/compiler/ts-cli.html

An example showing how to compile a Typst document into the Vector Format, enabling a responsive layout.

```bash
typst-ts-cli compile \
-e "fuzzers/corpora/math/main.typ" \
--dynamic-layout
```

--------------------------------

### Example: Compile with Watching Dependencies

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/compiler/ts-cli.html

An example demonstrating how to compile a Typst document while watching for file dependencies and recompiling on changes.

```bash
typst-ts-cli compile \
-e "fuzzers/corpora/math/main.typ" \
--watch
```

--------------------------------

### Example: Compile to Vector Format

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/compiler/ts-cli.html

An example illustrating the compilation of a Typst document into the Vector Format.

```bash
typst-ts-cli compile \
-e "fuzzers/corpora/math/main.typ" \
--format vector
```

--------------------------------

### Install Hexo Dependencies

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/renderer/hexo.html

Install the required Typst packages for Hexo.

```bash
npm install @myriaddreamin/typst.ts @myriaddreamin/typst-ts-renderer @myriaddreamin/typst-ts-node-compiler
```

--------------------------------

### Example: Compile to SVG

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/compiler/ts-cli.html

An example showing how to compile a Typst document specifically into an SVG format.

```bash
typst-ts-cli compile \
-e "fuzzers/corpora/math/main.typ" \
--format svg
```

--------------------------------

### Install and Import Typst.ts

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/all-in-one.html

Install the web compiler package and import the global $typst instance for basic usage.

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

```javascript
import { $typst } from '@myriaddreamin/typst.ts';
console.log((await $typst.svg({
mainContent: 'Hello, typst!'
})).length);
```

--------------------------------

### Node.js Starter Example

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/get-started.html

Render Typst content to SVG using the all-in-one Node.js library. Ensure the NodeCompiler is created before use.

```javascript
import { $typst } from '@myriaddreamin/typst-ts-node-compiler';
const compiler = NodeCompiler.create();
console.log(await compiler.svg({
mainFileContent: 'Hello, typst!',
})); // :-> 7317
```

--------------------------------

### Tiny Typst Previewer Setup

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/all-in-one.html

Basic HTML structure for a Typst previewer with input and export functionality.

```html
<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tiny Typst Previewer Example</title>
<!-- Loads the full bundle or the lite version from jsdelivr -->
<!-- src="https://cdn.jsdelivr.net/npm/@myriaddreamin/typst-all-in-one.ts@0.7.0/dist/esm/index.js" -->
<script type="module"
src="https://cdn.jsdelivr.net/npm/@myriaddreamin/typst.ts/dist/esm/contrib/all-in-one-lite.bundle.js"
id="typst"></script>
</head>

<body>
<!-- Provides a button to export to PDF after finish editing -->
<button id="export">Export To PDF</button>
<!-- Accepts user input using a text area element -->
<textarea id="input">Hello, Typst!</textarea>
<div id="content"></div>
<script>
```

--------------------------------

### Install typst-ts-cli

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/ts-cli.html

Install the latest CLI version using cargo.

```bash
cargo install --locked --git https://github.com/Myriad-Dreamin/typst.ts typst-ts-cli
```

--------------------------------

### Install Typst.ts via npm

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/all-in-one.html

Commands to install the core library and the optional renderer package.

```bash
npm install @myriaddreamin/typst.ts
# Optional: if you want to run a typst renderer.
npm install @myriaddreamin/typst-ts-renderer
```

--------------------------------

### Web Starter Example with CDN

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/get-started.html

Use the all-in-one Typst.ts bundle script from a CDN to render Typst content to SVG in the browser.

```html
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@myriaddreamin/typst-all-in-one.ts@0.7.0/dist/esm/index.js"
id="typst"
>
console.log($typst.svg({
mainContent: 'Hello, typst!',
}));
</script>
```

--------------------------------

### Install Typst.ts Packages

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/all-in-one.html

Install the core library and optional renderer or compiler packages via npm.

```bash
npm install @myriaddreamin/typst.ts
```

```bash
# Optional: if you want to run a typst renderer.
npm install @myriaddreamin/typst-ts-renderer
```

```bash
# Optional: if you want to run a typst compiler.
npm install @myriaddreamin/typst-ts-web-compiler
```

--------------------------------

### Example: Compile to SVG wrapped with HTML

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/compiler/ts-cli.html

An example demonstrating the compilation of a Typst document into an SVG format that is also wrapped with HTML.

```bash
typst-ts-cli compile \
-e "fuzzers/corpora/math/main.typ" \
--format svg_html
```

--------------------------------

### Typst Previewer Implementation

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/all-in-one.html

A complete HTML example demonstrating a live previewer that watches user input and renders it as SVG.

```html
<!doctype html>
<html lang="en">
  
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tiny Typst Previewer Example</title>
  <!-- Loads the full bundle or the lite version from jsdelivr -->
  <!-- src="https://cdn.jsdelivr.net/npm/@myriaddreamin/typst-all-in-one.ts@0.7.0/dist/esm/index.js" -->
  <script type="module"
    src="https://cdn.jsdelivr.net/npm/@myriaddreamin/typst.ts/dist/esm/contrib/all-in-one-lite.bundle.js"
    id="typst"></script>
</head>
  
<body>
  <!-- Provides a button to export to PDF after finish editing -->
  <button id="export">Export To PDF</button>
  <!-- Accepts user input using a text area element -->
  <textarea id="input">Hello, Typst!</textarea>
  <div id="content"></div>
  <script>
    const input = document.getElementById('input');
```

--------------------------------

### Install typst.ts Renderer

Source: https://myriad-dreamin.github.io/typst.ts/cookery/get-started.html

Install the Wasm module for rendering functionality if needed.

```bash
npm install @myriaddreamin/typst-ts-renderer
```

--------------------------------

### Install typst.ts Core Library

Source: https://myriad-dreamin.github.io/typst.ts/cookery/get-started.html

Install the core JavaScript library for typst.ts using npm.

```bash
npm install @myriaddreamin/typst.ts
```

--------------------------------

### Serve Typst Files with Hexo

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/renderer/hexo.html

Use the 'hexo serve' command to start a local development server for your Hexo project, which will render Typst documents placed in the source/_posts directory.

```bash
hexo serve
```

--------------------------------

### Concurrent Compilation

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/compiler/service.html

Example of setting up a concurrent compilation process.

```rust
let result = start_project(verse, None, move |c, mut i, next| {  
if let Interrupt::Compiled(artifact) = &mut i {  
let files = artifact.documents();  
let res = test_once(&world, &files);  
}  
  
// Notifies all the dependences touched by `test_once`.
next(c, i)  
});
```

--------------------------------

### Install typst.ts Web Compiler

Source: https://myriad-dreamin.github.io/typst.ts/cookery/get-started.html

Install the Wasm module for compilation functionality if needed.

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

--------------------------------

### Install All-in-One Lite Bundle

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/all-in-one.html

Loads the lite bundle and configures CDN paths for Wasm modules.

```html
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@myriaddreamin/typst.ts/dist/esm/contrib/all-in-one-lite.bundle.js"
id="typst"
>
/// Initializes the Typst compiler and renderer. Since we use "all-in-one-lite.bundle.js" instead of
/// "all-in-one.bundle.js" we need to tell that the wasm module files can be loaded from CDN (jsdelivr).
$typst.setCompilerInitOptions({
getModule: () =>
'https://cdn.jsdelivr.net/npm/@myriaddreamin/typst-ts-web-compiler/pkg/typst_ts_web_compiler_bg.wasm',
});
$typst.setRendererInitOptions({
getModule: () =>
'https://cdn.jsdelivr.net/npm/@myriaddreamin/typst-ts-renderer/pkg/typst_ts_renderer_bg.wasm',
});

console.log($typst.svg({
mainContent: 'Hello, typst!',
}));
</script>
```

--------------------------------

### Install typst.ts Node.js Compiler

Source: https://myriad-dreamin.github.io/typst.ts/cookery/get-started.html

Install the Node-native library for integrated compilation and rendering in Node.js applications.

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

--------------------------------

### Initialize the Typst renderer in browser

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/renderer/ts-lib.html

Setup the renderer plugin by providing the path to the WASM module.

```typescript
let m = window.TypstRenderModule;
let plugin = m.createTypstRenderer();
plugin
  .init({
    getModule: () =>
      '/path/to/typst_ts_renderer_bg.wasm',
    })
```

--------------------------------

### Install Hexo Typst Dependencies

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/renderer/hexo.html

Install the necessary Typst.ts packages and the Hexo renderer plugin using npm. Ensure all dependencies are aligned to the same version to prevent runtime errors.

```bash
npm install @myriaddreamin/typst.ts @myriaddreamin/typst-ts-renderer @myriaddreamin/typst-ts-node-compiler
```

```bash
npm install hexo-renderer-typst
```

--------------------------------

### Typst Compilation and Rendering Example

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/all-in-one-node.html

This example demonstrates how to use the NodeCompiler to compile and render a Typst document to SVG format. It highlights the simplified API compared to the underlying Rust library.

```APIDOC
## POST /compile/svg

### Description
Compiles Typst content to an SVG string.

### Method
POST

### Endpoint
/compile/svg

### Parameters
#### Request Body
- **mainContent** (string) - Required - The Typst content to compile.

### Request Example
```json
{
  "mainContent": "Hello, typst!"
}
```

### Response
#### Success Response (200)
- **svg** (string) - The generated SVG string.

#### Response Example
```json
{
  "svg": "<svg>...</svg>"
}
```
```

--------------------------------

### Web Starter Example: Render Typst to SVG

Source: https://myriad-dreamin.github.io/typst.ts/cookery/get-started.html

Use the all-in-one bundle script from CDN to render a Typst document to SVG in the browser. Note: This bundle includes all resources and may not be practical for production.

```html
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@myriaddreamin/typst-all-in-one.ts@0.7.0/dist/esm/index.js"
  id="typst"
>
  console.log($typst.svg({
    mainContent: 'Hello, typst!',
  }));
</script>
```

--------------------------------

### Underlying Rust Component Usage

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/all-in-one-node.html

Example demonstrating the underlying Rust components used by the library.

```rust
let verse = TypstSystemUniverse::new(default_ops);
verse.mapShadow(memory_id, Bytes::from_string("Hello, typst!"));
let world = verse.snapshot_with(Some(TaskInputs {
entry: memory_id,
..TaskInputs::default()
}));
let doc = typst::compile(&world)?;
return typst_svg::svg_merged(&doc);
```

--------------------------------

### GET /readme.artifact.sir.in

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/renderer/solid.html

Fetches a precompiled Typst document artifact in vector format for rendering.

```APIDOC
## GET /readme.artifact.sir.in

### Description
Retrieves a binary artifact file representing a compiled Typst document in vector format.

### Method
GET

### Endpoint
/readme.artifact.sir.in

### Response
#### Success Response (200)
- **body** (Uint8Array) - The binary artifact data required by the TypstDocument component.
```

--------------------------------

### Compile Document with World Reference

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/compiler/service.html

Example of compiling a Typst document using a World reference in a separate thread. Ensure the 'reflexo-typst' crate is added as a dependency.

```rust
std::thread::spawn(move || {
let doc = typst::compile(&world)?;
});
```

--------------------------------

### Add Exporters to CompileActor

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/renderer/rust.html

Configure a CompileActor with a list of exporters and enable file watching. This example shows how to initialize the CompileHandler and pass it to the CompileActor.

```rust
let mut exporter: Vec<DynExporter<CompileSnapshot<_>>> = vec![];
let handle = Arc::new(CompileHandler { exporter });

let actor = CompileActor::new_with(
verse, intr_tx, intr_rx,
CompileServerOpts {
handle,
..Default::default()
},
)
.with_enable_watch(args.watch);
```

--------------------------------

### Embedding a Typst document in a Solid component

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/renderer/solid.html

A complete example showing how to fetch an artifact and render it using the TypstDocument component.

```typescript
export const App = (artifact: Uint8Array) => {
  const getArtifactData = async () => {
    const response = await fetch(
      "http://localhost:3000/readme.artifact.sir.in"
    ).then((response) => response.arrayBuffer());
    return new Uint8Array(response);
  };
  const [vec] = createResource(getArtifactData);
  return (
    <div>
      <h1>Demo: Embed Your Typst Document in Solid</h1>
      <TypstDocument fill="#343541" artifact={vec()} />
    </div>
  );
};
```

--------------------------------

### Start Concurrent Compilation Project

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/service.html

Initiates a project for concurrent compilation. The closure provided handles compilation artifacts, allowing for custom processing like testing compiled files.

```rust
let result = start_project(verse, None, move |c, mut i, next| {
    if let Interrupt::Compiled(artifact) = &mut i {
        let files = artifact.documents();
        let res = test_once(&world, &files);
    }
    // Notifies all the dependences touched by `test_once`.
    next(c, i)
});
```

--------------------------------

### Creating a Compiler Instance

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/all-in-one-node.html

Demonstrates how to create a new instance of the NodeCompiler with default settings.

```APIDOC
## Creating a Compiler

### Description
Creates a new compiler instance with default arguments.

### Method
POST

### Endpoint
/compiler/create

### Parameters
No parameters required for basic creation.

### Request Example
```javascript
const typst = NodeCompiler.create();
```

### Response
#### Success Response (200)
- **compilerInstance** (object) - An instance of the NodeCompiler.

#### Response Example
```json
{
  "compilerInstance": "<NodeCompiler instance>"
}
```
```

--------------------------------

### Compiler Creation and Configuration

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/all-in-one-node.html

Demonstrates how to create a Typst compiler instance and configure its workspace and font settings.

```APIDOC
## Compiler Creation and Configuration

### Description
Creates a new Typst compiler instance with default arguments or custom configurations for workspace and font loading.

### Method
`NodeCompiler.create()`

### Endpoint
N/A (Library function)

### Parameters
#### Request Body
- **workspace** (string) - Optional - Configures the root of the workspace to a specified path. It's recommended to use absolute paths.
- **fontArgs** (array) - Optional - An array of font configurations. Each element can be an object with `fontPaths` (array of strings) or `fontBlobs` (array of Buffers). The order of precedence is important: former elements have higher precedence than latter elements, followed by system fonts, and then default embedded fonts.
- **inputs** (object) - Optional - Configures `sys.inputs` with string pairs.

### Request Example
```javascript
// Create with default arguments
const $typst = NodeCompiler.create();

// Configure workspace
const $typst = NodeCompiler.create({
  workspace: '/path/to/workspace',
});

// Load fonts from a directory
const $typst = NodeCompiler.create({
  fontArgs: [
    { fontPaths: ['assets/fonts'] },
  ]
});

// Load fonts by blob
const $typst = NodeCompiler.create({
  fontArgs: [
    { fontBlobs: [someFontBlob] },
  ]
});

// Example with multiple font sources and precedence
const $typst = NodeCompiler.create({
  fontArgs: [
    { fontPaths: ['assets/fonts1'] },
    { fontBlobs: [someFontBlob] },
    { fontPaths: ['assets/fonts2'] },
  ]
});

// Configure sys.inputs
const $typst = NodeCompiler.create({
  inputs: {
    'theme': 'dark',
  },
});
```

### Response
N/A (Returns a compiler instance)
```

--------------------------------

### Using a Snippet Instance

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/all-in-one.html

Demonstrates how to use the global `$typst` instance as a shortcut and how to create a new, stateful instance using `TypstSnippet` for non-concurrent usage.

```APIDOC
## Global Instance

As a shortcut, a global instance `$typst` is provided, and it will lazily initialize the compiler and renderer for you.

```javascript
import { $typst } from '@myriaddreamin/typst.ts';
```

## Custom Snippet Instance

A snippet instance will store some state for the sake of convenience, which makes it not suitable for concurrent usage. You can create a new instance using the class `TypstSnippet`:

```javascript
import { TypstSnippet } from '@myriaddreamin/typst.ts/contrib/snippet';

const $typst = new TypstSnippet({
  // optional renderer instance
  renderer: enableRendering ?? (() => {
    return createGlobalRenderer(
      createTypstRenderer,
      initOptions
    );
  }),
  compiler() {
    return createGlobalCompiler(createTypstCompiler,
      initOptions);
  }
});
```
```

--------------------------------

### Display CLI help information

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/ts-cli.html

Run `typst-ts-cli --help` to view general help and available commands.

```bash
$ typst-ts-cli --help
```

```bash
$ typst-ts-cli --help
```

--------------------------------

### Initializing with High-Level API

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/all-in-one.html

Demonstrates how to initialize the Typst.ts library using high-level APIs, including font preloading, package registry configuration, and custom access models (Fetch and Memory).

```APIDOC
## High-Level Initialization

(TODO: fully document the use API)

### Font Management

- `preloadFontFromUrl`
- `preloadFontData`
- `preloadFonts`
- `disableDefaultFontAssets`
- `loadFonts`
- `preloadFontAssets`

### Package Management

- `withPackageRegistry`
- `withAccessModel`
- `fetchPackageRegistry`
- `fetchPackageBy`

### Filesystem Backends

Specify address to a http server for filesystem backend (shadowed by the `addSource` and `mapShadow` api):

```javascript
const cm = window.TypstCompileModule;
const fetchBackend = new cm.FetchAccessModel(
'http://localhost:20810',
);
$typst.use(
TypstSnippet.withAccessModel(fetchBackend),
);
```

Specify a memory filesystem backend (shadowed by the `addSource` and `mapShadow` api):

```javascript
const memoryAccessModel = new cm.MemoryAccessModel();
$typst.use(
TypstSnippet.withAccessModel(memoryAccessModel),
);
```

Fetch package from remote registry:

```javascript
const accessModel = cm.FetchAccessModel() or
cm.MemoryAccessModel() or others;
$typst.use(
// ... other configurations
);
```
```

--------------------------------

### Snapshot a World

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/service.html

Create a snapshot of the current universe to start a compilation task.

```rust
let world = verse.snapshot();
```

--------------------------------

### Initialize with HTTP Filesystem Backend

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/all-in-one.html

Use this to specify an HTTP server address for the filesystem backend. This is shadowed by `addSource` and `mapShadow` APIs.

```typescript
const cm = window.TypstCompileModule;
```

```typescript
const fetchBackend = new cm.FetchAccessModel(
  'http://localhost:20810',
);
```

```typescript
$typst.use(
  TypstSnippet.withAccessModel(fetchBackend),
);
```

--------------------------------

### Compile a document into Vector Format with dynamic layouts

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/ts-cli.html

Enable responsive layouts in the Vector Format output by using the `--dynamic-layout` flag.

```bash
typst-ts-cli compile \
  -e "fuzzers/corpora/math/main.typ" \
  --dynamic-layout
```

```bash
typst-ts-cli compile \
  -e "fuzzers/corpora/math/main.typ" \
  --dynamic-layout
```

--------------------------------

### Typical typst-document configuration

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/renderer/angular.html

Configure the component with fill color and artifact data.

```html
<typst-document
fill="#343541"
artifact="{{ artifact }}">
</typst-document>
```

--------------------------------

### Use PureCompiler Instance

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/compiler/service.html

Utilize the PureCompiler, which implements the Compiler trait, for compilation tasks. This example shows a basic usage pattern.

```rust
std::marker::PhantomData.compile(
&verse.snapshot(), &mut Default::default());
```

--------------------------------

### Fetch Package from Remote Registry

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/all-in-one.html

Demonstrates how to use FetchAccessModel or MemoryAccessModel to fetch packages from a remote registry.

```javascript
const accessModel = cm.FetchAccessModel() or
cm.MemoryAccessModel() or others;
$typst.use(
```

--------------------------------

### Initialize with Memory Filesystem Backend

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/all-in-one.html

Use this to specify a memory filesystem backend. This is shadowed by `addSource` and `mapShadow` APIs.

```typescript
const memoryAccessModel = new cm.MemoryAccessModel();
```

```typescript
$typst.use(
  TypstSnippet.withAccessModel(memoryAccessModel),
);
```

--------------------------------

### Create NodeCompiler Instance

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/all-in-one-node.html

Initializes a new compiler instance with default settings.

```javascript
const $typst = NodeCompiler.create();
```

--------------------------------

### Specify Entry File

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/ts-cli.html

Define the entry point for the compilation.

```bash
typst-ts-cli -e main.typ
```

--------------------------------

### Get Target from System Inputs

Source: https://myriad-dreamin.github.io/typst.ts/cookery/direction/responsive.html

Retrieves the 'x-target' system argument, defaulting to 'pdf'. This is used to determine the output format or target environment for the Typst compilation.

```typst
#let target = sys.inputs.at("x-target", default: "pdf")
```

--------------------------------

### Initialize CompileActor with Exporters

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/renderer/rust.html

Initialize a CompileActor with a custom CompileHandler that includes a vector of exporters. This setup is used for compiling and exporting, with an option to enable watching for file changes.

```rust
let mut exporter: Vec<DynExporter<CompileSnapshot<_>>> = vec![];
let handle = Arc::new(CompileHandler { exporter });

let actor = CompileActor::new_with(
    verse, intr_tx, intr_rx,
    CompileServerOpts {
        handle,
        ..Default::default()
    },
)
.with_enable_watch(args.watch);
```

--------------------------------

### Typical typst-document Usage

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/renderer/angular.html

Configure the component with fill color and artifact properties.

```html
<typst-document
  fill="#343541"
  artifact="{{ artifact }}">
</typst-document>
```

--------------------------------

### Using all-in-one-lite.bundle.js

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/all-in-one.html

Configures the lite bundle by specifying the locations of the required Wasm compiler and renderer modules.

```html
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@myriaddreamin/typst.ts/dist/esm/contrib/all-in-one-lite.bundle.js"
  id="typst"
>
  /// Initializes the Typst compiler and renderer. Since we use "all-in-one-lite.bundle.js" instead of
  /// "all-in-one.bundle.js" we need to tell that the wasm module files can be loaded from CDN (jsdelivr).
  $typst.setCompilerInitOptions({
    getModule: () =>
      'https://cdn.jsdelivr.net/npm/@myriaddreamin/typst-ts-web-compiler/pkg/typst_ts_web_compiler_bg.wasm',
  });
  $typst.setRendererInitOptions({
    getModule: () =>
      'https://cdn.jsdelivr.net/npm/@myriaddreamin/typst-ts-renderer/pkg/typst_ts_renderer_bg.wasm',
  });
    
  console.log($typst.svg({
    mainContent: 'Hello, typst!',
  }));
</script>
```

--------------------------------

### Get HTML, Body, and Body Bytes

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/all-in-one-node.html

Retrieve the HTML, body as a string, or body as bytes from a Typst compilation result. Use bodyBytes to avoid string creation in Node.js.

```typescript
const htmlContent = htmlResult.result!.html();
```

```typescript
const body = htmlResult.result!.body();
```

```typescript
const bodyBytes = htmlResult.result!.bodyBytes();
```

--------------------------------

### Typst-ts-cli Help

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/compiler/ts-cli.html

Displays the help information for the typst-ts-cli tool, including available commands and options.

```bash
$ typst-ts-cli --help
```

--------------------------------

### Define Custom Benchmark Arguments

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/compiler/service.html

Example of extending CompileOnceArgs with custom arguments for a benchmark tool like 'crityp'. This allows specifying additional options like the benchmark output directory.

```rust
/// Common arguments of crityp benchmark.  
#[derive(Debug, Clone, Parser, Default)]  
pub struct BenchArgs {  
/// Arguments for compiling the document once, compatible with `typst-cli compile`.  
#[clap(flatten)]  
pub compile: CompileOnceArgs,  
/// Path to output file for benchmarks  
#[clap(long, default_value = "target/crityp")]  
pub bench_output: String,  
}
```

--------------------------------

### Get Page Width from System Inputs

Source: https://myriad-dreamin.github.io/typst.ts/cookery/direction/responsive.html

Retrieves the 'x-page-width' system argument, defaulting to 21cm if not provided. This is used for setting the page width in Typst documents, particularly for web targets.

```typst
#let page-width = sys.inputs.at("x-page-width", default: 21cm)
```

--------------------------------

### Create sys.inputs for a World

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/compiler/service.html

Demonstrates creating input configurations for a compilation world using either a macro or string pairs.

```rust
let world = verse.snapshot_with(Some(TaskInputs {  
inputs: Some(Arc::new(LazyHash::new(dict! {  
"my-target" => "markdown"  
}))),  
..Default::default()  
}));
```

```rust
let pairs = [("my-target", "docx")].map(|(k, v)| (k.into(), v.into_value()));  
let inputs = Arc::new(LazyHash::new(pairs.into_iter().collect()));
```

--------------------------------

### Render Text to SVG using snippet.mjs

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/all-in-one.html

A simple example using the `$typst.svg` function from `snippet.mjs` to render 'Hello, typst!' to an SVG. The output length indicates the SVG's byte size.

```javascript
console.log((await $typst.svg({
  mainContent: 'Hello, typst!' })).length);
```

```plaintext
// :-> 7317
```

--------------------------------

### Create EntryState with Rootless Main Path

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/compiler/service.html

Construct an EntryState using only the absolute path to the main Typst file. In this mode, the Typst document can only access package files, not other local files.

```rust
EntryState::new_rootless(main)
```

--------------------------------

### Define Web and PDF Target Check Functions

Source: https://myriad-dreamin.github.io/typst.ts/cookery/direction/responsive.html

Defines helper functions to check if the current target starts with 'web' or 'pdf'. These are useful for conditional styling or logic within Typst documents.

```typst
#let is-web-target() = target.starts-with("web")
```

```typst
#let is-pdf-target() = target.starts-with("pdf")
```

--------------------------------

### Compile Typst to SVG using Snippet Utility

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/all-in-one.html

Use the $typst.svg method to compile a Typst code string directly to SVG format. This is a quick way to get SVG output from simple Typst content.

```typescript
import { $typst } from '@myriaddreamin/typst.ts/dist/esm/contrib/snippet.mjs';

console.log((await $typst.svg({
  mainContent: 'Hello, typst!'
})).length);
```

--------------------------------

### Select Entry File in Workspace

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/service.html

Configure the entry state by selecting a file within the current workspace.

```rust
let entry = verse
  .entry_state()
  .select_in_workspace(Path::new("/main.typ"));
let world = verse.snapshot_with(Some(TaskInputs {
  entry: Some(entry),
  ..Default::default()
}));
```

--------------------------------

### Initialize Serverless Compiler

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/bindings.html

Manually create and initialize a compiler instance for more control.

```typescript
import { createTypstCompiler } from '@myriaddreamin/typst.ts';
```

```typescript
  
```

```typescript
const mainFilePath = '/main.typ';
```

```typescript
const cc /* compiler */ = createTypstCompiler();
```

```typescript
await cc.init();
```

```typescript
cc.addSource(mainFilePath, 'Hello, typst!');
```

```typescript
await cc.compile({ mainFilePath });
```

--------------------------------

### Generate Typst Files with Hexo

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/renderer/hexo.html

Use the 'hexo generate' command to build your Hexo project, rendering Typst documents into static files. Typst files are expected in source/_posts or the root directory.

```bash
hexo generate
```

--------------------------------

### Create EntryState with Explicit Root and Main Path

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/compiler/service.html

Construct an EntryState by specifying both the root directory path and the path to the main Typst file relative to that root.

```rust
EntryState::new_rooted(root, main)
```

--------------------------------

### Snapshot with Custom Task Inputs

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/service.html

Initialize a world with specific task inputs, overriding default settings.

```rust
let world = verse.snapshot_with(Some(reflexo_typst::TaskInputs {
    ..Default::default()
}));
```

--------------------------------

### Basic HTML Structure for Typst.ts

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/all-in-one.html

Sets up the necessary HTML elements: a script tag to load Typst.ts, a button for export, a textarea for input, and a div for rendering.

```html
<script src="https://cdn.jsdelivr.net/npm/@myriaddreamin/typst.ts/dist/esm/contrib/all-in-one-lite.bundle.js"></script>
<button id="export">Export To PDF</button>
<textarea id="input">Hello, Typst!</textarea>
<div id="content"></div>
```

--------------------------------

### Initializing with Low-Level API

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/all-in-one.html

Details on how to initialize the Typst.ts library using low-level APIs to set specific options for the compiler and renderer, including WASM module loading.

```APIDOC
## Low-Level Initialization

The extra initialization options must be at the start of the main routine, or accurately before all invocations. You can set the options by low-level or high-level APIs. The low-level APIs are direct but not easy to use:

```javascript
// Specifies init options of renderer
$typst.setRendererInitOptions(rendererInitOptions);

// Specifies init options of compiler. For example, cache default fonts to file system
$typst.setCompilerInitOptions(await cachedFontInitOptions());

// The compiler instance is initialized in this call. After that, setting options makes no sense.
await $typst.svg({ mainContent });
```

## Configuring WASM Module Loading

Some examples are still easy. For instance, a commonly usage is configuring the way to obtain the wasm module files:

```javascript
$typst.setCompilerInitOptions({
  getModule: () =>
    '/path/to/typst_ts_web_compiler_bg.wasm',
});

$typst.setRendererInitOptions({
  getModule: () =>
    '/path/to/typst_ts_renderer_bg.wasm',
});
```

**Note:** Please check the low-level components to get full reference about these options: Compiler in Wasm (Web) and Renderer in Wasm (Web).
```

--------------------------------

### Configure Filesystem Access with FetchAccessModel

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/all-in-one.html

Specify a remote HTTP server for filesystem access, which can be shadowed by addSource and mapShadow.

```javascript
const cm = window.TypstCompileModule;
const fetchBackend = new cm.FetchAccessModel(
'http://localhost:20810',
);
$typst.use(
TypstSnippet.withAccessModel(fetchBackend),
);
```

--------------------------------

### Configure Initialization Options

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/bindings.html

Provide custom initialization options, such as a custom path for the WASM module.

```typescript
await cc.init({
  getModule: () =>
    '/path/to/typst_ts_web_compiler_bg.wasm',
});
```

--------------------------------

### Set Low-Level Compiler and Renderer Options

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/all-in-one.html

Configure initialization options for the compiler and renderer using low-level APIs.

```javascript
$typst.setRendererInitOptions(rendererInitOptions);
```

```javascript
$typst.setCompilerInitOptions(await cachedFontInitOptions());
```

```javascript
$typst.setCompilerInitOptions({
getModule: () =>
'/path/to/typst_ts_web_compiler_bg.wasm',
});
```

```javascript
$typst.setRendererInitOptions({
getModule: () =>
'/path/to/typst_ts_renderer_bg.wasm',
});
```

--------------------------------

### Compiling Documents

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/all-in-one-node.html

Shows how to compile Typst documents either from content strings or file paths, with options for inputs.

```APIDOC
## Compiling Documents

### Description
Compiles Typst documents from provided content or file paths. You can also pass `sys.inputs` during compilation.

### Method
`$typst.compile(options)`

### Endpoint
N/A (Library function)

### Parameters
#### Request Body
- **mainContent** (string) - Optional - The Typst content as a string.
- **mainFilePath** (string) - Optional - The path to the main Typst file.
- **inputs** (object) - Optional - Overrides or sets `sys.inputs` for this compilation.

### Request Example
```javascript
// Compile from content
const docs = await $typst.compile({
  mainContent: 'Hello, typst!',
});

// Compile from file path
const docs = await $typst.compile({
  mainFilePath: '/path/to/main-file.typ',
});

// Compile with inputs (overrides instance inputs)
const docs = await $typst.compile({
  mainContent: '#sys.inputs',
  inputs: {
    'theme': 'light',
  },
});

// Example demonstrating input override
const $typst = NodeCompiler.create({ inputs: { 'X': 'u' } });
await $typst.svg({ inputs: { 'Y': 'v' }, mainContent: '#sys.inputs' }); // Compiles with sys.inputs = (Y: "v")
```

### Response
#### Success Response (200)
- **docs** (object) - An intermediate document object representing the compiled Typst document.
```

--------------------------------

### Select Entry File from Path

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/service.html

Attempt to select an entry file based on a provided absolute path.

```rust
let another_entry = current_dir()?.join("main.typ");
let entry = verse
    .entry_state()
    .try_select_path_in_workspace(&another_entry)?;
let world = verse.snapshot_with(Some(TaskInputs {
    entry,
    ..Default::default()
}));
```

--------------------------------

### Underlying Rust Component Calls

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/all-in-one-node.html

Demonstrates the manual steps required to compile and render using the underlying Rust components.

```rust
let verse = TypstSystemUniverse::new(default_ops);
```

```rust
verse.mapShadow(memory_id, Bytes::from_string("Hello, typst!"));
```

```rust
let world = verse.snapshot_with(Some(TaskInputs {
```

```rust
  entry: memory_id,
```

```rust
  ..TaskInputs::default()
```

```rust
}));
```

```rust
let doc = typst::compile(&world)?;
```

```rust
return typst_svg::svg_merged(&doc);
```

--------------------------------

### Configure Renderer Init Options

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/all-in-one.html

Specify initialization options for the Typst renderer. These options control how the Typst output is rendered.

```typescript
// specify init options to renderer
$typst.setRendererInitOptions(rendererInitOptions);
```

--------------------------------

### Configure compiler and renderer initialization

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/renderer/ts-lib.html

Set custom module loading paths for the compiler and renderer, often required in browser environments.

```typescript
$typst.setCompilerInitOptions({ getModule: ... });
```

```typescript
$typst.setRendererInitOptions({ getModule: ... });
```

--------------------------------

### Setting Renderer Initialization Options

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/renderer/react.html

Configure initialization options for the Typst renderer used by `TypstDocument`.

```APIDOC
## Set renderer initialization option for `TypstDocument`

You can retrieve and set `typst.InitOptions` for initializing the renderer.

### Setting Custom Module Path
This example shows how to set a custom path for the WASM module.

```javascript
TypstDocument.setWasmModuleInitOptions({
  getModule: () => 'http://localhost:20810/typst_ts_renderer_bg.wasm',
});
```

### Default Initialization Options
The default options are as follows:

```javascript
{
  beforeBuild: [],
  getModule: () => '/node_modules/@myriaddreamin/typst-ts-renderer/pkg/typst_ts_renderer_bg.wasm',
}
```

```

--------------------------------

### Create DynamicLayoutCompiler Instance

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/renderer/rust.html

Create a new DynamicLayoutCompiler instance. This enables dynamic layout based on an existing compiler and an output directory.

```rust
let driver = DynamicLayoutCompiler::new(driver, output_dir);
```

--------------------------------

### Compile a document with watching dependencies

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/ts-cli.html

Use the `--watch` flag to recompile the document automatically when its dependencies change.

```bash
typst-ts-cli compile \
  -e "fuzzers/corpora/math/main.typ" \
  --watch
```

```bash
typst-ts-cli compile \
  -e "fuzzers/corpora/math/main.typ" \
  --watch
```

--------------------------------

### Compile a Document

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/service.html

Execute the Typst compilation process using a provided world instance.

```rust
let doc = typst::compile(&world)?;
```

--------------------------------

### Add reflexo-typst Dependency for Browser Compilation

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/service.html

Configure the reflexo-typst crate for browser compilation by enabling the `browser` feature in your Cargo.toml.

```toml
reflexo-typst = { version = "0.x.y", features = ["browser"] }
```

```toml
reflexo-typst = { version = "0.x.y", features = ["browser"] }
```

--------------------------------

### Try Selecting Entry Path from User Input

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/compiler/service.html

Attempt to select an entry file for Typst compilation using a user-provided absolute path. This method validates the path before setting it as the entry.

```rust
let another_entry = current_dir()?.join("main.typ");
let entry = verse
.entry_state()
.try_select_path_in_workspace(&another_entry)?;
let world = verse.snapshot_with(Some(TaskInputs {
entry,
..Default::default()
}));
```

--------------------------------

### Initialize Typst Compiler and Renderer

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/all-in-one.html

Configures the compiler and renderer WASM modules and binds UI events.

```javascript
document.getElementById('typst').addEventListener('load', function () {
      $typst.setCompilerInitOptions({
        getModule: () =>
          'https://cdn.jsdelivr.net/npm/@myriaddreamin/typst-ts-web-compiler/pkg/typst_ts_web_compiler_bg.wasm',
      });
      $typst.setRendererInitOptions({
        getModule: () =>
          'https://cdn.jsdelivr.net/npm/@myriaddreamin/typst-ts-renderer/pkg/typst_ts_renderer_bg.wasm',
      });
      document.getElementById('export').onclick = () => exportPdf(input.value);
      input.oninput = () => {
        previewSvg(input.value);
        input.style.height = '5px';
        input.style.height = input.scrollHeight + 'px';
      };
      previewSvg(input.value);
    });
```

--------------------------------

### Default WASM initialization options

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/renderer/angular.html

The default configuration for the renderer initialization.

```javascript
{
  beforeBuild: [],
  getModule: () => '/assets/typst-ts-renderer/pkg/typst_ts_renderer_bg.wasm',
}
```

--------------------------------

### Underlying Interface Usage

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/all-in-one.html

Demonstrates the manual initialization and compilation process using TypstCompiler and TypstRenderer.

```typescript
// Initializes lazily
compiler = createTypstCompiler(); // TypstCompiler
await compiler.init(...)
renderer = createTypstRenderer(); // TypstRenderer
await renderer.init(...)

// Adds main file content: 'Hello, typst!'
await this.addSource(`/tmp/${randstr()}.typ`, options.mainContent);
// Compiles it
vectorData = options.vectorData || compiler.compile(options)
return renderer.runWithSession(session => {
renderer.manipulateData({ session, action: 'reset', data: vectorData })
// Renders it
renderer.renderSvg({ ...options, session })
})
```

--------------------------------

### Configure Filesystem Access with MemoryAccessModel

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/all-in-one.html

Utilize a memory filesystem backend, which can also be shadowed by addSource and mapShadow.

```javascript
const memoryAccessModel = new cm.MemoryAccessModel();
$typst.use(
TypstSnippet.withAccessModel(memoryAccessModel),
);
```

--------------------------------

### Configuring Workspace Root

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/all-in-one-node.html

Shows how to configure the workspace root path for the compiler. It explains the importance of using absolute paths.

```APIDOC
## Configuring Workspace Root

### Description
Configures the root of the workspace to a specified path. It is recommended to use absolute paths.

### Method
POST

### Endpoint
/compiler/create

### Parameters
#### Request Body
- **workspace** (string) - Required - The absolute path to the workspace directory.

### Request Example
```javascript
const typst = NodeCompiler.create({
  workspace: '/path/to/workspace'
});

// Example with a relative path (will be resolved to absolute)
const { resolve } = require('path');
const typstResolved = NodeCompiler.create({
  workspace: resolve('some/relative/path')
});
```

### Response
#### Success Response (200)
- **compilerInstance** (object) - An instance of the NodeCompiler with workspace configured.

#### Response Example
```json
{
  "compilerInstance": "<NodeCompiler instance with workspace>"
}
```
```

--------------------------------

### Configure Dynamic Layout

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/ts-cli.html

Link the variables package before performing a dynamic layout compilation.

```bash
typst-ts-cli package link --manifest \
  repos/typst.ts/contrib/templates/variables/typst.toml
typst-ts-cli compile ... --dynamic-layout
```

--------------------------------

### Set System Inputs via String Pairs

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/service.html

Construct system inputs from a collection of string pairs.

```rust
let pairs = [("my-target", "docx")].map(|(k, v)| (k.into(), v.into_value()));
let inputs = Arc::new(LazyHash::new(pairs.into_iter().collect()));
```

--------------------------------

### Create a TypstSnippet Instance

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/all-in-one.html

Instantiate TypstSnippet for managing state, but note it's not suitable for concurrent use.

```javascript
import { TypstSnippet } from '@myriaddreamin/typst.ts/contrib/snippet';
const $typst = new TypstSnippet({
// optional renderer instance
renderer: enableRendering ?? (() => {
return createGlobalRenderer(
createTypstRenderer,
initOptions);
}),
compiler() => {
return createGlobalCompiler(createTypstCompiler,
initOptions);
}
});
```

--------------------------------

### Input Event Handler and Initial Preview

Source: https://myriad-dreamin.github.io/typst.ts/cookery/direction/serverless.html

Sets up an input event handler for the textarea to trigger Typst rendering on changes. It also performs an initial rendering and adjusts the textarea height dynamically.

```javascript
input.oninput = () => {
  previewSvg(input.value);
  input.style.height = '5px';
  input.style.height = input.scrollHeight + 'px';
};

previewSvg(input.value);
```

--------------------------------

### Run Hexo Commands

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/renderer/hexo.html

Commands to serve or generate files for the Hexo project.

```bash
hexo serve
```

```bash
hexo generate
```

--------------------------------

### Create TypstSystemUniverse Instance

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/compiler/service.html

Instantiate a TypstSystemUniverse for managing compilation environments, including root directories and font paths. This can create multiple snapshots.

```rust
let verse = TypstSystemUniverse::new(CompileOpts {
root_dir: workspace_dir.clone(),
font_paths: args.font.paths.clone(),
with_embedded_fonts: EMBEDDED_FONT.to_owned(),
..CompileOpts::default()
})
.unwrap_or_exit();

// usage
let mut tracer = Tracer::default();
typst::compile(&verse.snapshot(), tracer);
```

--------------------------------

### Typst-ts-cli Usage

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/compiler/ts-cli.html

Shows the general usage structure for the typst-ts-cli, including options and commands.

```bash
Usage: typst-ts-cli [OPTIONS] [COMMAND]

Commands:
compile Run compiler. [aliases: c]
completion Generate shell completion script
env Dump Client Environment.
font Commands about font for typst.
help Print this message or the help of the given subcommand(s)
package Commands about package for typst.

Options:
-V, --version Print Version
--VV <VV> Print Version in format [default: none] [possible values: none, short, features, full, json, json-plain]
-h, --help Print help
```

--------------------------------

### Create TypstSystemUniverse Instance

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/service.html

Initializes a TypstSystemUniverse with specified compilation options, including root directory, font paths, and embedded fonts. This instance can then be used to create snapshots for compilation.

```rust
let verse = TypstSystemUniverse::new(CompileOpts {
  root_dir: workspace_dir.clone(),
  font_paths: args.font.paths.clone(),
  with_embedded_fonts: EMBEDDED_FONT.to_owned(),
  ..CompileOpts::default()
})
.unwrap_or_exit();
```

```rust
let mut tracer = Tracer::default();
```

```rust
typst::compile(&verse.snapshot(), tracer);
```

--------------------------------

### Initialize Typst Renderer in Browser

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/renderer/ts-lib.html

Initialize the Typst renderer in the browser environment. The `getModule` option requires the correct path to the WASM file.

```javascript
let m = window.TypstRenderModule;
let plugin = m.createTypstRenderer();
plugin.init({
  getModule: () =>
    '/path/to/typst_ts_renderer_bg.wasm',
})
```

--------------------------------

### Create a TypstSnippet Instance

Source: https://myriad-dreamin.github.io/typst.ts/cookery/guide/all-in-one.html

Instantiate the `TypstSnippet` class, optionally providing custom `renderer` and `compiler` instances. This allows for more control over the Typst environment.

```javascript
const $typst = new TypstSnippet({
  // optional renderer instance
  renderer: enableRendering ?? (() => {
    return createGlobalRenderer(
      createTypstRenderer, initOptions);
  }),
  compiler() => {
    return createGlobalCompiler(createTypstCompiler,
      initOptions);
  }
});
```

--------------------------------

### Create EntryState with New Rooted Entry

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/compiler/service.html

Construct an EntryState by providing an absolute path to the entry file. The Typst root is set to the parent directory, restricting file access to within that root.

```rust
EntryState::new_rooted_by_parent(entry)
```

--------------------------------

### Configure Initialization Options

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/compiler/bindings.html

Specify custom initialization options, such as a custom path for the WASM module.

```typescript
await cc.init({
getModule: () =>
'/path/to/typst_ts_web_compiler_bg.wasm',
});
```

--------------------------------

### Create CompileActor Instance

Source: https://myriad-dreamin.github.io/typst.ts/cookery/paged/guide/renderer/rust.html

Set up a CompileActor for incremental compilation and on-demand compilation. It watches files and requires a universe instance and an interrupt channel.

```rust
let (intr_tx, intr_rx) = mpsc::unbounded_channel();
let actor = CompileActor::new(verse,
intr_tx, intr_rx).with_watch(Some(handle.clone()));
```
Tokens:
Raw