CodeMirror Record

CodeMirror 5 · session playback

Record an edit.
Replay the timeline.

CodeMirror Record captures text edits, selections, and cursor activity as portable JSON. Load that payload into a player to reproduce the coding session at any speed.

Try the workflow See the integration code

Upgraded to CodeMirror 6.x? Try the version 2 demo instead.

Session pipeline v1.1.8
  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 CodeMirror instance.

  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.
  • Subscribe to play, pause, seek, and end.
workflow.js CodeMirror 5 
import {CodeRecord, CodePlay} from 'codemirror-record';

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

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

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

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

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