Flip

Requirements#

• CE.SDK server package: npm install @cesdk/node
• Node.js 18 or newer
• CE.SDK license key and baseURL to the CE.SDK asset bundle

What You’ll Learn#

• Flip video blocks horizontally or vertically server-side.
• Mirror multiple clips together during automation jobs.
• Reset or toggle flip states while persisting scene changes.

When to Use#

Server-side flipping helps when you need to:

• Prepare mirrored variants of clips for A/B testing or template variations.
• Align eyelines between front and rear camera footage before export.
• Keep branded elements facing inward on split-screen layouts that ship from templates.

Load and Flip Video Blocks#

Every video clip sits inside a graphic block with a video fill. After initializing the engine and loading a scene, identify the blocks you want to flip:

import CreativeEngine from '@cesdk/node';

const engine = await CreativeEngine.init({
  license: process.env.LICENSE_KEY,
  baseURL: process.env.CESDK_BASE_URL
});

await engine.addDefaultAssetSources();
await engine.scene.loadFromURL(
  'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_video_landscape_1.scene'
);

const graphics = engine.block.findByType('graphic');
const videoBlocks = graphics.filter(
  (id) => engine.block.getEnum(id, 'fill/type') === 'video'
);

if (videoBlocks.length === 0) {
  throw new Error('No video blocks found in the scene.');
}

// Apply flips, then persist the scene before disposing of the engine.

Once you have the block IDs, use the flip helpers to mirror each clip as needed. Persist the modified scene with engine.scene.saveToString() or engine.scene.saveToArchive() before disposing of the engine.

How Flipping Works#

The CreativeEditor represents each video clip as a graphic block with:

• Size
• Transforms
• Grouping
• A fill set to a video asset

Use the BlockAPI boolean helpers—identical to the image flip workflow—to mirror or restore clips.

Flip Horizontally or Vertically#

Call the flip helper with the block ID and a boolean:

engine.block.setFlipHorizontal(videoBlock, true); // Mirror left/right
engine.block.setFlipVertical(videoBlock, true);   // Mirror top/bottom

The flip applies immediately in memory. Save or export the scene after you finish updates so the change appears once you open the scene in a browser runtime.

Query the Flip Status#

Check the current flip flags before toggling or resetting:

const flippedH = engine.block.getFlipHorizontal(videoBlock);
const flippedV = engine.block.getFlipVertical(videoBlock);

Both helpers return a boolean that reflects the block’s current orientation.

Flip Clips Together#

Avoid repeating the same flip call for every block by grouping the clips first:

const groupId = await engine.block.group([clipId1, clipId2, clipId3]);
engine.block.setFlipVertical(groupId, true);

When you flip the group:

• The flip mirrors every child at once.
• Each clip keeps the same spacing and order inside the group hierarchy.
• Future flips on individual clips stack on top of the group-level flip, so track the group transform before applying more flips.

Restore or Manage Flip States#

The CE.SDK provides ways to reset or toggle a flip. You can either:

• Reset: when you want to restore a clip to its original orientation.
• Code a toggle: when you need a quick way to switch the current flip state on and off.

Reset a Flip#

To reset a clip to its default orientation:

engine.block.setFlipHorizontal(videoBlock, false);

Switch Flip On or Off#

Calling the same flip twice:

• Doesn’t revert to the original orientation.
• Issues two flips in the same direction.
• Leaves the clip mirrored.

To “toggle” the flip in your code:

const isFlipped = engine.block.getFlipHorizontal(videoBlock);
engine.block.setFlipHorizontal(videoBlock, !isFlipped);

In the preceding code, two actions are possible depending on the value stored in isFlipped:

• true: !isFlipped sets the horizontal flip to false.
• false: !isFlipped sets the horizontal flip to true.

Use this pattern to:

• Script command-line toggles
• Expose a REST endpoint that flips clips on demand.

Lock or Constrain Flipping#

CE.SDK provides a way to prevent editors from flipping a video. This can be useful to:

• Avoid accidentally mirroring text.
• Protect UI mock-ups or frames that must stay in a fixed position.
• Keep templates brand-locked.

To deactivate flipping, use setScopeEnabled with:

• The "layer/flip" key
• The boolean set to false

engine.block.setScopeEnabled(videoBlock, 'layer/flip', false);

Troubleshooting#

Next Steps#

Now that you understand how to flip with the CE.SDK, take time to dive into other related features:

• Create a template to enforce design rules.
• Get an overview of the CE.SDK’s video editing features.

API Reference Summary#