run Typst in JavaScriptWorld.

Overview

Typst.ts

Typst.ts allows you to independently run the Typst compiler and exporter (renderer) in your browser.

You can:

  • locally run the compilation via typst-ts-cli to get a precompiled document,
    • or use typst-ts-compiler to build your backend programmatically.
  • build your frontend using the lightweight TypeScript library typst.ts.
  • send the precompiled document to your readers' browsers and render it as HTML elements.

The Typst.ts application is designed to be fast due to the following reasons:

  • Precompiled documents are much smaller than their PDF equivalents.
    • For example, a compressed precompiled document is only 35KB while its corresponding PDF is 342KB.
  • The renderer has a small code size.
  • Typst itself has great performance.

Prerequisite

  • The font assets for Typst.ts are not included in this repository. See Download Font Assets for more information.

CLI

Run Compiler Example:

typst-ts-cli compile --workspace "fuzzers/corpora/math" --entry "fuzzers/corpora/math/math.typ"

Help:

$ typst-ts-cli --help
The cli for typst.ts.

Usage: typst-ts-cli <COMMAND>

Commands:
  compile  Run precompiler. [aliases: c]
  help     Print this message or the help of the given subcommand(s)

Compile Help:

$ typst-ts-cli compile --help
Run precompiler.

Usage: typst-ts-cli compile [OPTIONS] --entry <ENTRY>

Compile options:
  -w, --workspace <WORKSPACE>  Path to typst workspace [default: .]
  -e, --entry <ENTRY>          Entry file
      --format <FORMAT>        Output formats
  -o, --output <OUTPUT>        Output to directory, default in the same directory as the entry file [default: ]

Renderer Example

$ cd renderer && npm install && npm run build && python -m http.server 8075

And open your browser to http://localhost:8075.

Precompiler

The compiler is capable of producing artifact outputs from a Typst project. Thet artifact outputs can be easily distributed to remote endpoints.

Renderer

The renderer accepts an input in artifact format and renders the document as HTML elements.

Import Typst.ts in your project:

You might also like...
🕺 Run React code snippets/components from your command-line without config

Run React code snippets/components from your command-line without config.

Helps cargo build and run apps for iOS

cargo-xcodebuild Helps cargo build and run apps for iOS. 📦 ⚙️ 🍏 Setup You need to install Xcode (NOT just Command Line Tools!), xcodegen, cargo-xcod

A toy example showing how to run Rust code in Python for speed and progress.

PoC: Integrating Rust in Python A toy example showing how to run Rust code in Python for speed and progress. Requirements Python 3.6+ Rust 1.44+ Cargo

A simple, modern fuzzy finder tool to run examples in a Cargo project.

cargo-rx cargo-rx is a simple, modern Runner for Examples in a Cargo project. This crate provides a single executable: rx. Basically anywhere you woul

CLI application to run clang-format on a set of files specified using globs in a JSON configuration file.
CLI application to run clang-format on a set of files specified using globs in a JSON configuration file.

run_clang_format CLI application for running clang-format for an existing .clang-format file on a set of files, specified using globs in a .json confi

Run code from many programming languages!

Langbot Creating an image Install podman Build an image: podman build -t langbot . Running a language Run podman run --rm -i langbot ./scripts/run.sh

A run-codes cli front end with some extra features

run-cli Run-cli A run-codes cli front end with some extra features Report Bug · Request Feature Table of Contents About The Project Built With Getting

CLI application to run clang-tidy on a set of files specified using globs in a JSON configuration file.
CLI application to run clang-tidy on a set of files specified using globs in a JSON configuration file.

run-clang-tidy CLI application for running clang-tidy for an existing .clang-tidy file on a set of files, specified using globs in a .json configurati

Example to run Rust code on the MCH2022 badge.
Example to run Rust code on the MCH2022 badge.

Rust on the MCH2022 badge This repo contains instructions and code to run Rust on the MCH2022 badge. There are two approaches regarding environment: I

