Back to Glossary
Starter Kit UIs

Design Viewer

Definition

A lightweight CE.SDK Starter Kit that renders a read-only, navigable preview of a design scene (supporting zoom, pan, and multi-page navigation) without any editing UI. It is optimized for embed performance and is the web equivalent of running CE.SDK in the Viewer role.

The Design Viewer uses the same CE.SDK rendering engine as the full editor, so the preview is pixel-accurate: fonts, effects, and layout are rendered identically to what the editor produces. The difference is purely the surface presented to the user: no tool panels, no selection handles, no editing interactions.

What the Design Viewer Includes

  • Zoom and pan navigation with mouse, touch, and keyboard support
  • Multi-page navigation for documents with multiple pages or scenes
  • Read-only rendering: no editing UI, tool panels, or interaction surfaces
  • Lightweight embed footprint optimized for portal and review contexts
  • Full CE.SDK rendering fidelity: the same engine that powers the editor, without the editor shell

Viewer Role

The Design Viewer is the Starter Kit implementation of CE.SDK’s Viewer role: a runtime configuration where the engine renders the scene but all editing interactions are disabled at the API level, so the read-only guarantee holds regardless of what UI is built on top.

The Viewer role has a smaller initialization footprint than the full editor configuration. It does not load editing plugins, tool panels, or interaction handlers. This makes the Design Viewer faster to initialize and lighter to embed than a full editor instance configured to look read-only.

The Presenter role is a related configuration that adds presentation-specific interactions (slide-to-slide navigation, full-screen mode, and presentation controls) on top of the read-only rendering base. The Design Viewer uses the Viewer role; presentation flows use the Presenter role.

Typical Use Cases

Brand Portals & Asset Libraries

Team members browse and preview the current approved brand templates (logos, campaign visuals, document layouts) before downloading. The Viewer provides a clean preview pane without any risk of accidental edits.

Approval & Review Workflows

Stakeholders review a design for sign-off. The Viewer renders the scene at full fidelity (fonts, effects, exact layout) without requiring the reviewer to have editor access or understand CE.SDK. Comments or approval actions happen at the application layer; the Viewer just shows the design.

Client-Facing Proof Delivery

Agencies or print service providers embed the Design Viewer in a client portal to deliver proofs. Clients navigate multi-page documents, zoom into details, and confirm the design, all within the platform, without exporting a PDF for review.

Template Preview in Editors

Before a user opens a template for editing, the platform shows a full-quality preview of what the template looks like. The Design Viewer renders this preview from the scene file without loading the full editor.

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