Playground

This is a live, interactive playground for the SvelTeX preprocessor. Edit the SvelTeX source on the left, and watch each stage of the preprocessing pipeline update on the right.

SvelTeX preprocesses a document in a few significant stages:

1. Escaped document — potentially tricky content (fenced code blocks, inline code spans, math, and verbatim environments) is pulled out and replaced with placeholders, so that the Markdown processor leaves it untouched.
2. Rendered Markdown — the escaped document is handed to the Markdown backend, which turns the Markdown into HTML.
3. Svelte output — the processed snippets are substituted back in, and the final Svelte component is emitted. This is what the Svelte compiler receives.

The tabs below correspond to these stages, with the final Svelte output selected by default.

The playground runs entirely client-side: the SvelTeX preprocessor is loaded into a Web Worker, and only its text-transformation routine (Sveltex.trace) is invoked. Your document is never executed, mounted, or rendered as a Svelte component — every tab shows inert, escaped text. There is no server involved.

Input+page.sveltex

--- title: SvelTeX Playground --- # Hello, {data.title}! This document is being preprocessed **live, in your browser**. Edit the text on the left and watch each pipeline stage update. Prose supports _Markdown_: **bold**, `inline code`, and [links](https://sveltex.dev). Inline math like $a^2 + b^2 = c^2$ and display math: $$ \int_0^1 x \, \mathrm{d}x = \frac{1}{2} $$ A fenced code block: ```ts const greet = (name: string): string => `Hello, ${name}!`; ```

OutputPreprocessing…

Loading the SvelTeX preprocessor…

Runs entirely in your browser via a Web Worker. The playground only performs SvelTeX's text transformation (Sveltex.trace); your document's code is never executed.

The playground uses SvelTeX's fuller, recommended backends: the unified Markdown backend (powered by remark and rehype), the shiki code backend (syntax-highlighted code), and the mathjax math backend. For the full list of available backends and configuration options, see the Markdown, Code, and Math pages.