TipTap Integration

WriteTrack includes a first-party TipTap extension, compatible with @tiptap/core v2.0+ and tested against v3.19. See React and Vue examples below.

Installation

Install WriteTrack alongside your TipTap packages:

npm

npm i writetrack @tiptap/core @tiptap/starter-kit

pnpm

pnpm add writetrack @tiptap/core @tiptap/starter-kit

yarn

yarn add writetrack @tiptap/core @tiptap/starter-kit

bun

bun add writetrack @tiptap/core @tiptap/starter-kit

Basic Usage

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import { WriteTrackExtension } from 'writetrack/tiptap';

const editor = new Editor({
  element: document.querySelector('#editor'),
  extensions: [
    StarterKit,
    WriteTrackExtension.configure({
      license: 'your-license-key',
    }),
  ],
});

// Access WriteTrack data when needed
const data = editor.storage.writetrack.tracker.getData();

Configuration

Pass options via .configure():

WriteTrackExtension.configure({
  license: 'your-license-key',
  userId: 'user-123',
  contentId: 'document-456',
  metadata: { formName: 'signup' },
  autoStart: true, // default
});

Option	Type	Default	Description
license	string	undefined	WriteTrack license key
userId	string	undefined	User identifier included in metadata
contentId	string	undefined	Content identifier included in metadata
metadata	Record<string, unknown>	undefined	Additional metadata
autoStart	boolean	true	Start tracking when editor is created
wasmUrl	string	undefined	URL to WASM binary for analysis
persist	boolean	false	Enable IndexedDB session persistence (requires contentId)

Accessing Data

The extension stores the WriteTrack instance in TipTap’s storage system:

// Get the tracker instance
const tracker = editor.storage.writetrack.tracker;

// Get typing data
const data = tracker.getData();

// Check tracking status
const isTracking = editor.storage.writetrack.isTracking;

React

import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { WriteTrackExtension } from 'writetrack/tiptap';

const writetrack = WriteTrackExtension.configure({
  license: 'your-license-key',
});

function FormEditor() {
  const editor = useEditor({
    extensions: [StarterKit, writetrack],
  });

  const handleSubmit = () => {
    const data = editor?.storage.writetrack.tracker?.getData();
    console.log('Typing data:', data);
  };

  return (
    <div>
      <EditorContent editor={editor} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

Vue

<script setup>
import { useEditor, EditorContent } from '@tiptap/vue-3';
import StarterKit from '@tiptap/starter-kit';
import { WriteTrackExtension } from 'writetrack/tiptap';

const writetrack = WriteTrackExtension.configure({
  license: 'your-license-key',
});

const editor = useEditor({
  extensions: [StarterKit, writetrack],
});

function handleSubmit() {
  const data = editor.value?.storage.writetrack.tracker?.getData();
  console.log('Typing data:', data);
}
</script>

<template>
  <div>
    <EditorContent :editor="editor" />
    <button @click="handleSubmit">Submit</button>
  </div>
</template>

Manual DOM Attachment

If you prefer not to use the extension, you can attach WriteTrack directly to TipTap’s editable element:

import WriteTrack from 'writetrack';
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';

const editor = new Editor({
  element: document.querySelector('#editor'),
  extensions: [StarterKit],
  onCreate({ editor }) {
    const tracker = new WriteTrack({
      target: editor.view.dom,
      license: 'your-license-key',
    });
    tracker.start();
  },
});

Note

The editable element is editor.view.dom — a <div> with contenteditable="true" managed by ProseMirror under the hood.

TypeScript

import type {
  WriteTrackExtensionOptions,
  WriteTrackExtensionStorage,
} from 'writetrack/tiptap';