Live Preview

​

What is Live Preview?

​

Key Features

• ⚡ 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

​

How Live Preview Works

​

Editor Layout

┌─────────────────────────┬─────────────────────────┐
│    LaTeX Editor         │    Live Preview         │
│                         │                         │
│  \[                     │                         │
│    E = mc^2             │       E = mc²           │
│  \]                     │                         │
│                         │                         │
└─────────────────────────┴─────────────────────────┘

​

The Split-Pane Interface

• Syntax-highlighted code editor
• Write and edit LaTeX code
• Auto-completion for common commands
• Line numbers for easy navigation

• Real-time rendered output
• Shows exactly how your equation will appear
• Alignment controls (left/center/right)
• Instant error messages

​

Using Live Preview

​

Opening the Editor

1. Insert a LaTeX macro on your page
2. The editor opens automatically with live preview
3. Start typing your LaTeX code
4. Watch the preview update in real-time

​

Writing Equations

\int

\int_{-\infty}^{\infty}

\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

​

Editing Existing Equations

1. Click on any LaTeX macro
2. The editor opens with your existing code
3. Make changes in the left pane
4. Preview updates automatically
5. Click Save when satisfied

​

Preview Features

​

Alignment Preview

• Click the left align button
• Preview updates immediately
• Equation aligns to left margin

• Click the center align button
• Preview centers the equation
• Most common for display equations

• Click the right align button
• Preview aligns to right margin
• Useful for specific formatting needs

​

Error Detection

\frac{1}{2

\unknowncommand

\frac{1}{2}

​

Resizable Panes

​

Adjusting Pane Width

1. Hover over the divider between panes
2. Drag left or right to resize
3. Release when satisfied

• 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.

​

Editor Shortcuts

​

Keyboard Shortcuts

​

Editor Features

• Automatic code formatting
• Proper nesting for environments

• Commands highlighted in color
• Easier to spot errors

• Matching braces highlighted
• Helps balance parentheses

​

Formula Library Integration

​

Quick Insert

1. Click “Formula Library” button (📚)
2. Browse common equations
3. Click any formula to insert
4. Preview updates with new content

​

Categories

• Greek Letters
• Common Formulas
• Calculus
• Linear Algebra
• Statistics
• Physics
• Chemistry

​

Best Practices

​

✅ Do’s

1. Use the preview - Verify rendering before saving
2. Test alignment - Try different alignments
3. Check for errors - Watch for error messages
4. Adjust pane sizes - Optimize for your workflow
5. Save frequently - Don’t lose your work

​

❌ Don’ts

1. Don’t ignore errors - Fix syntax issues before saving
2. Don’t rush - Take time to verify output
3. Don’t close without saving - You’ll lose changes
4. Don’t overcomplicate - Keep LaTeX simple when possible

​

Preview Limitations

​

What Preview Shows

​

What Preview Doesn’t Show

Note: Always preview the full page after saving to see the equation in context.

​

Troubleshooting

​

Preview Not Updating

1. Wait a moment - there’s a small delay
2. Check for syntax errors
3. Try typing in a different part of the code
4. Refresh the editor (close and reopen)

​

Preview Shows Error

1. Read the error message carefully
2. Check for:
   • Missing closing braces }
   • Unbalanced delimiters
   • Typos in command names
   • Unsupported commands
3. Fix the error and preview updates

​

Panes Won’t Resize

1. Ensure you’re hovering over the divider
2. Try clicking and dragging again
3. Refresh the page
4. Use a different browser

​

Preview is Blank

1. Check if you’ve entered any LaTeX code
2. Verify code has valid delimiters
3. Look for syntax errors
4. Try entering a simple equation: E = mc^2

​

Performance Tips

​

For Smooth Preview

• ✅ Keep equations reasonably sized
• ✅ Avoid extremely complex nested structures
• ✅ Use proper LaTeX syntax
• ⚠️ Very large matrices may render slowly
• ⚠️ Excessive nesting impacts performance

​

Editor Performance

• Up to 500 lines of LaTeX code
• Equations with up to 50 elements
• Matrices up to 10×10

• Preview may have slight delay
• Consider breaking into multiple macros
• Simplify where possible

​

Mobile Experience

​

Tablet View

• Split-pane layout maintained
• Panes stack vertically in portrait mode
• Horizontal scroll for wide equations
• Touch-friendly controls

​

Phone View

• Editor and preview in tabs
• Swipe to switch between views
• Full-width editing
• Save button always visible

​

Advanced Tips

​

1. Quick Testing

\alpha \beta \gamma

​

2. Learning LaTeX

• Type commands
• See results immediately
• Learn by experimenting

​

3. Debugging

• Comment out sections
• Find the problematic line
• Fix and verify

​

4. Comparing Approaches

% Approach 1
\frac{a}{b}

% Approach 2
a/b

​

Accessibility

​

Screen Reader Support

• Editor announces changes
• Error messages are read aloud
• Keyboard navigation supported

​

High Contrast Mode

• Preview respects system settings
• Adequate contrast maintained
• Clear visual separation

​

Related Documentation

• 📖 Inline Macro - Inline equations
• 📖 Block Macro - Display equations
• 📖 Dark Mode - Theme support
• ❓ FAQ

​

Need Help?

• 💬 Contact Support
• 📚 View All Documentation
• 🎥 Video Tutorial (Coming Soon)