Atomic Editor
Obsidian-style live preview for CodeMirror 6
Last verified:
What is Atomic Editor?
Atomic Editor is a CodeMirror 6-based markdown editor featuring Obsidian-style inline live preview. It renders headings, bold, italic, links, images, and tables in a WYSIWYG format while keeping raw markdown as the source of truth, ensuring copy, save, and interop with any other markdown tool works seamlessly.
Key features include virtualized rendering that only paints the viewport for smooth scrolling even on large documents, layout-stable inline decorations that prevent reflow when clicking into headings, WYSIWYG table editing with in-place cell editing, smart lists that continue bullets and task checkboxes automatically, fenced code syntax highlighting for 20+ languages with lazy-loading, theme support via CSS variables with dark by default and light mode via data-theme attribute, and a minimal search panel styled to match the editor.
The editor is designed for developers building markdown editors into their applications, particularly those creating knowledge base tools, note-taking apps, or AI-powered productivity software. It was originally built for Atomic, an AI-powered personal knowledge base, and is now available as a standalone open-source npm package. The React wrapper provides a simple component interface while low-level exports allow full customization for advanced use cases.
Atomic Editor pricing
Pricing model: Freemium
Free and open source under MIT license. The @atomic-editor/editor npm package is completely free with no paid tiers. Users only pay for any optional CodeMirror language grammars they choose to install for syntax highlighting (e.g., @codemirror/lang-javascript, @codemirror/lang-python). The editor is designed to be embedded in applications rather than sold as a standalone product.
Atomic Editor pros
- Obsidian-style inline live preview for WYSIWYG editing
- CodeMirror 6 foundation for modern editor capabilities
- Virtualized rendering handles 500-page documents instantly
- Layout-stable - no reflow when clicking into headings
- Inline decorations instead of block-level widget swaps
- WYSIWYG table editing with in-place cell editing
- Smart lists continue bullets and task checkboxes automatically
Atomic Editor cons
- Performance degrades at very large markdown file sizes
- Requires peer dependencies (CodeMirror, React) to install
- Fenced code is plain monospace without codeLanguages prop
- Only 11 GitHub stars - very new project
- No built-in collaboration features out of the box
- Documentation limited to README and architecture docs
- Playwright e2e tests required for regression catching
- Consumer extensions appended after built-ins may need Prec.high
- Array of extensions captured at mount requires stable reference
- No standalone desktop app - library only
Frequently asked questions about Atomic Editor
What is Atomic Editor?
Atomic Editor is a CodeMirror 6 markdown editor with Obsidian-style inline live preview. It renders headings, bold, italic, links, images, and tables WYSIWYG while keeping raw markdown as the source of truth, so copy, save, and interop with any other markdown tool works seamlessly.
Is Atomic Editor free?
Yes, Atomic Editor is completely free and open source under the MIT license. The @atomic-editor/editor npm package has no cost and no paid tiers.
How do I install Atomic Editor?
Install via npm: npm install @atomic-editor/editor @codemirror/state @codemirror/view @codemirror/commands @codemirror/autocomplete @codemirror/language @codemirror/search @codemirror/lang-markdown @lezer/common @lezer/highlight react react-dom. CodeMirror and React are peer dependencies you must install alongside the editor.
What makes Atomic Editor different from other markdown editors?
Atomic Editor features Obsidian-style inline live preview where formatting appears as you type, virtualized rendering for smooth scrolling on huge documents, layout-stable inline decorations that prevent reflow, and WYSIWYG table editing - all while keeping raw markdown as the source of truth.
How do I enable code syntax highlighting?
Pass a codeLanguages array prop. Use the curated list with import { ATOMIC_CODE_LANGUAGES } from '@atomic-editor/editor/code-languages' after installing the lang-* peer packages you want, or bring your own LanguageDescription objects.
Can I extend Atomic Editor with plugins?
Yes, pass any CodeMirror 6 extensions via the extensions prop to add autocomplete sources, custom decorations, domain-specific keymaps, collaboration (yjs), vim mode, or anything else. Consumer extensions are appended after built-ins.
What languages are supported for code highlighting?
The curated list includes JavaScript, TypeScript, Python, Go, Rust, Ruby, Java, C, C++, PHP, Swift, Shell, SQL, HTML, CSS, XML, JSON, YAML, TOML, Dockerfile, and Markdown - about 20 languages total.
Does Atomic Editor work with React?
Yes, it provides a React wrapper component AtomicCodeMirrorEditor that accepts markdownSource, onMarkdownChange, onLinkClick, and other props. The editor fills its parent container, so wrap it in a height-bounded flex or grid container.
How do I handle search in Atomic Editor?
Use the minimal search panel with Ctrl/Cmd+F. For programmatic control, pass an editorHandleRef and call methods like openSearch(), closeSearch(), or revealText(). InitialSearchText opens the panel pre-filled, while initialRevealText scrolls to a match without moving the cursor.