Board-Tex

A minimalistic, browser-based LaTeX equation renderer designed for creating presentation-ready math equations. Perfect for quickly generating high-quality equation screenshots for slides.

✨ Features

• Live LaTeX Rendering - Instant preview with MathJax
• Custom Color Themes - Create unlimited color palettes for text and background
• Custom Commands - Define your own \newcommand macros
• Area Selection - Select and copy specific equation regions as PNG
• Persistent Storage - All your themes, content, and commands are saved automatically
• Keyboard-Driven - Fast workflow with keyboard shortcuts
• Zero Dependencies - Single HTML file, works offline

🎬 Live Demo

Watch Board-Tex in Action

See Board-Tex in action: live LaTeX rendering, theme switching, area selection, and more!

💡 Built with Agentic AI: This project was developed through an iterative, collaborative workflow using AI coding assistants. The development process showcased modern "vibe-coding" techniques—rapid prototyping, real-time iteration, and seamless human-AI collaboration. Features were built together, refined through conversation, and evolved organically from concept to production-ready code. This demonstrates the power of agentic AI in accelerating development while maintaining code quality and architectural clarity.

Note: Replace YOUR_VIDEO_ID in the badge above with your actual YouTube video ID once you've uploaded your demo video.

🚀 Quick Start

1. Start a local server (recommended; ES modules need it in most browsers):

make serve

2. Open index.html in your browser via http://127.0.0.1:8000/
3. Start typing LaTeX equations

Or use it online: GitHub Pages

⌨️ Keyboard Shortcuts

Key	Action
Tab	Toggle LaTeX editor
Shift+Enter	Cycle sessions (tabs)
L	Open templates (quantum examples → creates a new session tab)
Ctrl+Shift+L	Open templates even while typing (avoids browser-reserved Ctrl+L)
S	Enter area selection mode
C	Open commands panel
Ctrl+1-9	Switch between themes
Ctrl+Click (in editor)	Scroll the board to the corresponding position
H	Show help / shortcuts overlay
Esc	Close any open panel

📖 Usage Guide

Writing Equations

1. Press Tab to open the editor
2. Type your LaTeX code (e.g., $$\ket{\psi} = \alpha\ket{0} + \beta\ket{1}$$)
3. Press Tab again to hide the editor and see your equation
4. Equations render automatically as you type

Custom Themes

Create a new theme:

• Click the + button (top-right)
• Pick text and background colors
• Click "Save"

Edit existing theme:

• Right-click any theme button
• Adjust colors
• Click "Save"

Delete theme:

• Drag a theme button to the 🗑️ trash icon (bottom-right)
• Or right-click → Delete

Keyboard shortcuts:

• Ctrl+1 through Ctrl+9 switch themes instantly

Custom Commands

Press C to open the commands panel where you can:

• Define custom \newcommand macros
• Pre-loaded with physics notation (\bra, \ket, \braket, \expect)
• Pre-loaded with math sets (\R, \C, \N, \Z)

Example:

\newcommand{\myop}{\hat{O}}
\newcommand{\state}[1]{\ket{#1}}

Commands are automatically available in all your equations!

Copying Equations

Area Selection:

1. Press S to enter selection mode
2. Click and drag to select the area you want
3. Release to copy as PNG
4. Paste directly into Google Slides, PowerPoint, etc.

The selection tool captures exactly what you see on screen with high resolution.

Quantum Circuits

Board‑Tex supports Quantikz-style circuit blocks rendered instantly in-browser (for screenshot/copy).

Write a Quantikz block like this:

:::quantikz
\begin{quantikz}
\lstick{$|0\rangle$} & \gate{H} & \ctrl{1} & \qw \\
\lstick{$|0\rangle$} & \qw      & \targ{}  & \qw
\end{quantikz}
:::

Supported Quantikz subset (for instant rendering): \lstick, \gate, \ctrl, \targ, \qw, \swap, \targX, \meter.

Legacy (still supported): :::circuit ... ::: uses the older opcode-style syntax.

🎨 Default Themes

• Dark - White text on black background
• Light - Black text on white background
• Yellow - Yellow text on black background
• Cyan - Cyan text on black background

All themes can be customized or deleted (except you must keep at least one).

💾 Data Storage

All data is stored locally in your browser using localStorage:

• ✅ Themes - Your custom color palettes
• ✅ Content - Your LaTeX equations
• ✅ Commands - Your custom macros
• ✅ Current theme - Which theme is active

Privacy: Nothing is sent to any server. Everything stays in your browser.

To clear data: Open browser DevTools (F12) → Console → type: localStorage.clear()

🛠️ Technical Details

• Math Rendering: MathJax 3 (CHTML output)
• Image Capture: dom-to-image-more
• Storage: Browser localStorage API
• No build process - Static files (HTML + CSS + JS modules)

Project structure (modular)

• index.html: App shell (loads css/app.css + js/app.js)
• latex-slides.html: Alternate entry point, same code
• css/app.css: Styles
• js/app.js: App bootstrap/wiring
• js/themes.js: Themes + theme editor + drag-to-delete
• js/commands.js: Custom LaTeX commands panel
• js/render.js: MathJax rendering + content persistence
• js/selection.js: Area selection + clipboard copy (PNG)
• js/shortcuts.js: Keyboard shortcuts
• js/storage.js: localStorage persistence
• js/config.js: Defaults + storage keys
• js/utils.js: Small utilities

📝 Example LaTeX

Quantum Mechanics

$$\ket{\psi} = \alpha\ket{0} + \beta\ket{1}$$
$$\braket{\psi}{\phi} = \sum_i c_i^* d_i$$
$$\expect{H} = \bra{\psi} H \ket{\psi}$$

Linear Algebra

$$A = \begin{pmatrix} a & b \\ c & d \end{pmatrix}$$
$$\det(A) = ad - bc$$

Calculus

$$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$
$$\frac{d}{dx}\left( x^n \right) = nx^{n-1}$$

🤝 Contributing

Contributions welcome! The app is now split into modules, so:

1. Fork the repository
2. Make your changes in js/ / css/ (keep index.html minimal)
3. Test thoroughly
4. Submit a pull request

✅ To-do / Roadmap

1. Add different sub-tabs keeping different sessions
2. Fix the position of the board: when I write in LaTeX (using Tab), the board position moves towards its center. If the board grows with equations then one needs to scroll up and down, and this is very annoying
3. Having an autocompletion tool
4. Being able to include quantum circuits

📄 License

MIT License - feel free to use, modify, and distribute!

🙏 Acknowledgments

• MathJax - Beautiful math rendering
• dom-to-image-more - High-quality image capture
• Claude (Anthropic) - Collaborative development partner and agentic AI assistant throughout the entire build process

🤖 About the Development Process

This project exemplifies modern agentic AI-assisted development. Built through an iterative, conversational workflow where:

• Rapid iteration - Features were prototyped, refined, and deployed in real-time collaboration
• Vibe-coding - Natural, fluid development process combining human intuition with AI capabilities
• Modular architecture - Clean, maintainable code structure emerged organically through collaborative design
• Zero to production - From initial concept to feature-complete application, all built together

The result is a polished, production-ready tool that showcases what's possible when developers and AI work as true partners in the coding process.

💡 Tips

• Zoom in your browser (Ctrl/Cmd +) for higher resolution screenshots
• Use custom commands to speed up repetitive notation
• Create theme presets for different presentation styles
• The editor auto-saves - close and reopen, your work is still there!
• Onboarding: On page load, an intro overlay appears and dismisses on first click/keypress (inspired by hydra.ojack.xyz).

---

Made with ❤️ for the LaTeX community