Start With Blank Canvas - Angular

Create a new scene from scratch to build designs with complete control over canvas dimensions and initial content.

Start With Blank Canvas example showing an empty page in the editor

5 mins

estimated time

Starting from a blank canvas lets you build new designs without pre-existing content. The engine.scene.create() method creates an empty scene with its own camera, ready for adding pages and content. This differs from loading templates or images, which start with existing content.

import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
import packageJson from './package.json';

class Example implements EditorPlugin {
  name = packageJson.name;
  version = packageJson.version;

  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
    if (!cesdk) {
      throw new Error('CE.SDK instance is required for this plugin');
    }

    // Load default asset sources for editing
    await cesdk.addDefaultAssetSources();
    await cesdk.addDemoAssetSources({
      sceneMode: 'Design',
      withUploadAssetSources: true
    });

    const engine = cesdk.engine;

    // ========================================
    // Create an Empty Scene
    // ========================================
    // Create a new empty scene with a page of specific dimensions
    engine.scene.create('VerticalStack', {
      page: { size: { width: 800, height: 600 } }
    });

    // Find the page that was automatically created
    const pages = engine.block.findByType('page');
    const page = pages[0];

    // ========================================
    // Enable Auto-Fit Zoom
    // ========================================
    // Enable auto-fit zoom to keep the page visible when resizing
    // This continuously adjusts the zoom level to fit the page horizontally
    engine.scene.zoomToBlock(page);
    engine.scene.enableZoomAutoFit(page, 'Horizontal', 40, 40);
  }
}

export default Example;

This guide covers how to create an empty scene with custom page dimensions and configure the viewport for editing.

Create an Empty Scene#

We call engine.scene.create() to create a new design scene. We pass the layout type and options parameter to specify page dimensions. The scene includes a page automatically when we provide size options.

// Create a new empty scene with a page of specific dimensions
engine.scene.create('VerticalStack', {
  page: { size: { width: 800, height: 600 } }
});

The first parameter specifies the scene layout. Use 'Free' for independent page positioning, 'VerticalStack' or 'HorizontalStack' for aligned layouts. The options object configures the initial page with a size in design units.

Enable Auto-Fit Zoom#

For interactive editing, we enable auto-fit zoom to keep the page visible when the viewport resizes. This provides a responsive editing experience where the canvas automatically adjusts to the available space.

// Enable auto-fit zoom to keep the page visible when resizing
// This continuously adjusts the zoom level to fit the page horizontally
engine.scene.zoomToBlock(page);
engine.scene.enableZoomAutoFit(page, 'Horizontal', 40, 40);

The enableZoomAutoFit() method continuously adjusts the zoom level to fit the specified block. Use 'Horizontal' to fit the width, 'Vertical' to fit the height, or 'Both' to fit both dimensions. The padding parameters add space around the content.

For one-time zoom adjustments, use zoomToBlock() instead. The editor UI also provides built-in zoom controls that users can access through the canvas toolbar.

API Reference#

Method	Description
`engine.scene.create(layout, options)`	Creates an empty scene with optional page configuration
`engine.block.findByType('page')`	Finds all pages in the current scene
`engine.scene.enableZoomAutoFit(block, axis, paddingBefore, paddingAfter)`	Continuously adjusts zoom to fit a block
`engine.scene.zoomToBlock(block, options)`	One-time zoom adjustment to frame a block
`engine.scene.disableZoomAutoFit(block)`	Disables auto-fit zoom

Next Steps#

Now that you have created a design from a blank canvas, explore related topics:

Save — Persist your design to a file or backend service
Blocks — Learn about scene hierarchy and block relationships
Create From Image — Start with an existing image instead of a blank canvas