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.