Search
Loading...
Skip to content

Partial Export

Export individual design elements, grouped blocks, or specific pages from your scene instead of exporting everything at once using CE.SDK’s flexible export API.

Partial Export example showing multiple blocks and groups being exported individually

10 mins
estimated time
Download
StackBlitz
GitHub

Understanding how to export specific parts of your scene gives you fine-grained control over output generation. Instead of exporting an entire scene, you can export individual images, text blocks, shapes, grouped elements, or specific pages. This is essential for creating asset libraries, implementing “export selection” features, or generating multiple outputs from a single design.

This guide covers how to export individual blocks, grouped elements, and pages programmatically using the Block API.

Understanding Block Hierarchy and Export#

How Block Hierarchy Affects Exports#

CE.SDK organizes content in a tree structure: Scene → Pages → Groups → Individual Blocks. When you export a block, the export automatically includes all child elements in the hierarchy.

Exporting a page exports every element on that page. Exporting a group exports all blocks within that group. Exporting an individual block (like an image or text) exports only that specific element.

This hierarchical behavior is powerful because you can control export scope by choosing which level of the hierarchy to target. Want just one image? Export the image block. Want a complete layout section? Export the parent group.

Export Behavior#

The export API applies several transformations to ensure consistent output. If the exported block itself is rotated, it will be exported without that rotation—the content appears upright in the output file. Any margin set on the block is included in the export bounds. Outside strokes are included for most block types, though pages handle strokes differently.

Exporting Individual Blocks#

Finding Blocks to Export#

Before exporting, we need to identify which block to export. We can find blocks by type using findByType, by name if you’ve assigned custom names, or by ID if you already have a reference.

Once we have a block reference, exporting is straightforward. Pass the block ID to engine.block.export() along with export options like format and quality settings.

Basic Block Export#

Here we export a single image block as PNG with compression settings. The export returns a Blob containing the image data.

// eslint-disable-next-line no-console
console.log('🚀 Starting individual block export...');


// Show loading dialog before export
const exportDialog = cesdk.utils.showLoadingDialog({
  title: 'Exporting Block',
  message: 'Processing export...',
  progress: 'indeterminate'
});


// Find a specific block to export
const blockToExport = imageBlock1;


// Export the block as PNG with high compression and target size
const individualBlob = await engine.block.export(blockToExport, {
  mimeType: 'image/png',
  pngCompressionLevel: 9, // Maximum compression for smaller file size
  targetWidth: 800, // Limit export resolution for faster exports
  targetHeight: 600
});


// eslint-disable-next-line no-console
console.log(
  `✅ Individual block exported - size: ${(individualBlob.size / 1024).toFixed(2)} KB`
);


// Close the export dialog
exportDialog.close();

The mimeType determines the output format. CE.SDK supports PNG, JPEG, WEBP, and PDF for static exports. Each format has specific options—PNG uses pngCompressionLevel, JPEG uses jpegQuality, and WEBP uses webpQuality.

Different formats serve different purposes. PNG is ideal for graphics requiring transparency, such as UI elements, logos, or illustrations with alpha channels. JPEG works well for photographs where file size matters and transparency isn’t needed. WEBP provides better compression than PNG or JPEG for web delivery. PDF preserves vector information and is suited for print workflows.

JPEG exports drop transparency and replace it with a solid background, which may produce unexpected results if your design relies on transparency. Always consider whether your content needs an alpha channel when choosing export formats.

Exporting Grouped Elements#

Creating and Exporting Groups#

Groups let you export multiple elements together as a single output. This is useful for composite graphics like logos with multiple components, complex illustrations made from many shapes, or layout sections that should be exported as a unit.

// eslint-disable-next-line no-console
console.log('🚀 Starting group export...');


// Show loading dialog before export
const exportDialog = cesdk.utils.showLoadingDialog({
  title: 'Exporting Group',
  message: 'Processing export...',
  progress: 'indeterminate'
});


// Group the blocks together (shapes already created above)
const exportGroup = engine.block.group([groupShape1, groupShape2]);


// Export the group (includes all children) with high compression and target size
const groupBlob = await engine.block.export(exportGroup, {
  mimeType: 'image/png',
  pngCompressionLevel: 9, // Maximum compression for smaller file size
  targetWidth: 800, // Limit export resolution for faster exports
  targetHeight: 600
});


// eslint-disable-next-line no-console
console.log(
  `✅ Group exported - size: ${(groupBlob.size / 1024).toFixed(2)} KB`
);


// Close the export dialog
exportDialog.close();

When you export a group, CE.SDK renders all children together into a single image. The group’s bounding box determines the export dimensions, and relative positioning between children is preserved exactly as designed.

Exporting Selected Elements#

A common workflow is allowing users to select elements and export their selection. Use findAllSelected() to get selected blocks, group them temporarily, and export the group.

// Get currently selected blocks
const selectedBlocks = engine.block.findAllSelected();


