Playground Development

The typstyle playground is an interactive web application for trying typstyle formatting in the browser.

Tech Stack

React 19 + TypeScript + Vite
TailwindCSS 4.x + DaisyUI for styling
Monaco Editor with custom Typst language support
Typstyle WASM for client-side formatting
pnpm for package management

Quick Start

Prerequisites: Node.js 18+ and pnpm

1
cd playground
2
3
# Development
4
pnpm install        # Install dependencies
5
pnpm dev            # Start development server with hot reload
6
pnpm preview        # Preview production build locally
7
8
# Building
9
pnpm build          # Production build
10
pnpm build:wasm     # Build Typstyle WASM module
11
12
# Code Quality
13
pnpm check          # Run linter and formatter

1
cd playground
2
3
# Development
4
pnpm install        # Install dependencies
5
pnpm dev            # Start development server with hot reload
6
pnpm preview        # Preview production build locally
7
8
# Building
9
pnpm build          # Production build
10
pnpm build:wasm     # Build Typstyle WASM module
11
12
# Code Quality
13
pnpm check          # Run linter and formatter

Key Components

WASM Integration: Typstyle compiled to WebAssembly for client-side formatting
Monaco Editor: Custom Typst language support with TextMate grammar from Tinymist

❗Important

Rebuild WASM bindings (pnpm dev:wasmpnpm dev:wasm or pnpm build:wasmpnpm build:wasm) after changes to typstyle-coretypstyle-core or typstyle-wasmtypstyle-wasm crates.

Development Workflow

Code changes: Modify TypeScript/React code in src/src/
WASM changes: Rebuild WASM if Rust code changed
Test: Use pnpm devpnpm dev for development server
Deploy: Build with pnpm buildpnpm build and deploy dist/dist/ as static site