mkdocs-live-wysiwyg-plugin
An all-in-one editor for GitHub and mkdocs documentation. Available from an extension store above or from GitHub release. Alternately available as a simple shell script.
Right click on mkdocs.yml to start the mkdocs server and start editing files directly from the mkdocs interface.
📝 A small CLI tutorial (click to expand)
- Add techdocs-preview.sh to your
$PATH. - Edit documentation across your projects.
Try it out
Run ./techdocs-preview.sh from this repository to view the documentation for this repository.
For a general tutorial, you can run the following command in an empty directory.
techdocs-preview.sh init
initwill initialized mkdocs documentation for any project.- The tutorial itself provides a starting point for docs as well as teaching material. About a 15 mins read.
I modify GitHub documentation for this repository with the following command.
techdocs-preview.sh -c -a docs
Features
A WYSIWYG (What-You-See-Is-What-You-Get) editor for editing mkdocs documentation.
- 🌈✨ Author quality of life features
- 👁-👁 Focus mode with collapsible nav sidebar, editing tools, and table of contents.
- 📝 Non-destructive editing is a top priority. Minimal
git diff. - 🧜 Mermaid diagram editor with a unique feature: text on diagrams can be clicked to auto-select matching mermaid text. Enables fast editing of existing diagrams.
- 🗂️ File management: reorder files, content migrations, dead link scanning (for broken internal or external links), preview and manage images. Refactors links to documents and intra-document links when headings are renamed.
- 🔗 A URL pasted onto selected text creates a markdown link. Headings can be copied to create intra-document links. Hold Ctrl key to open links with a click.
- 🍹🤌 Unified editor actions for WYSIWYG and Markdown modes (i.e. switching modes).
- 🗡 Loss-less undo/redo history with a UI to access full redo history. Switching modes has shared undo history.
- 🐁 Cursor location memory: switching modes keeps cursor and scroll area in same document location.
- 🛰 Text selections are preserved when the author switches modes.
- 💪 Mkdocs/backage rendering features
- ✅ Toggle-able checklists (task lists):
- [ ]and- [x]. - ✅ YAML frontmatter preserved when editing and switching modes.
- ✅ MkDocs admonitions (
!!! note,!!! warning, etc.) with settings gear for type, collapsible, placement, and more. - ✅ Markdown link styles preserved (inline, reference, shortcut).
- ✅ Code blocks with WYSIWYG editable titles, language selector, and auto-indent settings.
- ✅ Mermaid diagram editing with an embedded live editor (full-screen overlay).
- ✅ Tables with contextual toolbar: insert/delete rows and columns, column alignment, and formatting settings.
- ✅ Image dialog with autocomplete from the docs tree.
- ✅ Emoji shortcode completion and full emoji picker.
- ✅ Automated content migration to mkdocs-nav-weight.
- ✅ Toggle-able checklists (task lists):
- ℹ️ Other noteworthy features
- ✅ Auto-conversions: inline typing of markdown syntax creates formatted text.
- ✅ Balanced ASCII table formatting with configurable max width and per-table overrides.
- ✅ Context-sensitive help panel (Ctrl+?). Not as good as clippy 📎.
- ✅ No external JavaScript; all assets are bundled locally within the mkdocs plugin.
The following is an annotated screenshot after running techdocs-preview.sh init.
MkDocs Theme Support
Only the Material for MkDocs theme is officially supported. Admonition styling and icons rely on Material theme CSS. Other themes may work but have not been tested.
No breaking changes to Material theme compatibility are allowed.
Support for admonition syntax (e.g. !!! note, !!! warning, etc.). Admonitions render as they would when the site is built by mkdocs. Collapsible admonitions (??? type) and HTML details tags (!!! details) are also supported.
Attributions
This plugin incorporates or depends on the following works:
| Component | Author | License | Link |
|---|---|---|---|
| @celsowm/markdown-wysiwyg (WYSIWYG editor) | Celso Fontes | MIT | GitHub · npm |
| marked (Markdown parser) | Christopher Jeffrey, MarkedJS | MIT | GitHub · marked.js.org |
| js-yaml (YAML parser) | Vitaly Puzrin | MIT | GitHub |
| mermaid (Diagram renderer) | Knut Sveidqvist | MIT | GitHub · mermaid.js.org |
| mermaid-live-editor (Diagram editor) | Knut Sveidqvist | MIT | GitHub |
| mkdocs-live-edit-plugin (required dependency) | Eddy Luten | MIT | GitHub |
All listed components are distributed under the MIT License. See each project's repository for full license text.
All vendored JavaScript, CSS, and application builds are bundled locally in mkdocs_live_wysiwyg_plugin/vendor/ — no external JavaScript or CSS is loaded at runtime. See vendor/README.md for exact versions and license files.
1 maintainer
Metadata
1 maintainer
Release files for mkdocs-live-wysiwyg-plugin 0.4.6
For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.
Source distribution (sdist)
| File | Size | Uploaded | |
|---|---|---|---|
| mkdocs_live_wysiwyg_plugin-0.4.6.tar.gz | 6.7 MB | Details |
Built distribution (wheel)
| File | Interpreter | ABI | Platform | Reset |
|---|---|---|---|---|
| mkdocs_live_wysiwyg_plugin-0.4.6-py3-none-any.whl | Python 3 | none | any | Details |
Total release size: 12.8 MB
Release files / mkdocs_live_wysiwyg_plugin-0.4.6.tar.gz
| Download URL | mkdocs_live_wysiwyg_plugin-0.4.6.tar.gz |
|---|---|
| Size | 6.7 MB |
| Tags | Source |
|
SHA-256 checksum How to use checksums |
53ee09e45e8ed908ad9c392a8813f9381bc0a428bb5342746b81a511b6f383a4
|
|
BLAKE2b-256 checksum How to use checksums |
065786dcbf406f4d810384894c2315274aa95335098297d29be2b97a66ba3531
|
| Upload date | |
|
Uploaded using Trusted Publishing? What is trusted publishing? |
Yes |
| Uploaded via |
twine/6.1.0 CPython/3.13.7
|
Provenance
Provenance describes where a file came from. On PyPI, provenance is shared via attestations, which provide a verifiable record of the build or publishing details. View details, limitations and caveats.
PyPI Publish Attestation
PyPI verified that this artifact, at this checksum, originated from the publisher listed below.
Signed by GitHub Actions, verified by PyPI on Apr 6, 2026.
Transparency logRelease files / mkdocs_live_wysiwyg_plugin-0.4.6-py3-none-any.whl
| Download URL | mkdocs_live_wysiwyg_plugin-0.4.6-py3-none-any.whl |
|---|---|
| Size | 6.1 MB |
| Tags | Python 3 |
|
SHA-256 checksum How to use checksums |
77eab849a7880208b12b15838fa3deecdc325e653b853f899f951fa8cfde265b
|
|
BLAKE2b-256 checksum How to use checksums |
0352ff24cd7db73caad5237aa640cc7f0067e39af55519a74faf10de9cf2b0d8
|
| Upload date | |
|
Uploaded using Trusted Publishing? What is trusted publishing? |
Yes |
| Uploaded via |
twine/6.1.0 CPython/3.13.7
|
Provenance
Provenance describes where a file came from. On PyPI, provenance is shared via attestations, which provide a verifiable record of the build or publishing details. View details, limitations and caveats.
PyPI Publish Attestation
PyPI verified that this artifact, at this checksum, originated from the publisher listed below.
Signed by GitHub Actions, verified by PyPI on Apr 6, 2026.
Transparency log
