Apply Filters and Effects - Node.js

Apply professional color grading, blur effects, and artistic treatments to design elements using CE.SDK’s visual effects system in server-side workflows.

CE.SDK’s effect system works identically in server environments, making it ideal for batch processing, automated image enhancement, and headless rendering pipelines. You can apply the same filters and effects available in browser environments without any UI dependencies.

import CreativeEngine from '@cesdk/engine';

const config = {
  // license: import.meta.env.VITE_CESDK_LICENSE,
  userId: 'guides-user',
  // Use local assets when developing with local packages
  ...(import.meta.env.CESDK_USE_LOCAL && {
    baseURL: '/assets/'
  })
};

CreativeEngine.init(config).then(async (engine) => {
  document.getElementById('cesdk_container').append(engine.element);

  const scene = engine.scene.create();

  const page = engine.block.create('page');
  engine.block.setWidth(page, 800);
  engine.block.setHeight(page, 600);
  engine.block.appendChild(scene, page);

  engine.scene.zoomToBlock(page, 40, 40, 40, 40);

  const block = engine.block.create('graphic');
  engine.block.setShape(block, engine.block.createShape('rect'));
  const imageFill = engine.block.createFill('image');
  engine.block.setString(
    imageFill,
    'fill/image/imageFileURI',
    'https://img.ly/static/ubq_samples/sample_1.jpg'
  );
  engine.block.setFill(block, imageFill);
  engine.block.setPositionX(block, 100);
  engine.block.setPositionY(block, 50);
  engine.block.setWidth(block, 300);
  engine.block.setHeight(block, 300);
  engine.block.appendChild(page, block);

  engine.block.supportsEffects(scene); // Returns false
  engine.block.supportsEffects(block); // Returns true

  const pixelize = engine.block.createEffect('pixelize');
  const adjustments = engine.block.createEffect('adjustments');

  engine.block.appendEffect(block, pixelize);
  engine.block.insertEffect(block, adjustments, 0);
  // engine.block.removeEffect(rect, 0);

  // This will return [adjustments, pixelize]
  const effectsList = engine.block.getEffects(block);

  const unusedEffect = engine.block.createEffect('half_tone');
  engine.block.destroy(unusedEffect);

  const allPixelizeProperties = engine.block.findAllProperties(pixelize);
  const allAdjustmentProperties = engine.block.findAllProperties(adjustments);
  engine.block.setInt(pixelize, 'pixelize/horizontalPixelSize', 20);
  engine.block.setFloat(adjustments, 'effect/adjustments/brightness', 0.2);

  engine.block.setEffectEnabled(pixelize, false);
  engine.block.setEffectEnabled(
    pixelize,
    !engine.block.isEffectEnabled(pixelize)
  );
});

This guide covers how to apply and manage effects programmatically using the block API in server-side Node.js environments.

Check Effect Support#

Before applying effects to a block, check whether it supports them. Not all block types can have effects applied—for example, scene blocks do not support effects.

engine.block.supportsEffects(scene); // Returns false
engine.block.supportsEffects(block); // Returns true

Effect support is available for:

Graphic blocks with image fills
Graphic blocks with video fills
Shape blocks with fills
Text blocks (with limited effect types)
Page blocks (particularly when they have fills applied)

Always verify support before creating and applying effects to avoid errors.

Create and Apply Effects#

Once you’ve confirmed a block supports effects, create and apply effects using the effect API.

const pixelize = engine.block.createEffect('pixelize');
const adjustments = engine.block.createEffect('adjustments');

CE.SDK provides several built-in effect types:

extrude_blur - Gaussian blur with configurable intensity
adjustments - Brightness, contrast, saturation, exposure
pixelize - Pixelation effect
vignette - Darkened corners
half_tone - Halftone pattern
lut_filter - Color grading with LUT files
duotone - Two-color tinting

Each effect type has its own set of configurable properties that control its visual appearance.

Add Effects to Blocks#

After creating effects, append them to a block’s effect list. Effects are applied in the order they appear in the list.

engine.block.appendEffect(block, pixelize);
engine.block.insertEffect(block, adjustments, 0);
// engine.block.removeEffect(rect, 0);

You can also insert effects at specific positions or remove them:

