> ## Documentation Index > Fetch the complete documentation index at: https://docs.vybe.build/llms.txt > Use this file to discover all available pages before exploring further. # Working with code > Read and edit your app's code in the Code tab, see which files are locked, and download or clone the code Every Vybe app is a Next.js project. The AI writes the code, but it's yours to read and change. Use the **Code** tab in the app editor to review what the AI built, make a quick fix yourself, or take a copy of the code. ## The Code tab The **Code** tab shows the app's files in a tree on the left and an editor on the right. It opens on `src/app/page.tsx`, the app's home page. The editor understands TypeScript: it highlights code, and you can jump from a name to where it's defined in another file. You can edit any file that isn't locked. You can't create, rename or delete files in the **Code** tab. Ask the AI to do that. ### Save or discard your edits When you have unsaved edits, a dot appears on the **Code** tab (tooltip "Unsaved changes"). At the bottom of the editor: * **Save changes** saves your edits. You see "Code saved", and the preview updates. Vybe merges your edits with any changes the AI made since you opened the file. * **Cancel** discards all your unsaved edits. A save counts as an unpublished change, like any AI change. Publish the app to put it live. See [Publishing](https://docs.vybe.build/apps/publishing.md). > [!NOTE] > > Saving in the **Code** tab doesn't create a checkpoint. If you later restore an earlier checkpoint, your saves made after that checkpoint are undone too. See [Version history](https://docs.vybe.build/apps/version-history.md). ### Link to a file and line To send someone straight to a line of code, add `?tab=code&path=:` to the editor URL. For example: ``` ?tab=code&path=src/app/page.tsx:42 ``` ## Locked files Some files hold configuration that Vybe manages. They're marked with a gear icon in the file tree and are read-only, for you and for the AI: | Kind | Files | | - | - | | Project and package setup | `package.json`, `package-lock.json`, `tsconfig.json`, `next.config.js`, `next-env.d.ts`, `postcss.config.js`, `prettier.config.js`, `.eslintrc.cjs`, `components.json`, `.gitignore` | | Environment | `.env`, `.env.example`, `src/env.js` | | Database schema placeholder | `prisma/schema.prisma` | | Vybe connection helpers | Specific files in `src/client-lib/` and `src/server-lib/`, such as the helpers for sign-in, the database, integrations, custom APIs, data queries, external databases and the built-in integrations | Only those specific helper files are locked. The rest of `src/client-lib/` and `src/server-lib/` can be edited. You don't need to edit locked files to get things done: * **To add a package**, ask the AI. It installs it from Vybe's approved list. See [Tech stack](https://docs.vybe.build/apps/tech-stack.md). * **To change the database**, ask the AI. It changes tables with SQL. See [App data](https://docs.vybe.build/apps/data.md). ## Project structure New apps start with this layout: ``` src/ app/ Pages (page.tsx) and API routes (api/**/route.ts) layout.tsx Root layout shared by every page page.tsx Home page components/ Shared React components ui/ shadcn/ui components config/ nav-links.ts Links shown in the app's sidebar client-lib/ Browser-side helpers: data fetching, sign-in, integrations, custom APIs, data queries server-lib/ Server-side helpers: the database, integrations, custom APIs, external databases, coworkers inngest/ Background jobs shared/models/ Data types, including for the built-in integrations public/ Static files, including your brand logos README.md The AI's notes about the app ``` A few conventions help when you read the code: * Each folder under `src/app` is a URL path. `src/app/orders/page.tsx` is the `/orders` page, and `src/app/api/orders/route.ts` is the `/api/orders` endpoint. * Files that run in the browser start with `"use client"`. * Pages and components read data through SWR hooks defined in `src/client-lib/api-client.ts`, which call the app's own API routes. * API routes read and write the database with SQL. For the full list of frameworks and libraries, see [Tech stack](https://docs.vybe.build/apps/tech-stack.md). ## The README The AI keeps a `README.md` at the root of the app with three sections: 1. The app's high-level strategy and goal. 2. The changes made so far. 3. Architecture and technical decisions, with the reasons behind them. The AI reads the README before it starts new work. It's also the quickest way for you to catch up on an app someone else built. ## Tests and type checks As it builds features, the AI writes Jest unit tests in `.test.ts` files next to the code, and runs a type check after making changes. When **Auto Build** is on, every change is also built and tested, and failures go back to the AI to fix. See [The app editor](https://docs.vybe.build/apps/editor.md#builds-and-auto-build). You can ask for more coverage at any time: > Add unit tests for the discount calculation, including the edge cases for zero and negative amounts. ## Download the code Click **Download All Files** under the file tree to download the app's code as a ZIP file named after the app. ## Clone the code with git Each app's code lives in a git repository. To clone it, click the git branch icon (tooltip "Clone code") next to **Download All Files**. The **Clone repository** popover gives you: * An HTTPS URL, with how long it stays valid ("URL expires in 30 days"). * The command to run: `git clone `. Click the copy button to copy the URL ("Clone URL copied to clipboard!"). > [!WARNING] > > The clone URL contains a temporary token with read and write access to your app's code. Anyone who has it can change the app's code until it expires. Keep it private, and don't paste it into tickets, chats or shared documents. Vybe has no GitHub integration or sync. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.