Dillinger: a cloud-native Markdown editor with real-time preview

The problem: Markdown editors often sacrifice speed for features

Most Markdown editors fall into one of three traps: they are bloated with UI clutter that distracts from writing, they work only offline and disconnect from the cloud, or they ship without the keyboard navigation and ergonomics that developers expect from a modern editor. Dillinger combines VS Code's Monaco editor (the same core that powers VS Code itself) with cloud storage backends and a focus on distraction-free writing. The editor brings keyboard shortcuts familiar to anyone who has used VS Code, and the interface gets out of your way so you can focus on the text. The project's tagline is that writing tools should disappear-no friction, no clutter, just flow.

Real-time preview, Zen mode, and scroll sync

As you type Markdown, Dillinger renders an instant preview pane alongside the editor, keeping the two synchronized. The Zen Mode (activated with Cmd/Ctrl + Shift + Z) hides the UI chrome and fills the screen with just the editor, eliminating distractions entirely. The scroll positions in the editor and preview stay in sync as you navigate, so you always see the rendered output of the text you are editing. The editor itself is Monaco Editor (the core of VS Code), which brings syntax highlighting, code completion, and familiar keyboard shortcuts to Markdown writing. These features matter because a slow preview lag or a cluttered interface breaks the writing flow. Dillinger also supports drag-and-drop for Markdown, text, and other files, and lets you paste images directly from the clipboard for inline image insertion. This combination of features creates a seamless writing experience.

Built on Next.js with 98% test coverage

Dillinger is a Next.js 14 application. The tech stack uses Monaco Editor (via the @monaco-editor/react package) for the editor interface, Tailwind CSS for styling, Zustand for state management, and markdown-it with plugins for rendering Markdown. The README documents 294 unit and integration tests (using Vitest) plus 39 end-to-end tests (using Playwright), achieving 98% code coverage. Tests live in a tests/ directory organized by type: lib/, store/, hooks/, components/, routes/, and e2e/. This comprehensive test suite means the application is stable enough for regular use and gives confidence that updates will not break core features. The build system includes a verify script that runs linting (next lint), type checking (tsc --noEmit), all unit tests (vitest run), and all E2E tests (playwright test), ensuring code quality before deployment.

Getting started locally

To run Dillinger on your machine, start with:

npm install
npm run dev

Then open http://localhost:3000 in your browser. The README states that Node.js 18+ is required, and you can use npm, yarn, pnpm, or bun as your package manager. For local development, files auto-save to your browser's local persistence, so you do not lose work if you close the tab. Once the dev server starts, you can drag and drop .md, .txt, or .markdown files into the editor to load them. The application is ready to use immediately without configuration for local editing. Beyond npm run dev, the available scripts include npm run build for production builds, npm start to run a production server, npm run lint to check code style, npm run test:unit to run the unit test suite, npm run test:e2e:headed to run E2E tests in a visible browser window, and npm run verify to run the full quality gate (linting, type checking, unit tests, and E2E tests together).

Cloud integrations: GitHub, Google Drive, Dropbox, OneDrive, Bitbucket

To connect to cloud storage, you must create OAuth applications with each provider you want to use. The README includes environment variable templates for Google Drive, OneDrive, Bitbucket, GitHub, and Dropbox. Each provider requires you to register an OAuth app and provide Client ID, Client Secret, and Redirect URI. For Google Drive, you enable the Drive API in the Google Cloud Console and create OAuth credentials, then set GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, and GOOGLE_REDIRECT_URI in .env.local (default redirect is http://localhost:3000/api/google-drive/callback). For OneDrive, you use Azure App Registration with Files.ReadWrite and User.Read permissions. For Bitbucket, you create an OAuth consumer with repo read/write access. For GitHub, you register an OAuth App and set the callback to http://localhost:3000/api/github/callback. For Dropbox, you create a scoped app and enable files.metadata.read and files.content.write. The package.json includes the dropbox package (version 10.34.0) as a dependency, and similarly includes all necessary OAuth libraries. Once configured in .env.local, users can authenticate in the editor and save files directly to their cloud storage.

Exporting and deployment

Dillinger can export Markdown files to HTML or PDF, or save as plain Markdown. The export functionality uses the turndown package (7.2.2) for HTML-to-Markdown conversion and breakdance (3.0.1) for HTML rendering. When deploying to production, you must update all OAuth callback URLs from localhost to your production domain (e.g., `https://yourdomain.com/api/{provider}/callback`) in your OAuth provider's console and in your .env file. Then run `npm run build` followed by `npm start` to start the production server. The README mentions Vercel deployment, which is natural since Dillinger is a Next.js application; the package.json includes a vercel.json file for configuration. You can also deploy to any Node.js 18+ hosting provider by building the app and running the start script. For testing the production build locally, you can run npm start:test, which starts the server on 127.0.0.1:3005.

What limits Dillinger for certain use cases

Dillinger is web-only and requires internet connectivity to access cloud integrations; the local auto-save works offline but you cannot push to cloud storage without a connection. The most recent NPM release (3.5.1) was published in 2016, with release notes stating it adds resizable interaction for editor and preview panes, though the repository shows active development with the last push on 2026-06-21. The last documented release on npm is outdated, so you are expected to run from the repository source or build a custom release. There is no built-in collaborative editing, so only one user can edit a file at a time (multiple users would overwrite each other's changes). The README does not document file size limits, so it is unclear whether the editor handles gigabyte-scale files efficiently. Browser local storage has capacity limits (typically 5-50 MB depending on the browser), so auto-save cannot hold infinitely large documents.

Markdown plugins and feature richness

Under the hood, Dillinger uses markdown-it (14.1.0) as its Markdown parser, with plugins for abbreviations (markdown-it-abbr), checkboxes (markdown-it-checkbox), definition lists (markdown-it-deflist), footnotes (markdown-it-footnote), inserted text (markdown-it-ins), marked text (markdown-it-mark), subscript (markdown-it-sub), superscript (markdown-it-sup), mathematical expressions (markdown-it-texmath with KaTeX 0.16.38 for rendering), and table of contents generation (markdown-it-toc). The syntax highlighter for code blocks is highlight.js (11.11.1). The rendering pipeline also includes DOMPurify (3.3.1) for sanitizing HTML output to prevent injection attacks, and support for image paste from the clipboard through keyboard input. This means you can use extended Markdown syntax beyond the basic standard, making it suitable for technical documentation, notes with math notation, and complex formatting. The variety of plugins gives Dillinger flexibility for different writing contexts, though the feature set is determined by what markdown-it plugins the maintainers have included.

Editorial conclusion

Adopt Dillinger if you write documentation regularly and want to keep your files in cloud storage while editing with a responsive web interface. Skip it if you need offline-first editing without internet dependency, or if you require a native desktop application instead. Start by visiting dillinger.io or running npm run dev locally to experience the real-time preview and Zen mode.

Frequently asked questions

Official sources

1. joemccann/dillinger on GitHub
2. License: MIT
3. Project website
4. README
5. Releases