Live Preview
Experience real-time LaTeX equation rendering with the built-in live preview feature.
Live Preview provides instant visual feedback as you write LaTeX equations. See your mathematical expressions render in real-time without having to save or publish your changes.
- ⚡ Real-time Rendering - See changes instantly as you type
- 🎨 Split-Pane Editor - Code on left, preview on right
- 🔄 Auto-Update - Preview updates automatically
- 🎯 Syntax Validation - Immediate error feedback
- 📱 Responsive Design - Works on all screen sizes
┌─────────────────────────┬─────────────────────────┐
│ LaTeX Editor │ Live Preview │
│ │ │
│ \[ │ │
│ E = mc^2 │ E = mc² │
│ \] │ │
│ │ │
└─────────────────────────┴─────────────────────────┘
Left Pane: LaTeX Editor
- Syntax-highlighted code editor
- Write and edit LaTeX code
- Auto-completion for common commands
- Line numbers for easy navigation
Right Pane: Preview
- Real-time rendered output
- Shows exactly how your equation will appear
- Alignment controls (left/center/right)
- Instant error messages
- Insert a LaTeX macro on your page
- The editor opens automatically with live preview
- Start typing your LaTeX code
- Watch the preview update in real-time
As you type:
\int
Preview shows: ∫
Continue typing:
\int_{-\infty}^{\infty}
Preview updates: ∫₋∞^∞
Complete the equation:
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
Preview shows the full rendered equation.
- Click on any LaTeX macro
- The editor opens with your existing code
- Make changes in the left pane
- Preview updates automatically
- Click Save when satisfied
Test different alignments in real-time:
Left Align
- Click the left align button
- Preview updates immediately
- Equation aligns to left margin
Center Align (Default)
- Click the center align button
- Preview centers the equation
- Most common for display equations
Right Align
- Click the right align button
- Preview aligns to right margin
- Useful for specific formatting needs
The preview helps catch errors immediately:
Syntax Error:
\frac{1}{2
Preview shows: ❌ Error: Missing closing brace
Unknown Command:
\unknowncommand
Preview shows: ❌ Error: Undefined control sequence
Fixed Code:
\frac{1}{2}
Preview shows: ½ ✅
- Hover over the divider between panes
- Drag left or right to resize
- Release when satisfied
Presets:
- 50/50 split (default)
- 60/40 (more code space)
- 40/60 (more preview space)
💡 Tip: Give more space to the pane you're focusing on.
| Shortcut |
Action |
Ctrl/Cmd + S |
Save equation |
Ctrl/Cmd + Enter |
Save and close |
Esc |
Close without saving |
Ctrl/Cmd + Z |
Undo |
Ctrl/Cmd + Y |
Redo |
Auto-Indentation
- Automatic code formatting
- Proper nesting for environments
Syntax Highlighting
- Commands highlighted in color
- Easier to spot errors
Bracket Matching
- Matching braces highlighted
- Helps balance parentheses
While editing, access the formula library:
- Click "Formula Library" button (📚)
- Browse common equations
- Click any formula to insert
- Preview updates with new content
- Greek Letters
- Common Formulas
- Calculus
- Linear Algebra
- Statistics
- Physics
- Chemistry
- Use the preview - Verify rendering before saving
- Test alignment - Try different alignments
- Check for errors - Watch for error messages
- Adjust pane sizes - Optimize for your workflow
- Save frequently - Don't lose your work
- Don't ignore errors - Fix syntax issues before saving
- Don't rush - Take time to verify output
- Don't close without saving - You'll lose changes
- Don't overcomplicate - Keep LaTeX simple when possible
✅ Final rendered appearance
✅ Alignment
✅ Font size relative to page
✅ Dark/light mode
✅ Error messages
❌ Exact page context
❌ Surrounding Confluence content
❌ How it looks in different browsers
❌ Mobile view (use responsive preview)
Note: Always preview the full page after saving to see the equation in context.
Problem: Changes don't appear in preview
Solutions:
- Wait a moment - there's a small delay
- Check for syntax errors
- Try typing in a different part of the code
- Refresh the editor (close and reopen)
Problem: Red error message in preview
Solutions:
- Read the error message carefully
- Check for:
- Missing closing braces
}
- Unbalanced delimiters
- Typos in command names
- Unsupported commands
- Fix the error and preview updates
Problem: Can't drag the divider
Solutions:
- Ensure you're hovering over the divider
- Try clicking and dragging again
- Refresh the page
- Use a different browser
Problem: Right pane shows nothing
Solutions:
- Check if you've entered any LaTeX code
- Verify code has valid delimiters
- Look for syntax errors
- Try entering a simple equation:
E = mc^2
- ✅ Keep equations reasonably sized
- ✅ Avoid extremely complex nested structures
- ✅ Use proper LaTeX syntax
- ⚠️ Very large matrices may render slowly
- ⚠️ Excessive nesting impacts performance
The live preview is optimized for:
- Up to 500 lines of LaTeX code
- Equations with up to 50 elements
- Matrices up to 10×10
For larger content:
- Preview may have slight delay
- Consider breaking into multiple macros
- Simplify where possible
- Split-pane layout maintained
- Panes stack vertically in portrait mode
- Horizontal scroll for wide equations
- Touch-friendly controls
- Editor and preview in tabs
- Swipe to switch between views
- Full-width editing
- Save button always visible
Use the preview to test LaTeX commands:
\alpha \beta \gamma
See Greek letters instantly.
The preview is a great learning tool:
- Type commands
- See results immediately
- Learn by experimenting
Use preview to isolate errors:
- Comment out sections
- Find the problematic line
- Fix and verify
Test different LaTeX approaches:
% Approach 1
\frac{a}{b}
% Approach 2
a/b
Choose what looks best.
- Editor announces changes
- Error messages are read aloud
- Keyboard navigation supported
- Preview respects system settings
- Adequate contrast maintained
- Clear visual separation
|