CodeMirror Record

CodeMirror 6 · v2 stable

Record an edit.
Replay the timeline.

Stable v2 captures CM6 transactions, selections, and timing as the established portable JSON contract. Load the payload into a player to reproduce the coding session at any speed.

Try the workflow See the integration code

Using CodeMirror 5.x? Try the version 1 demo instead.

Session pipeline v2.0.0
  1. CodeRecord.listen()
  2. getRecords()
  3. addOperations(json)
  4. CodePlay.play()

Editor activity JSON repeatable playback

The mental model

One session, four explicit steps

Recording and playback are separate. The JSON payload is the bridge between them, so it can be stored, sent, or replayed later.

  1. 01

    Listen

    Attach CodeRecord to an editable CM6 EditorView.

  2. 02

    Capture

    Call getRecords() to drain pending activity into JSON.

  3. 03

    Load

    Pass the payload to CodePlay.addOperations().

  4. 04

    Replay

    Play, pause, seek, or change speed without touching the recording.

Interactive demo

Move a real recording through the pipeline

Edit on the left, inspect the serialized payload, then replay it on the right.

01 · Record

Recorder

Listening

Change the starter code. Every edit and cursor movement is queued by CodeRecord.

session.js Editable

Make an edit to create the first operation.

02–03 · Transfer

JSON bridge

Capture drains pending operations. Load sends the cumulative payload to the player.

recording.json 
No payload yet.

Edit the recorder, then capture.
Entries
0
Size
0 B

Waiting for a recorded edit.

04 · Replay

Player

Not loaded

CodePlay applies the loaded operations to an identical starting document.

replay.js Read only
0:00.0 / 0:00.0
Runtime feedback

Event stream

Player events make application state easy to synchronize.

  1. ReadyListening for editor activity.

Minimal integration

The same workflow in code

The recorder and player can live in different views—or different systems. Preserve the same starting document and move the JSON payload wherever the replay needs to run.

  • getRecords() returns a JSON string and clears the pending batch.
  • addOperations() accepts that string and prepares the timeline.
  • Stable v2 requires the same bytes to replay consistently in the maintained CM5 player.
  • Subscribe to play, pause, seek, and end.
workflow.js CodeMirror 6 
import {CodeRecord, CodePlay} from 'codemirror-record';

const recorder = new CodeRecord(recordView);
recorder.listen();

// Capture and persist this JSON string.
const records = recorder.getRecords();

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

player.on('end', () => {
  console.log('Replay complete');
});

if (JSON.parse(records).length > 0) {
  player.addOperations(records);
  player.play();
}