Overview
The ProjectManager handles project creation, loading, saving, and settings management. It also manages project metadata and the project list. Access it through editor.project.
Usage
Creating and loading projects
// Create a new project
const projectId = await editor.project.createNewProject({
name: 'My Video Project'
});
// Load an existing project
await editor.project.loadProject({ id: projectId });
// Get the active project
const project = editor.project.getActive();
console.log(project.metadata.name);
Updating project settings
// Update canvas size
await editor.project.updateSettings({
settings: {
canvasSize: { width: 1920, height: 1080 }
}
});
// Update FPS
await editor.project.updateSettings({
settings: { fps: 60 }
});
Exporting the project
const result = await editor.project.export({
options: {
format: 'mp4',
quality: 'high',
fps: 30
}
});
Project lifecycle methods
createNewProject()
Creates a new project with a default main scene.
createNewProject({ name }: { name: string }): Promise<string>
Promise<string> - The ID of the created project
Example
const projectId = await editor.project.createNewProject({
name: 'My New Video'
});
loadProject()
Loads an existing project by ID.
loadProject({ id }: { id: string }): Promise<void>
ID of the project to load
await editor.project.loadProject({ id: 'project-123' });
Loading a project clears the current project, media assets, and scenes before loading the new one.
saveCurrentProject()
Saves the currently active project.
saveCurrentProject(): Promise<void>
await editor.project.saveCurrentProject();
The project is automatically saved via the SaveManager. Manual saves are rarely needed.
closeProject()
Closes the active project and clears all state.
Example
editor.project.closeProject();
loadAllProjects()
Loads metadata for all saved projects.
loadAllProjects(): Promise<void>
await editor.project.loadAllProjects();
const projects = editor.project.getSavedProjects();
deleteProjects()
Deletes one or more projects.
deleteProjects({ ids }: { ids: string[] }): Promise<void>
Array of project IDs to delete
await editor.project.deleteProjects({
ids: ['project-1', 'project-2']
});
If the active project is deleted, it will be closed and all state cleared.
renameProject()
Renames a project.
renameProject({ id, name }: {
id: string;
name: string
}): Promise<void>
ID of the project to rename
await editor.project.renameProject({
id: 'project-123',
name: 'Updated Project Name'
});
duplicateProjects()
Duplicates one or more projects.
duplicateProjects({ ids }: { ids: string[] }): Promise<string[]>
Array of project IDs to duplicate
Promise<string[]> - IDs of the duplicated projects
Example
const duplicatedIds = await editor.project.duplicateProjects({
ids: ['project-123']
});
Duplicated projects are named with a number prefix: “(1) Original Name”, “(2) Original Name”, etc.
Settings methods
updateSettings()
Updates project settings.
updateSettings({
settings,
pushHistory = true
}: {
settings: Partial<TProjectSettings>;
pushHistory?: boolean;
}): Promise<void>
settings
Partial<TProjectSettings>
required
Settings to update
Whether to push to undo/redo history
await editor.project.updateSettings({
settings: {
fps: 60,
canvasSize: { width: 1920, height: 1080 },
background: { type: 'color', color: '#000000' }
}
});
updateThumbnail()
Updates the project thumbnail.
updateThumbnail({ thumbnail }: { thumbnail: string }): Promise<void>
Base64-encoded thumbnail image data URL
await editor.project.updateThumbnail({
thumbnail: 'data:image/png;base64,...'
});
Export methods
export()
Exports the project to video.
export({ options }: { options: ExportOptions }): Promise<ExportResult>
Export configuration (format, quality, fps, etc.)
Promise<ExportResult> - Export result with video blob or error
Example
const result = await editor.project.export({
options: {
format: 'mp4',
quality: 'high',
fps: 30,
canvasSize: { width: 1920, height: 1080 }
}
});
if (result.success) {
// Download the video
const url = URL.createObjectURL(result.blob);
const a = document.createElement('a');
a.href = url;
a.download = 'video.mp4';
a.click();
}
Query methods
getActive()
Returns the active project.
Returns
TProject - The active project
Example
const project = editor.project.getActive();
console.log(`Project: ${project.metadata.name}`);
Throws an error if no project is active.
getActiveOrNull()
Returns the active project or null if none is active.
getActiveOrNull(): TProject | null
TProject | null - The active project, or null
Example
const project = editor.project.getActiveOrNull();
if (project) {
console.log(`Active project: ${project.metadata.name}`);
}
In most cases, use getActive() instead. Only use this for rare cases where a project may not be active.
getSavedProjects()
Returns metadata for all saved projects.
getSavedProjects(): TProjectMetadata[]
TProjectMetadata[] - Array of project metadata
Example
const projects = editor.project.getSavedProjects();
console.log(`Total projects: ${projects.length}`);
getFilteredAndSortedProjects()
Filters and sorts projects by search query and sort option.
getFilteredAndSortedProjects({
searchQuery,
sortOption
}: {
searchQuery: string;
sortOption: TProjectSortOption;
}): TProjectMetadata[]
Search query to filter by project name
sortOption
TProjectSortOption
required
Sort option (e.g., “name-asc”, “updatedAt-desc”)
TProjectMetadata[] - Filtered and sorted projects
Example
const projects = editor.project.getFilteredAndSortedProjects({
searchQuery: 'video',
sortOption: 'updatedAt-desc'
});
getIsLoading()
Returns whether a project is currently loading.
Returns
boolean - True if loading
Example
if (editor.project.getIsLoading()) {
console.log('Loading project...');
}
getIsInitialized()
Returns whether the ProjectManager has been initialized.
getIsInitialized(): boolean
boolean - True if initialized
Example
if (!editor.project.getIsInitialized()) {
await editor.project.loadAllProjects();
}
getMigrationState()
Returns the current migration state.
getMigrationState(): MigrationState
MigrationState - Current migration progress
Example
const migration = editor.project.getMigrationState();
if (migration.isMigrating) {
console.log(`Migrating ${migration.projectName}...`);
}
Timeline view state methods
getTimelineViewState()
Returns the timeline view state (zoom, scroll position, etc.).
getTimelineViewState(): TTimelineViewState
TTimelineViewState - Timeline view state
Example
const viewState = editor.project.getTimelineViewState();
console.log(`Zoom: ${viewState.zoom}`);
setTimelineViewState()
Sets the timeline view state.
setTimelineViewState({ viewState }: {
viewState: TTimelineViewState
}): void
viewState
TTimelineViewState
required
New timeline view state
editor.project.setTimelineViewState({
viewState: {
zoom: 1.5,
scrollLeft: 100
}
});
Internal methods
setActiveProject()
Sets the active project. Called internally by other managers.
setActiveProject({ project }: { project: TProject }): void
prepareExit()
Prepares the project for exit by updating thumbnails. Called internally on app close.
prepareExit(): Promise<void>
isInvalidProjectId()
Checks if a project ID is marked as invalid.
isInvalidProjectId({ id }: { id: string }): boolean
boolean - True if invalid
markProjectIdAsInvalid()
Marks a project ID as invalid.
markProjectIdAsInvalid({ id }: { id: string }): void
Project ID to mark as invalid
clearInvalidProjectIds()
Clears all invalid project IDs.
clearInvalidProjectIds(): void
subscribe()
Subscribes to project state changes.
subscribe(listener: () => void): () => void
Function called when project state changes
() => void - Unsubscribe function
Example
const unsubscribe = editor.project.subscribe(() => {
console.log('Project changed');
});
The useEditor() hook automatically subscribes to project changes. Only use subscribe() directly in non-React code.