Svelte Sequence Editor

UI widget and logic for editing timed sequences in recursively nested structures of layers and blocks. Aimed at simple video and media editing in the browser.

Documentation

See airlookjs.github.io/svelte-sequence-editor/ for additional examples and documentation.

Installation

$ npm install @airlookjs/svelte-sequence-editor

Usage

import { createSequence, Sequence } from '@airlookjs/svelte-sequence-editor';

const sequenceTemplate = [
    {
		key: 'speak',
		blocks: [
			{
				key: 'audio',
                title: 'Audio',
				inTime: 0,
				outTime: 10000
			}
		]
	},
    {
		key: 'video',
		blocks: [
			{
				key: 'footage',
				title: 'Footage',
				inTime: 0,
				outTime: 10000
            },

		]
	},

]

const sequence = createSequence({
			initialData: ,
			duration: 30000,
			options: {
                // Will make the editor snap values to a frame rate of 30 fps
				roundingBase: () => {
					return (1 / 30) * 1000
				},
			    errorHandler: (error) => {
					console.error('sequence editor error', error);
				}
			}
		});

const { options, duration } = sequence;

Render the component with the sequence object as a prop.

<Sequence {options} {duration} {sequence} />

Styling with tailwind

svelte-sequence-editor uses tailwind for styling.