Create videos with code.

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

Star Fork
Explore More ⇩



npm install vidar


Include it with

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

Let's look at an example:

var movie = new vd.Movie({ canvas: outputCanvas })
var layer = new vd.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 vd.layer.Video({ startTime: 0, source: videoElement })
    .addEffect(new vd.effect.Brightness({ brightness: +100 }))

Using in Node

To use Vidar in Node, use the wrapper:

npm i vidar-node
var vidarNode = require('vidar-node')

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

  // Use vidar normally ...

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

vidarNode() takes an optional Puppeteer page argument, so you can run multiple Vidar 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.