# 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.