A standalone, lightweight, framework-agnostic WYSIWYM Markdown Editor
Add Traven Editor to any website: LaTeX, Mermaid diagrams, table editor, image drag-n-drop, shortcode system, floating and hybrid toolbars, audio, video, custom Lezer extensions, eight skins, eight toolbar options, ten demos, full documentation
<!-- 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>Traven Editor is a non-brittle WYSIWYM (What You See Is What You Mean) Markdown editor for embedding directly into custom CMS systems, administrative dashboards, web forms and apps. Built on the CodeMirror 6 editing engine, Traven delivers a high-fidelity editing experience while outputting clean, raw Markdown.
Traven is highly modular and straightforward to customize or extend. If you need a powerful, flexible and mostly unopinionated Markdown editor that adapts to the layout, theme, and behavior of an existing project, its theming and configuration options and decoupled styling make integration fast and easy.
|
|
|
|
|
|
|
|
Try Traven in your browser with Live Previews—a collection of demo sandboxes that showcase the editor in different layouts, skins, and toolbar configurations.
Mix and match options, tweak settings, and explore how Traven adapts to any web environment without breaking a sweat. All demos use the same core codebase, so what you see is exactly what you get when you integrate Traven into your own project.
For a fast, hands-on integration, check out the Quick Start Guide to add Traven to a PHP form in just three steps. For a friendly ELI5 setup walkthrough with a full reference list of every <traven-editor> attribute and every toolbar= button key, see the Cheat Sheet.
Traven Editor offers a modern WYSIWYM editing experience with support for:
- Collapsible Markdown syntax delimiters
- Dynamic floating/hybrid/static toolbar layouts (including format bubbles and gutter insert menus)
- Optimistic image uploads
- Extendible custom shortcode system
- Bidirectional raw sync
- Vim emulation
- Math rendering via LaTeX and Mermaid diagrams, and more.
For a complete list and detailed explanation of all that Traven can do, see Key Features Documentation.
Traven includes optional, privacy-first, lazy-loaded support for rendering mathematical equations (via LaTeX/KaTeX) and visual diagrams (via Mermaid) directly within the WYSIWYM editor and preview panels. For setup and integration details, see the LaTeX Math Support Guide and the Mermaid Diagram Support Guide.
Traven is a framework-agnostic editor with zero peer dependencies. It can be integrated by referencing assets directly from the jsDelivr CDN, or by copying the compiled assets from the dist/ directory into your host project.
Important
Make it your own: Customize how you want the editor to look:
- Toolbar (Built-in & Optional): Traven ships with a fully functional default toolbar (
toolbar-default.css) baked directly into the coretraven.cssbundle. You do not need to load a separate toolbar, but if you want to customize it, the easiest way to do that is to just load any of the alternative layouts (liketoolbar-expandable.css). - Skin/Theme (Built-in Default): The compiled bundle (
dist/traven.css) ships with a built-in starter skin (skin-starter.css) that provides sane typographic defaults. No separate skin<link>is needed for basic usage. To customize the editor's appearance, load one of the pre-built skins (likeskin-modern.css,skin-editorial.css,skin-dark.css) or develop your own skin — the external skin will override the bundled defaults.
Drop the editor module from the CDN into your page (the core styles and structural skin are auto-injected), and use the custom <traven-editor> tag:
<form action="/submit" method="POST">
<traven-editor name="body" toolbar># Hello Traven via CDN</traven-editor>
<button type="submit">Save</button>
</form>
<!-- Load the module once in your page footer -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@freedomware/traven@latest/dist/traven.js"></script>From zero to hero: Get up and running with Traven in a matter of minutes, no coding required.
- Quick Start — Add Traven to a PHP form or HTML page in three steps: replace your
<textarea>, load one script, and read the submission in PHP. The fastest path from zero to a working rich-text editor. - Cheat Sheet — A comprehensive quick reference covering the 5-minute setup walkthrough, every configuration attribute, the full toolbar button catalog, skins, and common toolbar presets.
- Common Configurations — Eight ready-made recipes for the most common use cases: minimal comment boxes, blog post editors, CMS admin panels, three-pane WYSIWYM/Raw/Preview editors, code-heavy documentation editors, read-only previews, split-screen raw sync, and toolbar configurations. Each is a complete, copy-pasteable HTML file.
Note
Strict CSP Environments: If your project enforces a strict Content Security Policy that forbids dynamic stylesheet injection (style-src 'self'), you can disable the CSS auto-injection by passing autoLoadStyles: false in the constructor options, and manually add the <link rel="stylesheet" href=".../dist/traven.css"> to your <head>.
For a deeper dive, check out alternative toolbar layouts, custom themes and skins, and detailed configuration options in the Installation & Setup Guide.
If you are building a Single Page Application, Traven provides official lightweight wrappers for React, Vue, and Svelte. See the Framework Wrappers Guide for installation instructions and component examples.
The Traven API exposes a constructor with a comprehensive set of configuration options, instance methods, and built-in text formatting helpers for controlling the editor state and interacting with the document. For the full list of options, public methods, keyboard shortcuts, formatting helper recipes, and event listeners, please refer to the API Reference Documentation.
Traven supports two primary patterns for managing document metadata and frontmatter: inline freeform editing directly inside the editor, or structured form field integration (Split-Before / Join-After) which is recommended for corporate CMS databases. Architectural details, examples, and splitting/recombination helper functions are detailed in the Integration Patterns Guide.
Editor themes, layouts, and toolbar behaviors are fully customizable. Choose between "static" (fixed top), "floating" (clean canvas with formatting bubble and gutter menus), or "hybrid" modes, swap stylesheet skins to match your website, or override selectors using custom CSS.
To learn more about CSS class listings, custom skin configurations, and toolbar styling options, consult the Customization & Styling Guide. For instructions on how to build a new theme from scratch or extend an existing skin, follow the Theme Development Guide. To change the editor's fonts at runtime using CSS custom properties, see the Custom Typography Guide. To enable syntax highlighting for fenced code blocks inside the editor or in your HTML output, see the Code Syntax Highlighting Guide.
Traven supports extending standard Markdown with custom shortcodes. By default, it comes with rich, interactive WYSIWYM widgets and semantic HTML compilers for [image], [video], [audio], [figure], and [component] layouts.
The technical blueprint, widget rendering lifecycles, and syntax extension details are covered in the Custom Shortcodes Architecture Guide.
If you want to develop on Traven, start with the Development Guide which contains instructions for setting up the developer workspace, installing bundler dependencies, building local assets with esbuild, running the unit test suite, and serving the PHP integration demos locally.
"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. For a framework-agnostic, open-source editor meant to be embedded, customized, and stay quietly out of the limelight, the name fits.
Open-source, licensed under the MIT License.