WORK IN PROGRESS - canvas gallery page for PostHog Desktop

[cleo-pleurodon]

Changes

This PR adds a canvas gallery for PostHog Desktop at /desktop-gallery.
Not a top-level nav item. The page is linked from the Docs menu (after "Templates") and from the Canvases tab on /desktop.

Why: people who try canvases build a dashboard first, and then more dashboards. This page shows the other shapes a canvas can take, and gives them a prompt to start from.

Visual Changes

I've made an issue here for the website team, but wanted to take a crack at the design since I had strong feelings. I'd don't think the colors are quite right, but the folder interaction I think is worth keeping to make this "visual swipe file" concept land.

Canvas Gallery

Canvas card modal

Rest of page

Checklist

• I've read the docs and/or content style guides.
• Words are spelled using American English
• Use relative URLs for internal links
• I've checked the pages added or changed in the Vercel preview build
• If I moved a page, I added a redirect in vercel.json (no page moved)

---

Created with PostHog Desktop

---

Update: one prompt per canvas in the modal

The modal now reads the open canvas's prompt once and gives that one string to the prompt text, the Copy prompt button, and the Open in Desktop button. Before, each surface read the canvas again, so a future edit could show one prompt and send another.

The deep link changes from posthog-code://new?prompt=… to posthog-code://plan?plan=…, the base64 link PostHog Desktop documents for long prompts with blank lines. It opens the same composer. Gallery prompts are 550-840 characters, which is the case those docs point at.

No visual change: the buttons, labels, and layout are the same.

[github-actions]

Deploy preview

Status	Details	Updated (UTC)
🟢 Ready	View preview	Sep 15, 2026 02:25PM

[github-actions]

Bundle report

Total JS (gzip)

8.79 MiB (+11.6 KiB / +0.1%)

Largest changed named chunks

Chunk	Gzip	Δ vs master
component---src-pages-desktop-canvases-tsx.js	11.1 KiB	new

Eager graph (modules shipped in each entrypoint's initial chunks)

Entrypoint	Eager size	Budget	Modules
✅ app	18.52 MiB (+3.5 KiB / +0.0%)	report-only	2065

Largest modules in the app closure

Module	Size
./src/data/mcp-tools.json	1138.6 KiB
css ./node_modules/.pnpm/css-loader@5.2.7_webpack@5.101.3/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[1]!./node_modules/.pnpm/postcss-loader@4.3.0_postcss@8.5.6_webpack@5.101.3/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[2]!./src/styles/global.css	776.4 KiB
./src/components/Stickers/Stickers.tsx	696.4 KiB
./node_modules/.pnpm/@radix-ui+react-icons@1.3.2_react@18.3.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js	481.4 KiB
./node_modules/.pnpm/@posthog+brand@0.8.0_react@18.3.1/node_modules/@posthog/brand/dist/generated/hoggies/svg/x-ray.mjs	480.8 KiB
./node_modules/.pnpm/rehype-raw@7.0.0/node_modules/rehype-raw/lib/index.js + 29 modules	395.1 KiB
./node_modules/.pnpm/@posthog+brand@0.8.0_react@18.3.1/node_modules/@posthog/brand/dist/generated/hoggies/svg/im-the-driver.mjs	385.7 KiB
./src/hooks/useCustomers.tsx + 55 modules	370.0 KiB
./node_modules/.pnpm/@posthog+icons@0.36.6_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.es.js	354.8 KiB
./node_modules/.pnpm/react-markdown@8.0.7_@types+react@16.14.66_react@18.3.1/node_modules/react-markdown/lib/react-markdown.js + 88 modules	351.4 KiB
./src/components/ProductComparisonTable/index.tsx + 126 modules	305.7 KiB
./node_modules/.pnpm/cloudinary-core@2.14.0_lodash@4.17.21/node_modules/cloudinary-core/cloudinary-core.js	281.9 KiB
./node_modules/.pnpm/@posthog+brand@0.8.0_react@18.3.1/node_modules/@posthog/brand/dist/generated/hoggies/svg/doll-house.mjs	281.7 KiB
./node_modules/.pnpm/@posthog+brand@0.8.0_react@18.3.1/node_modules/@posthog/brand/dist/generated/hoggies/svg/director.mjs	275.6 KiB
./src/components/SearchUI/index.tsx + 87 modules	273.7 KiB

---

Eager-graph budgets are report-only until a baseline is established. Sizes are gzip of public/**/*.js; eager size is webpack module source bytes for the modules actually shipped in the entrypoint's initial chunks (post-tree-shake).

[github-actions]

Vale prose linter → found 1 errors, 1 warnings, 0 suggestions in your markdown

Full report → Copy the linter results into an LLM to batch-fix issues.

Linter being weird? Update the rules!

src/components/Code/CanvasGallery/README.md — 1 errors, 1 warnings, 0 suggestions

Line	Severity	Message	Rule
24:241	error	Hi, Andy here... use an en dash ( – ) with spaces. On Mac, holding down the Option and hyphen key will give you an en dash.	PostHogBase.EnDash
46:48	warning	'OSButton' is a possible misspelling.	PostHogBase.Spelling