Docs GitHub
Open Source, Free & MIT Licensed

The rich-text Markdown editor you can drop into any PHP, Python, or HTML page with one <script> tag

Add Traven Editor to any website: MIT-licensed, framework-agnostic Markdown editor you can embed anywhere. Configure custom skins and toolbars in a single line of code, no build step required. Raw Markdown in, raw Markdown out.

<!-- 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>
# Hi, I'm Traven! This is a **live editor** running directly on the page — go ahead, click anywhere and start typing. ==Traven is a WYSIWYM Markdown editor== where formatting delimiters like `**bold**` and `_italic_` are hidden when you're not editing them, keeping your workspace clean. ## Feature Highlights - **WYSIWYM Collapsing** — Markdown syntax fades in only when your cursor is on the line, just like Typora. - **Drag & Drop Media** — Paste or drop images directly into the editor with upload progress. - **Custom Skins** — Swap between 7 built-in themes to match your application's design. - **Form Integration** — Works like a `<textarea>` inside any HTML form. No JavaScript required. > Traven stores content as pure Markdown. What you write is portable, git-diffable, and future-proof. ```js // Embed Traven in one line: <script type="module" src="traven.js"></script> ``` Try toggling the toolbar, formatting text with **bold** or *italic*, or creating a [link](https://traven.dev). Everything you see here is ==editable==.
Distraction-Free Demo Custom Skin Demo

WYSIWYM Collapsing

Delimiters like ** and _ display seamlessly only when editing, keeping the workspace clutter-free.

Optimistic Media Uploads

Drag and drop or paste images directly into the editor view with live loading feedback indicators.

Customize Skin Styles

Easily swap editor skin styles and toolbars configurations to customize the UI/UX and match your app.

Traven Compared to Other Editors

Traven is the modern replacement for traditional rich-text editors.
See how it stacks up against the rest of the ecosystem:

  • HTML-First Editors: TinyMCE, CKEditor, TipTap, ProseMirror, Lexical, and Trix.
  • Block-Based Editors: Editor.js, BlockNote, Gutenberg, and Bard.
  • Markdown-First Editors: EasyMDE, SimpleMDE, Milkdown, and Vditor.
Developer Comparison Grid →

Test Drive: Live Interactive Demos

5 Customizable Demos

Unified Editing Demo WYSIWYM/Markdown editor with live HTML preview.
Toolbar Controls Demo Toggle three toolbar formats independently.
Inline YAML Demo Bidirectional synced editing of body and frontmatter.
Form-Managed Metadata Demo YAML/Markdown split: form fields above, editor below.
Hybrid Editing Demo YAML/Markdown split with bidirectional synced editing.

2 Standalone Demos

Distraction-Free Write Demo Distraction-free writing surface with live HTML preview.
Dynamic Typography Demo Live typeface hotswapping for Display, Body, and Mono.

3 Base Demos

Custom Demo Out-of-the-box demo: toggle toolbar, swap skins.
Minimal Demo Minimalist, barebones embed example.
Quickstart Demo Minimum code to embed Traven (from Quickstart)
What is Traven?

Traven is a WYSIWYM (What You See Is What You Mean) Markdown editor that brings a Typora- and Obsidian-like inline editing experience to any web page or CMS without requiring a massive NPM build pipeline. The full editor comes in a single traven.js bundle you can load from anywhere. By storing content as plain Markdown, it produces clean, git-diffable, and AI-readable files. For a deeper look at its design philosophy, see the Key Features and Editor Comparisons.

Wait, this works with just a <script> tag? No npm, no build step?

Yes. Traven runs natively in the browser as a standard ES module. You can drop it into any HTML or server-side template (PHP, Django, Laravel, Rails) with a single line:

<script type="module" src="https://cdn.jsdelivr.net/npm/@freedomware/traven@latest/dist/traven.js"></script>

Learn more in the Quickstart Guide. For Node-based environments or framework integration (React, Vue, Svelte), see Installation & Setup and the Frameworks Guide.

What is WYSIWYM and why does my Markdown syntax keep disappearing?

WYSIWYM = What You See Is What You Mean. Just like Typora and Obsidian, Traven hides Markdown syntax (like **bold** or # Heading) when you're not actively editing that line, showing clean styled text instead. Move your cursor into the line, and the syntax reappears. This gives writers a distraction-free reading experience while keeping the source as pure, portable Markdown.

How does the form submission work? Do I need to add an event listener to get the content?

No. <traven-editor> is a standard, form-associated custom element. It behaves exactly like a <textarea>, automatically syncing its content so FormData and standard HTML form submission "Just Work" without event listeners. For server-side integration details, see the Integration Patterns Guide.

Can I use this with React / Vue / Svelte?

Yes. Official wrappers are available for React, Vue, and Svelte. Refer to the Frameworks Guide for installation and usage instructions.

Do I get the full features for free? Is there a Pro version of Traven?

Traven is 100% free and open source under the MIT license. There is no Pro version, no paid tier, no telemetry, and no feature gating. You get every feature (also LaTeX math, Mermaid diagrams, and media uploads, and everything else) completely free. For Traven's always-free philosophy, see What's Behind a Name. Regarding dependencies, ownership, privacy and data, see Privacy & Telemetry Policy.

More questions? Check out the FAQ