Docs GitHub
Add WYSIWYM Markdown editing to any web-form

Drop-in, Zero-Code Editor:
Before and After

Transform standard, plain-text textareas into a premium Markdown editing workspace in under 5 minutes, no coding needed. Grab a single line of script and drop it into any form. Implement in 3 Simple Steps: Quick Start

Before (Plain Textarea)

A standard, unstyled HTML textarea. Delimiters remain raw, formatting is invisible, and text is single-font. Users can't include links, paste code examples or uploads attachments such as image files or screenshots.

Contact Us
After (Traven Editor)

The interactive Traven Editor custom element. Markdown formatting renders live, delimiters fade out, and toolbars let user style the content. Highlight text to trigger the floating selection bubble.

Contact Us
## I have an idea! What if any HTML `<textarea>` field could become an ==interactive rich-text editor?== [image src="https://traven.dev/img/inline.jpg" align="fullbleed" size="full" alt="Inline images" caption="Upload images, just Drag and Drop"] Highlight text to try the **Selection Bubble**. * Drop-in for PHP/Python projects * Embed with just *a single line of code* * Handles **Markdown** + live image uploads * Free & open-source (MIT Licensed)

From Zero to Done in These 3 Steps

1

Replace the Textarea

Swap your legacy HTML <textarea> for <traven-editor>.
To show the editor with the default toolbar, add the toolbar attribute.

<form method="POST">
  <!-- Before: <textarea name="content">Write something...</textarea> -->
  <traven-editor name="content" toolbar>Write something...</traven-editor>
</form>
2

Load `traven.js` with just a single line

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

Done!

Traven submits like a standard textarea, so nothing else in your existing setup needs to change.

Check out more details and customization tips in the Quick Start guide.