Comments
  • build(deps): bump url-parse from 1.4.7 to 1.5.10 in /packages/typst.react

    build(deps): bump url-parse from 1.4.7 to 1.5.10 in /packages/typst.react

    Bumps url-parse from 1.4.7 to 1.5.10.

    Commits
    • 8cd4c6c 1.5.10
    • ce7a01f [fix] Improve handling of empty port
    • 0071490 [doc] Update JSDoc comment
    • a7044e3 [minor] Use more descriptive variable name
    • d547792 [security] Add credits for CVE-2022-0691
    • ad23357 1.5.9
    • 0e3fb54 [fix] Strip all control characters from the beginning of the URL
    • 61864a8 [security] Add credits for CVE-2022-0686
    • bb0104d 1.5.8
    • d5c6479 [fix] Handle the case where the port is specified but empty
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.
    dependencies 
    opened by dependabot[bot] 0
  • Typst.ts for React

    Typst.ts for React

    working

    • [ ] Improve Renderer API
    • [x] Init React Library
    • [x] import @myriaddreamin/typst.ts
    • [ ] A customize demo for typst.ts
      • [ ] scale option, fill option
    • [ ] Publish to npm
    opened by Myriad-Dreamin 0
  • Better Typst.ts

    Better Typst.ts

    We are currently planning to improve Typst.ts, and as such, we are proposing a few small but high-impact proposals.

    Before diving into the proposals, let us first illustrate the existing workflow of Typst.ts. The workflow involves two entities Compiler (Server-side) and Renderer (Client-side). We do not assume that these entities run in any particular location. Compiler could potentially run in a browser while Renderer could run on a server. The following list provides a complete overview of Typst.ts workflow:

    • Step 0, Precompile: The Compiler compiles the Artifact. This section is designed to be as simple as possible, as Typst is still in its early stages.

    • Step 1, Load Document: The Renderer loads the pre-compiled Artifact. The header of the Artifact contains the following information:

      • Metadata: title, author, etc.
      • Page information: number of pages, width and height of each page.
      • Font information: font family, font variant, etc., which is currently identical to typst::font::FontInfo.
      • Document: The pre-processed document itself.
    • Step 2, Load Font: The Renderer loads the fonts. By:

    • Step 3, Render the display layer: The Renderer renders the display layer of the document. By:

      • allowing the document to be exported as an image or PDF file,
      • or by rendering the image or PDF onto a given HTML element.
    • Step 4, Render the text layer: The Renderer renders the HTML semantic layer of the document. By:

      • creating HTML elements using the PDF text extraction algorithm and placing them on top of the display layer.

    At present, not all components of Typst.ts can run on a browser. We have planed to eventually port all components to the browser. Nevertheless, for the time being, we primarily focus on abstracting the Compiler and Renderer.

    Proposal 1, Renderer: the Renderer API

    Design a Renderer API for alpha release.

    State:The proposal is under draft.

    Proposal 2, Renderer: Retrieve Text from Document

    Replace the PDF text extraction algorithm by retrieving information from document accurately and efficiently.

    To finish the task we need to implement the following function:

    /// pdfJs.TextContentSource
    pub struct TextContentSource;
    pub fn reconstruct_text_information(&self, doc: &typst::doc::Document) -> TextContentSource;
    

    State:The proposal is under draft.

    Proposal 3, Renderer: Fine-granular Canvas Update

    Break the canvas into small pieces and update them individually to shorten E2E latency.

    To finish the task we need to implement the following function:

    pub struct OpaqueCanvasState;
    pub struct CanvasUpdate(x: usize, y: usize, img: ImageData);
    pub type CanvasUpdateFn = FnMut(updates: &[CanvasUpdate]);
    pub fn update_canvas(&self, state: OpaqueCanvasState, doc: &typst::doc::Document, update: CanvasUpdateFn) -> OpaqueCanvasState;
    

    State:The proposal is under draft.

    Proposal 4, Renderer: Differential Rendering

    Diff the document, and reuse the unchanged parts.

    To finish the task we need to implement the following function:

    #[comemo::memoize]
    pub fn CanvasCache;
    pub fn diff_updation<T: Prehashed>(&self, cache: &mut CanvasCache, elem: T, update: CanvasUpdate);
    

    State:The proposal is under draft.

    Proposal 5, Compiler+Renderer: Incremental Font Transfer

    Use IFT to reduce the font transfer latency and bandwidth.

    To finish the task we need to implement the following function:

    pub struct FontResolver;
    impl FontResolver {
      pub fn resolve(&self, id: GlyphId) -> Option<&[u8]>;
    }
    pub fn render_glyph(&self, res: &mut FontResolver, id: GlyphId);
    

    Following the IFT standard is optional.

    State:The proposal is under draft.

    Proposal 6, Compiler: Artifact Streaming

    Design a stream representation for artifact to transfer and apply the artifact differences between the Compiler and Renderer.

    The idea is borrowed from Dynamic Graph in Stream Representation.

    To finish the task we need to implement the following function:

    pub struct ArtifactStream;
    pub struct Server;
    pub struct Client;
    impl Server {
      pub fn send(&mut self, artifact: ArtifactStream);
    }
    impl Client {
      pub fn render(&mut self, artifact: ArtifactStream);
    }
    

    State:The proposal is under draft.

    Proposal 7, Renderer: In-place Replacement Plugin for MathJax Users

    Design a plugin to replace the MathJax with Typst.ts, rendering the math and tikz code every side.

    State:The proposal is under draft.

    opened by Myriad-Dreamin 0
