Framework and Editor Integrations

WriteTrack attaches to standard text fields, framework-managed elements, and rich text editors. Choose the guide for the surface where your users write. Every integration returns the same session report, so storage and review code can stay shared.

JavaScript frameworks

Use a framework adapter when your application owns the text field and its lifecycle.

Vanilla JavaScript Inputs, textareas, contenteditable elements, and ES modules

React The useWriteTrack hook and automatic lifecycle management

Vue The useWriteTrack composable for Vue 3 applications

Next.js Client-side capture with the App Router or Pages Router

Rich text editors

Editor integrations connect WriteTrack to the editor’s own document model and handle cursor positions, lifecycle events, and editor-specific text changes.

Editors TipTap CKEditor 5 ProseMirror Quill Lexical Slate TinyMCE

How integrations work

WriteTrack runs inside the browser alongside your editor. It captures the writing process locally and returns plain JSON when your application asks for it. Your application can keep the report in the browser, store it in your own backend or route it through an output sink.

Start with the Vanilla JavaScript guide for an unlisted editor. Any editor that exposes a stable text element and cursor-position callback can use the core SDK directly.

Browser-based writing platforms

Learn more about the Overleaf pilot.