{"templates":[{"slug":"pdp-realtime","name":"Live-mockup product page","promise":"Type a headline, watch the printed product re-render live.","description":["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."],"framework":"Next.js 15","tags":["canvas","realtime","product page"],"remixMode":"full","page":"https://snowcone.app/templates/pdp-realtime","source":"https://github.com/snowcone-app/templates/tree/main/templates/pdp-realtime","docs":"https://developers.snowcone.app/get-started?ref=templates&t=pdp-realtime","seedPrompt":"Build a Next.js product page for custom printed merchandise with a live mockup preview, powered by Snowcone.\n\nTHE HAPPY PATH — mint your own shop, render a sample image:\n\n1. Mint a sandbox shop server-side, ONCE on boot, and cache the shop_id\n   (it's your shop — no auth needed to mint, the key has uploads:write):\n     POST https://api.snowcone.app/shops/sandbox  →  { \"shop_id\": \"...\" }\n2. A mockup is a plain image URL — use it directly as an <img> src. Start with\n   this provided sample image so the page renders the moment it loads:\n     const SAMPLE = \"https://dqMwU8Jct3.storage.snowcone.app/demo/demo-008.jpg\";\n     https://img.snowcone.app/BEEB77?asset=<URL-encoded SAMPLE>&shop=<your shop_id>\n3. Product info comes from the public catalog:\n     GET https://search.snowcone.app/indexes/snowcone/documents/BEEB77\n     Authorization: Bearer 73f573ead9be75531c56ee89d104caa49d79154db387f119a013d33eccfe654b\n     (public read-only key; the product code is the document id)\n4. Checkout is the same URL with img → buy:\n     https://buy.snowcone.app/BEEB77?asset=<...>&shop=<your shop_id>\n\nUSE YOUR OWN ART (two ways, both on YOUR shop):\n- Upload it to your shop (the minted key has uploads:write) and render the\n  returned URL, or\n- Pass any image URL that's publicly fetchable — the renderer fetches the asset\n  server-side, so it has to be reachable from the public internet.\n\nBuild this page:\n- Show the BEEB77 product (name, price in cents, description paragraphs) from the catalog.\n- Render the SAMPLE image by default, then let the user swap in their own art\n  (upload, or paste a public image URL); the mockup <img> re-renders (debounced).\n- A \"Buy this\" button linking to the buy URL for the current asset.\n\nGotchas: 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).\n\nThe full template this seeds from (realtime canvas editing via @snowcone-app/canvas/embed): https://github.com/snowcone-app/templates/tree/main/templates/pdp-realtime\nDocs: https://developers.snowcone.app/get-started?ref=templates&t=pdp-realtime","open":[{"platform":"stackblitz","label":"Open template in StackBlitz","url":"https://snowcone.app/api/templates/go?t=pdp-realtime&p=stackblitz"},{"platform":"bolt","label":"Open template in Bolt","url":"https://snowcone.app/api/templates/go?t=pdp-realtime&p=bolt"},{"platform":"v0","label":"Start in v0 with this example","url":"https://snowcone.app/api/templates/go?t=pdp-realtime&p=v0"},{"platform":"lovable","label":"Start in Lovable with this example","url":"https://snowcone.app/api/templates/go?t=pdp-realtime&p=lovable"},{"platform":"replit","label":"Start in Replit with this example","url":"https://snowcone.app/api/templates/go?t=pdp-realtime&p=replit"}]},{"slug":"get-started-quickstart","name":"Quickstart: a mockup is a URL","promise":"Render merch in any app — product, artwork, shop ID. That's the whole model.","description":["The smallest possible Snowcone integration, as real compiled code: fetch a product from the public catalog, build a mockup URL with the typed SDK, mint a sandbox shop with one POST.","This is the exact snippet from the get-started docs, kept compiling in CI against the published @snowcone-app/sdk so it can never drift from the shipped types."],"framework":"TypeScript","tags":["sdk","snippet"],"remixMode":"prompt-only","page":"https://snowcone.app/templates/get-started-quickstart","source":"https://github.com/snowcone-app/templates/tree/main/templates/get-started-quickstart","docs":"https://developers.snowcone.app/get-started?ref=templates&t=get-started-quickstart","seedPrompt":"Add printed-merchandise mockups to my app using Snowcone.\n\nTHE HAPPY PATH — mint your own shop, render a sample image:\n\n1. Mint a sandbox shop server-side, ONCE on boot, and cache the shop_id\n   (it's your shop; the minted key has uploads:write):\n     POST https://api.snowcone.app/shops/sandbox  →  { \"shop_id\": \"...\" }\n2. A mockup is just a URL — render it with a plain <img> tag. Start with this\n   provided sample image so something shows on first load:\n     const SAMPLE = \"https://dqMwU8Jct3.storage.snowcone.app/demo/demo-008.jpg\";\n     https://img.snowcone.app/BEEB77?asset=<URL-encoded SAMPLE>&shop=<your shop_id>\n3. Product info (name, price, variants) from the public catalog:\n     GET https://search.snowcone.app/indexes/snowcone/documents/BEEB77\n     Authorization: Bearer 73f573ead9be75531c56ee89d104caa49d79154db387f119a013d33eccfe654b\n4. Checkout is the same URL with img → buy:\n     https://buy.snowcone.app/BEEB77?asset=<...>&shop=<your shop_id>\n\nUSE YOUR OWN ART: upload it to your shop (the minted key has uploads:write) and\nrender the returned URL, or pass any publicly-fetchable image URL — the renderer\nfetches the asset server-side, so it must be reachable from the public internet.\n\nGotchas: an own-art URL must be publicly fetchable (localhost/file:// render blank); only catalog product codes render.\n\nTyped SDK if you prefer: npm i @snowcone-app/sdk — getProduct(code), getMockupUrl(code, { shop, asset }).\nDocs: https://developers.snowcone.app/get-started?ref=templates&t=get-started-quickstart","open":[{"platform":"v0","label":"Start in v0 with this example","url":"https://snowcone.app/api/templates/go?t=get-started-quickstart&p=v0"},{"platform":"lovable","label":"Start in Lovable with this example","url":"https://snowcone.app/api/templates/go?t=get-started-quickstart&p=lovable"},{"platform":"replit","label":"Start in Replit with this example","url":"https://snowcone.app/api/templates/go?t=get-started-quickstart&p=replit"}]}]}