1. Introduction
  3. User Guide
  4. 1. Installation
  5. 2. Quick Start
  6. 3. Changelog
  8. Usage
  9. 4. Command Line Interface
  10. 5. Editor Integration
  12. Features
  13. 6. Formatting Features
    1. 6.1. Markup
    2. 6.2. Code
    3. 6.3. Math Equations
    4. 6.4. Tables
  15. 7. Escape Hatch
  16. 8. Limitations
  18. Advanced
  19. 9. How It Works
  20. 10. Developer Guide
    1. 10.1. Core
    2. 10.2. Documentation
    3. 10.3. Playground

typstyle

#

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

#

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:wasm or pnpm build:wasm) after changes to typstyle-core or typstyle-wasm crates.

#

Development Workflow

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