Documentation Index
Fetch the complete documentation index at: https://mintlify.com/OpenCut-app/OpenCut/llms.txt
Use this file to discover all available pages before exploring further.
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.