Ctrl+K - Inline Editing with AI ✨
Welcome back, @name! Now I'll show you the most important shortcut in Cursor: Ctrl+K (or Cmd+K on Mac).
What is Ctrl+K? 🎯
Ctrl+K is inline editing - editing code directly in place using AI. Instead of writing code by hand, you describe what you want to change, and AI does it for you.
How to Use Ctrl+K - Step by Step 📝
Method 1: Editing selected code
- Select the code you want to change
- Press Ctrl+K (or Cmd+K on Mac)
- Describe what you want to change in the popup
- AI will suggest changes
- Accept or Reject
Method 2: Adding new code
- Place your cursor where you want to add code
- Press Ctrl+K
- Describe what you want to add
- AI will generate code
- Accept or Reject
Practical Examples 🏴☠️
Example 1: Changing color
You have:
1<h1>Ahoy Pirates!</h1>You want: Red text color
What you do:
- Select
<h1>Ahoy Pirates!</h1> - Ctrl+K
- Type: "add red text color"
- AI will suggest:
1<h1 style="color: red;">Ahoy Pirates!</h1>- Accept!
Example 2: Adding an image
You have:
1<h1>Welcome aboard!</h1>You want: Add a pirate image below the heading
What you do:
- Place your cursor at the end of the h1 line
- Ctrl+K
- Type: "add a pirate image from unsplash URL"
- AI will add:
1<h1>Welcome aboard!</h1>
2<img src="https://images.unsplash.com/photo-pirate" alt="Pirate">- Accept!
Example 3: Refactoring
You have:
1<p>Ship</p>
2<p>Anchor</p>
3<p>Map</p>You want: Change to a list
What you do:
- Select all 3 paragraphs
- Ctrl+K
- Type: "change to ul with li elements"
- AI will suggest:
1<ul>
2 <li>Ship</li>
3 <li>Anchor</li>
4 <li>Map</li>
5</ul>- Accept!
Ctrl+K vs AI Chat - When to Use Which? 🤔
| Situation | Tool | Why | |-----------|------|-----| | Quick change in existing code | Ctrl+K | Instant, in place | | Question about a concept | AI Chat | Longer conversation | | Generating large new code | AI Chat | More space | | Editing a specific fragment | Ctrl+K | Precise, fast | | Learning how something works | AI Chat | Explanations | | Adding a small feature | Ctrl+K | Quick |
Rule: If you know WHERE in the code you want a change → use Ctrl+K. If you don't know where to start → use AI Chat.
Pro Tips ⚔️
1. Be specific
❌ "change this" ✅ "change background color to black and text to gold"
2. Use technical language (when you know it)
❌ "make a nice button" ✅ "add a button with padding 10px and border-radius 5px"
3. Iterate
First Accept → See the result → Ctrl+K again → Refine
4. Experiment
Don't be afraid! You can always:
- Reject - discard the changes
- Ctrl+Z - undo
- Ctrl+K again - improve
Hands-on Exercise 🎯
Time for your own experiments! Open Cursor and:
- Create a new file
pirate.html - Type:
<h1>My Ship</h1> - Select that line
- Ctrl+K → "add black background and white text"
- Accept
- Ctrl+K again → "add a 2px red border"
- Accept
Congratulations! You just used Ctrl+K twice in a row! 🎉
FAQ 🤔
Q: What if AI doesn't understand my instruction? A: Reject and try describing it more specifically. For example, instead of "make it prettier" write "bigger font and centered".
Q: Can I use Ctrl+K on multiple lines? A: Yes! Select as many lines of code as you want.
Q: What if I want to add something at the beginning of the file? A: Place your cursor at the beginning and Ctrl+K.
Q: Does Ctrl+K only work with HTML? A: No! It works with any language: JavaScript, Python, CSS, everything!
Summary 🎓
✅ Ctrl+K is inline editing with AI ✅ Use it for quick changes in code ✅ You can edit selected code or add new code ✅ You can always Reject and try again ✅ The more specific you are, the better the result
This is YOUR MAGIC WAND, pirate! 🪄
In the next module we'll start building real ships (applications) with Next.js!
But first you need to complete a few exercises to solidify your skills.
See you on the seas of code! 🏴☠️⚓
Captain Redbeard out.