An embeddable, framework-agnostic, browser-based video editor

https://miru.media/video-editor

npm install webgl-video-editor

<!-- after importing the library, the <video-editor> custom element will be defined -->
<video-editor id="trimmer" source="video.mp4"></video-editor>
<button id="export" type="buton">Render video</button>

<script>
  import 'webgl-video-editor'

  const editor = document.getElementById('editor')

  // Render and encode the video composition
  button.addEventListener('click', async () => {
    const blob = await editor.export()

    const anchor = document.createElement('a')
    const blobUrl = URL.createObjectURL(blob)

    anchor.href = blobUrl
    anchor.target = '_blank'
    anchor.download = 'trimmed.webm'
    anchor.dispatchEvent(new MouseEvent('click'))
    URL.revokeObjectURL(blobUrl)
  })
</script>

API Reference

https://miru.media/api/webgl-video-editor/

Powered by:

• Mediabunny
• WebCodecs API
• LibAVJS-WebCodecs-Polyfill

Funding

This project is funded through NGI Zero Core, a fund established by NLnet with financial support from the European Commission's Next Generation Internet program. Learn more at the NLnet project page.