if (selectedBlocks.length === 0) {
  console.log('No blocks selected');
} else if (selectedBlocks.length === 1) {
  // Export single block directly
  const blob = await engine.block.export(selectedBlocks[0], {
    mimeType: 'image/png'
  });
} else {
  // Group and export multiple selected blocks
  const group = engine.block.group(selectedBlocks);
  const blob = await engine.block.export(group, {
    mimeType: 'image/png'
  });
}

This pattern enables “Export Selection” functionality in design tools, letting users export precisely what they’ve chosen without exporting the entire canvas.

Exporting Pages#

When working with multi-page documents, you often want to export pages individually rather than as a complete scene. Exporting the page block directly gives you output for that specific page.

// Check export limits before exporting
const maxExportSize = engine.editor.getMaxExportSize();
const availableMemory = engine.editor.getAvailableMemory();


// eslint-disable-next-line no-console
console.log('🚀 Starting page export...');
// eslint-disable-next-line no-console
console.log(
  `📊 Export limits - Max size: ${maxExportSize}px, Available memory: ${availableMemory} bytes`
);


// Show loading dialog before export
const exportDialog = cesdk.utils.showLoadingDialog({
  title: 'Exporting Page',
  message: 'Processing export...',
  progress: 'indeterminate'
});


// Export the entire page with high compression and target size
const pageBlob = await engine.block.export(page, {
  mimeType: 'image/png',
  pngCompressionLevel: 9, // Maximum compression for smaller file size
  targetWidth: 800, // Limit export resolution for faster exports
  targetHeight: 600
});


// eslint-disable-next-line no-console
console.log(
  `✅ Page exported - size: ${(pageBlob.size / 1024).toFixed(2)} KB`
);


// Close the export dialog
exportDialog.close();

Page exports include everything on the page—the background, all content blocks, and any page-level effects. The page dimensions determine the output size unless you specify targetWidth and targetHeight to override the dimensions.

Export Options and Configuration#

Target Size Control#

Sometimes you need exports at specific dimensions regardless of the block’s actual size. The targetWidth and targetHeight options render the block large enough to fill the target size while maintaining aspect ratio.

If you specify a target size that doesn’t match the block’s aspect ratio, CE.SDK ensures the block fills the target dimensions completely. The output may extend beyond the target size on one axis to preserve the correct proportions—no stretching or distortion occurs.

Quality and Compression#

Each export format offers quality controls that balance output size against visual fidelity.

For PNG, pngCompressionLevel ranges from 0 (no compression, fastest) to 9 (maximum compression, slowest). Higher compression takes longer but produces smaller files without affecting image quality—PNG is lossless.

JPEG jpegQuality ranges from 0 (lowest quality) to 1 (highest quality). Lower values create smaller files but introduce visible artifacts. Values above 0.9 provide excellent quality for most use cases.

WEBP webpQuality also ranges from 0 to 1. A value of 1.0 triggers a special lossless mode that often produces smaller files than equivalent PNG exports.

Export Size Limits#

Before exporting large blocks or requesting high target dimensions, check the platform’s export capabilities. getMaxExportSize() returns the maximum width or height in pixels that can be exported. Both the width and height of your export must be below or equal to this limit. However, memory constraints may prevent exports that technically fit within size limits—use getAvailableMemory() to assess available memory before attempting large exports.

Export Limitations and Considerations#

Format-Specific Constraints#

JPEG drops transparency from the final image, replacing transparent pixels with a solid background (usually white or black depending on implementation). This can cause unexpected results when exporting designs that rely on alpha channels. Always use PNG or WEBP if transparency is required.

PDF export behavior depends on the exportPdfWithHighCompatibility option. When set to true, images and effects are rasterized according to the scene’s DPI setting for broader viewer compatibility. When false, PDFs export faster by embedding images directly, but gradients with transparency may not render correctly in Safari or macOS Preview. See the PDF export guide for detailed performance guidance.

Performance Considerations#

Exporting is a synchronous operation that blocks the main thread while rendering. For large exports or multiple sequential exports, provide user feedback like progress indicators to prevent the interface from appearing frozen.

Batch exports can be optimized by processing blocks in parallel where possible, though be mindful of memory constraints. Exporting dozens of high-resolution images simultaneously may exhaust available memory. Consider batching in smaller groups with delays between batches.

Hierarchy Requirements#

Only blocks attached to the scene hierarchy can be exported. If you create a block but don’t append it to a page, export will fail. Always ensure blocks are children of the page (or nested within groups that are children of the page) before attempting export.

API Reference#

MethodDescription
engine.block.export()Export a block with specified format and quality options
engine.block.findByType()Find blocks by type identifier
engine.block.group()Group multiple blocks into a single logical unit
engine.scene.getPages()Get all pages in the current scene
engine.editor.getMaxExportSize()Get maximum export dimension in pixels
engine.editor.getAvailableMemory()Get available engine memory in bytes