Skip to main content

New CodeMirror plugins

· 3 min read
Yuri Sulyma

The next generation of our CodeMirror recording plugins is here. They now support recording/replaying multiple files (e.g. index.html, style.css, and script.js), and are much easier to set up and configure. Even better, they're also compatible with other animation libraries like Remotion and GSAP!

Check out the demos:

Awesome demo matrix
Plugin / LibraryLiqvidRemotionGSAP
HTMLDemoRenderDemoRenderDemo
PythonDemoRenderDemoRenderDemo
TSXDemoRenderDemoRenderDemo
CursorDemoDemoDemo

You can clone these demos to get started using the plugins yourself. In the coding demos, the Playground tab is an editor where you can experiment with the code on your own; I recommend explaining this to your viewers explicitly. I've also included demos for the cursor package, which is not as exciting, but still very useful for making tutorials.

Interactive video is a new and exciting space, and I really really REALLY REALLY want to avoid a format war. (Having spent several hours of my life getting CJS and ESM to play nicely…) I've made a WHATWG proposal to standardize the interface which allows these plugins to be interoperable with other libraries. I'll talk more about this proposal in another blog post!

Here's the documentation for the new packages: