Skip to main content
This tutorial walks you through building a todo app with Cline from scratch. Along the way, you’ll learn how to give tasks, approve changes, iterate on your work, and recover from mistakes. Time estimate: 5-10 minutes

​
Prerequisites

Before starting, make sure you have: If you haven’t done these yet, complete them first and come back here.

​
Step 1: Open a Project Folder

Cline needs a workspace, which is a folder on your computer where it can create and edit files. You’ll open an empty folder so Cline has a clean place to build your todo app.
  1. Go to File → Open Folder in the top menu bar
  2. Create a new folder on your computer (for example, name it todo-app on your Desktop)
  3. Select that folder and click Open
Your editor should now show the folder name in the top of the sidebar on the left. The file explorer (left panel) will be empty since the folder is new.
If you skip this step and don’t have a folder open, Cline won’t know where to create files. Always open a folder before starting a task.

​
Step 2: Open the Cline Panel

The Cline panel is a chat interface where you communicate with Cline. You need to open it before you can give Cline any instructions.
Look at the Activity Bar, the vertical strip of icons on the far left (or far right) of your editor. Find the Cline icon (it looks like a small robot) and click it.A panel will open showing the Cline chat interface. You’ll see:
  • A text input box at the bottom where you type messages
  • A chat area above it where Cline’s responses will appear
  • A settings gear icon in the top-right corner of the panel
Can’t find the Cline icon? Open the Command Palette with Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux), type “Cline: Open In New Tab”, and press Enter. This opens Cline in a full editor tab, which also gives it more screen space.

​
Step 3: Give Cline a Task

Now you’ll tell Cline what to build. You communicate with Cline by typing messages in the text input box, just like a chat app.
  1. Click on the text input box at the bottom of the Cline panel
  2. Paste (or type) the following prompt into the text input box:
Build a todo app in a single HTML file. Include:
- Input field to add new tasks
- List that displays all tasks
- Checkbox to mark tasks complete (with strikethrough styling)
- Button to delete individual tasks
- Clean, modern design with CSS
- All JavaScript inline in the same file
  1. Press Enter on your keyboard (or click the Send button) to send the message
Cline will now read your message and start working on a response. You’ll see text appearing in the chat area as Cline thinks through your request.

​
Step 4: Understand Plan Mode vs Act Mode

When Cline receives your task, it may start in one of two modes. Look at the bottom of the Cline panel. You’ll see a toggle button that says either “Plan” or “Act”.

​
If Cline is in Plan Mode

In Plan mode, Cline only talks. It analyzes your request and discusses the approach, but it does not create or modify any files. You’ll see Cline describe what it plans to build, but nothing will change in your project folder yet. This is useful for complex tasks where you want to discuss the approach first. You can:
  • Ask Cline questions about its plan
  • Suggest changes to the approach
  • Clarify your requirements
When you’re ready for Cline to start writing code, click the toggle button at the bottom of the panel to switch from “Plan” to “Act”. Cline will then begin proposing actual file changes.

​
If Cline is in Act Mode

In Act mode, Cline will start creating files and writing code right away (but it still asks for your approval before making any changes, see the next step).
For this tutorial, you want to be in Act mode so Cline creates the todo app. If you see “Plan” at the bottom, click it to switch to “Act”. Learn more about when to use each mode in the Plan and Act guide.

​
Step 5: Approve the Changes

Cline never modifies your files without your permission. Before creating or editing any file, Cline will show you exactly what it wants to do and wait for you to approve. Here’s what you’ll see in the chat:
  1. Cline proposes a file change. You’ll see a section in the chat showing the file path (e.g., index.html) and the code Cline wants to write. New lines of code are highlighted in green.
  2. Approve or Reject buttons appear. Directly below the proposed change, you’ll see two buttons:
    • Approve (checkmark): Click this to let Cline create or edit the file. The file will be written to your project folder.
    • Reject (X): Click this to stop Cline and provide different instructions instead.
  3. Click Approve to let Cline create the index.html file.
After you approve, Cline writes the file to your project folder. You should see index.html appear in your editor’s file explorer (the left panel).
Every file creation, file edit, and terminal command requires your explicit approval. You are always in control of what changes in your project. Once you’re comfortable with Cline, you can enable auto-approve to skip confirmations for specific actions.

​
Step 6: View Your Todo App

Cline has created the index.html file in your project folder. Now let’s open it in a web browser to see the app.
Option A: Use the terminalIf Cline ran a terminal command to open the file, it may have already opened. Otherwise, you can open a terminal in your editor (Ctrl+` or Terminal → New Terminal from the menu) and type:
open index.html
Option B: Use FinderRight-click index.html in your editor’s file explorer (left panel) and select “Reveal in Finder”. Then double-click the file in Finder to open it in your default browser.
Option C: Live Server (any OS) If you have the Live Server extension installed in VS Code, right-click index.html in the file explorer and select “Open with Live Server”. This opens the app in your browser and automatically refreshes when files change. Try out your new todo app: add a few tasks, check them off, and delete them. The app runs entirely in your browser with no server or backend needed.

​
Step 7: Iterate on Your Project

One of Cline’s most powerful features is that it remembers your entire conversation. You can ask for changes and Cline will modify the existing code rather than starting over. In the same Cline chat (don’t start a new conversation), click the text input box at the bottom and type a follow-up request. Here are some ideas to try: Add persistence: 
Add local storage so tasks persist when I refresh the page
Change the design: 
Switch to a dark theme with purple accent colors
Add a feature: 
Add a filter to show all, active, or completed tasks
When you send a follow-up message, Cline will:
  1. Read your current index.html file to understand the existing code
  2. Propose specific changes (shown as a diff with green for added lines and red for removed lines)
  3. Wait for your approval before modifying the file
Click Approve to apply the changes, then refresh your browser to see the updated app.

​
Step 8: Undo Mistakes with Checkpoints

Cline automatically saves a checkpoint after each change it makes. If something breaks or you don’t like a modification, you can go back to any previous state.

​
How to find checkpoints

Scroll through your conversation in the Cline panel. Next to each step where Cline made a change, you’ll see two small buttons:
  • Compare: Click this to see exactly what files changed at that step (a before/after diff)
  • Restore: Click this to roll back your project to how it was at that point

​
How to restore

When you click Restore, you’ll see three options:
OptionWhat it doesWhen to use it
Restore Task and WorkspaceResets both your files and conversation to that pointYou want to completely go back and start over from that step
Restore Task OnlyKeeps your current files but reverts the conversation contextRarely needed
Restore Workspace OnlyResets files to that point but keeps the full conversationYou want to try a different approach but keep the conversation history
Recommended for beginners: Use “Restore Workspace Only” when you want to undo a change but keep chatting with Cline about what to do differently.
Checkpoints are separate from Git. They won’t affect your commits, branches, or any version control you have set up.
Learn more in the Checkpoints guide.

​
What You Learned

You just completed the core Cline workflow:
  1. Opened a project folder so Cline has a workspace
  2. Opened the Cline panel and typed a task in the chat input
  3. Understood Plan vs Act mode and how to switch between them
  4. Approved file changes before Cline wrote anything to disk
  5. Iterated by sending follow-up messages in the same conversation
  6. Used checkpoints to undo mistakes and try different approaches
These same patterns work for any project, from simple scripts to full applications. The more context you give Cline about what you want, the better the results.

​
Next Steps

​
Need Help?

  • Start a fresh conversation: Type /new in the chat input to begin a new task
  • Report issues: Use /reportbug to help us improve
  • Get support: Join our Discord community