CodeMirror Record

CodeMirror 5 · MIT

Record editing activity.
Replay the timeline.

CodeRecord captures editor activity—and application events you add—as a JSON string. CodePlay loads that string for pause, seek, and speed-controlled playback.

Try the interactive demo Read the quick start
npm install codemirror-record@^1 codemirror@^5

Prefer an explicit maintenance selector? Use codemirror-record@cm5.

Upgraded to CodeMirror 6.x? Use CodeMirror Record version 2 instead.

Session trace 03 operations

Recorded activity

  1. change+12 characters
  2. cursorline 2 · ch 18
  3. activityrun preview
CodeRecord JSON string CodePlay

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, selections, and cursor movement from CodeMirror 5.

changes · cursorActivity
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
quick-start.js CodeMirror 5 
import {CodeRecord, CodePlay} from 'codemirror-record';

playEditor.setValue(recordEditor.getValue());

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

recorder.listen();

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

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

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

Compatibility

Built for CodeMirror 5

Use the same starting document in the recorder and player. CodeMirror 6 uses a different editor API and is supported by package v2. Existing recording JSON stays portable; follow the migration guide when changing editor generations.

Editor
CodeMirror 5.37+
Payload
JSON string
License
MIT

Ready for the full round trip?

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

Try the interactive demo Read the API