Declarative animated syntax highlighter
Automatically turn code snippets into step-by-step animations for the web
Why?
Presenting code in this way (for eg. a coding tutorial, a presentation or in tools for developers) makes changes easy to follow. Also animations look nice, are easy to create, and work reliably without any dependencies.
How?
Frames of code are run through a semantic diffing algorithm and the resulting deltas get turned into animation information … and finally into bog-standard HTML and CSS. No runtime JS required!
Go!
Code.Movie ist just JavaScript library that's fast enough to run in web frontends, but also works server-side. Grab it from NPM or a CDN, add it to your project, skim the tutorial, done!
Quick start tutorial
Note: this is a public alpha
The core library may contain (sometimes egregious) bugs and breaking changes are somewhat frequent. Docs are terse and language support qualities varies. Some important features are currently missing, others are undocumented.
Animations, once generated, will keep working forever (HTML and CSS without dependencies).
Latest update: Decoration support in 0.0.21
Code.Movie 0.0.21 adds support for gutter, line and text decorations