Editing and Previewing

See your application live as it builds — and iterate with natural language

Live Preview

Opulent's Browser panel shows a live, interactive preview of your application from the moment the first code is written. There is no build step to wait for, no export to run. The preview updates in real time as the agent makes changes.

You interact with the preview exactly as a user would — click buttons, fill forms, navigate between pages.

Making Changes

Natural Language Edits

Describe what you want changed. The agent understands context from the full conversation history.

"Make the sidebar collapsible"
"The font on the hero headline is too small — make it larger"
"Add a loading spinner to the submit button"
"Change the primary color from blue to our brand purple (#6B21A8)"
"The pricing table looks better with a highlighted 'Pro' tier"

Structural Changes

"Move the pricing section before the testimonials"
"Add a new 'Integrations' section after the features grid"
"Remove the newsletter signup section — we don't need it"
"Add a sticky header that appears when you scroll down"

Data and Content

"Replace the placeholder testimonials with these three real ones: [paste]"
"Update the pricing: Starter $29/mo, Growth $79/mo, Enterprise custom"
"Change the feature descriptions to match our new positioning: [paste]"

Preview Modes

Switch between modes to check responsive behavior. If something looks wrong on mobile:

"The navigation menu doesn't work on mobile — fix the hamburger menu"
"The pricing table is overflowing on mobile — make it stack vertically"

Code Panel

While the Browser panel shows the rendered result, the Code panel shows the source files. Use it to:

• Review what was generated
• Understand the component structure
• Copy specific functions or components
• Verify logic before deploying

For developers: all changes made by the agent are committed to GitHub. You can clone the repo, edit locally, and push back — Opulent will pull your changes automatically before the next edit.

Iterating Effectively

Be specific about what you see:

• ✅ "The button in the hero section is too close to the headline — add more spacing"
• ❌ "Fix the layout"

Reference the preview:

• ✅ "The card on the left in the features section has a broken icon"
• ✅ "The form on mobile overlaps the footer"

Iterate in small steps for visual design:

• Make one change, review, then continue
• Larger structural changes can be done in one instruction

Use screenshots for complex issues:

• Upload a screenshot of what you see and describe what should change
• Opulent's image understanding reads the screenshot and makes targeted fixes