An embeddable, framework-agnostic, browser-based 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>

Mediabunny
WebCodecs API
LibAVJS-WebCodecs-Polyfill

Design adapted from Vladimir Palyanov's work