Using Traven With Frontend Frameworks

Developers can just run npm install @freedomware/traven-react and drop the editor right into their apps.

Meanwhile, anyone using raw HTML or PHP can just paste a single cdn.jsdelivr.net <script> tag from Traven's README into their code, and it will effortlessly pull the exact same core bundle.

React

@freedomware/traven-react

The React wrapper provides a Traven component that integrates smoothly with React's lifecycle and handles Strict Mode cleanly.

Installation

npm install @freedomware/traven-react @freedomware/traven

Usage

The wrapper is implemented as an uncontrolled component. Use defaultValue for the initial content to prevent cursor jumping issues common with uncontrolled WYSIWYM editors. Use a ref to interact with the underlying editor instance.

import React, { useRef } from 'react';
import { Traven } from '@freedomware/traven-react';

// Optional: Import core Traven CSS
import '@freedomware/traven/assets/skins/skin-starter.css';

export default function App() {
  const editorRef = useRef(null);

  const handleSubmit = () => {
    // Access the current markdown content via ref
    const markdown = editorRef.current.getValue();
    console.log("Submitted content:", markdown);
  };

  return (
    <div>
      <Traven
        ref={editorRef}
        defaultValue="# Hello World\n\nStart typing..."
        onChange={(val) => console.log("Content changed:", val)}
        options={{
          theme: 'light',
          toolbarMode: 'floating'
        }}
      />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

Vue

@freedomware/traven-vue

The Vue wrapper provides a standard component that integrates cleanly with the Vue 3 Composition API.

Installation

npm install @freedomware/traven-vue @freedomware/traven

Usage

Similar to React, the Vue wrapper is uncontrolled. You pass a defaultValue and listen to the @change event, or use a template ref to access the editor instance.

<template>
  <div>
    <Traven 
      ref="editor"
      :defaultValue="initialContent"
      :options="editorOptions"
      @change="handleUpdate"
    />
    <button @click="save">Save</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Traven } from '@freedomware/traven-vue';
import '@freedomware/traven/assets/skins/skin-starter.css';

const editor = ref(null);
const initialContent = '# Hello Vue\n\nStart typing...';

const editorOptions = {
  theme: 'light',
  toolbarMode: 'floating'
};

function handleUpdate(val) {
  console.log('Typing...', val);
}

function save() {
  // Access current content on demand
  const markdown = editor.value.getValue();
  console.log('Saved:', markdown);
}
</script>

Svelte

@freedomware/traven-svelte

The Svelte wrapper provides a native Svelte component for rendering Traven.

Installation

npm install @freedomware/traven-svelte @freedomware/traven

Usage

Pass defaultValue and bind to the component instance to call getValue() when needed.

<script>
  import { Traven } from '@freedomware/traven-svelte';
  import '@freedomware/traven/assets/skins/skin-starter.css';

  let editor;
  let initialContent = '# Hello Svelte\n\nStart typing...';

  function handleSubmit() {
    // Extract the latest markdown content
    const markdown = editor.getValue();
    console.log("Submit:", markdown);
  }
</script>

<div>
  <Traven
    bind:this={editor}
    defaultValue={initialContent}
    options={{ theme: 'light', toolbarMode: 'floating' }}
  />
  <button on:click={handleSubmit}>Submit</button>
</div>

No Framework?

Even easier! Traven is a single-line drop-in for PHP/Python projects

Other editors (like Quill, TipTap, ProseMirror) all implicitly assume you are in a Node/React/Webpack world. Traven does not assume that.

To hit the ground running, here are some examples to cut and paste:

• Traven working inside a Laravel Blade template
• Traven in a Django form
• Traven embedded in a plain PHP page

Replace a <textarea> with a full rich-text-editor in five seconds. One line is all it takes: Quick Start Guide