Markdown Fast Editor

Markdown Fast Editor is a VS Code extension for editing Markdown directly in a rendered preview while keeping the .md file as the source of truth.

It is built for large Markdown files, GitHub Flavored Markdown tables, mixed Markdown/HTML documents, and source-preserving edits where untouched blocks should not be rewritten.

Features

• Editable rendered preview for headings, paragraphs, block quotes, lists, task lists, fenced code blocks, embedded HTML, and tables.
• Embedded HTML renders as a sanitized preview plus an editable raw-source block, so tags and attributes are preserved when saved.
• Cursor-aware table insertion in the editable preview.
• Table row, column, delete, and alignment editing from the focused cell.
• Text-editor table commands for users who prefer source editing.
• Parser-backed block mapping using remark, remark-gfm, and remark-frontmatter.
• Sanitized webview rendering with a strict Content Security Policy.
• Version-validated block edits so stale preview edits do not overwrite the wrong source range.
• Large table and very large document safeguards to avoid rendering massive editable DOM trees.

Usage

Open a .md or .markdown file, then run:

• Markdown Fast: Open Editable Preview
• Markdown Fast: Open Text + Preview

You can also right-click a Markdown file in Explorer and choose Open Editable Preview.

In the editable preview:

• Click rendered Markdown text to edit it directly.
• Place the caret in a paragraph and click Table to insert a table at that caret.
• Focus a table cell and use the row, column, delete, or alignment toolbar controls.
• Use Tab and Shift+Tab to move between table cells.
• Use Cmd/Ctrl+Enter for a row below, Cmd/Ctrl+Shift+Enter for a row above, Cmd/Ctrl+] for a column right, and Cmd/Ctrl+[ for a column left.
• Edit raw HTML tags and content in the embedded HTML source block; saves use that raw source text, not sanitized preview DOM.

Source Preservation

The extension edits the smallest Markdown block it can map back to the source document. Untouched front matter, reference definitions, images, nested lists, raw HTML, fenced code blocks, and large tables are preserved by range rather than being regenerated.

When you directly edit a rendered block, only that block is serialized back to Markdown.

Raw HTML blocks render in two layers: a sanitized preview and an editable raw-source block. The webview sanitizer protects the preview, but sanitizer output is never written back over the raw HTML source.

Blocks with source-sensitive Markdown, such as reference links, image references, inline HTML, and footnotes, use a raw-source editor in the preview so those constructs are not simplified into lower-fidelity Markdown.

Very large tables are rendered as compact summaries instead of editable DOM tables. This keeps huge files responsive and preserves the original table source for editing in the text editor.

Commands

• Markdown Fast: Open Editable Preview
• Markdown Fast: Open Text + Preview
• Markdown Fast: Insert Table...
• Markdown Fast: Format Table
• Markdown Fast: Add Table Row Below
• Markdown Fast: Add Table Column Right
• Markdown Fast: Delete Table Row
• Markdown Fast: Delete Table Column

Security

Markdown is rendered inside a VS Code webview with:

• default-src 'none'
• extension-local styles and scripts only
• nonce-gated JavaScript
• sanitized rendered HTML
• no remote image requests from rendered Markdown
• no javascript: or data: links
• a read-only source preview fallback for very large documents

Raw HTML remains in the source file unless the user edits that HTML block directly.

Support

For support or private security reports, email loredan6@live.com.

Development

npm install
npm test

Launch the extension from VS Code:

1. Open this repository in VS Code.
2. Press F5.
3. In the Extension Development Host, open a Markdown file.
4. Run Markdown Fast: Open Editable Preview.

Package a VSIX:

npm run package

License

MIT