Savvy StudioHelp & How-To
Everything you need to edit your site with Savvy Studio. Built for real estate agents and teams — no code required, no tutorial needed, but here's the full walkthrough if you want it.
Contents
1. Getting started #
Go to savvy-studio.agnt.pro and sign in with the same email and password you use for cms.realsavvy.com. Same account. No separate signup.
Sign in with your existing RealSavvy CMS credentials.
After signing in you'll see your site picker — every site your account has access to. Click any card to open that site's editor.
The picker lists all sites your account can edit. Click a card to open the editor for that site.
2. The editor at a glance #
The editor has three zones: left rail with tools, center preview of your site (mobile + desktop side-by-side), top header with publish controls.
Left rail tools
- Quick Tools — Colors, Typography, Images, Pages, Forms, SEO, Settings. Click each to open its panel.
- Blocks — Page Blocks lists every block on the current page. Click a block to edit its fields.
- AEO Tools — generates AI-optimized pages (AEO Dashboard).
- AI Response / Edit History — shows your recent changes with a credit cost and the generated CSS.
Preview
The center shows both a mobile and desktop render of your site, side-by-side. You can toggle to Mobile or Desktop alone if you want a bigger view.
Top header
Shows the current site, your credit balance, an Undo and Reset button, and the big green Publish button. You can always come back before publishing — changes only go live when you click Publish.
3. Natural-language editing #
At the bottom of the editor is an input that says "Describe your edit — or click Select to pick an element first". Type what you want changed and hit Enter or click Apply Edit.
Good example prompts
Make the header background maroonChange the hero buttons to green with white textMake all the section headings bigger and serifAdd more spacing around the testimonials
Why specific is better than vague
"Make it more modern" is hard for the AI to interpret. "Use thinner fonts and more whitespace" is actionable. If you have a specific color in mind, say the hex or the exact color name — #800020 or navy blue — rather than dark.
What you'll see after applying an edit
Your preview updates immediately with the new CSS overlaid. The pending-overlay banner shows how many unpublished edits you have. The AI Response panel on the left shows the generated CSS and a confidence score.
4. Select mode #
Natural-language editing is powerful but sometimes you want to edit ONE specific thing — a button, a heading, a card — without the AI guessing what you mean. That's what Select mode is for.
- Click the Select button in the top toolbar (next to Live Edit).
- Hover over elements in the preview — they'll outline as you move.
- Click the element you want to edit.
- The bottom bar changes to show the selected element (tag, dimensions, current colors).
- Type what you want changed. The AI will target that exact element.
Editing hover, focus, and other states
When an element is selected, you can say things like "make the hover state yellow background green text" — the hover style will scope to that element, not every element of the same type on the page. Without Select mode, a:hover would affect every link on the site.
5. Page blocks — add, edit, reorder #
Your site is built out of blocks — header, hero, property grid, testimonials, contact form, footer, etc. Studio shows you the list of blocks on the current page and lets you edit each one's fields directly.
Opening the block list
- In the left rail, click Page Blocks.
- The list populates automatically with all blocks on the current page.
- Hover a block card to highlight that block in the preview.
- Click a block to open its field editor.
Editing block fields
Each block has its own set of fields — title, subtitle, background image, colors, spacing, etc. Studio opens a drawer on the right with inputs for every field on that block. Edit values, click Save to CMS, and the change flows through on your next publish.
Cloning a page
To make a new page based on an existing one, open Pages in the left rail, hover a page, and click the clone icon that appears. The new page starts as an exact copy — rename, re-slug, and edit.
6. Publishing your changes #
Changes you make in the editor are not live until you click Publish. Until then, they exist only as overlays in your Studio preview.
How to publish
- Review your changes in the preview. Both mobile and desktop.
- Click the big green Publish button in the top-right.
- Confirm the prompt showing how many edits are about to go live.
- A success toast appears. Your changes flow to your live site immediately for CMS sites, or within 1–2 minutes for Lovable-template sites (via an automatic GitHub push and redeploy).
Undoing an edit
Click Undo in the top header to roll back the last edit. You can undo multiple steps.
Starting fresh
Click Reset to clear all pending overlays and start from the last-published state. This is permanent — Reset is a hard clear, not undo.
7. The pending-overlay banner #
When you have unpublished edits, a yellow banner appears at the top of the editor: "N unpublished overlays on live preview". It means your preview currently reflects edits that are NOT yet on your live site.
The banner has two buttons:
- Clear — discards all pending overlays, preview matches your live CMS state. Use this if you made experimental edits you don't want to keep.
- Publish — commits the overlays to your live site.
8. Keyboard shortcuts #
9. Troubleshooting #
My edit didn't show up in the preview
First, make sure Live Edit is enabled (toggle at the top of the preview pane). Live Edit injects CSS into the iframe immediately — without it, changes only appear after publish.
If Live Edit is on and you still don't see the change, check the AI Response panel on the left. It shows the generated CSS. If you see "Reduced precision — N class names not in DOM", the AI targeted a selector that doesn't exist on this specific template. Click Use Select in the toast to switch to Select mode and click the exact element you meant.
The buttons or hover states changed on elements I didn't want to edit
You probably didn't have Select mode enabled, so the AI scoped the change broadly. For scoped edits — especially hover states — always click an element with Select mode first, then describe the change. See Select mode.
To fix: click Undo, enable Select mode, click the specific element, and retry the edit.
Preview shows stale styles that aren't on my live site
Look for the yellow banner at the top: "N unpublished overlays on live preview" or "Stale visual overlay detected." Click Clear to wipe the overlay and sync with your live CMS state.
Studio tracks overlays per-site and per-session. If you edited yesterday and didn't publish, those overlays persist in your browser today until you Publish or Clear.
I can't see sites my account used to have access to
Sign out and sign back in — the site list is cached in your session. Permission changes don't propagate until the next login.
If the site is still missing after re-login, check with support. Manager and developer roles see all partner sites; editor roles only see sites they're explicitly assigned to.
"Could not load preview" error in the iframe
This usually means your site's preview URL isn't reachable. For CMS sites, Studio's preview loads from /render/<handle> (same origin); for Lovable-template sites, from the customer's domain or Render deploy.
Try the Retry button inside the iframe first. If that fails, check the site's preview URL in the tenant configuration. For CMS sites this is very rare — if it persists, contact support.
I published but my live site still looks the same
For CMS sites, changes are live within seconds — refresh your browser (hard refresh: Cmd+Shift+R). Your browser may be serving a cached copy.
For Lovable-template sites, publishing commits to your GitHub repo and triggers a Render redeploy. Give it 1–2 minutes for the build to complete. You can watch the deploy progress in Render's dashboard.
I want to roll back a published change
CMS sites retain a customCss history. Go to cms.realsavvy.com, find your site, and open the style history to revert. Studio doesn't currently expose this in-editor — on the roadmap.
For Lovable-template sites, your GitHub repo has the full commit history — revert the commit in GitHub and Render will auto-redeploy.
Modernize flow — how do I opt in?
Modernize (the opt-in AI-driven migration from your legacy theme to the new Savvy Studio theme) is launching soon. Pricing: $99 one-time up to 50 pages, $5 per additional page. Customer self-serve from the editor. Watch for the "Modernize to Savvy Studio" button in your editor once it's live.