Typst

ic.Typst compiles and renders Typst markup as formatted SVG pages, directly in the browser. It uses the typst.ts WASM compiler, so no server or internet connection is needed. Pages render as crisp vector graphics with working cross-references and clickable links. Typst Universe packages referenced via #import are detected automatically and downloaded by MATLAB on demand, including transitive dependencies.

Toolbar, rendering, and page gap

ToolbarOnHover controls whether zoom and export controls appear when the mouse enters the viewer (on by default). PageGap sets the vertical spacing between pages in pixels. When RenderOnChange is false, edits to Value won’t trigger automatic compilation; call render() manually instead.

Page layout

PageWidth, PageHeight, and PageMargin override the default Typst page dimensions without modifying the source. FontSize and FontFamily control the base text styling. All accept standard Typst units like "210mm", "11pt", or "1.5cm". Leave any of these empty to use the Typst defaults.

Height

Height accepts a pixel value or any CSS size string. Defaults to "100%".

Setting content and exporting

Value takes a Typst source string. When RenderOnChange is true (the default), changing it triggers compilation automatically. render() forces a manual compile, useful when RenderOnChange is false or when you want to re-render after changing page layout properties. exportPdf() compiles the source to PDF format: without arguments it opens a save dialog, or pass a file path to save directly.

t = ic.Typst();

% Set Typst source
t.Value = [
    "= Hello World"
    ""
    "This is *bold* and _italic_ text."
    ""
    "$ e^(i pi) + 1 = 0 $"
].join(newline);

% Manual render (when RenderOnChange is false)
t.RenderOnChange = false;
t.Value = newSource;
t.render();

% Export to PDF
t.exportPdf("output.pdf");

Typst Universe packages

Packages referenced with #import "@preview/..." in the source are detected automatically. MATLAB downloads the tar.gz archive from the Typst Universe CDN and caches it for the session. Transitive dependencies (packages that import other packages) are resolved recursively up to 5 levels deep. Use the Packages property to pre-load dependencies before setting Value, which avoids the retry cycle on first render.

t = ic.Typst();
t.Packages = ["@preview/cetz:0.3.4"];

t.Value = [
    "#import ""@preview/cetz:0.3.4"""
    ""
    "#cetz.canvas({"
    "  import cetz.draw: *"
    "  circle((0, 0), radius: 1)"
    "})"
].join(newline);

Images

Images referenced with #image("path") are resolved through MATLAB. Local file paths and URLs both work. MATLAB reads the file, wraps it as an ic.Asset, and the binary data is mapped into the WASM compiler’s shadow filesystem so Typst can read it during compilation.

t = ic.Typst();
t.Value = [
    "#image(""results/plot.png"", width: 50%)"
].join(newline);

Events

Compiled fires after a successful compilation with the page count. Error fires when compilation fails with the error message. Errors from package downloads or image resolution are included alongside compilation errors.

Zoom, navigation, and export

zoomIn() and zoomOut() step the zoom by 20% (range 25% to 400%). resetView() resets to 100%. scrollToPage(n) scrolls to page n in multi-page documents. render() forces a recompile, and exportPdf() exports the compiled output as a PDF file.

Custom styling

You can target .ic-typst (the container), .ic-typst__viewport (the scroll area), .ic-typst__page (individual page wrappers, visible in multi-page mode), .ic-typst__controls (the hover toolbar), and .ic-typst__btn (toolbar buttons).

t = ic.Typst();
t.Value = mySource;

% Dark container with subtle blue glow
t.css.style(".ic-typst", ...
    "border_radius", "6px", ...
    "border_color", "#1e3a5f", ...
    "box_shadow", "0 0 16px rgba(56, 139, 253, 0.12)");

% Dark viewport
t.css.style(".ic-typst__viewport", ...
    "background_color", "#0d1117");

% Dark page cards with blue-tinted border
t.css.style(".ic-typst__page", ...
    "background_color", "#161b22", ...
    "border_color", "#30363d", ...
    "box_shadow", "0 2px 8px rgba(0, 0, 0, 0.4)");

% Invert page SVG for dark-on-light content
t.css.style(".ic-typst__page svg", ...
    "filter", "invert(0.88) hue-rotate(180deg)");

% Translucent toolbar
t.css.style(".ic-typst__controls", ...
    "background_color", "rgba(22, 27, 34, 0.9)", ...
    "border_color", "#30363d", ...
    "border_radius", "16px");

t.css.style(".ic-typst__btn:hover", ...
    "color", "#58a6ff", ...
    "background_color", "#21262d");