Web API Preview

@nitrakit/web, also re-exported by @nitrakit/react, @nitrakit/vue, @nitrakit/svelte and @nitrakit/angular. The whole web API is in preview. Times are microseconds.

Functions

load(wasmUrl?): Promise<void>	Starts the SDK. Call once, first.
isSupported(): boolean	The browser has WebGPU and WebCodecs.
setLicense(key): LicenseStatus	Installs your license key.
licenseInfo(): LicenseStatus	The installed license.
setLocale(tag = navigator.language): string	The editor's language; returns the one used.
availableLocales(): string[]	Built-in languages.
localeIsRtl(): boolean	The current language is right to left.
setStrings(strings)	Your own wording: message id → text.
createEditor(options?): Promise<Editor>	A new editor.

createEditor options

Option
preview?, editor?	Elements to show the preview and the controls in (or mount them later).
width?, height?, fps?	The project's size and frame rate. Default 1080×1920 at 30 fps.
fonts?	TTF / OTF URLs or bytes. Default: Inter.
resolveMedia?(id)	Where a media id lives: a URL (signed or not) or the file.
layout?	auto (by width), desktop or phone.
chrome?	false shows only the timeline.
theme?	The editor's look; see Theme.
hiddenMenuItems?, menuItems?	See Tools and menus.
icons?	Icon name → SVG.
onCustomItem?(id)	One of your tools was tapped.
stickerPacks?	Your sticker packs; see Stickers.
resolveFont?(family)	Where a font lives; see Fonts.
keyboard?	Editing shortcuts. Default true.
onRequest?(request)	Your pickers: return the answer, null (cancelled) or undefined (built-in picker).
onChange?()	After every change.
onSelect?(clip)	The selected clip changed; "" for none.
onFullscreen?()	The fullscreen button was pressed. Default: the preview goes fullscreen.

Editor

mountPreview(el), mountEditor(el)	Show the preview / controls in an element.
unmountPreview(), unmountEditor()	Take them off the page; the editor keeps running.
addMedia(id, file?, { name? }): Promise<MediaInfo>	Adds media under your id, from a File, Blob or URL (else resolveMedia).
setMediaProgress(id, fraction | null)	Progress on a media id's clips, e.g. while uploading.
retryMedia(id?)	Resolves a media id (or every missing one) again.
mediaIds(): string[]	The media ids the project uses.
addTrack(kind, magnetic): string	visual, audio or effects; returns the track id.
insertMedia(track, source, startUs, sourceInUs, durationUs): string	Returns the clip id.
insertText(track, startUs, durationUs, text): string	Returns the clip id.
undo(), redo(), canUndo(), canRedo()
selectedClip	The selected clip, "" if none.
toJson(): string	The project as JSON.
openProject(json)	Opens a saved project; its media arrives through resolveMedia.
play(), pause(), seek(us)
playing, positionUs, durationUs
export(options?): Promise<Blob>	MP4. Options: shortSide, onProgress, signal.
setChrome(visible)	Transport row and bottom bar, or only the timeline.
setTheme(theme)	The editor's look.
hideMenuItems(ids), addMenuItem(item), removeMenuItem(id)	Tools in the bar.
setIcon(name, svg), iconNames()	Icons.
setStickerPacks(packs), setFonts(families)	Sticker browser and font panel contents.
loadFont(font), fontFamilies()
effectCatalog(), textStyles()	For your own pickers.
setOptions(options)	Change callbacks, chrome or layout.
destroy()	Stops the editor and frees its memory.

MediaInfo: { source, id, kind, durationUs, width, height, hasAudio, exportable }. exportable is false for videos that aren't H.264 MP4.

Framework packages

Package	Exports
@nitrakit/react	useNitrakitEditor(options), <NitrakitPreview editor>, <NitrakitEditor editor>
@nitrakit/vue	useNitrakitEditor(options), <NitrakitPreview :editor>, <NitrakitEditor :editor>
@nitrakit/svelte	use:preview={editor}, use:controls={editor}
@nitrakit/angular	[nitrakitPreview]="editor", [nitrakitEditor]="editor" (standalone directives)