Print-Ready PDF Editor Starter Kit

Deliver print-ready CMYK PDF/X-4 and PDF/X-3 files straight from your web app. Perfect for web-to-print and marketing automation. Built with CE.SDK by IMG.LY, runs entirely in the browser with no server dependencies.

Documentation

Getting Started

Clone the Repository

git clone https://github.com/imgly/starterkit-print-ready-pdf-editor-ts-web.git
cd starterkit-print-ready-pdf-editor-ts-web

Install Dependencies

npm install

Download Assets

CE.SDK requires engine assets (fonts, icons, UI elements) served from your public/ directory.

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

Run the Development Server

npm run dev

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

Configuration

Loading Content

Load content into the editor using one of these methods:

// Create a blank design canvas
await cesdk.createDesignScene();

// Load from a template archive
await cesdk.loadFromArchiveURL('https://example.com/template.zip');

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

// Load from an image
await cesdk.createFromImage('https://example.com/image.jpg');

See Open the Editor for all loading methods.

Theming

cesdk.ui.setTheme('dark'); // 'light' | 'dark' | 'system'

See Theming for custom color schemes and styling.

Localization

cesdk.i18n.setTranslations({
  de: { 'common.save': 'Speichern' }
});
cesdk.i18n.setLocale('de');

See Localization for supported languages and translation keys.

Architecture

src/
├── 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/
│       └── export-print-ready-pdf.ts
└── index.ts

Key Capabilities

• Print-Ready PDF Export – PDF/X-4 and PDF/X-3 compliance for professional printing
• Color Profiles – CMYK (ISO Coated v2, GRACoL) and RGB (sRGB) support
• Bleed Margins – Configurable bleed margins for print production
• Page Range Selection – Export all pages or custom ranges
• Text Editing – Typography with fonts, styles, and effects
• Image Placement – Add, crop, and arrange images
• Shapes & Graphics – Vector shapes and design elements
• Templates – Start from pre-built design templates
• Multi-Page – Create multi-page documents

Prerequisites

• Node.js v22+ with npm – Download
• Supported browsers – Chrome 114+, Edge 114+, Firefox 115+, Safari 15.6+

Troubleshooting

Issue	Solution
Editor doesn't load	Verify assets are accessible at baseURL
Assets don't appear	Check public/assets/ directory exists
Watermark appears	Add your license key
PDF export fails	Check browser console for errors

Documentation

For complete integration guides and API reference, visit the Print-Ready PDF Editor Documentation.

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Built with CE.SDK by IMG.LY