Chameleon Studio

Edit any page running the Chameleon SDK.

The Studio is a single JavaScript bundle that lets you reorder modules, re-skin themes, edit copy, and tune layout — directly on the live page. Launch it from this demo, drag the bookmarklet onto your toolbar, or install the Chrome extension and edit your real production site safely.

Try the editor in this demo Get the bookmarklet Get the Chrome extension

demo.lesuto.com/?studio=1

The page above is the same demo gallery, with the Studio panel injected automatically because of the ?studio=1 flag. In production, the panel only appears when you trigger it — your real shoppers never see it.

What you can edit

Five tabs, one panel. Everything you change is reflected on the page in real time. When you save, the changes are pushed to your deployment config and rendered on the next page load — no rebuild needed.

Modules

Add, remove, and reorder every SDK module the gallery shows. Switch variants (e.g. product-grid → editorial / luxury) without touching code.

Styles

Tweak per-module spacing, colors, and typography overrides. Changes are scoped — the rest of the page stays consistent.

Theme

Brand color, accent color, font family, border radius, and dark mode. Applied site-wide via CSS variables.

Layout

Choose the global page template — sidebar, full-bleed, classic header, sticky header. Affects nav and content rhythm.

SEO

Edit the page title, meta description, OG image, and structured data. Saved per-route, no rebuild required.

Bookmarklet

Drag this to your bookmarks bar.

On any page that loads the Chameleon SDK, click the bookmark to inject the editor. No install, no permissions, no extension needed. The bookmarklet just appends the same chameleon-studio.js bundle the Chrome extension uses.

• Works on any browser, no account required.
• Edits are kept in localStorage until you sign in to save them.
• Read-only on pages that don't load the SDK — fails silently.

Drag this link

Edit with Chameleon

If your browser blocks drag-and-drop bookmarklets, right-click the link above and choose “Add to Bookmarks”.

Or copy the source:

Chrome Extension

Same editor, plus a tracking shield and signed sessions.

The Chameleon Toolkit extension does everything the bookmarklet does, and adds the things only an extension can do: blocking your own analytics traffic on your stores, signing you in to your channel, generating short-lived preview tokens, and persisting drafts per store in chrome.storage.

•Tracking shield. DynamicdeclarativeNetRequestrules block GA, Meta Pixel, and other trackers on the hosts you enable — so your dev/staging traffic doesn't pollute analytics.
•Companion sign-in. One click signs the editor in to your channel and store. Saves go straight to your deployment config.
•Preview tokens. Generates short-lived sdkPreview tokens so you can share an unsaved draft with a teammate without exposing your admin credentials.
•Per-store drafts. Drafts are keyed by channel + host + site, so a single channel with multiple deployments never overwrites a sibling deployment's draft.

Install the extension

The extension is open-source. Until the Chrome Web Store listing is live, you can install it locally from GitHub in under a minute.

1Clone or download the chameleon-chrome-toolkit folder.
2Open chrome://extensions and turn on Developer mode.
3Click Load unpacked and select the folder.
4Pin the extension, sign in with your Lesuto Hub account, and pick a channel + store.

Read the full install & security docs →

How saves work

The same Studio bundle behaves differently depending on how it was launched. You always know what state your edits are in.

Mode 1

Local-only

Bookmarklet on a page you don't own, or the demo without an extension. Edits live in localStorage only. Refresh = changes survive. Different browser = changes are gone.

Mode 2

Companion (extension)

Extension is signed in and a channel is selected. Saves write to chrome.storage as a draft, keyed by channel + host + site. The popup shows pending drafts and lets you publish them later.

Mode 3

Direct save

Studio is launched on a page that owns its deployment config (e.g. inside the Lesuto admin). Saves go directly to the deployment config and are visible to everyone on next page load.

Two script tags. That's the whole integration.

The first tag is the SDK — required on every page. The second tag is the editor — only load it on demo / staging / preview hosts, never on your real shoppers.

embed.html

<!-- 1. Load the Chameleon SDK on every page -->
<script src="https://sdk.lesuto.com/v2/chameleon.js"
  data-channel-token="YOUR_CHANNEL_TOKEN"></script>

<!-- 2. (Optional, for previews/demos only) Load the live editor -->
<script src="https://www.lesuto.com/chameleon-studio.js"></script>

Open the editor on this demo Back to module gallery Read the docs

Common questions

Does the editor leak to my real customers?

No. The Studio bundle is only loaded when you explicitly trigger it (bookmarklet click, extension button, or ?studio=1 on the demo). In production, the SDK never requests it.

Can I edit a site I don't own?

Yes — but only locally. The editor will let you reorder modules and re-skin the page in your own browser, and the changes survive refresh via localStorage. Saving to the live deployment config requires the extension to be signed in to a channel that owns that site.

Why does the Chrome extension also block trackers?

Because we don't want your dev / preview traffic to pollute the analytics on your real store. The shield uses Chrome's declarativeNetRequest API to drop GA, Meta Pixel, and similar outbound requests on the hosts you turn it on for. It's off by default and configurable per-host.

What happens if the same channel has multiple stores?

The extension shows a store picker once you've selected a channel. Drafts are keyed by channel + host + site, so each deployment under the channel gets its own draft slot — switching stores in the popup never overwrites the other deployment's pending changes.