web-hosts/chuckie.coppertone.tech/app/canva-app

Canva Connector Side-Panel App (Apps SDK)

This scaffold runs inside the Canva editor (side panel iframe) and talks to the editor via the Canva Apps SDK. Use it to add elements, call your backend, and keep users inside Canva while editing.

What’s here

• app.config.json — declares entry point and capabilities (design, asset, fetch).
• src/app.tsx — minimal panel UI using @canva/app-ui-kit with two actions:
  • Insert headline: drops a text element into the current page via @canva/design.
  • Ping backend: calls your service via @canva/fetch (replace the URL).
• package.json — wired for canva-app CLI scripts (dev/build) and Apps SDK deps.

Prereqs

• Canva Developer account and an app created in the Developer Portal.
• Canva CLI installed globally: npm install -g @canva/app-cli (or use npx canva-app).
• Node 18+.

Run locally (panel inside Canva)

1. Install deps: cd canva-app && npm install (or pnpm install).
2. Start dev server: npm run dev (spins up the app and gives you an Ngrok/localhost URL).
3. In Canva, open your dev app and set the App URL to the dev tunnel URL that the CLI prints.
4. Open a design in Canva → open your app from the Apps sidebar → click Insert headline and Ping backend.

Build for submission

• npm run build produces the production bundle via @canva/app-scripts.
• Point your app’s production URL in the Developer Portal to the built host you deploy.

Notes / Next steps

• Replace https://your-backend.example.com/health in src/app.tsx with your Go backend endpoint and add any auth you require.
• Use other SDKs as needed: @canva/asset for uploads, @canva/platform for intents, @canva/user for identity, @canva/fetch for signed backend calls.
• Follow Canva’s design guidelines (panel width, spacing, accessibility) before submitting to the Marketplace.