You've created your first project. Now comes the powerful part — editing it through conversation.
Lovable's chat-based editing is what sets it apart. Instead of clicking through menus or dragging elements around, you simply describe what you want to change. Today you'll learn how to make precise, effective edits.
How chat editing works
Every message you send in the chat panel is an instruction to Lovable. It reads your request, figures out which files and components to modify, and updates your site in real time.
The preview refreshes automatically so you can see changes as they happen.
Here's the key insight: you don't need to know where things are in the code. Just describe what you see and what you want different. Lovable figures out the rest.
💜
Lovable
online
Make the hero section taller and change the background to a gradient from dark blue to black.
Done! I've updated the hero section:
- Height increased from 80vh to 100vh (full viewport)
- Background is now a gradient from #1a237e (dark blue) to #000000 (black)
- Text contrast adjusted for readability
How does that look?
Perfect. Now make the headline text larger and add a subtle fade-in animation.
Updated:
- Headline font size bumped to 4.5rem (72px) on desktop
- Added a smooth fade-in + slide-up animation on page load
- Animation duration: 0.8s with ease-out timing
Anything else you'd like to adjust?
↻ Replay conversation
Knowledge Check
How do you edit a specific section of your site in Lovable?
A
Describe the change you want in the chat panel and let Lovable update the code for you
B
Open the component in the code view and update the relevant CSS class names
C
Select the element in the preview, then adjust its properties in a styling panel on the right
D
Use the file tree to locate the section's file, then edit the configuration values
Lovable's editing is entirely conversation-based. Describe what you want to change in plain language, and Lovable modifies the code for you. No manual code editing or drag-and-drop needed.
Types of edits you can make
Here's what you can change through chat — essentially everything:
Layout changes — Move sections around, add new ones, remove ones you don't need. Change grid layouts, spacing, alignment.
Responsive adjustments — Ask Lovable to make something look better on mobile, adjust breakpoints, or stack elements differently on small screens.
Functionality additions — Add navigation menus, scroll-to-section links, form validation, modals, dropdowns, and more.
Component additions — Need a testimonials carousel? A pricing table? An FAQ accordion? Just ask.
💜
Lovable
online
Add a FAQ section below the pricing. Include 5 questions about freelance photography services. Make it an accordion that expands when clicked.
Added! Here's what I created:
❓ **FAQ Section** with 5 expandable questions:
1. How far in advance should I book?
2. What's included in each package?
3. Do you travel for destination shoots?
4. How long until I receive my photos?
5. Can I request specific editing styles?
Each question expands with a smooth animation when clicked. Only one answer is open at a time.
Want to customize any of the questions or answers?
↻ Replay conversation
Knowledge Check
Which of the following can you NOT change through Lovable's chat?
A
The color scheme of the entire website
B
Adding a new section with interactive accordion components
C
All of the above can be changed through chat
D
Adjusting the layout so it looks better on mobile devices
Lovable's chat can handle virtually any change — from colors and layout to adding interactive components and improving mobile responsiveness. If you can describe it, Lovable can build it.
Tips for effective editing
Getting exactly what you want takes practice. Here are proven strategies:
Be specific about location. Instead of "change the color," say "change the heading color in the hero section to white." Tell Lovable where and what.
Reference what you see. "The third card in the services section" or "the button at the bottom of the page" — describe elements as you see them.
One change at a time for precision. If you need several changes, you can batch them. But for critical tweaks, one request per message gives Lovable less room to misinterpret.
Use "undo" language. If something goes wrong, say "Undo the last change" or "Revert the hero section to how it was before." Lovable tracks its changes.
Provide examples. "Make the cards look like Apple's product page" or "Use a style similar to Stripe's landing page" — references help Lovable understand your taste.
💜
Lovable
online
The spacing between sections feels too tight. Can you add more breathing room?
I've increased the vertical padding between all sections:
- Section padding: 4rem → 6rem (top and bottom)
- Hero bottom margin: added 2rem extra
- Footer top margin: increased to 4rem
The page should feel much more spacious now. Want me to adjust any specific section differently?
That's better. But the pricing section needs even more space above it — I want it to feel like a separate area.
Done! The pricing section now has:
- 8rem top padding (double the other sections)
- A subtle top border with 50% opacity
- Creates a clear visual separation
Looks like its own distinct zone now.
↻ Replay conversation
Knowledge Check
What's the best way to ask Lovable to change a specific element?
A
"The hero section needs improvement — make it more visually appealing and professional"
B
"Change the heading color in the hero section to white and increase the font size to 48px"
C
"Update the styling on the main heading so it stands out more against the background"
D
"Can you redesign the top part of the page? It doesn't feel right yet"
Specific prompts get specific results. Mention the element (heading), the location (hero section), and the exact change (white color, 48px size). The more precise you are, the fewer rounds of edits you'll need.
Using the select feature
Lovable also lets you click on elements in the preview to select them. When you select an element, Lovable knows exactly which component you're referring to — making your next chat message even more precise.
This is especially useful when you're not sure how to describe a particular element. Click it, then type your change.
Combine clicking with chat for the fastest editing workflow:
1. Click the element you want to change
2. Type what you want different
3. See the update instantly
Final Check
What's the most effective workflow for editing in Lovable?
A
Make changes in the code view first, then use chat to verify they look correct in the preview
B
Batch all desired changes into a single detailed message so Lovable can apply them at once
C
Type a detailed description of the element's location in the page before stating each change
D
Click on elements to select them, then describe changes in chat for precise, fast edits
The select-and-chat workflow is the most efficient way to edit. Clicking an element tells Lovable exactly what you're referring to, and your chat message describes the change. This combination is fast and precise.
★
Your opinion matters!
How would you rate this lesson?
Not my thingLoved it!
What could be better?
✨
Thanks for your feedback!
It helps us make better lessons.
💬
Day 3 Complete
"Chat is your design tool. Be specific, reference what you see, and iterate one change at a time for the best results."
Tomorrow — Day 4
Working with Design Imports
Learn how to import designs from Figma and images directly into Lovable to jumpstart your project.