Move Your Polotno Editor to Orshot

# Replace the Polotno SDK in this project with Orshot Embed

You are helping me move this project off the Polotno SDK (the `polotno` npm package, `polotno-node` and api.polotno.com) and onto Orshot (orshot.com). Orshot runs the template editor for me: I embed it through an iframe or a React/Vue component, and Orshot's API renders images, PDFs and videos from the same templates. Orshot also has native n8n, Make, Zapier, Pipedream and Airtable apps and an MCP server (https://mcp.orshot.com/mcp, setup at https://orshot.com/agents). Connect to that MCP server first if you can: with it you can list my Orshot templates, read their parameters and run test renders. Read the linked docs before you change anything, then work through the steps in order.

## 1. List every place this project uses Polotno

Search for, and list with file paths:
- imports from `polotno`, `polotno/…`, `polotno-node`, `polotno/ui.css`
- `createStore(`, `store.toJSON`, `store.loadJSON`, `store.on(`, `store.toDataURL`, `store.saveAsImage`, `store.saveAsPDF`
- `<PolotnoContainer`, `<SidePanel`, `<Workspace`, `<Toolbar`, `<PagesTimeline`, custom side panel sections
- `api.polotno.com` render calls and the Polotno key (env vars, `key:` in createStore)
- code that stores or serves design JSON per user (database tables, S3 keys, API routes)
- code that substitutes `{variable}` tokens in design JSON before rendering

## 2. Import the designs

Designs cannot be converted from code alone. I will export each design as JSON (`store.toJSON()`, or the JSON export in Polotno Studio) and import it in Orshot myself (New Template → Polotno tab → paste the JSON, or bulk import up to 10 files on a paid plan). Guide: https://orshot.com/migrate/from-polotno · Importer docs: https://orshot.com/docs/importing-templates/import-from-polotno

After import every text and image layer is an Orshot parameter with an automatic ID (`text_1_1`, `img_1_2`), which I can rename in the Studio.
- Groups, animations, video layers, background images and image crops don't convert, and figure shapes other than circles become rectangles. Flag designs that use them; ungrouping before export keeps grouped layers. A video layer comes in as an image pointing at the video file and fails the image copy, so delete video layers before export.
- A `{name}` token inside a text layer: in Orshot the whole layer is one parameter. Rename it, or change the token to `{{name}}` and send `"<parameterId>:name"`. Docs: https://orshot.com/docs/orshot-studio/inline-parameters

Ask me for the Orshot template IDs, or read the parameters with:
- GET /v1/studio/templates/{id}: https://orshot.com/docs/api-reference/studio-template-get
- List templates: https://orshot.com/docs/api-reference/studio-templates-list

Build a mapping table: Polotno design (file or DB row) → Orshot templateId, and Polotno `{variable}` → Orshot parameter name. Show it to me before editing code.

## 3. Replace the editor

Reference: https://orshot.com/docs/orshot-embed/integration · React: https://orshot.com/docs/orshot-embed/react-sdk · Vue: https://orshot.com/docs/orshot-embed/vue-sdk

Polotno:
```jsx
const store = createStore({ key: POLOTNO_KEY, showCredit: false });
<PolotnoContainer><SidePanelWrap><SidePanel store={store} /></SidePanelWrap>
  <WorkspaceWrap><Toolbar store={store} /><Workspace store={store} /></WorkspaceWrap></PolotnoContainer>
```

Orshot (plain HTML):
```html
<iframe src="https://orshot.com/embeds/EMBED_ID?templateId=12345&userId=USER_ID" title="Editor" allow="clipboard-write" style="width:100%;height:100%;min-height:600px;border:none"></iframe>
```

Orshot (React):
```jsx
import { OrshotEmbed } from "@orshot/embed-react";
<OrshotEmbed embedId="EMBED_ID" templateId={12345} />
// Per-user libraries: use the iframe URL with &userId=… (the SDK props are embedId, templateId, modifications)
```

