Back to Glossary
Starter Kit UIs

Mockup Editor

Definition

A CE.SDK Starter Kit that maps a finished design onto photorealistic product surfaces for live preview and design validation. Every change made on the design canvas is reflected in the mockup in real time. There is no separate “preview” step.

The Mockup Editor uses flat photorealistic product photography rather than interactive 3D models, making it lighter, faster to render, and more broadly compatible than the 3D Product Configurator, at the cost of not being rotatable in three dimensions. Compared to the T-Shirt Designer, which bundles a mockup background into an apparel-specific editing flow, the Mockup Editor is format-agnostic and covers a wider range of product categories.

Supported Mockup Types

Apparel

T-shirts, hoodies

Stationery & Print

Postcards, business cards, posters

Digital Assets

Social media formats

What the Mockup Editor Includes

  • Live design-to-mockup sync as users edit
  • Multiple preconfigured product templates across supported mockup categories
  • Full-resolution mockup export for use in product listings, marketing materials, or approval workflows
  • CE.SDK’s standard editing tools available on the design canvas alongside the preview

Typical Use Cases

E-Commerce Product Configurators

Customers personalize a product and need to see exactly what they are ordering before checkout. A realistic surface preview reduces purchase hesitation and post-order disappointment when the printed result matches what the customer saw.

Operators catch layout problems (artwork too close to a seam, text clipping near an edge) before a sample is printed. Validating placement on a product surface is faster and cheaper than catching errors at the proofing stage.

Marketing & Content Production

Teams need polished product imagery for listings, social posts, or pitch decks without commissioning a photoshoot. Mockup export produces publication-ready visuals directly from the design canvas.

Web (Vanilla JS/TS, React, Vue, Angular, Svelte, SvelteKit, Next.js, Nuxt.js), Electron.