Skip to main content
Opal Editor provides a dual-mode editing experience that lets you switch between visual rich-text editing and source code editing for markdown files.

​
Editing Modes

Opal supports two primary editing modes for markdown files:
The rich-text editor provides a WYSIWYG (What You See Is What You Get) experience powered by MDXEditor. It includes:
  • Live preview of formatted content
  • Toolbar with formatting controls
  • Inline image handling
  • Table editing
  • Code block syntax highlighting
  • Admonitions (callouts)

​
Switching Between Modes

You can switch between editing modes at any time:
1

Use the keyboard shortcut

Press Cmd + ; (Mac) or Ctrl + ; (Windows/Linux) to toggle between rich text and source mode
2

Use the toolbar button

Click the Source or Rich Text button in the editor toolbar
Source mode is automatically activated when git conflicts are detected in a file

​
Editor Features

​
Rich Text Editor

The rich-text editor includes these formatting tools:
  • Headings: H1 through H4 levels
  • Lists: Ordered and unordered lists
  • Links: Insert and edit hyperlinks
  • Images: Upload and embed images
  • Tables: Create and edit markdown tables
  • Code blocks: Insert fenced code blocks with language selection
  • Quotes: Block quotes for emphasis
  • Thematic breaks: Horizontal rules
  • Search: Find and replace text within the document

​
Source Editor

The source editor provides syntax highlighting for:
  • Markdown (.md, .mdx)
  • JavaScript/TypeScript (.js, .ts, .tsx)
  • CSS (.css)
  • HTML (.html)
  • JSON (.json)
  • EJS templates (.ejs, .eta)
  • Mustache templates (.mustache)
  • Nunjucks templates (.njk, .nunjucks)
  • Liquid templates (.liquid)
Customize your editing experience with these options (available in the toolbar):
  • Spellcheck: Toggle browser spellchecking
  • Vim Mode: Enable vim keybindings (source mode only)
  • Git Conflict Resolution: Enable/disable the conflict resolution UI

​
Keyboard Shortcuts

Access the full keyboard shortcuts reference by pressing Cmd + K (Mac) or Ctrl + K (Windows/Linux)
Essential shortcuts:
ActionMacWindows/Linux
Focus editorCmd + ECtrl + E
Toggle source/richCmd + ;Ctrl + ;
Exit editorEsc EscEsc Esc
Save (auto)AutomaticAutomatic

​
Edit History

Opal automatically tracks your edit history for main files:
1

Access history

Click the History button in the editor toolbar (available for main workspace files)
2

Browse versions

View thumbnails of previous versions with timestamps
3

Restore a version

Click a version to preview it, then restore if desired
Edit history is stored locally in IndexedDB and includes visual previews for quick identification

​
Working with Images

Images are automatically optimized when you upload them:
  1. Upload: Drag and drop images into the editor or use the image toolbar button
  2. Optimization: Images are automatically compressed and converted to web-friendly formats
  3. Thumbnails: Thumbnails are generated for quick preview in the file tree
  4. References: Image paths are automatically updated when you move or rename files
Supported image formats: JPEG, PNG, GIF, WebP, SVG. Images are optimized to balance quality and file size.

​
Live Preview

While editing markdown, CSS, or HTML files, you can view a live preview:
  • Click the Preview button in the toolbar to open the live preview pane
  • The preview updates as you type (debounced for performance)
  • Preview supports scroll synchronization with the editor
  • Works with both rich text and source modes

​
Auto-Save

All changes are automatically saved:
  • Edits are debounced (saved after you stop typing)
  • No manual save action required
  • Save status is indicated in the UI
  • Changes persist immediately to the workspace storage
You can verify files are saved by checking the git status indicator — unsaved changes appear as uncommitted modifications

Build docs developers (and LLMs) love

Get started for freeTalk to us