Edit code live

Insert, delete, and refactor code on screen, mid-scene, to show changes happening.

Goal

Show code changing — inserting new lines, deleting characters, and refactoring — so a viewer watches the edit happen rather than seeing before/after stills.

Type it out first

Most live edits begin with a typewriter:

let code = s.code(read("src/main.rs"), "rust", 96, 160);
code.fade_in(0, 12).typewriter(6, 60);

Backspace and removal styles

Delete characters from the end of the current text:

code.backspace(sec(3), ms(667)); // delete the tail over two-thirds of a second

To delete back to a known prefix and keep it:

code.backspace_to("    return a / b", 90, 20);

CineCode offers several removal styles for how vanishing text leaves the screen — fade, wipe, shrink, blur, or morph:

Backspace and the family of removal styles.

Files that made this video

A backspace and removal-style gallery.

codescene.toml

Project manifest: output size, theme, scene order, transitions, and shader names.

Open full file

scenes = ["scenes/intro.ccs", "scenes/terrain.ccs", "scenes/pathfind.ccs", "scenes/particles.ccs", "scenes/graph.ccs", "scenes/life.ccs", "scenes/boids.ccs", "scenes/tweens.ccs", "scenes/inserts.ccs", "scenes/edit.ccs", "scenes/edit_source.ccs", "scenes/editor_theme.ccs", "scenes/font_set.ccs", "scenes/remove_styles.ccs", "scenes/morph.ccs", "scenes/shapes.ccs", "scenes/effects.ccs"]
theme = "dark_documentary"

[episode]
title = "How Rivers Form"

[output]
fps = 30
width = 1280
height = 720

[shaders]
aurora = "shaders/aurora.wgsl"
glitch = "shaders/glitch.wgsl"
scanlines = "shaders/scanlines.wgsl"

[transition]
kind = "crossfade"
frames = 18

code.fade_clip(60, 16);   // fade the clipped tail
code.wipe_out(60, 16);    // wipe it away
code.shrink_out(60, 16);  // shrink it out
code.blur_out(60, 16);    // blur it out
code.morph_out(60, 16);   // morph it out

Retype the corrected version

After removing, type the replacement:

code.retype("    if b == 0 { return 0 }\n    return a / b", 110, 40);

A complete refactor — guarding a divide by zero — looks like this:

A live refactor performed on screen.

Files that made this video

A live refactor scene: the script reads a risky function and animates the inserted guard clause.

codescene.toml

Project manifest: output size, theme, scene order, transitions, and shader names.

Open full file

scenes = ["scenes/intro.ccs", "scenes/terrain.ccs", "scenes/pathfind.ccs", "scenes/particles.ccs", "scenes/graph.ccs", "scenes/life.ccs", "scenes/boids.ccs", "scenes/tweens.ccs", "scenes/inserts.ccs", "scenes/edit.ccs", "scenes/edit_source.ccs", "scenes/editor_theme.ccs", "scenes/font_set.ccs", "scenes/remove_styles.ccs", "scenes/morph.ccs", "scenes/shapes.ccs", "scenes/effects.ccs"]
theme = "dark_documentary"

[episode]
title = "How Rivers Form"

[output]
fps = 30
width = 1280
height = 720

[shaders]
aurora = "shaders/aurora.wgsl"
glitch = "shaders/glitch.wgsl"
scanlines = "shaders/scanlines.wgsl"

[transition]
kind = "crossfade"
frames = 18

Open Files that made this video and read the two files together: src/edit_source.rs is the original code, and scenes/edit_source.ccs contains the animated edit. That split is the model for every live-code scene.

Insert new lines in place

To reveal new lines without retyping the whole block, use insert animations:

Insert animations open space and reveal new code in place.

Files that made this video

A scene script that creates insert, shift, and spotlight animations.

codescene.toml

Project manifest: output size, theme, scene order, transitions, and shader names.

Open full file

scenes = ["scenes/intro.ccs", "scenes/terrain.ccs", "scenes/pathfind.ccs", "scenes/particles.ccs", "scenes/graph.ccs", "scenes/life.ccs", "scenes/boids.ccs", "scenes/tweens.ccs", "scenes/inserts.ccs", "scenes/edit.ccs", "scenes/edit_source.ccs", "scenes/editor_theme.ccs", "scenes/font_set.ccs", "scenes/remove_styles.ccs", "scenes/morph.ccs", "scenes/shapes.ccs", "scenes/effects.ccs"]
theme = "dark_documentary"

[episode]
title = "How Rivers Form"

[output]
fps = 30
width = 1280
height = 720

[shaders]
aurora = "shaders/aurora.wgsl"
glitch = "shaders/glitch.wgsl"
scanlines = "shaders/scanlines.wgsl"

[transition]
kind = "crossfade"
frames = 18

code.grow_in(80, 20);   // grow the inserted region in
code.slide_up(80, 20);  // existing lines slide up to make room

A full live-edit scene

A complete live-code-edit scene from the example project.

Files that made this video

A complete live-edit scene that types, removes, and retypes code on screen.

codescene.toml

Project manifest: output size, theme, scene order, transitions, and shader names.

Open full file

scenes = ["scenes/intro.ccs", "scenes/terrain.ccs", "scenes/pathfind.ccs", "scenes/particles.ccs", "scenes/graph.ccs", "scenes/life.ccs", "scenes/boids.ccs", "scenes/tweens.ccs", "scenes/inserts.ccs", "scenes/edit.ccs", "scenes/edit_source.ccs", "scenes/editor_theme.ccs", "scenes/font_set.ccs", "scenes/remove_styles.ccs", "scenes/morph.ccs", "scenes/shapes.ccs", "scenes/effects.ccs"]
theme = "dark_documentary"

[episode]
title = "How Rivers Form"

[output]
fps = 30
width = 1280
height = 720

[shaders]
aurora = "shaders/aurora.wgsl"
glitch = "shaders/glitch.wgsl"
scanlines = "shaders/scanlines.wgsl"

[transition]
kind = "crossfade"
frames = 18

let s = scene("Live Code Edit", 200);
let code = s.code(read("src/main.rs"), "rust", 96, 160);
code.font_size(34).fade_in(0, 12).typewriter(6, 70);

code.spotlight(4, 0.6, 90, 16);
code.backspace_to("fn divide(a: i32, b: i32) -> i32 {", 120, 18);
code.retype("fn divide(a: i32, b: i32) -> i32 {\n    if b == 0 { return 0 }\n    a / b\n}", 145, 40);
code.unfocus(195, 5);

Reference

Every animation method (backspace, backspace_to, retype, grow_in, fade_clip, …) is listed in Code & node animations.

Goal

Type it out first

Backspace and removal styles

Retype the corrected version

Insert new lines in place

A full live-edit scene

Reference

On this page