# Find your way around

Learn your way around WebDIY, from managing projects to building, previewing, and publishing apps.

There are two kinds of screen in WebDIY. The dashboard is where your organization's projects, people and credits live. Inside a project, you chat with WebDIY and see your app.

## The dashboard

The sidebar has **Home** and **Projects** at the top, then a group for your organization: **Team**, **Usage**, **Billing** and **Settings**.

| Page     | What it's for                                                                                                     |
| -------- | ----------------------------------------------------------------------------------------------------------------- |
| Home     | A message box for starting a new project, your three most recent projects and anything that needs your attention. |
| Projects | Every project in the organization. Deleted projects stay in **Recently deleted** for 7 days.                      |
| Team     | The people in your organization, their roles and your invites.                                                    |
| Usage    | Every credit in and out, by day, person, message and project.                                                     |
| Billing  | Your plan, top-ups and invoices.                                                                                  |
| Settings | Your profile and how you sign in, plus organization settings like which AI models members may use.                |

The credits card in the sidebar shows how many credits your organization has left, and selecting it opens your usage. Owners and Admins also get a button there to upgrade or top up.

What you can see depends on your role. Viewers see Home, Projects and Team. Builders can open Usage, Billing and Settings, but can't change anything there. A Guest sees only **Shared with you**, the projects they've been invited to.

## Inside a project

On a computer, the chat sits on the left and the workbench on the right. In the header you'll find three tabs, **Preview**, **Code** and **Tools**, and two buttons, **Share** and **Publish**.

### The chat

This is where your messages and WebDIY's replies go. While WebDIY works, the chat shows what it's doing, stage by stage, and a checklist when it tests your app.

- **The message box** is where you type. You can attach files and choose the AI model for each message. While a message is running, the send button turns into **Stop**.
- **Details** under a reply opens **Turn details**, with the model, its thinking, the tokens and the credits that message used.
- **Revert to this message**, next to a reply, opens History at the version that message made.

For tips on what to say, see [Write a good first prompt](https://web.diy/docs/get-started/first-prompt).

### Preview

Your app, running on its own computer. In the toolbar you'll find:

- **Reload**, and the address field for the page you're on.
- **Viewport**, which switches between Desktop, Tablet and Phone. Drag the edge to try other widths.
- **Open preview in a new window**, with **Open in new tab**, **Open in new window** and 13 device sizes, anywhere between a small phone and a 4K display, in portrait or landscape.
- **Full screen**.

While your app starts or updates, the Preview shows the last picture of your app, dimmed, with a single status line like "Starting your app's computer". When a message changes your app, the Preview updates in place.

Your app's computer pauses after 10 minutes without activity, and opening the project starts it again.

### Code

Your project's files. Select a file to read it in the editor. Builders and Admins can edit files themselves too: select **Save** to keep a change, or **Reset** to undo it. Files are read-only while WebDIY is answering a message.

Builders and Admins also get a **Terminal** for running commands on your app's computer.

To download the project, open **Tools**, then **Settings**, and use **Download Code** under **Take it with you**.

### Tools

Everything about the project that isn't the app itself. **Overview** sits at the top. It tells you whether your site is live and up to date, shows anything that needs you and has shortcuts to the sections used most. The rest are grouped:

| Group   | Sections                                       |
| ------- | ---------------------------------------------- |
| Site    | Publishing, Domains, Analytics, Logs, Security |
| Data    | Database, Users & Auth                         |
| Connect | Keys & secrets, Integrations                   |
| Project | Members & sharing, History, Settings           |

A few more sections are marked **Planned**, and they don't do anything yet.

Viewers can open every section except Logs, Security and Keys & secrets. To change Publishing, Domains, Database, Users & Auth, Keys & secrets, Integrations, Security or Members & sharing, you need Admin access to the project.

### Share and Publish

- **Share** opens **Members & sharing**, where you can invite people to the project and make a preview link.
- **Publish** is the blue button with a globe, and it puts your app online. Only the project's Admins can publish. Everyone else sees a lock on it, with the names of the people who can.

See [Publish your app](https://web.diy/docs/publish/publish-your-app).

## On a phone

On phones and narrow windows, a floating bar at the bottom switches between **Chat**, **Preview** and **Tools**. Tools opens as a menu: pick a section to open it, and select **Tools** at the top to go back. There's no Code tab on phones. The header keeps the menu button, the project's name and **Publish**.