Code Editors vs. Browser-Based Generation

In our last lesson, we surveyed the three main arenas where you can "vibe code": in the browser, in a local code editor, and using a command-line tool. We established a mental model where browser tools are for quick sketches, and local editors are your professional workshop for detailed, controlled creation.

Today, we're going to open the doors to that workshop. The goal of this lesson is to demystify exactly what a code editor like VS Code or Cursor is and what it does. We'll explore why having your code files on your own computer—a "local" setup—is fundamentally different from generating an app in a browser tab. Understanding this distinction is crucial, as it explains why an AI will often guide you away from a simple web interface and toward installing software on your machine.

What is a Code Editor? Your Digital Workshop

At its heart, a code editor is a text editor, but one that's been supercharged for writing code. Think of it this way: if you were writing an essay, you'd use Google Docs or Microsoft Word. If you're building an application, you use a code editor. It's the right tool for the job.

As a designer, you can think of a code editor as your equivalent to Figma, Sketch, or a CAD program. It's not just a blank canvas; it's an entire integrated environment designed to make the process of creating, navigating, and managing a complex project as smooth as possible.

These editors come packed with specialized features:

• File and Folder Management: A project isn't a single file; it's a collection of folders and files that work together. The editor provides a built-in file explorer to navigate this structure, much like the layers or assets panel in a design tool.
• Syntax Highlighting: The editor reads your code and applies colors to different elements—variables, functions, text—making the code's structure much easier to see and understand at a glance.
• Search and Navigation: You can instantly search for a specific piece of text across every single file in your project. This is invaluable when you need to find where a particular button's text is defined or how a color is being used.
• Extensions and Plugins: Just like Figma plugins, extensions add new powers to your editor. You can add anything from a spell-checker to tools that automatically format your code to keep it tidy.
• An Integrated Terminal: This is a key feature we'll explore in-depth later. It's a command-line interface built directly into the editor, and it's where you'll often be instructed to run commands like npm install.

The following video provides a great hands-on tour of a modern code editor, Cursor, which is built on top of the very popular Visual Studio Code (VS Code).

Browser Generation vs. Local Editing

You've seen how AI can generate a working web app inside a browser window (like with Claude's Artifacts or tools like Replit). This is incredibly fast and convenient. So why would you ever need to install a separate program like Cursor or VS Code?

The answer lies in where the code lives and who is in control of the environment that runs it.

1. Browser-Based Generation (e.g., Replit, Claude Artifacts)

• How it works: You type a prompt, and an AI generates the code and runs it on a remote server owned by the service provider. You see the final result in your browser, but the actual files and the machinery making it work are somewhere else.
• Analogy: This is like ordering a pre-assembled piece of furniture. It arrives ready to use, which is great for speed. But if you want to change its height, repaint it a custom color, or add new drawers, you're limited by the original design.
• Best for: Quick prototypes, validating an idea, or creating simple, self-contained apps.

2. Local Code Editor (e.g., Cursor, VS Code)

• How it works: You install the editor on your Mac or PC. The project files—all the .html, .css, and .js files—are stored in a folder on your own hard drive. You have complete control and complete responsibility.
• Analogy: This is like having a full workshop in your garage. You have the raw wood, saws, drills, and paint. You can build anything you can imagine, exactly to your specifications. But you're also responsible for setting up the tools and learning how to use them.
• Best for: Building real, production-ready applications, complex projects, or when you need fine-grained control over every aspect of the design and functionality.

This distinction is neatly captured in the following reading, which separates AI coding tools into those for developers (local editors) and those for non-developers (browser-based tools).

The Key Difference: The Power to Run Code

The most crucial difference between a browser-based tool and a local editor is the ability to fully run, build, and debug code.

A web browser is a "sandbox"—a restricted environment. For security reasons, a website can't just access your computer's file system or run arbitrary programs. This is why a tool like VS Code for the Web has limitations. It looks and feels like the real thing, but it can't perform tasks that require deeper access to your computer.

The desktop version, which you install, has no such restrictions. It can use your computer's full power. This is why AI tools often tell you to install things or run commands—these actions can only happen in a full-fledged local environment.

The official documentation for VS Code explains this perfectly.

When you have a project locally, "running" it can be as simple as finding the index.html file in your project folder and double-clicking it to open it in Chrome or Safari. For more complex projects, it involves running a command in the editor's terminal that starts up a local "development server," which is what the Vite + React image above depicts.

AI in the Editor: Your Smart Assistant in the Workshop

This is where it all comes together. An AI-native editor like Cursor brings the language model directly into your local workshop.

Unlike using ChatGPT in a browser tab, where you have to copy and paste code back and forth, the AI in Cursor can:

• See your entire project: It can read all your files to understand context.
• Directly edit files: It can make changes across multiple files to implement a new feature.
• Help you debug: When something breaks, you can show the AI the error message, and it can analyze the code to find a fix.

This tight feedback loop—where you prompt, the AI codes, you test, you find an error, and you feed the error back to the AI, all within one application—is the essence of modern local development.

Key Takeaways

• A code editor (like VS Code or Cursor) is a powerful "workshop" you install on your computer to build applications. It provides tools for managing files, reading code, and adding functionality through extensions.
• Browser-based generators are convenient for quick prototypes but are limited because the code runs on a remote server, giving you less control.
• The fundamental difference is that a local editor can use your computer's full power to run, build, and debug code, which is impossible in a browser's restricted "sandbox."
• AI-native editors like Cursor integrate the AI directly into this local workshop, creating a powerful, interactive workflow for building and debugging.

Now that you understand what a local editor is and why it's different, our next lesson will focus on when to use it. We'll explore practical scenarios to help you decide when a quick browser-based generation is sufficient and when it's time to move your project to a local development setup for more power and control.