Export for Social Media - Node.js

Export designs for social media with the correct dimensions and quality settings. Configure image exports with exact pixel dimensions optimized for Instagram portrait posts.

5 mins

estimated time

Download

StackBlitz

GitHub

Instagram portrait posts use a 4:5 aspect ratio at 1080×1350 pixels, providing more vertical screen real estate than square posts. This guide demonstrates how to export images with these dimensions using CE.SDK in Node.js.

import CreativeEngine from '@cesdk/node';
import { config } from 'dotenv';
import { writeFileSync, mkdirSync, existsSync } from 'fs';

// Load environment variables
config();

/**
 * CE.SDK Server Guide: Export for Social Media
 *
 * Demonstrates exporting an image with Instagram portrait dimensions (1080x1350).
 *
 * Note: Video export is not supported in @cesdk/node.
 * For video exports, use the CE.SDK Renderer on Linux.
 */

// Initialize CE.SDK engine with baseURL for asset loading
const engine = await CreativeEngine.init({
  baseURL: `https://cdn.img.ly/packages/imgly/cesdk-node/${CreativeEngine.version}/assets`
});

try {
  // Add default asset sources so assets in the scene can be resolved
  await engine.addDefaultAssetSources();

  // Load a template scene from a remote URL
  await engine.scene.loadFromURL(
    'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene'
  );

  const page = engine.block.findByType('page')[0];
  if (!page) {
    throw new Error('No page found in scene');
  }

  // Export with Instagram portrait dimensions (4:5 aspect ratio)
  const blob = await engine.block.export(page, {
    mimeType: 'image/jpeg',
    jpegQuality: 0.9,
    targetWidth: 1080,
    targetHeight: 1350
  });

  // Create output directory if it doesn't exist
  const outputDir = './output';
  if (!existsSync(outputDir)) {
    mkdirSync(outputDir, { recursive: true });
  }

  // Convert Blob to Buffer and save to file system
  const buffer = Buffer.from(await blob.arrayBuffer());
  const filename = `${outputDir}/instagram-portrait.jpg`;
  writeFileSync(filename, buffer);

  console.log(
    `Exported: instagram-portrait.jpg (1080x1350, ${(blob.size / 1024).toFixed(1)} KB)`
  );
  console.log(`File saved to: ${filename}`);
} finally {
  // Always dispose the engine to free resources
  engine.dispose();
}

This guide covers loading a template scene, exporting with specific dimensions and quality settings, and saving the result to the file system.

Loading a Scene#

Before exporting, load a template scene with visual content. The addDefaultAssetSources() call ensures any assets referenced in the template can be resolved.

// Initialize CE.SDK engine with baseURL for asset loading
const engine = await CreativeEngine.init({
  baseURL: `https://cdn.img.ly/packages/imgly/cesdk-node/${CreativeEngine.version}/assets`
});

try {
  // Add default asset sources so assets in the scene can be resolved
  await engine.addDefaultAssetSources();

  // Load a template scene from a remote URL
  await engine.scene.loadFromURL(
    'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene'
  );

  const page = engine.block.findByType('page')[0];
  if (!page) {
    throw new Error('No page found in scene');
  }

We initialize the engine, load a template from a remote URL, and locate the page for export.

Exporting the Image#

Export the page using engine.block.export(). The targetWidth and targetHeight options scale the design to exact pixel dimensions for Instagram portrait format.

// Export with Instagram portrait dimensions (4:5 aspect ratio)
const blob = await engine.block.export(page, {
  mimeType: 'image/jpeg',
  jpegQuality: 0.9,
  targetWidth: 1080,
  targetHeight: 1350
});

The export options control the output:

mimeType: image/jpeg for social media (smaller file sizes than PNG)
jpegQuality: 0.9 provides high quality with reasonable file size
targetWidth/targetHeight: 1080×1350 pixels for Instagram portrait (4:5 aspect ratio)

Saving to File System#

After export, convert the Blob to a Buffer and write to the file system.

// Create output directory if it doesn't exist
const outputDir = './output';
if (!existsSync(outputDir)) {
  mkdirSync(outputDir, { recursive: true });
}

// Convert Blob to Buffer and save to file system
const buffer = Buffer.from(await blob.arrayBuffer());
const filename = `${outputDir}/instagram-portrait.jpg`;
writeFileSync(filename, buffer);

The output directory is created if it doesn’t exist. The console output confirms the export with file size, verifying the processing completed successfully.

API Reference#

Method	Purpose
`engine.block.export()`	Export block as image (PNG, JPEG, WebP, PDF)
`engine.block.findByType()`	Find blocks by type (page, text, image, etc.)
`engine.scene.loadFromURL()`	Load a scene from a remote URL

Export Options (Images)#

Option	Type	Description
`mimeType`	`string`	Output format: `image/jpeg`, `image/png`, `image/webp`
`jpegQuality`	`number`	JPEG compression (0.0-1.0), default 0.9
`targetWidth`	`number`	Output width in pixels
`targetHeight`	`number`	Output height in pixels

Next Steps#

Export Overview - Complete export options including PNG, WebP, and PDF