Rules:
- The embed ID comes from my Orshot workspace (Embed → Embed Code). Store it as `ORSHOT_EMBED_ID`. Remove the Polotno key, the `polotno` package, its CSS import and every Polotno component.
- `store.loadJSON(json)` becomes the `templateId` query parameter. `?lang=` sets the language. Docs: https://orshot.com/docs/orshot-embed/integration
- One store per user becomes the `userId` (plus optional `userName`, `userEmail`) query parameters; Orshot keeps each user's templates and brand library (images, videos, audio, colors, fonts) apart. Docs: https://orshot.com/docs/orshot-embed/per-user-data
- Appearance is set in the dashboard (accent color, title, icon, language) and with the `hide` query parameter for panels (`templateBar,pagesBar,metaBar,toolsBar,videoBar,stylesSidebar,smartResize`). Docs: https://orshot.com/docs/orshot-embed/appearance
- If the app runs on Safari or inside webviews, sign a JWT and pass it as `token`. Docs: https://orshot.com/docs/orshot-embed/jwt-authentication
- Per-user action locks (upload, delete, create) go in the `permissions` claim of the JWT. Docs: https://orshot.com/docs/orshot-embed/user-permissions

## 4. Replace store events and exports

Reference: https://orshot.com/docs/orshot-embed/events · Control: https://orshot.com/docs/orshot-embed/controlling-embed · Custom buttons: https://orshot.com/docs/orshot-embed/custom-buttons · Asset picker: https://orshot.com/docs/orshot-embed/custom-asset-picker

- `store.on('change', …)` and your own save endpoint become the `orshot:template:create` / `orshot:template:update` postMessage events plus a webhook URL set in the dashboard. Orshot stores the design; keep only the template ID in my database.
- `store.toDataURL()` / `saveAsImage()` / `saveAsPDF()` become downloads inside the embed, or a custom toolbar button that emits the PNG/PDF to the parent window (`orshot:custom_action`).
- `store.loadJSON()` at runtime becomes an `orshot:embed:control` message with `templateId`; setting element text or images becomes the same message with `modifications`.
- A custom side panel that lists my own assets becomes the Custom Asset Picker: answer `orshot:asset:request` with `orshot:asset:response`.
- Always check `event.origin` includes `orshot.com`.

## 5. Rewrite the render calls

Reference: https://orshot.com/docs/api-reference/render-from-studio-template

Polotno:
```http
POST https://api.polotno.com/api/renders?KEY=…
{ "design": { …full JSON with {variables} already substituted… }, "format": "png", "pixelRatio": 2 }
```

Orshot:
```http
POST https://api.orshot.com/v1/studio/render
Authorization: Bearer ORSHOT_KEY
{ "templateId": 12345, "modifications": { "headline": "Hello", "photo": "https://…" }, "response": { "type": "url", "format": "png" } }
```

Rules:
- The design stays in Orshot. Send only `templateId` and `modifications` keyed by parameter name. Delete the JSON substitution code.
- Style overrides use dot keys: `"headline.fontSize": 48`, `"headline.color": "#111"`. Docs: https://orshot.com/docs/dynamic-parameters
- Multi-page templates prefix the page: `"page2@headline"`.
- `response.format`: png, jpg, webp, avif, pdf, mp4, webm, gif. `response.type`: url, base64, binary.
- Sync is the default and returns `data.content`. For a webhook use `"mode": "async"` inside `response` plus top-level `webhook_url`; you get `202 { id, status: "queued" }` and can poll GET /v1/studio/render-jobs/{id}. Docs: https://orshot.com/docs/api-reference/async-render-start
- Remove `polotno-node`, Puppeteer and the Chromium layer from the server, Dockerfile and CI.
- Auth is Bearer. Store the key as `ORSHOT_API_KEY`. Keys: https://orshot.com/docs/quick-start/get-api-key
- Official SDKs (Node, Python, Ruby, PHP): https://orshot.com/docs/sdks · Errors: https://orshot.com/docs/error-reference

## 6. Automations

If a Zapier, Make or n8n step calls Polotno, add the Orshot step next to it with the same parameters, run it once, then remove the old step. Ready-made workflows are in Quick Connect (Copy as n8n workflow / Make blueprint). Docs: https://orshot.com/integrations

## 7. Verify, then switch

Put the Orshot embed behind a feature flag next to the Polotno editor. Open the same design in both, save from Orshot, confirm the webhook and postMessage events arrive, render each template once from the API and compare with the Polotno output. After a week of matching results, remove the Polotno code and the key. Tell me what you removed.