Releases(v0.1.0)
Owner
null
Shell Escape for Typst typesetting system. Linux Only.

Shell Escape for Typst This is a simple shell escape for Typst. It allows you to run shell commands directly from Typst compiler. That said, it does n

Nikolay Stepanov 4 Jun 7, 2023
Packages for Typst.

Typst Packages An experimental package repository for Typst. A searchable list of all packages that were submitted here is available in the official d

Typst 91 Jul 4, 2023
An mdBook backend to output Typst markup, pdf, png, or svg

mdbook-typst mdbook-typst is a backend for mdBook. The backend converts the book to Typst markup and can output any format Typst can (currently pdf, p

Christian Legnitto 18 Dec 16, 2023
LaTeX support for Typst, powered by Rust and WASM.

MiTeX LaTeX support for Typst, powered by Rust and WASM. MiTeX processes LaTeX code into an abstract syntax tree (AST). Then it transforms the AST int

null 58 Jan 1, 2024
A tool to compare how Typst documents would look using different fonts or font variants.

typst-font-compare A tool to compare how Typst documents would look using different fonts or font variants. Installation cargo install --path . Usage

null 3 Feb 15, 2024
LaTeX support for Typst, powered by Rust and WASM

MiTeX LaTeX support for Typst, powered by Rust and WASM. MiTeX processes LaTeX code into an abstract syntax tree (AST). Then it transforms the AST int

null 303 Nov 24, 2024
🤖 just is a handy way to save and run project-specific commands.

just just is a handy way to save and run project-specific commands. (非官方中文文档,这里,快看过来!) Commands, called recipes, are stored in a file called justfile

Casey Rodarmor 8.2k Jan 5, 2023
Run your Rust CLI programs as state machines with persistence and recovery abilities

step-machine Run your CLI programs as state machines with persistence and recovery abilities. When such a program breaks you'll have opportunity to ch

Imbolc 31 Nov 23, 2022
1 library and 2 binary crates to run SSH/SCP commands on a "mass" of hosts in parallel

massh 1 library and 2 binary crates to run SSH/SCP commands on a "mass" of hosts in parallel. The binary crates are CLI and GUI "frontends" for the li

null 2 Oct 16, 2022
koyo is a cli tool that lets you run commands as another user. It is similar to doas or sudo.

koyo is a cli tool that lets you run commands as another user. It is similar to doas or sudo.

null 3 Nov 27, 2021