Loading...
Your Stuff
Snowcone Studio
Type a headline, watch the printed product re-render live.
A cloneable Next.js product page built on the @snowcone-app/canvas/embed primitives. One design() seeds both the canvas and the first render; every keystroke in a bound input re-renders the mockup.
You touch exactly two things: a few-line server grant route and your own controls. The embed makes everything a session needs required at the type level, so there is no silently-optional prop to forget.
git clone https://github.com/snowcone-app/templates cd templates/pdp-realtime pnpm install pnpm dev
What the prompt-based builders receive — paste it into any AI tool or agent instead.
Build a Next.js product page for custom printed merchandise with a live mockup preview, powered by Snowcone.
THE HAPPY PATH — mint your own shop, render a sample image:
1. Mint a sandbox shop server-side, ONCE on boot, and cache the shop_id
(it's your shop — no auth needed to mint, the key has uploads:write):
POST https://api.snowcone.app/shops/sandbox → { "shop_id": "..." }
2. A mockup is a plain image URL — use it directly as an <img> src. Start with
this provided sample image so the page renders the moment it loads:
const SAMPLE = "https://dqMwU8Jct3.storage.snowcone.app/demo/demo-008.jpg";
https://img.snowcone.app/BEEB77?asset=<URL-encoded SAMPLE>&shop=<your shop_id>
3. Product info comes from the public catalog:
GET https://search.snowcone.app/indexes/snowcone/documents/BEEB77
Authorization: Bearer 73f573ead9be75531c56ee89d104caa49d79154db387f119a013d33eccfe654b
(public read-only key; the product code is the document id)
4. Checkout is the same URL with img → buy:
https://buy.snowcone.app/BEEB77?asset=<...>&shop=<your shop_id>
USE YOUR OWN ART (two ways, both on YOUR shop):
- Upload it to your shop (the minted key has uploads:write) and render the
returned URL, or
- Pass any image URL that's publicly fetchable — the renderer fetches the asset
server-side, so it has to be reachable from the public internet.
Build this page:
- Show the BEEB77 product (name, price in cents, description paragraphs) from the catalog.
- Render the SAMPLE image by default, then let the user swap in their own art
(upload, or paste a public image URL); the mockup <img> re-renders (debounced).
- A "Buy this" button linking to the buy URL for the current asset.
Gotchas: an own-art URL must be publicly fetchable (localhost/file:// render blank, because the asset is fetched server-side). Only catalog product codes render (BEEB77 is known-good).
The full template this seeds from (realtime canvas editing via @snowcone-app/canvas/embed): https://github.com/snowcone-app/templates/tree/main/templates/pdp-realtime
Docs: https://developers.snowcone.app/get-started?ref=templates&t=pdp-realtimeTemplates render through a sandbox shop. When you're ready to sell, claim your shop and get your own keys — payouts included.
Get your own shop