Search Docs
Loading...
Skip to content

Design Viewer for Next.js

Lightweight design viewing for your Next.js app—pan, zoom, and navigate multi-page designs. Runs entirely in the browser with no server dependencies.

Viewer starter kit showing a lightweight content display interface

5 mins
estimated time
Download
StackBlitz
GitHub

Prerequisites#

Before you begin, make sure you have the following:

  • Node.js v20+ and npm installed locally – Download Node.js
  • A supported browser – Chrome 114+, Edge 114+, Firefox 115+, Safari 15.6+
    See Browser Support for the full list.
New Project
Existing Project

Get Started#

Create a new Next.js application with Design Viewer integration.

Step 1: Create a New Project#

Terminal
npx create-next-app@latest your-project-name
cd your-project-name
npx create-next-app@latest your-project-name
cd your-project-name

Step 2: Clone the Starter Kit#

Clone the starter kit and copy the viewer configuration to your project:

Terminal
git clone https://github.com/imgly/starterkit-design-viewer-ts-web.git
cp -r starterkit-design-viewer-ts-web/app/imgly ./app/imgly
rm -rf starterkit-design-viewer-ts-web
git clone https://github.com/imgly/starterkit-design-viewer-ts-web.git
cp -r starterkit-design-viewer-ts-web/app/imgly ./app/imgly
rm -rf starterkit-design-viewer-ts-web

Step 3: Install Dependencies#

The Creative Editor SDK package provides all viewing functionality.

Terminal
npm install @cesdk/cesdk-js
npm install @cesdk/cesdk-js

Step 4: Download Assets#

CE.SDK requires engine assets (fonts, icons, UI elements) to function. These must be served as static files from your project’s public/ directory.

Terminal
curl -O https://cdn.img.ly/packages/imgly/cesdk-js/1.69.0/imgly-assets.zip
unzip imgly-assets.zip -d public/
rm imgly-assets.zip
curl -O https://cdn.img.ly/packages/imgly/cesdk-js/1.69.0/imgly-assets.zip
unzip imgly-assets.zip -d public/
rm imgly-assets.zip

Step 5: Create the Viewer Component#

Create a client-side React component using the official CE.SDK React wrapper:

'use client';


import { initDesignViewer } from '../imgly';
import CreativeEditor from '@cesdk/cesdk-js/react';


export default function DesignViewer() {
  return (
    <CreativeEditor
      config={{ baseURL: '/assets' }}
      init={initDesignViewer}
      width="100vw"
      height="100vh"
    />
  );
}

Step 6: Use the Component#

Import and use the Design Viewer component in your application:

import DesignViewer from './components/DesignViewer';


export default function Page() {
  return <DesignViewer />;
}

SSR Error#

If you encounter the error ReferenceError: window is not defined, it means the component is being rendered on the server. CE.SDK requires browser APIs and must run client-side only.

Use Next.js dynamic imports to disable SSR for the viewer component:

'use client';


import dynamic from 'next/dynamic';


const DesignViewer = dynamic(
  () => import('./components/DesignViewer'),
  { ssr: false }
);


export default function DesignViewerComponent() {
  return <DesignViewer />;
}

Set Up a Scene#

CE.SDK offers multiple ways to load content into the viewer. Choose the method that matches your use case:

app/imgly/index.ts
// Load from a template archive - loads a previously saved project
await cesdk.loadFromArchiveURL('https://example.com/design.zip');


// Load from a scene file - restores a scene from JSON
await cesdk.loadFromURL('https://example.com/scene.json');


// Zoom to fit the content
await cesdk.actions.run('zoom.toPage', {
  page: 'first',
  autoFit: true,
  padding: 24
});

Customize (Optional)#

Theming#

CE.SDK supports light and dark themes out of the box, plus automatic system preference detection. Switch between themes programmatically:

app/imgly/config/settings.ts
// 'light' | 'dark' | 'system' | (() => 'light' | 'dark')
cesdk.ui.setTheme('dark');

See Theming for custom color schemes, CSS variables, and advanced styling options.

Localization#

Customize UI labels and add support for multiple languages. The i18n system supports translation keys for all UI elements:

app/imgly/config/i18n.ts
// Override specific labels
cesdk.i18n.setTranslations({
  en: {
    'common.zoomIn': 'Zoom In',
    'common.zoomOut': 'Zoom Out'
  }
});


// Add a new language
cesdk.i18n.setTranslations({
  de: {
    'common.zoomIn': 'Vergrößern'
  }
});


// Set the active locale
cesdk.i18n.setLocale('de');

See Localization for supported languages, translation key reference, and right-to-left language support.

Key Capabilities#

The Design Viewer includes everything needed for design viewing.

Pan & Zoom

Pan & Zoom

Navigate designs with intuitive pan and zoom controls.

Page Navigation

Page Navigation

Navigate between pages in multi-page designs and presentations.

Zoom Controls

Zoom Controls

Zoom in and out of the canvas with fit-to-screen options.

Read-Only Mode

Read-Only Mode

Display design content without editing capabilities for preview and approval workflows.

Approval Workflows

Approval Workflows

Review and approve designs without the risk of accidental modifications.

Lightweight Interface

Lightweight Interface

Minimal UI focused on viewing experience without editing distractions.


Troubleshooting#

Viewer doesn’t load#

  • Check the container element exists: Ensure your container element is in the DOM before calling create()
  • Verify the baseURL: Assets must be accessible from the CDN or your self-hosted location
  • Check console errors: Look for CORS or network errors in browser developer tools

Content doesn’t appear#

  • Check network requests: Open DevTools Network tab and look for failed requests to cdn.img.ly
  • Self-host assets for production: See Serve Assets to host assets on your infrastructure

Watermark appears in production#

  • Add your license key: Set the license property in your configuration
  • Sign up for a trial: Get a free trial license at img.ly/forms/free-trial

Next Steps#