Code Editor
Switch to Code view using the
icon in the main menu.
In addition to Draftbit’s no-code and AI-powered development features, a full in-browser code editor is available for people with more technical experience. Depending on your plan, you can access your app’s codebase, add or edit files, and open the sandbox in a local editor.
| # | Name | Description |
|---|---|---|
| 1 | File Tree | A list of all the files and folders in your app’s codebase |
| 2 | Editor | A full in-browser code editor to edit your app files |
You can browse the files and folders in your app project’s codebase from the File Tree. This includes advanced project files such as hidden folders when they are available in your app. From the File Tree you can explore files, add new files, update or delete existing files, and add files to AI Chat context so the agent can help with a specific file.
| Icon | Action | Description |
|---|---|---|
 | Add File | Adds a new file to the codebase |
 | Add Folder | Adds a new folder to the codebase |
Editor
Section titled “Editor”You can open any of your project’s files in the provided code editor to make manual changes to the codebase yourself. The editor features TypeScript-aware autocomplete and hover info, ESLint-backed inline diagnostics, formatting, and search. This is very handy for more technical users who have experience with JavaScript and React Native, allowing you to make changes directly to the code when needed.
Syntax validation on save
Section titled “Syntax validation on save”The editor checks each file for syntax errors before saving. If a file contains a syntax error, the save is blocked and the editor highlights the offending location. Fix the error and try saving again. The agent and preview won’t see partially broken code.
Saving Changes
Section titled “Saving Changes”Changes to files (and folders) that you make yourself are treated the same as when the AI Agent makes changes. You can discard or commit your changes in the Save menu by clicking on the 
icon in the top bar of the Builder.
You can also discard any changes the specific file using the 
button at the top of the code editor.