appendEffect(block, effect) - Add to the end of the effect list
insertEffect(block, effect, index) - Insert at a specific position
removeEffect(block, index) - Remove from a specific position

Query Applied Effects#

Retrieve all effects applied to a block to inspect or modify them.

// This will return [adjustments, pixelize]
const effectsList = engine.block.getEffects(block);

This returns an array of effect IDs in the order they’re applied.

Configure Effect Parameters#

Customize effect appearance by setting properties. Each effect exposes different parameters depending on its type.

engine.block.setInt(pixelize, 'pixelize/horizontalPixelSize', 20);
engine.block.setFloat(adjustments, 'effect/adjustments/brightness', 0.2);

CE.SDK provides typed setter methods for different parameter types:

setFloat() - For intensity, amount, and radius values (typically 0.0 to 1.0)
setInt() - For discrete values like pixel sizes
setString() - For file URIs (LUT files, image references)
setBool() - For enabling or disabling specific features

Use findAllProperties() to discover available properties for any effect.

const allPixelizeProperties = engine.block.findAllProperties(pixelize);
const allAdjustmentProperties = engine.block.findAllProperties(adjustments);

Enable and Disable Effects#

Temporarily toggle effects on and off without removing them. This is useful for generating before/after comparisons or conditional rendering.

engine.block.setEffectEnabled(pixelize, false);
engine.block.setEffectEnabled(
  pixelize,
  !engine.block.isEffectEnabled(pixelize)
);

Disabled effects remain attached to the block but won’t be rendered until enabled again.

Clean Up Effects#

Destroy effects that are no longer needed to free resources. Effects attached to a block are automatically destroyed when the block is destroyed.

const unusedEffect = engine.block.createEffect('half_tone');
engine.block.destroy(unusedEffect);

Batch Processing Example#

Server-side environments are ideal for batch processing multiple images with consistent effects:

import CreativeEngine from '@cesdk/node';

async function processImages(imageUrls, outputDir) {
  const engine = await CreativeEngine.init({
    license: 'YOUR_CESDK_LICENSE_KEY',
  });

  for (const url of imageUrls) {
    const scene = engine.scene.create();
    const page = engine.block.create('page');
    engine.block.setWidth(page, 800);
    engine.block.setHeight(page, 600);
    engine.block.appendChild(scene, page);

    const block = engine.block.create('graphic');
    engine.block.setShape(block, engine.block.createShape('rect'));
    const imageFill = engine.block.createFill('image');
    engine.block.setString(imageFill, 'fill/image/imageFileURI', url);
    engine.block.setFill(block, imageFill);
    engine.block.setWidth(block, 800);
    engine.block.setHeight(block, 600);
    engine.block.appendChild(page, block);

    // Apply consistent effects
    const adjustments = engine.block.createEffect('adjustments');
    engine.block.setFloat(adjustments, 'effect/adjustments/brightness', 0.1);
    engine.block.setFloat(adjustments, 'effect/adjustments/contrast', 0.15);
    engine.block.appendEffect(block, adjustments);

    // Export the processed image
    const blob = await engine.block.export(page, 'image/png');
    // Save blob to outputDir...
  }

  engine.dispose();
}

API Reference#

Method	Description
`block.supportsEffects(block)`	Check if a block supports effects
`block.createEffect(type)`	Create a new effect instance
`block.appendEffect(block, effect)`	Add effect to the end of the effect stack
`block.insertEffect(block, effect, index)`	Insert effect at a specific position
`block.removeEffect(block, index)`	Remove effect at the specified index
`block.getEffects(block)`	Get all effects applied to a block
`block.setEffectEnabled(effect, enabled)`	Enable or disable an effect
`block.isEffectEnabled(effect)`	Check if an effect is currently enabled
`block.findAllProperties(effect)`	Get all available properties for an effect
`block.setFloat(effect, property, value)`	Set a floating-point property value
`block.setInt(effect, property, value)`	Set an integer property value
`block.setString(effect, property, value)`	Set a string property value
`block.setBool(effect, property, value)`	Set a boolean property value
`block.destroy(effect)`	Destroy an unused effect instance

Next Steps#

Now that you understand how to apply and manage filters and effects in server environments, explore specific effect types:

Blur Effects - Apply blur techniques for depth and focus effects
Custom LUT Filters - Create custom color grading filters