The editor below is live — it runs the Polotno SDK in your browser, the same way it would run inside your own app. Pick a card, edit the front, then write and address the back. When you're done, it exports a print-ready PDF.
How it's built
The step bar, the toolbars, and the front-and-back split are a custom interface built from the SDK's React components. Instead of Polotno's default side panel, each step shows only the controls that side of the card needs:
- Style — pick a starter card. The grid loads small preview images first so it opens quickly, then loads the full design once you choose one.
- Front — set the accent and background colours from the card's palette, replace the photo, and edit anything directly on the canvas.
- Back — write and address the card, and restyle any text you select (font, colour, and size). Each card has its own font set: a formal one for the real-estate card, handwriting for the greeting card.
Both cards are saved in Polotno's JSON format. Every element is labelled by layer name, and the custom controls use those labels to find the accent, the background, the replaceable photo, and the editable text. Adding a card means dropping in another JSON file that uses the same names.
Adapting it to your product
This demo is one way to set the SDK up, and most of it is yours to change:
- The interface — the steps, toolbars, and panels are ordinary React, so you can keep this three-step flow, use a single canvas, or design your own layout, and show whichever controls fit your product.
- What's editable — you choose which elements customers can change and which stay fixed to your design.
- The output — a design is a single JSON object, so you can create or update it from code and render it to PNG, JPEG, PDF, MP4, PPTX, or SVG, either in the browser or on your server.
- The look — the editor is white-label, so the plain theme here can be styled to match your brand.
Where it fits
An editor like this suits web-to-print and direct-mail tools, real-estate and marketing platforms, and any product that gives non-designers a ready-made starting point instead of a blank canvas. Postcards are just the example here — the same setup works for social posts, certificates, packaging, or any template your customers personalise.
