lengyi-markdown-editor: A Single-File Browser Markdown Editor with Live Preview

What the Single-File Design Actually Means

Most Markdown editors are web apps backed by servers, native desktop apps with installers, or cloud services with accounts. lengyi-markdown-editor is a single HTML file. All core styles, structure, and logic are inlined; the only external file is `i18n.js` for language strings. Double-clicking the file opens the editor in the browser. There is no build step, no package manager, and no server.

The tradeoff of this design is that all state lives in the browser. Content, the current filename, the split-panel ratio, collapsed section states, the selected theme, and the preferred language all persist in `localStorage` and survive page refresh. They do not survive clearing site data, opening the file in a private window, or switching to a different browser. The editor has no sync; the user's file system or a shared folder is the backup mechanism.

The repository structure is minimal: `markdown-editor.html` is the main application, `i18n.js` is the translation dictionary, and `web-to-md-proxy.py` is the optional local proxy. A `public/` folder contains author documentation and screenshots. The project supports 10 interface languages and is authored by Leng Yi (冷逸), the founder of the Chinese AI media channel "沃垠AI".

The Editing Environment: Preview, Layouts, and Toolbar

The editor opens in a split-panel layout with a raw Markdown input on the left and a rendered preview on the right. The split ratio is adjustable by dragging the divider; the position is remembered. Three layout modes are available: the default edit-and-preview, edit only, and preview only. A source mode lets users edit the rendered HTML directly on the right side instead of the preview.

The toolbar covers headings H1 through H6, bold, italic, underline, strikethrough, superscript and subscript, unordered lists, ordered lists, task lists, blockquotes, inline code, fenced code blocks, URL insertion, local image embedding as Base64, an 8x8 visual table picker, and find-and-replace with replace-all support. Keyboard shortcuts are provided for the most common operations: `Ctrl+B` for bold, `Ctrl+I` for italic, `Ctrl+K` for links, `Ctrl+F` for find-and-replace, and `Ctrl+S` to save.

Content is auto-saved to localStorage every 500 milliseconds. The filename field is editable, and the stored filename persists across sessions.

Math, Diagrams, and Image Handling

Mathematical notation is rendered by KaTeX. Inline math uses the `$...$` delimiter; block math uses `$$...$$`. Flowcharts and mind maps are rendered by Mermaid version 10. Both libraries are bundled with the editor; the README states that all core styles, structure, and logic are inlined, which implies no CDN dependency at runtime.

Images can be inserted as URLs or embedded as Base64 from local files. The Base64 embedding option makes the resulting Markdown file self-contained: the image data is stored inside the `.md` file itself rather than as a separate file on disk. This is convenient for sharing a single document but increases file size proportionally with the image dimensions.

The PNG export uses dom-to-image-more to render the preview area to an image. The README lists five aspect ratios for the PNG output: 9:16, 4:5, 3:4, 1:1, and 16:9, covering common social media formats. This makes the editor useful for writing content that will be posted as an image on platforms that do not render Markdown natively.

Getting Started and the Optional Python Proxy

The simplest way to use the editor is to clone the repository and open the HTML file directly:

git clone https://github.com/woyin2024/lengyi-markdown-editor.git

Then double-click `markdown-editor.html` in a file browser. For a local development server, which avoids some browser security restrictions around local file access:

python -m http.server 8080

Then open `http://localhost:8080/markdown-editor.html`. The README also lists a Node.js alternative using `npx serve .`.

An optional Python proxy, `web-to-md-proxy.py`, provides a Markdown conversion service that the editor can call from its "Use local proxy" option. Starting it requires the `requests` package and defaults to port 8765:

pip install requests
python web-to-md-proxy.py

With the proxy running and the option enabled in the editor, a URL can be pasted into the editor and converted to Markdown. This feature is optional and has no effect on the editor's core functionality.

Multi-Language Support and Export Formats

The interface language is controlled by `i18n.js`, which ships translations for Simplified Chinese, Traditional Chinese, English, Japanese, Korean, Spanish, French, German, Russian, and Portuguese. Language preference is auto-detected from the browser's language setting and saved to localStorage. A one-tap switch is available in the UI, and a `?lang=` URL parameter or a localStorage override can force a specific language.

The export options cover five formats. The `.md` export writes the raw Markdown. The `.html` export produces a standalone HTML file. The `.doc` export produces a Word-compatible document that opens directly in Microsoft Office according to the README. The `.pdf` export uses the browser's print-to-PDF dialog. The `.png` export renders the preview at the selected aspect ratio.

Dark and light themes use CSS custom properties throughout. All colors are defined as variables on `:root`, making the system extensible without modifying individual rules.

lengyi-markdown-editor Compared to Typora

Typora is a widely used desktop Markdown editor with a live-preview mode that renders directly in the editing area rather than in a separate panel. Typora is an installable native application and writes to local files using the operating system's file system APIs, which means saved files appear as standard `.md` files in the file system immediately.

lengyi-markdown-editor does not write to the file system until the user explicitly exports or saves. Content lives in localStorage between sessions. The editor has no plug-in system, no file tree, and no integration with version control tools. What it offers instead is immediate availability: any browser, any platform, no install, no license management, and no account.

For a developer who needs to quickly draft a README while working in a browser-only environment, or for sharing a Markdown writing tool with a team that cannot install software, lengyi-markdown-editor is the faster choice. For day-to-day writing that requires file management, keyboard-driven navigation, and native OS integration, Typora provides those capabilities in a way a browser-based editor cannot match.

Another comparison is with Obsidian, a knowledge management tool that uses Markdown files and a local vault. Obsidian requires installation and stores files as `.md` on disk, which makes them directly accessible to other tools. lengyi-markdown-editor stores content in the browser and exports when the user chooses; there is no persistent local file path.

The MIT license allows free use and modification. The README notes that for commercial use, authorization from the author is expected. This is an unusual addition to an MIT license and worth reviewing if redistribution is planned.

Editorial conclusion

lengyi-markdown-editor suits anyone who needs a private, portable Markdown editor that runs in a browser tab without signing up for a service. The single-file design means it works offline and leaves no data on a server. Before relying on the .doc export for production documents, test it against your Office or LibreOffice version, as Word compatibility from browser-generated .doc files varies by application. The commercial use clause in the MIT license is unusual; read it if you plan to redistribute the file.

Frequently asked questions

Official sources

1. Issues
2. License: MIT
3. README
4. woyin2024/lengyi-markdown-editor on GitHub