Repository files navigation

Editly is a tool and framework for declarative NLE (non-linear video editing) using Node.js and ffmpeg. Editly allows you to easily andprogrammatically create a video from aset of clips, images, audio and titles, with smooth transitions and music overlaid.

Editly has a simple CLI for quickly assembling a video from a set of clips or images, or you can use its more flexible JavaScript API.

Inspired byffmpeg-concat, editly is much faster and doesn't require much storage because it usesstreaming editing. Editly aims to be very extensible and feature rich with a pluggable interface for adding newdynamic content.

This GIF / YouTube was created with this command: "editlycommonFeatures.json5". Seemore examples here.

• Edit videos with code! 🤓
• Declarative API with fun defaults
• Create colorful videos with random colors generated from aesthetically pleasing palettes and random effects
• Supports any input size, e.g. 4K video and DSLR photos
• Can output to any dimensions and aspect ratio, e.g.Instagram post (1:1),Instagram story (9:16),YouTube (16:9), or any other dimensions you like.
• Content is scaled and letterboxed automatically, even if the input aspect ratio is not the same and the framerate will be converted.
• Speed up / slow down videos automatically to match thecutFrom/cutTo segment length with each clip'sduration
• Overlay text and subtitles on videos, images or backgrounds
• Accepts custom HTML5 Canvas / Fabric.js JavaScript code for custom screens or dynamic overlays
• Render custom GL shaders (for example fromshadertoy)
• Can output GIF
• Overlay transparent images or even videos with alpha channel
• Show different sub-clips for parts of a clips duration (B-roll)
• Picture-in-picture
• Vignette
• Preserve/mix multiple audio sources
• Automatic audio crossfading
• Automatic audio ducking and normalization

• Create a slideshow from a set of pictures with text overlay
• Create a fast-paced trailer or promo video
• Create a tutorial video with help text
• Create news stories
• Create an animated GIF
• Resize video to any size or framerate and with automatic letterboxing/cropping (e.g. if you need to upload a video somewhere but the site complainsVideo must be 1337x1000 30fps)
• Create a podcast with multiple mixed tracks

Seeexamples

• Windows, MacOS or Linux
• Node.js installed (Use of the latest LTS version is recommended,v12.16.2 or newer on MacOS.)
• ffmpeg (andffprobe)installed and available inPATH
• (Linux) may require some extra steps. Seeheadless-gl.
• Editly is now ESM only

npm i -g editly

Runeditly --help for usage

Create a simple randomized video edit from videos, images and text with an audio track:

editly \  title:'My video' \  clip1.mov \  clip2.mov \  title:'My slideshow' \  img1.jpg \  img2.jpg \  title:'THE END' \  --fast \  --audio-file-path /path/to/music.mp3

Or create an MP4 (or GIF) from a JSON or JSON5 edit spec(JSON5 is just a more user friendly JSON format):

editly my-spec.json5 --fast --keep-source-audio --out output.gif

For examples of how to make a JSON edit spec, see below orexamples.

Without--fast, it will default to using thewidth,height andframe rate from thefirst input video.All other clips will be converted to these dimensions. You can of course override any or all of these parameters.

• TIP: Use this tool in conjunction withLosslessCut
• TIP: If you need catchy music for your video, have a look atthis YouTube or theYouTube audio library. Then useyoutube-dl to download the video, and then point--audio-file-path at the video file.Be sure to respect their license!

importeditlyfrom"editly";// See editSpec documentationawaiteditly(editSpec);

Edit specs are JavaScript / JSON objects describing the whole edit operation with the following structure:

