Understanding the Editor

The Webase editor is where you build, refine, and preview your apps. It's organized into a clean three-panel layout designed to keep everything you need within reach. This guide walks you through every part of the editor so you can work confidently from day one.

Editor Layout Overview

When you open an app in Webase, you'll see the editor divided into two main areas:

• Left panel — This is your workspace. It has two tabs: Chat (the default) and Code. You'll switch between these depending on whether you want to talk to the AI or edit files directly.
• Right panel — This is the Preview, a live, interactive rendering of your app. Every change you make is reflected here automatically.

Above both panels sits the Toolbar, which gives you quick access to your app's name, usage statistics, and key actions like saving and evaluating.

The Chat Panel

The Chat panel is the default view when you open the editor. This is where you communicate with the AI to build and refine your app using plain English.

Sending Messages

Type your request into the message box at the bottom of the Chat panel and press Enter or click the send button. The AI reads your message, understands what changes you want, and updates your app's source files accordingly.

Here are some examples of messages you can send:

• "Add a dark mode toggle to the header" — The AI will add a toggle button and wire up the dark mode styling.
• "Change the primary color to blue" — The AI updates colors across all relevant components.
• "Add a search bar that filters the list of items" — The AI creates the search component and integrates it with your existing data.
• "The delete button isn't working, can you fix it?" — The AI investigates and repairs the issue.

Watching AI Updates

When the AI responds, you'll see its reply stream in real-time. The response includes an explanation of what was changed and why. As files are updated, the Preview panel on the right automatically re-bundles and refreshes, so you can see the result within seconds.

Conversation History

Your full chat history is saved and visible whenever you return to the editor. Scroll up to review past messages and see exactly how your app evolved over time. This makes it easy to understand what changes were made and why.

The Code Tab

Click the Code tab at the top of the left panel to switch from Chat to the code editor. This view gives you direct access to every file in your app.

The File Tree

On the left side of the Code tab, you'll see a File Tree listing all the files that make up your app. This typically includes:

• src/index.tsx — The entry point of your app
• src/App.tsx — The main application component
• src/components/ — Individual UI components
• src/pages/ — Page-level components (if your app has multiple pages)
• public/index.html — The HTML template with Tailwind configuration

Click any file to open it in the code editor on the right side of the Code tab.

Editing Files Directly

The code editor supports syntax highlighting for TypeScript, JSX, CSS, and HTML. You can make changes directly in any file. After editing, the Preview panel will automatically re-bundle and show your changes.

Direct editing is useful when you want to make precise, targeted changes — like tweaking a specific CSS value, fixing a typo, or adjusting a component's logic. For larger changes, the Chat panel is usually faster and easier.

The Preview Panel

The right side of the editor is dedicated to the Preview panel, which shows a fully interactive, live rendering of your app.

How the Preview Works

Every time your app's source files change — whether through a chat message or a direct code edit — the Webase bundler compiles all your files in your browser and renders the result in an iframe. This means:

• No server-side build — Compilation happens entirely in your browser using a WebAssembly-based bundler.
• Near-instant updates — Most changes appear in the preview within a few seconds.
• Fully interactive — You can click buttons, fill forms, navigate pages, and test every feature right in the preview.

The Bundling Spinner

While your app is being compiled, you'll see a brief bundling spinner overlaid on the preview. This typically lasts just a second or two. Once bundling completes, the spinner disappears and your updated app is displayed.

If bundling fails (for example, due to a syntax error in the code), the preview will display an error message indicating what went wrong. You can fix the issue via chat ("there's a syntax error, can you fix it?") or by editing the file directly in the Code tab.

The Toolbar

The toolbar runs across the top of the editor and provides quick access to important information and actions.

App Name

Your app's name is displayed on the left side of the toolbar. This is the name the AI assigned based on your description, and it's also used to generate your app's preview URL slug (for example, "My Task Manager" becomes my-task-manager).

Token & Cost Display

The toolbar shows your current token usage and estimated cost for this app. This helps you keep track of how much AI processing your app has consumed. Token counts include both input (what the AI reads) and output (what the AI generates).

Action Buttons

The toolbar includes several action buttons:

• Save — Persists your app's current compiled HTML so it's available at your public preview URL. Always save after making changes you want to share.
• Evaluate — Runs an AI quality check on your app. The evaluator reviews your app against a set of quality criteria and produces a score from 0 to 100. Apps scoring 70 or above pass. See App Evaluation for details.
• Evaluate & Improve — Combines evaluation with automatic fixing. If the evaluator finds issues, the AI attempts to fix them and re-evaluates. This process repeats up to three times until your app passes or all iterations are used. See Evaluate & Improve for details.

Keyboard Shortcuts & Workflow Tips

Here are some tips to help you work more efficiently in the editor:

• Press Enter to send — In the Chat panel, pressing Enter sends your message. Use Shift+Enter if you need to add a new line within your message.
• Switch tabs quickly — Click the Chat or Code tab labels to toggle between conversation and code views.
• Start broad, then refine — Begin with a general description to generate the first version, then use follow-up messages to adjust specific features, colors, layouts, and behavior.
• Save often — After each round of changes you're happy with, click Save so your preview URL stays up to date.
• Use evaluation as a safety net — If something feels off or you're not sure about quality, run Evaluate to get an objective review. The evaluator catches issues you might miss.
• Be specific in chat — The more precise your messages, the better the results. Instead of "make it look better," try "increase the font size of the heading and add more padding around the cards."

Next Steps

Now that you know your way around the editor, you're ready to build something real. Here's where to go next:

• Your First App — A detailed, step-by-step tutorial that walks you through building a complete task manager app from scratch.
• Chat-Based Refinement — Learn how to write effective chat messages to get the best results from the AI.
• Direct Code Editing — Tips for editing code files directly when you want precise control.