Search Docs
Loading...
Skip to content

PDF Template Import for React

Transform PDF documents into editable CE.SDK designs. All formatting preserved.

Design Editor starter kit showing a professional design editing interface

10 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#

Start fresh with a standalone PDF Template Import project. This creates a complete, ready-to-run application.

Step 1: Clone the Repository#

Terminal
git clone https://github.com/imgly/starterkit-pdf-template-import-react-web.git
git clone https://github.com/imgly/starterkit-pdf-template-import-react-web.git

The src/ folder contains the application code:

src/
├── app/                          # Demo application
├── imgly/
│   ├── config/
│   │   ├── actions.ts                # Export/import actions
│   │   ├── features.ts               # Feature toggles
│   │   ├── i18n.ts                   # Translations
│   │   ├── plugin.ts                 # Main configuration plugin
│   │   ├── settings.ts               # Engine settings
│   │   └── ui/
│   │       ├── canvas.ts                 # Canvas configuration
│   │       ├── components.ts             # Custom component registration
│   │       ├── dock.ts                   # Dock layout configuration
│   │       ├── index.ts                  # Combines UI customization exports
│   │       ├── inspectorBar.ts           # Inspector bar layout
│   │       ├── navigationBar.ts          # Navigation bar layout
│   │       └── panel.ts                  # Panel configuration
│   ├── index.ts                  # Editor initialization function
│   └── plugins/
│       └── pdf-importer.ts
└── index.tsx                 # Application entry point

Step 2: Install Dependencies#

Install the required packages:

Terminal
cd starterkit-pdf-template-import-react-web
npm install
cd starterkit-pdf-template-import-react-web
npm install

Step 3: 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.76.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.76.0/imgly-assets.zip
unzip imgly-assets.zip -d public/
rm imgly-assets.zip
src/index.ts
const config = {
  // ...
  baseURL: '/assets'
  // ...
};

Step 4: Run the Development Server#

Terminal
npm run dev
npm run dev

Open http://localhost:5173 in your browser.

Understanding the PDF Importer#

The PDF importer parses PDF documents and converts them to editable CE.SDK scenes. It supports:

  • Page Preservation: Preserves the original page structure, positioning, and rotation
  • Text Blocks: Converts text runs into editable CE.SDK text blocks; falls back to vector outlines when a font cannot be resolved
  • Vector Paths: Imports SVG path data from the PDF as vector path blocks
  • Embedded Images: Extracts JPEG and PNG images and places them as graphic blocks
  • Colors and Gradients: Reproduces solid colors, linear and radial gradients, plus RGB, CMYK, and Separation spot colors

Import Result Structure#

interface PdfImportResult {
  imageUrl: string;       // Object URL for preview image
  sceneArchiveUrl: string; // Object URL for CE.SDK scene archive
  messages: LogMessage[];  // Import warnings and info messages
  fileName: string;        // Original file name
}

Handling Import Messages#

The importer logs messages for elements it couldn’t fully convert or features not supported:

const result = await importPdfFile(pdfBlob, 'document.pdf');


// Check for any import warnings
result.messages.forEach((msg) => {
  if (msg.type === 'warning') {
    console.warn(`Import warning: ${msg.message}`);
  }
});

Set Up a Scene#

CE.SDK offers multiple ways to load content into the editor. PDFs are imported with a headless engine and then loaded into the editor as a scene archive:

src/index.ts
import { importPdfFile } from './imgly/plugins/pdf-importer';


// 1. Fetch a PDF from any URL or from the file picker
const blob = await fetch('https://example.com/document.pdf').then((r) => r.blob());


// 2. Parse the PDF in a headless engine and capture the resulting scene archive
const result = await importPdfFile(blob, 'document.pdf', { baseURL: '/assets' });


// 3. Load the archive into the editor
await cesdk.loadFromArchiveURL(result.sceneArchiveUrl);


// Or: create a blank design canvas
await cesdk.actions.run('scene.create');


// Or: load from an existing CE.SDK scene archive
await cesdk.loadFromArchiveURL('https://example.com/template.zip');

Customize Assets#

The editor uses asset source plugins to provide built-in libraries for templates, stickers, shapes, and fonts. The starter kit includes a curated selection—customize what’s included based on your needs.

Asset sources are added via plugins in src/index.ts. Enable or disable individual sources:

src/index.ts
import {
  FiltersAssetSource,
  StickerAssetSource,
  TextAssetSource,
  VectorShapeAssetSource,
  EffectsAssetSource,
  // ...
} from '@cesdk/cesdk-js/plugins';


