Create videos with code.

Etro is a JavaScript video-editing framework for the browser and Node

Star Fork
Explore More ⇩



npm install etro


Include it with

<script src="node_modules/etro/dist/etro-iife.js"></script>

Let's look at an example:

var movie = new etro.Movie({ canvas: outputCanvas })
var layer = new etro.layer.Video({ startTime: 0, source: videoElement })  // the layer starts at 0s
movie.record({ frameRate: 24 })  // or just `play` if you don't need to save it
    .then(blob => ...)

This renders videoElement to a blob at 24 fps. This blob can then be downloaded as a video file.

Effects can transform the output of a layer or movie:

var layer = new etro.layer.Video({ startTime: 0, source: videoElement })
    .addEffect(new etro.effect.Brightness({ brightness: +100 }))

Using in Node

To use Etro in Node, use the wrapper:

npm i etro-node
var etroNode = require('etro-node')

etroNode(() => {
  // You can access inputs as html elements and pass them to Etro as usual.
  var image = document.getElementById('input1') // <img> element

  // Use etro normally ...

// Tell Etro Node what inputs to load with { id: path }
}, { input1: 'image.png' }, 'output.mp4')

etroNode() takes an optional Puppeteer page argument, so you can run multiple Etro scripts on the same movie (useful for servers). See the docs.


Thank you very much for considering contributing to this project!

We appreciate any form of contribution:

Please see the contributing guide for more information.