Overview The RendererManager handles rendering operations including real-time preview rendering, snapshot capture, and video export. It maintains the render tree and coordinates with the CanvasRenderer and SceneExporter services.
Properties renderTree The current render tree (RootNode) used for rendering the scene.
private renderTree : RootNode | null
The render tree is managed internally. Use setRenderTree() and getRenderTree() to interact with it.
Methods setRenderTree() Sets the current render tree for the scene.
setRenderTree ({ renderTree }: { renderTree: RootNode | null }): void
The root node of the render tree, or null to clear it
Example const editor = EditorCore . getInstance (); const renderTree = buildScene ({ tracks , mediaAssets , duration , canvasSize , background }); editor . renderer . setRenderTree ({ renderTree });
getRenderTree() Returns the current render tree.
getRenderTree (): RootNode | null
Returns
RootNode | null - The current render tree, or null if not set
Example const editor = EditorCore . getInstance (); const renderTree = editor . renderer . getRenderTree ();
saveSnapshot() Captures the current frame as a PNG image and downloads it.
async saveSnapshot (): Promise < { success : boolean ; error ?: string } >
Returns
success - Whether the snapshot was captured successfullyerror - Error message if the snapshot failed
Example const editor = EditorCore . getInstance (); const result = await editor . renderer . saveSnapshot (); if ( result . success ) { console . log ( 'Snapshot saved' ); } else { console . error ( 'Snapshot failed:' , result . error ); }
The snapshot is saved with a filename format: {project-name}-{timecode}.png
Error conditions:
No project or render tree available
Project is empty (duration = 0)
Failed to create image blob
exportProject() Exports the project as a video file.
async exportProject ({ options }: { options: ExportOptions }): Promise < ExportResult >
Export configuration options
Show ExportOptions properties
quality
'low' | 'medium' | 'high' | 'very-high'
required
Video quality preset
Frame rate (defaults to project FPS)
Whether to include audio tracks
onProgress
(progress: { progress: number }) => void
Progress callback (0 to 1)
Function that returns true if export should be cancelled
Returns Show ExportResult properties
Whether the export succeeded
The exported video data (only if success is true)
Error message (only if success is false)
Whether the export was cancelled
Example const editor = EditorCore . getInstance (); const result = await editor . renderer . exportProject ({ options: { format: 'mp4' , quality: 'high' , includeAudio: true , onProgress : ({ progress }) => { console . log ( `Export progress: ${ Math . round ( progress * 100 ) } %` ); }, onCancel : () => exportCancelled // boolean flag } }); if ( result . success && result . buffer ) { const blob = new Blob ([ result . buffer ], { type: 'video/mp4' }); // Download or process the video blob } else if ( result . cancelled ) { console . log ( 'Export cancelled' ); } else { console . error ( 'Export failed:' , result . error ); }
Error conditions:
No active project
Project is empty (duration = 0)
Failed to create audio buffer
Export processing error
If includeAudio is true, the progress bar accounts for audio processing time (5% of total progress).
subscribe() Subscribes to renderer state changes.
subscribe ( listener : () => void ): () => void
Function called when render tree changes
Returns
() => void - Unsubscribe function
Example const editor = EditorCore . getInstance (); const unsubscribe = editor . renderer . subscribe (() => { console . log ( 'Render tree changed' ); }); // Later, to unsubscribe: unsubscribe ();
If using the useEditor() hook in React, subscriptions are handled automatically.
See also