Loading
Gallery|Interactive PlaygroundMulti-Module (1)
Modules
Theme(demo only)

Applied live; copies data-preset.

Code (1 module)

Layout wrappers (.chm-slot, .chm-layout-row) are part of the page HTML. They claim space; modules stay sized inside them.

How to use this playground

  • Studio (right dock): drag modules full width or side by side. You do not need to write HTML.
  • Code + Run: paste or editdata-*HTML, then Run. Layout resets to full-width rows in code order.
  • Reload: keeps Studio draft first (rows, sizes, styles). Code alone does not override until you click Run.
  • Both: Studio changes sync into the editor. Use whichever feels faster (multi-module append is on).
Modules in this layout (1)
Embed snippetUse Copy above the editor
<!-- 1. Load the SDK once per page (or once globally in your header/footer) -->
<script src="https://sdk.lesuto.com/v2/chameleon.js"
  data-channel-token="YOUR_CHANNEL_TOKEN"></script>

<!-- 2. Drop the module(s) wherever you want them to render -->
<div data-chameleon="product-grid"
     data-layout="grid" data-limit="12" data-columns="4"></div>
Live Preview

Starting playground…

Studio

Chameleon Studio docks here

Drag the Studio panel near this column to snap it in. Use Collapse above to free preview width.

AI Assistant