TypstPad

A simple and elegant online Typst formula editor with real-time preview.

✨ Features

• 🎨 Real-time Preview - See your Typst formulas rendered instantly
• 📝 Monaco Editor - Professional code editing experience with syntax highlighting
• 🔤 Auto Complete - Intelligent Typst symbol and function suggestions
• 🌓 Theme Support - Light, dark, and system theme modes
• 📤 Multiple Export Formats
  • PNG (transparent background)
  • JPG (white background)
  • SVG (vector graphics)
  • HTML
  • Typst source code
• 📋 Clipboard Support - Copy images and code directly to clipboard
• 🔎 Image to Typst (Experimental) - Recognize a tightly cropped printed formula locally in your browser
• 🔗 Share Links - Generate shareable URLs with encoded formulas
• 💾 Formula Library - Save and manage your formulas locally
  • Auto-save draft for seamless workflow
  • Save, load, rename, and delete formulas
• ⚙️ Customizable Settings
  • Adjustable font size
  • Line numbers toggle
  • PNG export scale (1x-4x)
  • Dark mode preview options

🚀 Quick Start

Prerequisites

• Node.js 20+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/dbccccccc/TypstPad.git

# Navigate to project directory
cd TypstPad

# Install dependencies
npm install

Development

# Start development server
npm run dev

Visit http://localhost:5173 to see the application.

Build

# Build for production
npm run build

# Preview production build
npm run preview

🐳 Docker Deployment

Using Pre-built Image

Pull and run the latest stable version from GitHub Container Registry:

# Pull the latest image
docker pull ghcr.io/dbccccccc/typstpad:latest

# Run the container
docker run -d -p 8080:80 --name typstpad ghcr.io/dbccccccc/typstpad:latest

# Access the application
# Open http://localhost:8080 in your browser

Using Specific Version

# Pull a specific version
docker pull ghcr.io/dbccccccc/typstpad:v1.0.0

# Run the container
docker run -d -p 8080:80 ghcr.io/dbccccccc/typstpad:v1.0.0

Build Docker Image Locally

# Build the image
docker build -t typstpad .

# Run the container
docker run -d -p 8080:80 --name typstpad typstpad

# Stop the container
docker stop typstpad

# Remove the container
docker rm typstpad

Docker Compose

Create a docker-compose.yml file:

version: '3.8'

services:
  typstpad:
    image: ghcr.io/dbccccccc/typstpad:latest
    ports:
      - "8080:80"
    restart: unless-stopped

Then run:

docker-compose up -d

Important Notes

• The Docker image includes Nginx with required CORS headers for SharedArrayBuffer support
• Default port is 80 inside the container, map it to any host port you prefer
• Currently supports linux/amd64 platform

🛠️ Tech Stack

• Frontend Framework: React 18
• Language: TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• Editor: Monaco Editor
• Syntax Highlighting: Shiki
• Typst Rendering: Typst 0.14.2 via @myriaddreamin/typst.ts 0.7
• UI Components: Radix UI
• Icons: Lucide React

📁 Project Structure

typstpad/
├── src/
│   ├── components/
│   │   ├── Editor/           # Monaco editor component
│   │   ├── Preview/          # Typst preview component
│   │   ├── ExportPanel/      # Export and share functionality
│   │   ├── SettingsDialog/   # Settings configuration
│   │   ├── Header/           # Application header
│   │   ├── ErrorDisplay/     # Error message display
│   │   └── ui/               # Reusable UI components
│   ├── contexts/
│   │   └── ThemeContext.tsx  # Theme management
│   ├── services/
│   │   └── typst.ts          # Typst compilation service
│   ├── utils/
│   │   ├── export.ts         # Export utilities
│   │   ├── share.ts          # Share URL generation
│   │   └── shikiSetup.ts     # Syntax highlighting setup
│   ├── grammars/
│   │   └── typst.tmLanguage.json  # Typst language grammar
│   ├── App.tsx               # Main application component
│   ├── main.tsx              # Application entry point
│   └── index.css             # Global styles
├── public/                   # Static assets
├── index.html                # HTML template
├── package.json              # Dependencies and scripts
├── tsconfig.json             # TypeScript configuration
├── vite.config.ts            # Vite configuration
└── tailwind.config.js        # Tailwind CSS configuration

📖 Usage

Basic Example

1. Enter your Typst formula in the editor:

   $ sum_(i=1)^n i = (n(n+1))/2 $

2. See the rendered preview in real-time

3. Export or share:

   • Click "Export Image" to download as PNG/JPG/SVG
   • Click "Export Code" to copy/download the source code
   • Click "Share" to generate a shareable URL

Image to Typst (Experimental)

Select Image to Typst in the input panel, then choose, drop, or paste a PNG, JPEG, or WebP image containing one tightly cropped printed formula. Recognition runs locally in the browser; the image is not uploaded. Review every generated token before placing the draft in the editor.

The included Phase 10 IBEM model is experimental and is substantially less accurate on long or displayed formulas. It is not intended for handwriting, full-page segmentation, photographs, or arbitrary screenshots. See the bundled model card and third-party notices under public/im2typst for qualification, provenance, and license details.

Settings

Access settings by clicking the gear icon in the header.

Keyboard Shortcuts

• Standard Monaco editor shortcuts apply
• See Monaco Editor documentation for complete list

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Typst - The typesetting system
• typst.ts - Typst WebAssembly compiler
• IBEM - Mathematical-expression training dataset (CC BY 4.0)
• ONNX Runtime - Local browser model execution
• Monaco Editor - Code editor
• Shiki - Syntax highlighter
• Radix UI - UI components
• Tailwind CSS - CSS framework
• latexlive.com - Part of the design is inspired by this tool

🗺️ Roadmap

• Formula library for saving and managing formulas
• Multi-language support
• More export format support

---

Made with ❤️ using Typst