WYSIWYG for Experience Cloud
OmniStyler is a Chrome side panel for Experience Cloud. Click any element on your live portal, change it visually, and collect every edit into one clean stylesheet for Head Markup. No view-source, no guessing at selectors, no day-long CSS loop.
Free, no account. Edits stay in your browser until you choose to sync. Works on Aura and LWR portals, OmniScripts, and FlexCards.
Your team has 12 cases awaiting review this week.
This is the loop. In the real extension you pick any element on your live, authenticated portal and the stylesheet builds itself.
Four stages, one tool. The free editor handles the loop on the left; your OmniStyler account carries the theme through review, merge, and deployment.
Click any element, even inside shadow DOM. OmniStyler ranks stable selectors anchored on data-test-id and ignores the class names Salesforce churns every release.
Grouped visual controls for color, spacing, type, borders, and effects. Every change applies to the live page instantly, with 50 steps of undo.
Paste the portal's existing Head Markup CSS and OmniStyler merges your edits into it, preserving unrelated rules and flagging conflicts before they bite.
Copy one head-ready stylesheet, or generate a Salesforce CLI deploy kit with static resources, metadata, and instructions. Test in sandbox, then go live.
Experience Cloud styling breaks on selector churn, hidden CSS conflicts, and vague handoffs. Every feature here exists because one of those burned a real project.
Anchored on data-test-id, scoped to stable wrappers like .siteforceContentArea, with !important added only when the runtime forces inline styles. Your theme outlives the next Salesforce release.
Real CSS parsing, not string matching. Your edits update matching rules, new ones append cleanly, and a conflict report shows where existing higher-specificity rules would still win.
Save holiday, campaign, and rebrand variants per portal. Move them through draft, review, approved, and archived. Every sync keeps a version you can diff and restore.
Share portals with admins, designers, and developers. Roles control who edits, the active theme loads automatically for everyone, and review notes travel with the work.
One click turns a theme into a Salesforce CLI project: static resource, metadata, head markup, and a README your developer can run without asking questions.
Company blocks browser extensions? The browser-based studio generates scoped portal CSS, OmniScript styling, design tokens, and the same deploy kit, no install required.
Salesforce gives you three places to put styling, and they do different jobs. OmniStyler generates a matching output for each one.
Lives in the site itself: the Theme CSS editor, Head Markup, or a linked static resource. It styles the portal shell (header, navigation, page layout) and affects only that one site.
A plain CSS file uploaded as a static resource and referenced in OmniScript Setup under Custom Lightning Stylesheet File Name. It travels with the script everywhere it renders, including the Builder preview.
Variable lines pasted into Lightning Design System Design Tokens in OmniScript Setup, such as --lwc-colorBrand: #0176d3;. Aura reads --lwc-, LWR reads --dxp-g-, and SLDS 2 themes read --slds-g- hooks.
The full write-up, including internals, techniques, and do's and don'ts, lives in the styling guide.
Some teams have one portal. Others run seasonal campaigns on it, or carry an agency book of client portals. The live editing stays simple; organization, review, history, and deployment live in the account.
Restyle the live portal yourself instead of logging a ticket. Copy head-ready CSS and test it in a sandbox the same afternoon.
Holiday, campaign, dark-mode, and rebrand variants under one portal. Approve one, archive the rest, keep every version.
Admins, designers, and developers share themes with roles, active-theme auto-load, version history, and clean deployment handoff.
Keep each client portal separated, duplicate concepts, export review previews, and hand off clean CSS without sharing your account.
One account, many client portals. Reusable base themes, client approval notes, team roles, and deploy kits your delivery team can run.
Stable selectors, merge conflict reports, head-ready CSS, and a Salesforce CLI project instead of loose snippets pasted into chat.
The editor is free, full stop. Paid plans cover the account layer: cloud sync, theme libraries, review workflow, version history, team access, and deployment.
The full editing loop, on your machine.
$0
For one admin, designer, or consultant.
$39 / user / month
For a company managing portals together.
$99 / month
For partners managing many client portals.
$199 / month
Launch offer: every paid feature is free for signed-in users until July 31, 2026. These are launch prices. Enterprise plans for procurement, security review, SSO, and high portal counts are available on request. See full pricing and FAQ.
The one-click install link will land here the moment Google approves the listing. Until then, the extension installs manually in about a minute, same code, same features.
Download for ChromeExtensions blocked by IT? The web studio covers CSS generation, merge, and the deploy kit with no install at all.
chrome://extensions and switch on Developer mode.Free to start, nothing leaves your browser, and the output is ready for Head Markup.
Install the free extension