# /play on PlaygroundRender

The comark-ui playground now runs on `PlaygroundRender` from `@vite-hub/ui`. It looks almost the same; the bar gets Download and a Gallery link, and the per-pane Copy button goes.

Open `/play` at 1440 x 900 in light mode. Before is https://comark-ui.onmax.me/play (main), after is the branch build.

::compare
:::screenshot{src="https://drop.vitehub.dev/f/ea32cada-c2e5-4d0b-8985-9117f80cdc38.png" alt="Playground before" viewport="1440x900"}
::::annotation{x=1.1 y=6.7 w=14.4 h=6 color="red"}
**Playground** title and **Component gallery** link above the presets
::::
::::annotation{x=55.1 y=10.7 w=2.1 h=3.3 color="red"}
Copy button in the code's corner
::::
:::
:::screenshot{src="https://drop.vitehub.dev/f/c4e8c945-3470-4fae-a98a-0315a93d2ea4.png" alt="Playground after" viewport="1440x900"}
::::annotation{x=35.7 y=5.5 w=22.3 h=3.6 color="green"}
**Gallery**, Download, and **Copy link** in the bar
::::
:::
::

The Theme pane is the same form, now in the component's `theme` slot.

::compare
:::screenshot{src="https://drop.vitehub.dev/f/64c818aa-15b6-41ac-b728-0d37655d531e.png" alt="Theme pane before" viewport="1440x900"}
:::
:::screenshot{src="https://drop.vitehub.dev/f/ad6d3fb1-9d6c-4026-8f84-35ea81c233c5.png" alt="Theme pane after" viewport="1440x900"}
:::
::

A cut-off `#code=` link opens the first example and says so.

:::screenshot{src="https://drop.vitehub.dev/f/754325c6-1f33-4403-86f2-9c691b3c388c.png" alt="Notice for a broken link" viewport="1440x900"}
::::annotation{x=16.7 y=95 w=41.6 h=5 color="green"}
This link is cut off or changed, so the playground shows an example.
::::
:::