CodeMirror Record

CodeMirror 6 · stable v2

Record editing activity.
Replay the timeline.

Version 2 is the default CodeMirror 6 recorder and player. CodeMirror 5 stays maintained on version 1, with the same CodeRecord, CodePlay, and portable JSON recording contract.

Try the interactive demo Read the quick start
CM6 · default npm install codemirror-record@^2 @codemirror/state@^6 @codemirror/view@^6
CM5 npm install codemirror-record@^1 codemirror@^5

Using CodeMirror 5.x? Try CodeMirror Record version 1 instead.

Moving an existing application? Follow the CM5 → CM6 migration runbook and keep stored recording strings unchanged.

Cross-version recording seam one contract

Release tracks

  1. v1 CM5 adapterrecord + play · maintenance
  2. wire JSON contractordered operation stream
  3. v2 CM6 adapterrecord + play · transaction-native
CM5 recorder / player shared JSON CM6 recorder / player

How it works

One session, four explicit steps

Recording and playback remain separate. The JSON string is the bridge, so your application decides when and where a session moves.

  1. 01

    Record

    Attach CodeRecord and call listen().

  2. 02

    Capture

    getRecords() drains pending activity into JSON.

  3. 03

    Load

    Pass a non-empty records string to addOperations().

  4. 04

    Replay

    Play, pause, seek, and adjust the timeline speed.

What gets recorded

The editor state your replay needs

CodeMirror Record keeps the payload compact while preserving the interaction details that make a coding session understandable.

01

Editor activity

Capture text changes, directed selections, and cursor movement in either editor generation.

CM5 events · CM6 transactions
02

Application activity

Add JSON-serializable events that happen outside the editor.

recordExtraActivity()
03

Playback control

Pause, seek, change speed, and subscribe to player lifecycle events.

play · pause · seek · end

Quick start

Wire the round trip in a few calls

Start both editors with the same document. Capture only after the user has interacted with the recording editor, then guard against an empty batch before loading it.

Read the complete API and data format View the package on npm Migrate a CodeMirror 5 integration
quick-start.js CodeMirror 6 · v2 
import {CodeRecord, CodePlay} from 'codemirror-record';

const recorder = new CodeRecord(recordView);
const player = new CodePlay(playView, {
  maxDelay: 3000,
  speed: 1,
});

recorder.listen();

function replayPendingOperations() {
  const records = recorder.getRecords();

  if (JSON.parse(records).length === 0) return;

  player.addOperations(records);
  player.play();
}

Choose the editor seam

Two package majors. One recording contract.

The editor adapters differ because CodeMirror 6 replaced the CM5 event model with transactions. Stored sessions stay on the established wire format.

CodeMirror 6 Stable default

Package v2

Transaction-native recording and atomic playback for an EditorView.

codemirror-record@^2
Branch
main
npm tags
latest · cm6
Verified interoperability v1 JSON wire

Every published v1.x release is exercised with operations, selections, timing, and extras in both directions.

CodeMirror 5 Maintained

Package v1

The established event-based adapter remains available for existing applications.

codemirror-record@^1
Branch
v1
npm tag
cm5
Read the maintained CM5 API →

Existing ^1 installations do not cross the major-version line. Real CM5 and CM6 recorders and players pass the full two-way package matrix; recorded JSON does not require a schema migration. Read the migration runbook or inspect the release policy.

Ready for the full round trip?

Record an edit. Inspect the JSON. Replay the timeline.

Try the interactive demo Read the API