> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cesto.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Playground

> Try every plugin live, against any basket, right inside the docs.

<div className="cesto-pg-page" style={{ display: "none" }} />

Pick a basket on the left, choose a layout, and the preview on the right updates instantly. The copy-paste embed snippet below the design list is the exact code to drop into your own page.

<Note>
  Want more room? **[Open the playground in a new tab](https://plugin.cesto.co/playground)** for the full-screen view. If the embed below ever appears blank, your browser is blocking third-party content and the new tab will load it fine.
</Note>

<iframe
  src="https://plugin.cesto.co/playground"
  title="Cesto Plugin Playground"
  style={{
display: "block",
width: "100%",
height: "640px",
border: "1px solid rgba(255, 255, 255, 0.08)",
borderRadius: "12px",
overflow: "hidden",
background: "#0b0d10",
margin: "1.5rem 0",
}}
  allow="clipboard-write"
/>

## What you can do here

1. **Switch layouts.** The four cards under DESIGNS are the four plugins. Click any of them and the preview re-renders with the new layout.
2. **Switch baskets.** The dropdown under BASKET lists every published basket. The preview, the embed snippet, and the URL all update together.
3. **Copy the embed snippet.** Below the design list, the EMBED SNIPPET box has the exact `<iframe>` HTML for the current selection. Click the copy icon, paste it into your page, and you are done.
4. **Resize and watch it reflow.** Drag the docs window narrower or wider to see each plugin scale itself through CSS container queries. There is no breakpoint cliff; the layout adapts continuously.
5. **Try the Performance timeframes.** On the Performance preset, click between **1M / 3M / 6M / 1Y**. The first switch fetches, the rest are instant because every timeframe is prefetched in the background.