AI Docs GitHub
Self-Hosting & Offline Integration

Own Your Infrastructure:
Self-Host Traven

This page is for self-hosting. If you prefer to load Traven via CDN, follow the steps in the Quick Start Guide (CDN) instead.

Traven is built to respect user privacy and operate completely offline. While loading via CDN is the fastest way to get started, self-hosting is the ideal choice for air-gapped systems, secure internal dashboards, and performance-critical deployments.

Essential Core Files

The minimal set of files required to mount the editor and render standard rich Markdown fields.

traven.js Core Editor Script (ES Module)
Download
traven.css Core Editor Layout Stylesheet
Download


CSS AUTO-INJECTION: By default, traven.js automatically looks for and injects traven.css from the same folder it resides in. If you plan to split these files into separate directories (e.g. js/ and css/), File Placement shows how to manually link the CSS and configure autoLoadStyles: false

Themes & Toolbars

Optional custom styling presets to skin the editor interface or restrict toolbar configurations.

skin-modern.css Sleek, modern UI skin styling
Download
skin-dark.css Rich dark-mode skin variant
Download
toolbar-compact.css Compact spacing toolbar stylesheet
Download

These are a few samples. Traven has many more skins and more toolbars to customize with, and you can also make your own.

File Placement:
  • Strategy 1: Keep Together (Easiest)
    Drop both traven.js and traven.css into a shared libraries directory (e.g., js/lib/ or assets/vendor/) next to other third-party files like Alpine.js or Leaflet. Traven will auto-detect and load the stylesheet automatically.

  • Strategy 2: Place Separately (Custom Layout)
    If placing traven.js in your js/ folder and traven.css in your css/ folder, you must manually link the CSS in your HTML header and set autoLoadStyles: false in your configuration options to prevent 404 resource errors.

Integration & Calling Recipes

The standard, form-associated custom element behaves exactly like a native <textarea>. Ideal for server-side forms (PHP, Laravel, Django) and quick static integration.

HTML Setup & Call
<form method="POST" action="/save.php">
  <!-- The editor registers its value directly with the form -->
  <traven-editor name="content"># Write your Markdown here...</traven-editor>
  
  <button type="submit">Save Post</button>
</form>

<!-- Load the ES Module script -->
<script type="module" src="/js/lib/traven.js"></script>
If placing CSS separately (e.g. css/traven.css)
<!-- Manually link stylesheet in <head> -->
<link rel="stylesheet" href="/css/traven.css">

<!-- Inside the form, pass the auto-load bypass attribute -->
<traven-editor name="content" auto-load-styles="false"># Markdown content...</traven-editor>

Mount the editor directly inside any HTML container and bind custom event listeners or state hooks in JavaScript. Perfect for client-side frameworks (Alpine.js, React, Vue).

JavaScript Instantiation (Together Setup)
<div id="editor-mount"></div>

<script type="module">
  import { TravenEditor } from "/js/lib/traven.js";

  const editor = new TravenEditor({
    element: document.getElementById("editor-mount"),
    initialValue: "# Initial Content\nType something here...",
    onChange: (val) => {
      console.log("Editor value updated:", val);
    }
  });
</script>
JavaScript Instantiation (Separated CSS Setup)
<!-- Manually link stylesheet -->
<link rel="stylesheet" href="/css/traven.css">

<div id="editor-mount"></div>

<script type="module">
  import { TravenEditor } from "/js/traven.js";

  const editor = new TravenEditor({
    element: document.getElementById("editor-mount"),
    initialValue: "# Custom separated paths setup",
    autoLoadStyles: false // Bypasses auto-injection lookup
  });
</script>

COPY-PASTE SETUPS

Ready-to-Use Layouts Common Configurations →
Full Integration Setup Installation & Setup →
Syntax & Attributes Cheat Sheet →