Chameleon Studio

No-code editing for your live storefront.

Chameleon Studio is a visual editor that runs directly on any page with the Chameleon SDK. Edit copy, swap images, adjust themes, reorder modules, and tune SEO — all without touching code or redeploying.

Try it on your site Get the bookmarklet Chrome extension

Try it on your site

Enter any website URL running the Chameleon SDK. The Studio editor will open in a new tab so you can edit the live page.

The site must have the Chameleon SDK script tag installed. Don't have it? Try the demo gallery instead.

Or explore the live module gallery with Studio already active

Everything you can edit — no code required

Five tabs in one floating panel. Every change is reflected on the page in real time. Save to push changes to your deployment config — no rebuild, no deploy, no developer needed.

Inline Editing

✓Click any text, heading, or button to edit directly on the page
✓Swap images by clicking and uploading or pasting a URL
✓Edit links, alt text, and aria labels inline
✓Changes preview instantly — what you see is what your customers see

Module Management

✓Add, remove, and reorder every SDK module
✓Switch variants (e.g. product-grid Standard vs Editorial)
✓Toggle module visibility per page or site-wide
✓Configure data attributes without writing HTML

Theme Controls

✓Brand color, accent color, and background with live preview
✓Font family selection from system and web fonts
✓Border radius and density (compact, comfortable, spacious)
✓Dark mode toggle — applied site-wide via CSS variables

Per-Module Styles

✓Override spacing, colors, and typography per module
✓Scoped changes that don't affect the rest of the page
✓Custom CSS class injection for advanced users
✓Reset any module to its default theme with one click

Layout Builder

✓Choose page templates (sidebar, full-bleed, classic, sticky)
✓Drag modules into position on the page grid
✓Responsive preview — see how the layout adapts to mobile
✓Per-route configuration so each page can have its own layout

SEO & Meta

✓Edit page title, meta description, and keywords
✓Set Open Graph image and social preview card
✓Configure structured data (JSON-LD) per page
✓Saved per-route — no rebuild required

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.

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.

• 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.
•Companion sign-in. One click signs the editor in to your channel and store.
•Preview tokens. Short-lived tokens to share unsaved drafts without exposing admin credentials.
•Per-store drafts. Keyed by channel + host + site, so multiple deployments never overwrite each other.

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

Two script tags. That's the whole integration.

The first tag is the SDK — add it once globally in your header or footer. The second tag is the editor — only load it on demo / staging / preview hosts, never for your real shoppers.

embed.html

<!-- 1. Load the Chameleon SDK on every 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. (Optional, for previews/demos only) Load the live editor -->
<script src="https://www.lesuto.com/chameleon-studio.js"></script>

Explore the 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.