@airlookjs/svelte-sequence-editor
TypeScript icon, indicating that this package has built-in type declarations

4.1.7 • Public • Published

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.

NPM Version

semantic-release: angular

CI

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.

/@airlookjs/svelte-sequence-editor/

    Package Sidebar

    Install

    npm i @airlookjs/svelte-sequence-editor

    Weekly Downloads

    5

    Version

    4.1.7

    License

    MIT

    Unpacked Size

    87.6 kB

    Total Files

    58

    Last publish

    Collaborators

    • smukkejohan