ReplayIt
Animate your code writing in VS Code using a simple .replay script format.
Features
- Replay scripted editing commands
- Type text by line or by character
- Write code blocks with automatic indentation
- Open files, move cursor, select/delete, replace text
- Scroll editor view with animation
- Pause/resume execution
- Save automatically on new lines
- Toggle comments in
.replay files
- Preview HTML files with local server
- Comprehensive script control with pause, resume, and cancel
- Record screen with FFmpeg
Note: If FFmpeg is not already installed, ReplayIt will download and install it automatically when recording starts from https://github.com/eugeneware/ffmpeg-static/releases/download/b6.1.1/.
Usage
- Create a file named
.replayit (or use another name and configure replayit.script.file).
- Use
## separators for replay command blocks.
- Run
ReplayIt: Start ReplayIt from the Command Palette.
Example Script
// Comment
## OPEN src/extension.js
## CLOSE_ALL
## WRITE --BY LINE
This is a test.
It writes one line at a time.
## WRITE --BY CHAR
Character-by-character write.
## WRITE_BLOCK function helloWorld
console.log("Hello world!");
## WRITE_BLOCK --BY LINE --HEADER "function lineBlock()" --BRACES {}
console.log("Line 1");
console.log("Line 2");
## WRITE_BLOCK --BY CHAR --HEADER "function charBlock()" --BRACES {}
console.log("Char mode line 1");
console.log("Char mode line 2");
## WRITE_NEW_LINE
## SAVE
## SELECT --FROM L1,C1 --TO L1,C5
## DELETE --FROM L1,C1 --TO L1,C5
## REPLACE --FROM L1,C1 --TO L1,C5 --WITH Replaced
## MOVE --TO L1,C1
## SCROLL --TO L10
## SLEEP 500MS
## CLEAR
## PAUSE Pausing execution...
## RESUME
## START_RECORD --OUTPUT recordings
## STOP_RECORD
## PREVIEW_START --PORT 3000 --FOLDER dist
## PREVIEW_STOP
## SHOW_INFO Done!
VS Code Configuration Updates
When ReplayIt starts executing, the following VS Code settings are automatically updated to prevent auto-completion and other automatic behaviors that would interfere with the script:
| Setting |
Updated Value |
Original Value |
window.title |
CodeReplay-{random} |
Workspace title |
html.autoClosingTags |
false |
Original value |
html.autoCreateQuotes |
false |
Original value |
js/ts.autoClosingTags.enabled |
false |
Original value |
editor.autoClosingBrackets |
never |
Original value |
editor.autoClosingDelete |
never |
Original value |
editor.autoClosingOvertype |
never |
Original value |
editor.autoClosingQuotes |
never |
Original value |
editor.stickyScroll.enabled |
false |
Original value |
These settings are automatically restored to their original values when the execution completes (successfully, with errors, or when canceled).
Supported Commands
Writing Text
| Command |
Description |
Options |
WRITE |
Write text as a block |
None |
WRITE --BY CHAR |
Type text one character at a time |
None |
WRITE --BY LINE |
Write text line-by-line |
None |
WRITE_NEW_LINE |
Insert a new line |
None |
WRITE_BLOCK |
Write a code block with braces |
--HEADER <text>, --BRACES <chars>, --BY LINE, --BY CHAR |
Text Selection & Editing
| Command |
Description |
Options |
SELECT |
Select a range of text |
--FROM L<line>,C<col>, --TO L<line>,C<col> |
DELETE |
Delete a range of text |
--FROM L<line>,C<col>, --TO L<line>,C<col> |
REPLACE |
Replace a range of text |
--FROM L<line>,C<col>, --TO L<line>,C<col>, --WITH <text> |
Cursor & View
| Command |
Description |
Options |
MOVE |
Move cursor to a position |
--TO L<line>,C<col> |
SCROLL |
Scroll editor to a line |
--TO L<line> |
File Operations
| Command |
Description |
Options |
OPEN |
Open a file |
<file_path> (relative to workspace root) |
CLOSE |
Close a file |
<file_path> (relative to workspace root) |
CLOSE_ALL |
Close all open files |
None |
SAVE |
Save the active editor |
None |
Execution Control
| Command |
Description |
Options |
PAUSE |
Pause execution with optional message |
[message] |
RESUME |
Resume execution |
None |
CANCEL |
Cancel the entire execution |
None |
SLEEP |
Pause for a duration |
<n>MS (milliseconds) |
CLEAR |
Clear the active editor |
None |
Recording
| Command |
Description |
Options |
START_RECORD |
Start recording screen with FFmpeg |
--OUTPUT <folder>, --FFMPEG_ARGS <args> |
STOP_RECORD |
Stop the current recording |
None |
Preview
| Command |
Description |
Options |
PREVIEW_START |
Start a local HTTP server for HTML preview |
--PORT <port>, --FOLDER <path> |
PREVIEW_STOP |
Stop the preview server |
None |
| Command |
Description |
Options |
SHOW_INFO |
Display an information message |
<message> |
Commands Provided
replayit.start — Start ReplayItreplayit.pause — Pause ReplayItreplayit.resume — Resume ReplayItreplayit.cancel — Cancel ReplayItreplayit.toggleComment — Toggle comments in .replay scripts
Default Keybindings
Ctrl+K Alt+S — Start ReplayItCtrl+K Alt+P — Pause ReplayItCtrl+K Alt+R — Resume ReplayItCtrl+K Alt+C — Cancel ReplayItCtrl+K Alt+T — Toggle comments in replay files
Configuration
Available settings under replayit:
replayit.script.file — script file namereplayit.write.duration — typing duration in msreplayit.scroll.duration — scroll animation duration in msreplayit.scroll.auto — auto-scroll enabledreplayit.save.on.new.line — save after new linesreplayit.scroll.visible.line — visible line threshold for scrollingreplayit.scroll.lines — scroll offset line countreplayit.scroll.char.js — scroll char for CSSreplayit.scroll.char.css — scroll char for JSreplayit.scroll.char — default scroll char
Language Support
- File extension:
.replay
- Language id:
replay
- Grammar scope:
source.replay
Notes
- Use
// for comments inside .replay files.
- Commands are split by
##.
- For best results, open the workspace root before running a script.
| |
