Editing with Claude Code

Here's where Claude Code really shines. Instead of writing code yourself and hoping it works, you describe what you want and Claude Code writes it for you -- in the right files, with the right syntax.

Your first edit

Let's modify the default home page. Tell Claude Code:

"Update the home page at src/app/page.tsx to show a heading that says 'My Todo App' and a paragraph that says 'Built with Claude Code'. Remove all the default Next.js boilerplate."

💡Info

Claude Code will show you a diff view before making the change. You'll see exactly what lines are being added, removed, and modified -- just like a Git diff.

The diff view

When Claude Code proposes an edit, you'll see something like this:

Terminal

$Claude wants to edit src/app/page.tsx

Lines starting with - are removed. Lines starting with + are added. Review the diff, then approve it.

Approving and rejecting changes

When Claude Code shows you a diff, you have options:

Press Enter or y -- accept the change. Claude Code writes the file.
Press n -- reject the change. The file stays untouched.
Give feedback -- type a response like "Almost, but use a blue heading instead" and Claude Code will revise.

✅Tip

Don't be afraid to reject changes. Saying "no" and asking for something different is a normal part of the workflow. Claude Code doesn't get offended.

Creating new files

Claude Code can create files from scratch too:

"Create a new component at src/components/Header.tsx with a navigation bar that shows the app name on the left."

Claude Code will create the directory if it doesn't exist, write the file, and show you the result.

Deleting files and code

Need to remove something? Just say so:

"Remove the favicon.ico references from the layout file"

"Delete the unused styles in globals.css -- keep only the Tailwind directives"

Multiple edits in one go

You can ask for several changes at once:

"Update the home page to import and use the Header component, and add a footer that shows the current year."

Claude Code will plan the edits, show you each diff, and apply them in order.

⚠️Warning

Always review the diffs before approving. Claude Code is very good, but catching issues early is easier than debugging later. Trust, but verify.

Your todo app now has a custom home page. Next, let's see how Claude Code runs commands on your behalf.