BYOBDocs

The Editor Workspace

The Editor Workspace

The Editor Workspace is where you will spend the majority of your time in BYOB. We've designed it to feel like a professional IDE (Integrated Development Environment), but supercharged with AI capabilities.

The Full Editor Workspace
The Full Editor Workspace
The three-panel layout of the BYOB Editor.

The Three-Panel Layout

The workspace is divided into three main sections to keep you productive without needing to switch tabs or windows.

1. The Left Sidebar (File Explorer & Settings)

The left panel acts as your project navigator.

  • Files: See your entire codebase exactly as it exists on the server. You can create, delete, and rename files here manually if needed.
  • Environment Variables: A secure place to add API keys (like Stripe or OpenAI keys) without committing them to your codebase.
  • Settings: Manage your project's custom domain, database connections, and collaborators.

2. The Middle Panel (Chat & Code)

The center of your screen is the brain of the operation. By default, this shows the AI Chat Interface.

  • Chat: This is where you instruct the AI. You can ask it to "Add a dark mode toggle to the navbar" or "Create a users table in the database".
  • Code Editor: If you click on any file in the Left Sidebar, the chat is replaced by a full Monaco Code Editor (the same editor that powers VS Code). You can make manual code edits here at any time.

The Chat Interface
The Chat Interface
Instructing the AI via the chat panel.

3. The Right Panel (Live Preview)

The right panel is your Live Preview. This isn't a mockup—it's a real, running instance of your application.

  • As the AI writes code, or as you type in the code editor, this preview updates automatically (Hot Module Replacement).
  • You can interact with the preview just like a real user would: clicking buttons, submitting forms, and testing layouts.
  • It includes a responsive toggle, allowing you to see how your app looks on mobile, tablet, and desktop screens.

Bottom Console

At the very bottom of the screen, you can expand the Terminal & Console. This shows you the raw output of your running application, allowing you to see server logs, build errors, or database query results in real-time.