An interactive web playground for the Typstyle formatter for Typst documents.

Try it at https://enter-tainer.github.io/typstyle/playground

• 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
• Biome for linting and formatting

• Node.js 18+
• pnpm for package management
• Modern browser with WebAssembly support

# Development
pnpm dev              # Start Vite development server with hot reload
pnpm preview          # Preview production build locally

# Building
pnpm build            # TypeScript compilation + Vite production build
pnpm dev:wasm         # Build Typstyle WASM module in development mode
pnpm build:wasm       # Build Typstyle WASM module for production

# Code Quality
pnpm lint             # Run Biome linter to check for issues
pnpm format           # Auto-format code with Biome
pnpm check            # Run Biome linter and formatter together

Typstyle is compiled to WebAssembly using wasm-pack and loaded directly in the browser for client-side formatting without server dependencies.

Typst language support is configured with grammar and language definitions adapted from Tinymist, providing syntax highlighting and editor features for Typst documents.

Monaco Editor doesn't natively support .tmLanguage.json files, so we use vscode-textmate (including vscode-oniguruma) to convert TextMate grammars into Monaco-acceptable format, enabling rich syntax highlighting and token recognition.

• Typst Language Support: TextMate grammar and language configuration from Tinymist
• Design Inspiration: Ruff Playground and Biome Playground
• UI Components: DaisyUI for beautiful Tailwind CSS components
• Theme Inspiration: Color palette inspired by Komeiji Koishi

Contributions welcome! Submit issues and PRs to the main Typstyle repository.

Apache-2.0 License - see LICENSE for details.