Typstyle Docs

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

cd playground

# Development
pnpm install        # Install dependencies
pnpm dev            # Start development server with hot reload
pnpm preview        # Preview production build locally

# Building
pnpm build          # Production build
pnpm build:wasm     # Build Typstyle WASM module

# Code Quality
pnpm check          # Run linter and formatter
cd playground

# Development
pnpm install        # Install dependencies
pnpm dev            # Start development server with hot reload
pnpm preview        # Preview production build locally

# Building
pnpm build          # Production build
pnpm build:wasm     # Build Typstyle WASM module

# Code Quality
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

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