Important Disclaimer
This is NOT an XMPie product. This application is a community-built demonstration of how the XMPie PersonalEffect APIs can be used to build custom web-to-print solutions. It is provided as-is, with no warranty or guarantee of any kind.
No support is provided for this code by XMPie support. If you encounter issues with this demo application, please use the GitHub Issues tab — do not contact XMPie support.
To run this application yourself, you will need access to a valid XMPie PersonalEffect server with the uProduce REST API licensed and enabled. No templates or artwork are included in this repository.
What This Demo Shows
This demonstration showcases how the XMPie uProduce REST API can be used to build a fully interactive, web-based document customisation experience. Users can select from multiple templates, personalise content through a dynamic form, see real-time previews, and download print-ready PDFs — all powered by the PersonalEffect engine running on a remote XMPie server.
Template Selection
Browse and select from multiple pre-configured PersonalEffect templates, each with its own set of customisable variables, page sizes, and design options.
Real-Time Personalisation
Modify text fields, select industries, choose languages, and adjust options. Each change triggers a new API call to the PersonalEffect server, generating a fresh preview in seconds.
Multiple Preview Modes
View your customised document in single-page, spread, or interactive 3D view — all rendered from the JPG output returned by the uProduce API.
Print-Ready PDF Download
Generate and download a high-resolution, press-ready PDF (PDF/X-4:2010 compliant) directly from the browser, produced by the PersonalEffect engine.
How the PersonalEffect API Is Used
The application acts as a lightweight middleware between the browser and the XMPie uProduce REST API. Here is how the pieces fit together:
User Customises the Template
The browser presents a dynamic form generated from products.json, which defines each template's variables (text fields, dropdowns, date pickers) and maps them to PersonalEffect plan objects (Variables and ADORs).
Server Builds a Job Ticket
When a preview or PDF is requested, the Node.js server constructs a uProduce Job Ticket — a JSON payload specifying the campaign, plan, document, customisations, and output format. User values are injected into Plan.Customizations as PlanObjectExpression entries.
Immediate Job Submission
The job ticket is submitted to the uProduce API endpoint POST /v1/jobs/immediate, which processes the job synchronously and returns the result in a single request. This enables real-time preview generation.
Output Retrieval & Processing
Once the job completes, the server downloads the output ZIP file via GET /v1/jobs/{id}/output/download, extracts the JPG pages (for preview) or PDF (for download), and sends them back to the browser.
Key API Capabilities Demonstrated
- HTTP Basic Authentication — Secure credential handling, kept server-side to protect API access
- Plan Customisation — Overriding Variables and ADORs at runtime via job ticket customisations
- Multi-Document Support — Selecting different document variants (e.g. A4 vs US Letter) within the same campaign
- Proof vs Print Output — JPG at 150 DPI for fast previews; PDF/X-4 for production-quality print output
- Date Expression Handling — Passing date values using the
#DD/MM/YYYY#expression format - Circuit Breaker Pattern — Resilient API integration that gracefully handles server unavailability
Architecture Overview
HTML / CSS / JavaScript
Dynamic form generation, preview display, 3D view, PDF download
Express middleware
Job ticket construction, input sanitisation, rate limiting, caching
PersonalEffect Server
Template rendering, variable data processing, PDF/JPG generation
The Node.js server acts as a secure proxy — API credentials are never exposed to the browser. All uProduce API calls are made server-side with input validation, rate limiting, and a circuit breaker for resilience.
The repository includes:
- Server-side middleware (
server.js) — Express server handling job ticket construction, API communication, and security - Frontend application (
public/app.c5c64304.js) — Dynamic form generation, preview rendering, and 3D view - Template configuration (
products.json) — Declarative product definitions mapping UI fields to PersonalEffect plan objects - Thumbnail caching (
thumbnailCache.js) — Optional Vercel Blob integration for persistent thumbnail storage - Deployment configuration — Ready for Vercel serverless deployment
Prerequisites for Running This Demo
If you wish to run this application yourself, you will need:
- An XMPie PersonalEffect Server — with the uProduce REST API licensed and enabled
- API Credentials — a valid username and password for the uProduce API on your server
- Your Own Templates — PersonalEffect plans and documents configured on your server (no templates are included in this repository)
- Node.js — version 18 or later for running the server locally
- Environment Configuration — set
UPRODUCE_API_URL,UPRODUCE_USERNAME, andUPRODUCE_PASSWORDin a.envfile