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.
The mock above is a quick feel for the controls. The product proof is the live side panel: pick a portal element, see the selector reasoning, restyle it, merge the CSS, and hand off deployment.
The panel shows the resolved chain, stable anchors, selector options, and live match count before a rule is saved.
Existing Head Markup CSS is parsed, matching rules are updated, new rules append, and conflicts are reported before deployment.
The account workbench can turn a theme into a Salesforce CLI project with static resources, metadata, head markup, and README.
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.
What used to be a full day of view-source, blind CSS, chat snippets, deploy-to-check, and rework is now a visual loop that ends in one reviewable stylesheet.
| Problem | Manual / generic CSS workflow | OmniStyler workflow |
|---|---|---|
| Finding selectors | Inspect DOM, copy unstable classes, guess what survives the next Salesforce release. | Ranked selectors anchored on stable data attributes and Salesforce-aware structural wrappers. |
| Checking scope | Deploy or paste CSS, reload, then discover the selector touched too much or nothing at all. | Live match count and Test selector outline the exact affected elements before shipping. |
| Existing CSS | Append more rules and hope cascade order beats the old Head Markup. | Merge updates matching rules, preserves unrelated CSS, and reports specificity or important conflicts. |
| Developer handoff | Loose snippets in chat or a pastebin with missing placement context. | Head-ready CSS or a Salesforce CLI deploy kit with static resources, metadata, and README. |
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.
For partners and agencies
Agencies do not need another one-off CSS generator. They need a way to reuse base themes, separate client work, review changes without Salesforce access, and hand developers a deploy kit they can run cold.
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.
Install OmniStyler from the Chrome Web Store, open your Experience Cloud portal, and allow site access for the portal domain you are styling.
Install from Chrome Web StoreExtensions blocked by IT? The web studio covers CSS generation, merge, and the deploy kit with no install at all.
Need the packaged build for local testing? Download the zip.
Need security details? See permissions, data handling, and procurement notes.
Free to start, nothing leaves your browser, and the output is ready for Head Markup.
Install the free extension