Side-by-Side Comparison
Compare raw LaTeX source with visual overlays. The visual editor transforms sections, math, environments, and commands into interactive widgets while maintaining the same underlying document.
Source Mode
Visual Mode
Interactive Visual Editor
Experience visual mode switching on a single editor. Toggle between source and visual editing with Ctrl+E. In visual mode, LaTeX elements become interactive widgets. Use Ctrl+Shift+C to toggle command visibility.
Visual Editor Features
- Visual Overlays: Sections, environments, tables, and commands rendered as interactive widgets
- Mode Toggle: Switch between source and visual editing without losing context
- Interactive Math: Click equations to edit with MathLive's interface
- Command Control: Show/hide LaTeX commands in visual mode for cleaner editing
- Single Document: Visual widgets are overlays on the same document - no synchronization needed
- Direct Editing: All changes update the source document immediately
- Performance Optimized: No document conversion overhead
- Math Hover (Source Mode): Preview math expressions on hover in source mode
Getting Started
import { EditorState, EditorView } from '@codemirror/state';
import { DualLatexEditor, VisualCodeMirrorEditor } from 'codemirror-latex-visual';
import 'codemirror-latex-visual/dist/styles.css';
const cmEditor = new EditorView({
state: EditorState.create({
doc: '\\section{Title}\nSome text with $x^2$ inline math.',
extensions: [/* your extensions */]
}),
parent: document.getElementById('cm-container')
});
const dualEditor = new DualLatexEditor(
document.getElementById('editor-wrapper'),
cmEditor,
{
initialMode: 'visual',
showCommands: false,
showToolbar: true,
onModeChange: (mode) => {
console.log('Mode changed to:', mode);
}
}
);Keyboard Shortcuts
Editor Controls
- Ctrl+E - Toggle source/visual mode
- Ctrl+Shift+C - Toggle command visibility
- Ctrl+Shift+T - Toggle toolbar
- Ctrl+Shift+D - Toggle theme
Source Mode Features
- Ctrl+Shift+M - Toggle math hover
- Escape - Close math preview
- Hover over $...$ or $$...$$ for preview