Quick Start

Installation

npm

npm i writetrack

pnpm

pnpm add writetrack

yarn

yarn add writetrack

bun

bun add writetrack

Capture & Analyse

Attach WriteTrack to a textarea, capture a typing session, and render a full analysis scorecard:

import { WriteTrack } from 'writetrack';
import { WtScorecard } from 'writetrack/viz';

// Register the scorecard web component
WtScorecard.register();

// Attach to any textarea, input, or contenteditable element
const textarea =
  document.querySelector<HTMLTextAreaElement>('#response-field')!;
const tracker = new WriteTrack({ target: textarea });
tracker.start();

// On form submit: analyse the session and render a scorecard
document
  .getElementById('response-form')!
  .addEventListener('submit', async (e) => {
    e.preventDefault();
    tracker.stop();

    const report = await tracker.getSessionReport();
    document.querySelector<WtScorecard>('#scorecard')!.setData(report);
  });

<form id="response-form">
  <textarea
    id="response-field"
    rows="10"
    placeholder="Type your response..."
  ></textarea>
  <button type="submit">Submit</button>
</form>
<wt-scorecard id="scorecard"></wt-scorecard>

That’s it — no server, no license key needed on localhost. The WASM analysis module loads automatically on the first call.

Next Steps

• Vanilla JavaScript — Detailed guide for using WriteTrack without a framework
• React — useWriteTrack hook with automatic lifecycle management
• Vue — useWriteTrack composable for Vue 3
• Next.js — Client-side integration with App Router and Pages Router
• Editor Plugins — Plugins for TipTap, CKEditor, ProseMirror, Quill, Lexical, Slate, and TinyMCE
• Analysis — Deep dive on the six analysis categories
• Licensing — Get a license key for production use
• API Reference — Complete method and type reference