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.
See airlookjs.github.io/svelte-sequence-editor/ for additional examples and documentation.
$ npm install @airlookjs/svelte-sequence-editor
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} />
svelte-sequence-editor uses tailwind for styling.