Build your app
The project workspace
A tour of the screen you build in, with the chat on the left and your app's preview, code and backend on the right.
Every project opens in the same workspace. On the left is the chat, where you tell Buildliy what you want. On the right is your app: a live preview you can click around in, the code behind it, and the controls for its backend. Across the top are the buttons for going live.
This page walks through each area so you know where things are and what they do.
The layout at a glance
| Area | Where it is | What it's for |
|---|---|---|
| Project menu | Top left, on your project's name | Rename, undo, history, duplicate, delete, plus your account links |
| Chat | Left side | Describe what you want, answer questions, follow the build |
| Preview tab | Right side | Your working app, live, so you can try it |
| Code tab | Right side | Every file in your app, which you can read and download |
| Manage tab | Right side | Your app's backend: data, users, storage, secrets, connectors and more |
| Address bar | Above the preview | Move between pages, change the screen size, edit by clicking |
| Workspace menu | Top right | App map, data, roles, launch checklist, analytics and knowledge |
| GitHub and Publish | Top right | Send your code to GitHub, and put your app on the web |
The chat side
The chat is where most of the work happens. You type a request in the box at the bottom, and Buildliy replies, asks questions when it needs to, and narrates what it's doing while it builds. See Chat with Buildliy for everything the chat can do.
Above the chat are three controls:
- Your project's name. Click it to open the project menu (see below).
- Help (the question-mark icon). Opens a help panel where you can search common questions, Ask in chat (it puts your question in the chat box without sending it), Replay the tour, Read the guide, or Contact us.
- Build history (the clock icon). Opens your saved versions (the 50 most recent) so you can restore an earlier one. It's greyed out until you have at least two versions. See Version history.
The right side: Preview, Code and Manage
Three tabs sit at the top left of the right side:
- Preview shows your app running. It's a real, working app, not a picture: you can click buttons, fill in forms and move between pages. It updates by itself when a build finishes.
- Code shows the files that make up your app. You can read and search them, lock files you don't want the AI to change, and download one file or the whole codebase as a ZIP. See View and download code.
- Manage is your app's backend. It has sections for Overview, Database, Users, Storage, Secrets, Connectors, Logs, Usage and more. See The Manage tab.
Switching tabs doesn't reload your preview, so you can check the code and come straight back to where you were.
Anyone who has your preview's link can open it. Don't put real customer data or private information into an app you're still testing unless you're comfortable with that.
The preview address bar
The bar above the preview works like a small browser. Its buttons stay greyed out until your first build finishes; the screen-size, pencil, arrow and pin buttons say Available once your preview is built.
| Button | What it does |
|---|---|
| Pencil icon (left of the bar) | Turns on edit mode, so you can click text, colors and styles in the preview and change them directly. See Edit by clicking. |
| Screen-size icons | Switch the preview between Desktop, Tablet (768 × 1024) and Phone (390 × 844). For Tablet and Phone you can also show a device frame around the preview. Buildliy remembers your choice for each project in this browser. |
| Back and Forward arrows | Go back and forward through the pages you've visited in the preview, including pages you reached by clicking links inside your app. |
Page picker (the path, such as /) | Shows the page you're on and, when there's room, how many pages Buildliy found. Click it to pick another page from Discovered pages, or type a path under Go to path and press Enter. |
| Open in new tab | Opens your preview in its own browser tab, full size. |
| Refresh preview | Reloads the preview. |
| Arrow icon (right of the bar) | Pick an element from the preview. Click something in your app to point the AI at it in your next message. Esc cancels. |
| Pin icon | Pin notes on the preview. Click spots in your app and type what should change at each one. All your notes go to the AI together in one message. Esc stops pinning. |
When the preview side is narrow, some of these buttons hide to save space, and the address bar moves onto its own row under the tabs.
When the preview shows a message instead of your app
- Building your app or Updating your preview…: the AI is working. The preview refreshes by itself when it's done.
- This preview hit an error: the page didn't load correctly. Click Fix it and the AI runs a repair build (it uses credits like any other build), or describe the problem in the chat instead.
- This page doesn't exist yet: the address you opened isn't a page in your app. Pick another page from the address bar, or ask in the chat to add it.
- Reconnecting your preview…: if a project hasn't been used for a while, its preview goes to sleep. Buildliy starts it again by itself, usually in about 30 to 60 seconds. Your app and its files are safe.
The top-right buttons
- Workspace opens a menu of project insights: App map (pages and how they connect), Data (what the app stores), Roles (who can do what), Launch (the pre-publish checklist), Analytics (who visits your live app) and Knowledge (standing instructions for every build). Most items show a quick count or status once there's something to show, such as "6 pages".
- Upgrade (the crown icon) appears when you're on the Free plan and opens the pricing page.
- GitHub (the GitHub icon) connects your GitHub account and sends your project's code to a private repository on your own account. On a team, only the owner can do this. See GitHub.
- Publish puts your app on the web at a real address. See Publish your app.
The project menu
Click your project's name at the top of the chat. The menu shows who you're signed in as and how many credits you have left, then two groups.
This project:
- Rename project: changes the name on your dashboard and in the header. It doesn't change your app.
- Undo last build: rolls your preview back to the version before the most recent build. Both versions stay in your chat history, and it's free apart from the preview's running time.
- Build history: your saved versions, with Restore on each one.
- Duplicate project: makes a copy so you can try a different direction. Shown to the project's owner and Admins on the team.
- Copy project ID: copies an ID you can give to support.
- Transfer project: hands the project to someone else. Only the project's owner sees this. See Duplicate and transfer.
- Delete project: removes the project, its chat history, saved versions and preview. If it's published, the live app goes offline too, though a domain you bought through Buildliy stays yours. Only the project's owner can delete it. This can't be undone.
Account: Dashboard, Settings (shortcut Ctrl,, or Cmd, on a Mac), Upgrade plan or Manage billing, Payments, Help & support, and Sign out.
Resize or hide the chat
On a computer, the chat and the preview sit side by side.
- Resize: drag the edge between the chat and the preview (the pointer changes to a resize arrow). With the keyboard, press Tab until the divider is selected, then use the left and right arrow keys. Buildliy remembers the width you choose in this browser.
- Hide: click the panel icon at the far left of the preview toolbar (Hide chat) to give the preview the whole screen. Click it again (Show chat) to bring the chat back. Anything you were typing is kept.
On a phone or tablet
On screens narrower than a laptop, the workspace shows one side at a time. Use the Chat and Preview switch at the top to move between them. When a new version of your app lands, the workspace switches to the preview for you. If you go back to the chat, a small dot on Preview reminds you there's an app to look at.
Related
Still stuck? Read the FAQ or contact us.
