A rich-text Markdown editor you can drop into any PHP, Python, or HTML page with one <script> tag
MIT Licensed · No API key · No account · No npm · No build step · Self-host or CDN
<!-- Include the editor with just a single line of code: -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@freedomware/traven@latest/dist/traven.js"></script>
Live Demos • FAQ • Compare • Quick Start • Cheat Sheet • API • Documentation
Traven is a self-contained, embeddable Markdown editor that renders your content live as you type. It gives you the seamless writing experience of a desktop editor, but in a single <script> tag you can drop into any web page.
The editor is entirely framework-agnostic. It works beautifully whether you are using a plain HTML file, a PHP template, or a complex React application. It also respects your independence: Traven doesn't rely on any frameworks, and doesn't require an API key or setting up an account. It is open-source, MIT licensed, and outputs pure Markdown.
Traven is a WYSIWYM (What You See Is What You Mean) editor. This means it hides Markdown syntax when you are not editing it, showing clean, styled text instead.
Type **bold** and the asterisks quietly step aside, leaving only the bold text visible. Move your cursor back inside the word, and the syntax reappears so you can edit it. The underlying document remains plain, portable Markdown—no hidden HTML, and no proprietary lock-in.
Traven is designed for developers building CMS systems, blog platforms, administrative dashboards, or any content-heavy forms. It is a perfect fit if:
- You want clean Markdown output: You need your content to remain portable, readable, and perfectly formatted as raw Markdown.
- You want a seamless writing experience: You prefer an elegant inline editing experience that lets writers focus, rather than a divided split-pane view.
- You want easy integration: You need an editor that can be fully integrated and styled in just a few minutes, seamlessly adapting to the layout and theme of your existing project.
The fastest way to get Traven running is by dropping the custom HTML element into your page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Traven Editor</title>
</head>
<body>
<!-- The editor acts just like a standard form input -->
<form action="/save" method="POST">
<traven-editor name="content" toolbar># Hello Traven</traven-editor>
<button type="submit">Save</button>
</form>
<!-- Load the script anywhere in your page -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@freedomware/traven@latest/dist/traven.js"></script>
</body>
</html>For more advanced setups, you can also instantiate Traven programmatically via new TravenEditor().
- Dynamic Toolbars: Choose from floating, hybrid, or static toolbar layouts, including formatting bubbles and gutter insert menus.
- Math & Diagrams: Built-in, lazy-loaded support for rendering LaTeX math equations and Mermaid diagrams.
- Image Uploads: Optimistic image uploads with drag-and-drop support. Audio and video supported, too.
- Custom Shortcodes: Extend standard Markdown with custom, interactive WYSIWYM widgets.
- Bidirectional Sync: Support for split-screen layouts where the raw Markdown and the visual editor stay perfectly in sync.
- Vim Mode: Built-in Vim emulation for power users.
For a complete breakdown of features, see the Key Features Documentation.
Traven is highly modular and endlessly customizable. Check out the documentation to learn more about advanced configurations, theming, and frameworks:
- Quick Start — Step-by-step guides for adding Traven to PHP forms and HTML pages.
- Cheat Sheet — A quick reference for every
<traven-editor>attribute and configuration option. - Common Configurations — Ready-made recipes for common use cases (e.g., minimal comment boxes, CMS admin panels).
- Customization & Styling — Learn how to swap skins, override selectors, and build custom themes.
- Framework Wrappers — Official wrappers and integration guides for React, Vue, and Svelte.
- API Reference — The complete list of constructor options, public methods, and events.
|
|
|
|
|
|
|
|
"B. Traven" was the self-chosen nym of the privacy-first author behind The Treasure of the Sierra Madre, who spent his career proving that the work outlasts its author, communicating with publishers pseudonymously and letting his writing speak for itself. It is the right name for a framework-agnostic, open-source editor meant to be embedded and stay quietly out of the limelight.
Open-source, licensed under the MIT License.