██╗ █████╗ ████████╗███████╗██╗ ██╗ ██████╗ ██████╗ █████╗ ███████╗████████╗
██║ ██╔══██╗╚══██╔══╝██╔════╝╚██╗██╔╝ ██╔════╝██╔══██╗██╔══██╗██╔════╝╚══██╔══╝
██║ ███████║ ██║ █████╗ ╚███╔╝ ██║ ██████╔╝███████║█████╗ ██║
██║ ██╔══██║ ██║ ██╔══╝ ██╔██╗ ██║ ██╔══██╗██╔══██║██╔══╝ ██║
███████╗██║ ██║ ██║ ███████╗██╔╝ ██╗ ╚██████╗██║ ██║██║ ██║██║ ██║
╚══════╝╚═╝ ╚═╝ ╚═╝ ╚══════╝╚═╝ ╚═╝ ╚═════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
v4.0 · Multi-file architecture · UI overhaul
Premium browser-based LaTeX editor
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
LatexCraft is a modern, browser-based LaTeX writing environment designed for writing, editing, previewing, analyzing, and exporting LaTeX documents.
Features · Getting Started · Architecture · Shortcuts · Tech Stack
LatexCraft is a feature-rich, browser-based LaTeX editor built to provide a focused and productive environment for technical and academic writing.
The application combines a professional code editor, live document preview, mathematical rendering, intelligent autocomplete, syntax analysis, document statistics, bibliography management, snapshots, multiple export formats, and customizable themes in a single browser-based workspace.
LatexCraft is designed around a client-side, multi-module architecture, allowing the editor, preview engine, storage layer, export system, statistics engine, and UI components to remain organized and independently maintainable.
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ v4.0 — MULTI-FILE ARCHITECTURE + UI OVERHAUL ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
- Refactored into a modular ES-module architecture.
- Organized application logic across dedicated JavaScript modules.
- Clear separation between editor, preview, storage, export, statistics, UI, and utility systems.
- Reduced coupling between application components.
- Complete interface overhaul.
- Refined visual system and component styling.
- Five dedicated application themes.
- Focus Mode and Typewriter Mode.
- Improved toolbar and sidebar organization.
- Enhanced command palette and modal system.
- Document statistics.
- Reading-time analysis.
- Flesch reading ease.
- Word-goal tracking.
- Snapshot management.
- Side-by-side document comparison.
- Improved autocomplete.
- Multi-cursor editing.
- Live mathematical preview.
- Equation hover previews.
- Bibliography management.
- Bidirectional editor/preview scrolling.
- Multiple export formats.
- Overleaf-compatible project ZIP generation.
LatexCraft includes a dedicated LaTeX tokenizer that provides syntax highlighting directly within the editor.
The autocomplete system supports:
- LaTeX commands
- Environments
- References
- Citations
- Snippets
- Tab stops
- Context-aware suggestions
It includes more than 100 indexed commands and environment-related completions.
The editor analyzes common LaTeX issues including:
- Unbalanced environments
- Mismatched braces
- Math delimiter problems
- Undefined references
- Missing
\documentclass - Other structural issues
The editor provides:
- Auto-closing brackets
- Selection wrapping
- Smart indentation
- Block indentation/outdentation
- Smart
Enter - Automatic continuation of
\itemlists - Comment toggling
- Multi-line editing
- Multi-cursor editing
- Grouped undo/redo
Search functionality includes:
- Standard search
- Replace
- Regular expressions
- Case-sensitive matching
- Live match count
- Next/previous result navigation
Document state can be persisted locally using browser localStorage, allowing work to be restored when returning to the application.
LatexCraft provides a live preview environment for rendering LaTeX content while writing.
Powered by KaTeX, the preview supports mathematical expressions including:
$...$
\[...\]
equation
align
gather
multline
- Real-time rendering
- Brace-aware parsing
- Nested command handling
- Multi-argument command handling
- Table-related syntax handling
- Image embedding
- Resizable preview panel
- Preview zoom
- Bidirectional scroll synchronization
Available zoom levels:
75% · 100% · 125% · 150%
Keyboard controls:
Ctrl + = Zoom In
Ctrl + - Zoom Out
Ctrl + 0 Reset Zoom
LatexCraft includes a built-in document analysis system.
The statistics panel can provide:
- Word count
- Character count
- Sentence count
- Paragraph count
- Reading time
- Speaking time
- Average words per sentence
- Lexical diversity
LatexCraft calculates:
- Flesch Reading Ease
- Reading difficulty information
The application analyzes structural elements such as:
- Sections
- Subsections
- Equations
- Figures
- Tables
- Citations
- Labels
Set a writing target and monitor progress through the integrated word-goal tracker.
LatexCraft provides document snapshots for preserving important versions of your work.
- Manual snapshots
- Up to 30 stored snapshots
- Snapshot comparison
- Side-by-side diff view
- Myers-LCS based comparison
This makes it easier to review changes between different stages of a document.
LatexCraft includes a dedicated bibliography management system.
- Create BibTeX entries
- Edit entries
- Delete entries
- Import
.bibdata - Export bibliography data
- Manage bibliography information alongside the document
LatexCraft supports multiple document and workspace export formats.
| Format | Output | Description |
|---|---|---|
| Overleaf ZIP | main.tex + images/ + .latexmkrc + README.txt |
Complete project bundle |
.pdf |
Browser print workflow | |
| LaTeX | .tex |
Raw LaTeX source |
| HTML | .html |
Standalone HTML document |
| Markdown | .md |
Markdown with embedded images |
| Plain Text | .txt |
Plain document text |
| Workspace | .json |
Code, images, snapshots, bibliography |
| Clipboard | — | Complete source copied to clipboard |
LatexCraft provides five carefully designed visual themes.
Background: #0d0d12
Accent: #e0713a
Background: #ffffff
Accent: #d97706
Background: #002b36
Accent: #b58900
Background: #04111f
Accent: #06b6d4
Background: #faf5e8
Accent: #c0392b
LatexCraft is designed to run directly in a modern web browser.
- Modern web browser
- JavaScript enabled
- Internet connection for external CDN resources on initial load
Open the project using a local web server and load:
index.html
A local development server is recommended because the application uses native ES modules.
For example, with a simple local server:
python -m http.server 8000Then open:
http://localhost:8000
The application does not require:
npm installnode_modulespackage.json- A JavaScript bundler
- A build pipeline
latexcraft/
│
├── index.html
│
├── css/
│ ├── variables.css # Design tokens
│ ├── themes.css # Application themes
│ ├── base.css # Global reset and base styles
│ ├── components.css # Buttons, inputs, badges, tooltips
│ ├── layout.css # Topbar, toolbar, sidebar, statusbar
│ ├── editor.css # Editor and syntax overlay
│ ├── preview.css # Preview pane and document styling
│ └── modals.css # Modals, autocomplete, toasts, diff UI
│
└── js/
├── constants.js # Templates, snippets, symbols, toolbar groups
├── state.js # Application state
├── storage.js # LocalStorage persistence
├── highlighter.js # LaTeX syntax tokenizer
├── linter.js # Issue detection
├── autocomplete.js # Completion engine
├── editor.js # Editor and multi-cursor functionality
├── converter.js # Conversion, statistics, diff, BibTeX
├── exporter.js # Export and ZIP generation
├── toolbar.js # Toolbar controls
├── sidebar.js # Sidebar panels
├── preview.js # Live preview and KaTeX
├── stats.js # Document statistics
├── modals.js # Modal interfaces
├── ui.js # UI utilities and status controls
└── app.js # Application entry point
┌─────────────────────┐
│ index.html │
│ Application Shell │
└──────────┬──────────┘
│
┌──────────▼──────────┐
│ app.js │
│ Application Boot & │
│ Wiring │
└──────────┬──────────┘
│
┌────────────────────┼────────────────────┐
│ │ │
┌──────▼──────┐ ┌──────▼──────┐ ┌──────▼──────┐
│ state.js │ │ Application │ │ storage.js │
│ State │ │ Events │ │ Persistence │
└──────┬──────┘ └─────────────┘ └─────────────┘
│
┌─────────┼──────────┬──────────┬──────────┬──────────┐
▼ ▼ ▼ ▼ ▼ ▼
┌──────┐ ┌──────┐ ┌────────┐ ┌────────┐ ┌─────────┐ ┌───────┐
│Editor│ │ UI │ │Toolbar │ │Sidebar │ │ Preview │ │ Stats │
└──┬───┘ └──────┘ └────────┘ └────────┘ └────┬────┘ └───────┘
│ │
▼ ▼
┌───────────────┐ ┌────────────────┐
│ Highlighter │ │ Converter │
│ Linter │ │ LaTeX → HTML │
│ Autocomplete │ │ Diff / Stats │
└───────────────┘ │ BibTeX │
└────────────────┘
LatexCraft is organized around modular responsibilities.
State
state.js acts as the central application state layer.
Persistence
storage.js handles browser-based persistence.
Editor
Editor-specific behavior is isolated inside the editor modules.
Preview
Preview rendering and mathematical typesetting are handled independently from the editor.
Conversion
Conversion and analysis functionality is grouped into reusable processing modules.
Export
Export functionality is separated from the editor and preview systems.
UI
Interface components, dialogs, toolbars, sidebars, notifications, and application controls remain organized into dedicated modules.
| Shortcut | Action |
|---|---|
Ctrl+B |
Bold |
Ctrl+I |
Italic |
Ctrl+U |
Underline |
Ctrl+/ |
Toggle comment |
Ctrl+D |
Duplicate line |
Ctrl+L |
Select line |
Ctrl+Z |
Undo |
Ctrl+Y |
Redo |
Tab |
Indent block |
Shift+Tab |
Outdent block |
Enter |
Smart newline |
Alt+Click |
Add cursor |
Esc |
Clear extra cursors |
{ [ ( $ |
Auto-close pairs |
| Shortcut | Action |
|---|---|
Ctrl+S |
Save |
Ctrl+Shift+S |
Snapshot |
Ctrl+F |
Find |
Ctrl+H |
Find & Replace |
F3 / Shift+F3 |
Next / Previous result |
Ctrl+P |
Command palette |
Ctrl+Shift+E |
Export |
Ctrl+Shift+D |
Statistics |
F11 / Shift+F |
Focus mode |
| Shortcut | Action |
|---|---|
Ctrl+Space |
Trigger autocomplete |
↑ / ↓ |
Navigate suggestions |
Enter / Tab |
Accept suggestion |
Esc |
Dismiss |
| Shortcut | Action |
|---|---|
Ctrl+= |
Zoom in |
Ctrl+- |
Zoom out |
Ctrl+0 |
Reset zoom |
Press ? inside the application to open the shortcut reference.
┌────────────────────────────────────────────────────────────┐
│ LATEXCRAFT │
├────────────────────────────────────────────────────────────┤
│ │
│ HTML5 │
│ CSS3 │
│ JavaScript ES Modules │
│ Native Browser APIs │
│ │
│ React 18 → Minimal application support │
│ KaTeX 0.16 → Mathematical typesetting │
│ JSZip 3.10 → ZIP / Overleaf project generation │
│ FileSaver.js 2.0 → Client-side file downloads │
│ │
└────────────────────────────────────────────────────────────┘
- HTML5
- CSS3
- JavaScript ES Modules
- Native Browser APIs
- React 18
- KaTeX 0.16
- JSZip 3.10
- FileSaver.js 2.0
- LocalStorage
LatexCraft is intentionally designed around a lightweight browser architecture.
The application does not depend on a traditional bundler or compilation workflow.
There is no requirement for:
node_modules/
package.json
npm install
Core editing, previewing, analysis, and export functionality is performed in the browser.
Application state can be persisted using browser localStorage.
Selected libraries are loaded through CDN resources.
LatexCraft is designed for modern browsers supporting:
- JavaScript ES Modules
- Modern JavaScript APIs
- LocalStorage
- File APIs
- Clipboard APIs
- Drag-and-drop APIs
- Modern CSS features
Recommended browsers include current versions of:
- Google Chrome
- Microsoft Edge
- Mozilla Firefox
- Safari
LatexCraft is primarily a client-side application.
Documents and application state may be stored locally within the browser through localStorage.
The core application does not require a traditional application backend for its primary editing workflow.
External CDN resources are used for selected third-party libraries.
Users should avoid storing sensitive information in browser-based applications when their organization's privacy or security requirements prohibit local browser storage or external CDN dependencies.
The modular structure makes individual features easier to maintain.
| Area | Primary Module |
|---|---|
| Syntax highlighting | js/highlighter.js |
| Linting | js/linter.js |
| Autocomplete | js/autocomplete.js |
| Editor | js/editor.js |
| Preview | js/preview.js |
| Conversion | js/converter.js |
| Export | js/exporter.js |
| Toolbar | js/toolbar.js |
| Sidebar | js/sidebar.js |
| Statistics | js/stats.js |
| Modals | js/modals.js |
| UI | js/ui.js |
| Application boot | js/app.js |
| Themes | css/themes.css |
When extending LatexCraft:
- Keep functionality inside the appropriate module.
- Avoid unnecessary dependencies between modules.
- Preserve existing editor behavior.
- Test preview rendering after editor changes.
- Verify export functionality after conversion changes.
- Update documentation when introducing major features.
┌───────────────────────────────────────────────────────────┐
│ LATEXCRAFT │
├───────────────────────────────────────────────────────────┤
│ │
│ ✓ Professional LaTeX Editor │
│ ✓ Live Mathematical Preview │
│ ✓ Syntax Highlighting │
│ ✓ Intelligent Autocomplete │
│ ✓ Inline Linting │
│ ✓ Multi-Cursor Editing │
│ ✓ Find & Replace │
│ ✓ Local Auto-Save │
│ ✓ Document Statistics │
│ ✓ Readability Analysis │
│ ✓ Word Goal Tracking │
│ ✓ Snapshot & Diff Viewer │
│ ✓ Bibliography Manager │
│ ✓ Five Visual Themes │
│ ✓ Focus Mode │
│ ✓ Typewriter Mode │
│ ✓ Multiple Export Formats │
│ ✓ Overleaf ZIP Generation │
│ ✓ PDF Export │
│ ✓ Browser-Based Architecture │
│ │
└───────────────────────────────────────────────────────────┘
LatexCraft is distributed under the MIT License.
See the LICENSE file for the complete license terms.
LatexCraft
A modern browser-based LaTeX writing environment.
Built with HTML, CSS, JavaScript, KaTeX, and modern browser APIs.
© 2026 Rachit Tyagi · LatexCraft