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
Demo modePaste a public URL and click Open Studio demo. Studio opens on a preview of that page so you can click around and edit.
- DemoVisual editing only. No Lesuto login. No Save or Publish to Command Center. Changes stay in that browser tab.
- FullWant login, cloud save, and publish on the real site? Use the bookmarklet or Chrome Toolkit below. Those run full Studio on the live page.
Demo mode may look imperfect on some sites (proxy preview). For the real site with full Studio, use the tools below.
Full Studio on your live site
Bookmarklet and Chrome Toolkit run full Studio on the real page: sign in, save drafts, and publish to Command Center. Not demo mode.
Option 1 · Bookmarklet · Full Studio
Drag to your bookmarks bar
Full Studio on the live page (not demo mode). Drag the button below onto your bookmarks bar, then click it on any page with the Chameleon SDK. Sign in and save when you are ready.
Drag this button to your bookmarks bar
Press Ctrl+Shift+B or ⌘+Shift+B to show the bookmarks bar first.
- • Always loads the latest Studio from our CDN
- • Works in any browser, no account required
- • Some sites block bookmarklets via CSP. Use the Chrome Toolkit there instead
Missing favicon? Use the install page. If drag is blocked, right-click the button and choose Add to Bookmarks.
Option 2 · Chrome Extension · Full Studio
Lesuto Chameleon Toolkit
Full Studio on the live page (not demo mode), plus a tracking shield, clean Sponsored cards, and admin session handoff. Works on CSP-locked sites (Google, banks).
Install from the Chrome Web Store
Add to ChromeAfter install: pin the extension, then click Open Studio on any page.
- • Tracking shield (opt-in; master switch starts OFF)
- • Hide Sponsored cards on Facebook, Instagram, LinkedIn, X
- • Admin session handoff into Studio for cloud save / publish
- • Works where bookmarklets are blocked by CSP
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.
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.
Signed in + linked store
Sign in inside Studio (or inject via the Chrome Toolkit with an admin session). Link a deployment for this hostname. Save draft writes to Command Center. Publish makes it live. No extension required for cloud save.
Toolkit enhance
The Chrome Toolkit injects Studio on CSP-locked sites, hands off your admin session, and adds the tracking shield. Drafts and publish still live in Studio.
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.
<!-- 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>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 do not want your preview traffic to pollute analytics on your real store, and we want deploy screenshots without Sponsored clutter. The shield blocks GA, Meta Pixel, Lesuto telemetry, and ad networks at the network layer, hides known ad shells with CSS, and removes Sponsored feed cards on Facebook, Instagram, LinkedIn, and X. The shield starts off. Flip the master switch on when you want invisible sessions, then use per-category toggles in the popup. Flip it back off when you need real events to fire.
What happens if the same channel has multiple stores?
The extension can pass an optional store when injecting Studio. Inside Studio, pick the deployment for this hostname, then Save draft. Each linked store has its own Command Center draft. Sibling deployments do not overwrite each other.