// Add only the sources you need
await cesdk.addPlugin(new FiltersAssetSource());
await cesdk.addPlugin(new StickerAssetSource());
await cesdk.addPlugin(new TextAssetSource());
await cesdk.addPlugin(new VectorShapeAssetSource());
await cesdk.addPlugin(new EffectsAssetSource());
// ...

For production deployments, self-hosting assets is required—the IMG.LY CDN is intended for development only. See Serve Assets for downloading assets, configuring baseURL, and excluding unused sources to optimize load times.

Configure Actions#

Actions are functions that handle user interactions like exporting designs, saving scenes, and importing files. CE.SDK provides built-in actions that you can run directly or override with custom implementations.

Key built-in actions:

  • exportDesign – Export the current design to PNG, JPEG, PDF, or other formats
  • saveScene – Save the scene as a JSON string for later editing
  • importScene – Import a previously saved scene (supports .scene and .cesdk formats)
  • exportScene – Export the scene as a JSON file or .cesdk archive with all assets
  • uploadFile – Handle file uploads with progress tracking

Use cesdk.actions.run() to execute any action:

// Run a built-in action
await cesdk.actions.run('exportDesign', { mimeType: 'image/png' });

Import from File Picker#

src/imgly/config/actions.ts
// Let users open PDF files from their device
cesdk.actions.register('importImage', async () => {
  const blobURL = await cesdk.utils.loadFile({
    accept: '.pdf,application/pdf',
    returnType: 'objectURL'
  });
  const blob = await fetch(blobURL).then((r) => r.blob());
  URL.revokeObjectURL(blobURL);


  const result = await importPdfFile(blob, 'document.pdf');
  await cesdk.loadFromArchiveURL(result.sceneArchiveUrl);
});

Export and Save#

src/imgly/config/actions.ts
// Register export action that downloads the edited design
cesdk.actions.register('exportDesign', async (exportOptions) => {
  const { blobs, options } = await cesdk.utils.export(exportOptions);
  await cesdk.utils.downloadFile(blobs[0], options.mimeType);
});

Customize (Optional)#

Theming#

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

src/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:

src/imgly/config/i18n.ts
// Override specific labels
cesdk.i18n.setTranslations({
  en: {
    'actions.export.image': 'Download Design',
    'common.cancel': 'Cancel',
    'common.apply': 'Apply'
  }
});


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

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

UI Layout#

CE.SDK Editor UI Areas

Customize the editor interface by modifying the dock, inspector bar, navigation bar, and canvas menu. CE.SDK provides Order APIs to control which components appear and in what sequence.

src/imgly/config/ui/navigationBar.ts
// Get current navigation bar components
const navOrder = cesdk.ui.getNavigationBarOrder();


// Add a custom button to the navigation bar
cesdk.ui.insertNavigationBarOrderComponent(
  'ly.img.spacer',
  { id: 'my-custom-action' },
  'after'
);

See Dock, Inspector Bar, Navigation Bar, Canvas Menu, and Canvas for detailed layout customization options.

Settings & Features#

Fine-tune editor behavior through settings and features.

Settings configure core engine behavior—rendering, input handling, and history management:

src/imgly/config/settings.ts
cesdk.engine.editor.setSettingBool('page/dimOutOfPageAreas', true);
cesdk.engine.editor.setSettingBool('mouse/enableZoomControl', true);
cesdk.engine.editor.setSettingBool('features/undoHistory', true);

Features toggle which editing tools and panels appear in the UI:

src/imgly/config/features.ts
// Toggle editor features
cesdk.feature.enable('ly.img.crop', true);
cesdk.feature.enable('ly.img.filter', true);
cesdk.feature.enable('ly.img.adjustment', true);

See Settings and Features for the complete reference.

Key Capabilities#

The PDF Template Import starter kit enables professional document editing workflows.

PDF File Import

PDF File Import

Import PDF documents directly into the editor with text, vector paths, images, and gradients preserved.

Page Preservation

Page Preservation

Maintain the original page structure, positioning, and rotation from the source PDF.

Text Editing

Text Editing

Edit imported text with comprehensive typography controls and font management.

Vector Paths

Vector Paths

Preserve and edit vector paths, embedded images, and graphic elements from PDF documents.

Export Options

Export Options

Export edited designs to PNG, JPEG, PDF, or save as CE.SDK scene files.

Print & Design Workflows

Print & Design Workflows

Build document editing systems with RGB, CMYK, and spot color support for print and design workflows.


Troubleshooting#

Editor 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

PDF file does not import correctly#

  • Check the file format: Ensure the file is a valid PDF (version 1.4+)
  • Check file size: Large files may take longer to process
  • Check console errors: Look for parsing or memory errors
  • Review import messages: Check the messages array in the import result for warnings

Assets don’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#