{outPath,width,height,fps,allowRemoteRequests:false,defaults:{duration:4,transition:{duration:0.5,name:'random',audioOutCurve:'tri',audioInCurve:'tri',},layer:{      fontPath,// ...more layer defaults},layerType:{'fill-color':{color:'#ff6666',}// ...more per-layer-type defaults},},clips:[{      transition,      duration,layers:[{          type,// ...more layer-specific options}// ...more layers],}// ...more clips],audioFilePath,loopAudio:false,keepSourceAudio:false,clipsAudioVolume:1,outputVolume:1,audioTracks:[{      path,mixVolume:1,cutFrom:0,      cutTo,start:0,},// ...more audio tracks],audioNorm:{enable:false,gaussSize:5,maxGain:30,}// Testing options:enableFfmpegLog:false,verbose:false,fast:false,}

transition.name can be any ofgl-transitions, or any of the following:directional-left,directional-right,directional-up,directional-down,random ordummy.

Seeexamples andcommonFeatures.json5

For video layers, if parentclip.duration is specified, the video will be slowed/sped-up to matchclip.duration. IfcutFrom/cutTo is set, the resulting segment (cutTo-cutFrom) will be slowed/sped-up to fitclip.duration. If the layer has audio, it will be kept (and mixed with other audio layers if present.)

Audio layers will be mixed together. IfcutFrom/cutTo is set, the resulting segment (cutTo-cutFrom) will be slowed/sped-up to fitclip.duration. The slow down/speed-up operation is limited to values between0.5x and100x.

This is a special case ofaudioTracks that makes it easier to start the audio relative toclips start times without having to calculate global start times.

detached-audio has the exact same properties asaudioTracks, exceptstart time is relative to the clip's start.

Example of detached audio tracks

Full screen image

See also SeeKen Burns parameters.

Image overlay with a custom position and size on the screen. NOTE: If you want to use animated GIFs usevideo instead.

See alsoKen Burns parameters.

• fontPath - Seedefaults.layer.fontPath
• text - Title text to show, keep it short
• textColor - default#ffffff
• position - SeePosition parameter

See alsoKen Burns parameters

• fontPath - Seedefaults.layer.fontPath
• text - Subtitle text to show
• textColor - default#ffffff

Title with background

• text - See typetitle
• textColor - See typetitle
• background -{ type, ... } - See typeradial-gradient,linear-gradient orfill-color
• fontPath - See typetitle

• fontPath - Seedefaults.layer.fontPath
• text
• textColor - default#ffffff
• backgroundColor - default#d02a42
• position - SeePosition parameter

• fontPath - Seedefaults.layer.fontPath
• text
• fontSize
• charSpacing
• color
• position - SeePosition parameter

• color - Color to fill background, default: randomize

• colors - Array of two colors, default: randomize

• colors - Array of two colors, default: randomize

🌈🌈🌈

SeecustomCanvas.js

• func - Custom JavaScript function

SeecustomFabric.js

• func - Custom JavaScript function

Loads a GLSL shader. Seegl.json5 andrainbow-colors.frag

• fragmentPath
• vertexPath (optional)

audioTracks property can optionally contain a list of objects which specify audio tracks that can be started at arbitrary times in the final video. These tracks will be mixed together (mixVolume specifying a relative number for how loud each track is compared to the other tracks). Because audio fromclips will be mixed separately fromaudioTracks,clipsAudioVolume specifies the volume of thecombined audio fromclips relative to the volume ofeach of the audio tracks fromaudioTracks.

The difference betweenaudioTracks andLayer type 'audio' is thataudioTracks will continue to play across multipleclips and can start and stop whenever needed.

SeeaudioTracksexample

See alsoLayer type 'detached-audio'.

You can enable audio normalization of the final output audio. This is useful if you want to achieve Audio Ducking (e.g. automatically lower volume of all other tracks when voice-over speaks).

audioNorm parameters aredocumented here.

Example of audio ducking

resizeMode - How to fit image to screen. Can be one of:

• contain - All the video will be contained within the frame and letterboxed
• contain-blur - Likecontain, but with a blurred copy as the letterbox
• cover - Video be cropped to cover the whole screen (aspect ratio preserved)
• stretch - Video will be stretched to cover the whole screen (aspect ratio ignored).

Defaultcontain-blur.

See:

• image.json5
• videos.json5

Certain layers support the position parameter

position can be one of either:

• top,bottomcenter,top-left,top-right,center-left,center-right,bottom-left,bottom-right
• An object{ x, y, originX = 'left', originY = 'top' }, where{ x: 0, y: 0 } is the upper left corner of the screen, and{ x: 1, y: 1 } is the lower right corner,x is relative to video width,y to video height.originX andoriginY are optional, and specify the position's origin (anchor position) of the object.

Seeposition.json5

This should help you use editly as a containerized CLI, without worrying aboutgetting all the right versions of dependencies on your system.

$ git clone https://github.com/mifi/editly.git$cd editly/examples$ git clone https://github.com/mifi/editly-assets.git assets$cd ..$ docker-compose up$ docker-compose run editly bash -c"cd examples && editly audio1.json5 --out /outputs/audio1.mp4"$ docker cp editly:/outputs/audio1.mp4.

• If you getError: The specified module could not be found., try:npm un -g editly && npm i -g --build-from-source editly (see#15)
• If you get an error about gl returning null, see Requirements.
• If you get an error/bin/sh: pkg-config: command not found, try to use newest Node.js LTS version

This project is maintained by me alone. The project will always remain free and open source, but if it's useful for you, consider supporting me. :) It will give me extra motivation to improve it.

Paypal

This package would not exist without the support and help from all the contributors and sponsors!

Special thanks to:

• Patrick Connolly - docker-compose support
• Skayo - Typescript support

• https://github.com/mifi/reactive-video - React based alternative to editly
• https://github.com/JonnyBurger/remotion - React based alternative to editly (not open source)
• https://github.com/pankod/canvas2video - Similar project based on Cairo
• https://github.com/h2non/videoshow - Inspired editly
• https://github.com/transitive-bullshit/ffmpeg-concat - Inspired editly
• http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html - Fast blur effect used in editly
• https://github.com/transitive-bullshit/awesome-ffmpeg
• https://github.com/sjfricke/awesome-webgl
• https://www.mltframework.org/docs/melt/
• Icon made byFreepik fromwww.flaticon.com

Submit a PR if you want to share your videos or project created with editly here.

• https://www.youtube.com/channel/UCDUauYxuY5Cv1Z6AuD3UGDw?view_as=subscriber

Made with ❤️ in 🇳🇴

More apps by mifi.no

Follow me onGitHub,YouTube,IG,Twitter for more awesome content!