Traven
Docs Dev DocsDev GitHub
EXTEND, CUSTOMIZE AND DEVELOP ON THE TRAVEN EDITOR

Developer Documentation

These guides are for developers who want to dig deeper and extend, customize, or contribute to the Traven Editor codebase itself. They cover the build system, internal architecture, theming, MDX components, and rendering internals.

For general usage and installation, check out the main Docs & Guides.

Getting Started

Developer Overview

What Traven is, how it's built, and what it offers a developer building on top of it. This page serves as a comprehensive high-level reference for the editor's design, architecture, features, and constraints.

Development

The development workflow for compiling, building, testing, and running Traven locally. Covers npm run build, npm run test, npm run watch, running the PHP demo pages, and the @latest CDN development target.

Knowledgebase

A deep technical reference of internal findings: CodeMirror 6 pitfalls (block decorations, RangeSetBuilder, character width caching), sandboxed resizing rules, toolbar button customization, all runtime APIs and extension hooks, CSS theming parity tips, security and input sanitization, LaTeX internals, and the floating/hybrid toolbar architecture.

Theming & Styling

Theme Development Guide

The complete guide to building or extending a Traven skin from scratch. Covers the two CSS scopes (editor and preview), the full selector reference, CodeMirror 6 layout-engine rules, WYSIWYM/preview parity, shortcode markup for skins, dark mode strategies, a zero-to-working-skin walkthrough, and a validation checklist.

Custom Typography

Control heading, body, and code fonts through CSS custom properties (--traven-font-display, --traven-font-body, --traven-font-mono). Covers runtime font switching, Google Fonts integration, local @font-face, static overrides, and using the parameterized skin-custom.css.

MDX Components

Custom MDX Components Architecture & Blueprint

The technical blueprint for adding capitalized MDX tags (e.g. <Gallery />, <Callout>) to Traven: architectural roles (parser, widget, skin), step-by-step implementation via mdx-parser.js and component-plugin.js, and theme CSS styling.

Custom Markdown Rendering

How to replace Traven's built-in fallback renderer with a custom Markdown-to-HTML engine (Marked, markdown-it, etc.) using registerRenderer(). Covers the renderer pipeline, preview styling via .traven-preview, and handling MDX component tags with custom compilation rules.