> ## Documentation Index
> Fetch the complete documentation index at: https://docs.foundable.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Preview and change your website

> See your website page by page on a computer, tablet or phone. Point Ted at the part to change, type new words in place or swap a photo.

The preview shows your website the way visitors will see it, page by page. Visitors can’t see it until you [publish](/build/publish), so you can check every change first.

You can also change your website right from the preview: point Ted at the exact part you mean, type new words on the page, or swap a photo.

<Frame caption="On a wide enough screen, the website tools also show Edit text, between Select and Swap photo.">
  <img src="https://mintcdn.com/foundable/DbVcWIgHCR1LKZRG/images/website/build-preview-open.jpg?fit=max&auto=format&n=DbVcWIgHCR1LKZRG&q=85&s=67a2a78334ee079a43ad1c6ba1e07467" alt="A website open in Build: the header with Back, the website’s name, History, the device button, the page bar, Tools and Publish, the website below, and the website tools at the bottom." width="1600" height="1408" data-path="images/website/build-preview-open.jpg" />
</Frame>

<Steps>
  <Step title="Open a website">
    On the **Build** board, press **Edit** under a website, or click its picture.
  </Step>

  <Step title="Go to another page">
    Press the page name at the top, like “Homepage”, and pick a page from **Pages**.
  </Step>

  <Step title="Check it on a phone">
    Press the device button, left of the page name, to switch between desktop, tablet and phone sizes.
  </Step>

  <Step title="Point Ted at a change">
    Press **Select**, click the part you want changed, then tell Ted what to do in the chat and send.
  </Step>

  <Step title="Publish when you’re happy">
    Press **Publish** at the top right. See [Publish your website](/build/publish).
  </Step>
</Steps>

## What’s at the top of the preview

| Control | What it does |
| - | - |
| **Back** | Takes you back to the board. |
| The website’s name | Switches to another of your websites. |
| Clock (**Show history**) | Opens [Version history](/build/version-history). |
| ⋮ (**Website actions**) | **Viewing as**, **Open full screen**, **Rename**, **Duplicate** and **Delete**. See [Rename, duplicate or delete a website](/build/overview#rename-duplicate-or-delete-a-website). |
| Device button | Switches between desktop, tablet and phone sizes. |
| **Refresh preview** | Reloads the page you’re on. |
| Page name | Shows the page you’re on. Press it to go to another page. |
| **Open in new tab** | Opens the preview in its own browser tab. |
| **Tools** | Payments, your database and more. See [Tools](/build/tools). |
| **Publish** | Puts your website online. It says **Update** when you have changes to publish. |

When the window is narrow, controls that don’t fit move into **More actions**. On a phone, the controls sit in a bar at the bottom: **Back**, **Chat**, **More actions** and **Publish**.

## Go to another page

Press the page name to see your website’s **Pages**. Type in “Find page or enter path” to find a page by name. You can also type the end of a page’s address, like `/menu`, to go straight there.

Each page in the list has a **Social & search** icon. Hover over it (on a phone, tap it) to see how the page looks when someone shares its link or finds it in a search. “No title set” or “No social image set” means the page doesn’t have one yet. Press **Ask Ted to edit** to put the request in your message to Ted. Nothing changes until you send it.

## Check it on a phone or tablet

Press the device button, left of the page name, to switch the preview between a desktop, tablet and phone screen. Each press moves to the next size. The size you pick stays with that website while you work.

* A website Ted made for phones opens on the phone screen.
* On a small window, a desktop page shrinks to fit instead of rearranging, so you always see it as designed.
* On a phone-size screen, the device button is hidden.

## Change your website from the preview

**Website tools**, along the bottom of the preview, gives you three ways to work on the page in front of you: [Select](#select-a-part) a part for Ted, [Edit text](#edit-text) yourself, or [Swap a photo](#swap-a-photo). Press a tool to start and **Done** to stop. To get the toolbar out of the way, press **Minimize toolbar**. **Show website tools** brings it back.

### Select a part

1. Press **Select**. The preview says “Select: click a part of your website to ask Ted about it”.
2. Click the part you mean, like a heading, a button or a photo. It joins your message to Ted as a chip that names it, like “Heading”, with its words.
3. Pick more parts if you like. Then write what you want in the chat, like “Make this shorter and friendlier”, and send it.

Press **Done**, press **Select** again or press Esc to stop picking.

<Frame>
  <img src="https://mintcdn.com/foundable/DbVcWIgHCR1LKZRG/images/website/build-select-heading.jpg?fit=max&auto=format&n=DbVcWIgHCR1LKZRG&q=85&s=cfae71d6747b803602f92ad51efdf915" alt="Select turned on: the website’s heading is outlined and a chip naming it waits above the message box, ready for you to tell Ted what to change." width="1600" height="793" data-path="images/website/build-select-heading.jpg" />
</Frame>

### Edit text

1. Press **Edit text**. Parts you can type in show a dashed outline.
2. Click into the words and type.
3. Press **Send** in the bar at the bottom. The bar counts your changes, like “1 text change”.

<Frame>
  <img src="https://mintcdn.com/foundable/B91kdYmAdJziZrM_/images/website/build-edit-text.jpg?fit=max&auto=format&n=B91kdYmAdJziZrM_&q=85&s=bfa93a331ecc50952cc6605d7568ad06" alt="Build’s preview with Edit text on: a heading being typed in its dashed outline, and the bar at the bottom reading 1 text change with Clear and Send." width="1600" height="1089" data-path="images/website/build-edit-text.jpg" />
</Frame>

Already using **Select**? Double-click words to start typing there. Your words are saved as a new version called “Visual edit” in [Version history](/build/version-history). If Ted is busy building, your change waits and says “Runs after the current task”. Press **Clear** to remove what you typed before you send it.

If you try to leave with words you haven’t sent, Build asks first: “Unsaved changes”. Choose **Keep editing**, **Discard changes** or **Send**.

| What you see | What it means | What to do |
| - | - | - |
| “Changes sent successfully” | Your words are saved. | Press **Undo** to take them back. |
| “Couldn’t send changes.” | Your words didn’t go through. They’re still there. | Press **Retry**. |
| “This text can’t be edited here.” | This part can’t be changed by typing. | Press **Ask Ted** to hand the change to Ted. |
| “A text change was undone” | “The website couldn’t build it, so its old words are back.” | Press **Ask Ted** to hand the change to Ted. |

### Swap a photo

1. Press **Swap photo**, then click a photo on the page. It says “Photo picked · click another to change it”.
2. In the box beside the photo, describe the photo you want where it says “Describe the new photo…”, then press the arrow (**Generate with Ted**). Or press **Upload a photo instead…** to add one of your own to your message to Ted, then send it.
3. Keep working while Ted makes it. You’ll see “Ted is making your photo…”, then “Your new photo is in”.

If you see “Ted couldn’t make this photo”, try describing it another way.

<Frame>
  <img src="https://mintcdn.com/foundable/DbVcWIgHCR1LKZRG/images/website/build-swap-photo.jpg?fit=max&auto=format&n=DbVcWIgHCR1LKZRG&q=85&s=811fe2835047ffccbfb5dbf3f33ccd0a" width="437" alt="Swap photo: the website’s photo is outlined, with a box to describe a new photo for Ted to make or to upload one instead." data-path="images/website/build-swap-photo.jpg" />
</Frame>

## See your website signed in

If people can sign in to your website, you can check what they see. Open ⋮ (**Website actions**). Its first row says how the preview shows your website, like “Viewing as: Signed out”. Press it to choose:

* **Signed out** (“As visitors see it”), the way it starts.
* **Signed in as you**, with your own account.
* One of your **Test users**: made-up accounts for testing. **Add test user** makes a new one and signs the preview in as them. See [Database](/build/database).

Build remembers your choice for each website in this browser. If you press your website’s Google sign-in button in the preview, Build asks “Sign in to this preview as you?”: press **Sign in as me** or **Stay signed out**.

## When the preview won’t load

| What you see | What it means | What to do |
| - | - | - |
| “Loading preview…” or “Still loading preview…” | The page is opening. | Wait a moment. |
| “This preview couldn’t load” | “Something in this browser may be blocking it.” | Press **Try again** or **Open preview in new tab**. If it keeps happening, try a private window or another browser. |
| “Preview paused while Ted builds. It will reload when ready.” | Ted is changing your website. | Wait. It reloads by itself. |
| “Starting your server…” | Your website’s live preview (below) is taking a while to start. | Wait. You’ll see “Server ready. Reloading…”. |
| “Server couldn’t start. Your next change retries.” | The live preview didn’t start. | Ask Ted for your next change. Build tries again then. |
| “Database couldn’t be set up.” | Your website’s database isn’t ready. | Press **Try to fix**, and Ted sets it up again. |
| “Live preview couldn’t start.” or “Live preview stopped responding.” | The live preview stopped working. | Press **Try again**. |
| “Build errors need fixing” | This version’s code doesn’t build, so it can’t be previewed. | Press **Try to fix**. Ted gets the errors and fixes them. |
| “The website encountered an error” | Something on this page went wrong. | Press **Fix error** to send it to Ted, or **Show logs** to see the details. |

Most of the time, the preview shows your newest saved version. The live preview is your website running on its own server while you work on it. It starts when you work on your website, like when you send Ted a message or press **Edit text**, never when you only open Build.

## Who can do it

The owner, admins and members can use **Select**, **Edit text** and **Swap photo**. A teammate with view-only access can look at every page, but gets no website tools. Only the owner and admins can use **Viewing as**.

## FAQ

<AccordionGroup>
  <Accordion title="Can other people see my preview?">
    Visitors can’t. They see only what you publish. Your team can open it in Build. **Open in new tab** opens the preview at its own address, and anyone you give that address to can view it.
  </Accordion>

  <Accordion title="Why don’t I see Edit text?">
    **Edit text** shows on wider screens, so it isn’t there on a phone. It also doesn’t show while you look at an older version from Version history, or for a teammate with view-only access.
  </Accordion>

  <Accordion title="Does the preview show changes I haven’t published?">
    Yes. The preview shows your newest saved version. Visitors keep seeing your published website until you [publish an update](/build/publish#update-your-live-website).
  </Accordion>

  <Accordion title="Does Try to fix cost credits?">
    It can be free. Foundable gives you some free fixes for **Try to fix** and **Fix error**. When a fix is free, the receipt under Ted’s reply reads “Free”. See [Plans and credits](/account/plans-and-credits).
  </Accordion>
</AccordionGroup>

## Related

<CardGroup cols={2}>
  <Card title="Publish your website" icon="https://mintcdn.com/foundable/bTUqs5K9ofH2F4tQ/icons/rocket-launch.svg?fit=max&auto=format&n=bTUqs5K9ofH2F4tQ&q=85&s=b6c621f915941f1466f6f2ef7ea72f79" href="/build/publish" width="1024" height="1024" data-path="icons/rocket-launch.svg">
    Put your website online and update it.
  </Card>

  <Card title="Version history" icon="https://mintcdn.com/foundable/bTUqs5K9ofH2F4tQ/icons/clock-counter-clockwise.svg?fit=max&auto=format&n=bTUqs5K9ofH2F4tQ&q=85&s=2be241983056467e9e70a15ba91a7280" href="/build/version-history" width="1024" height="1024" data-path="icons/clock-counter-clockwise.svg">
    Look at earlier versions and go back.
  </Card>

  <Card title="Tips for asking Ted" icon="https://mintcdn.com/foundable/bTUqs5K9ofH2F4tQ/icons/lightbulb-filament.svg?fit=max&auto=format&n=bTUqs5K9ofH2F4tQ&q=85&s=ac545e5150a6aa62a566375d46a405d5" href="/ted/tips" width="1024" height="1024" data-path="icons/lightbulb-filament.svg">
    How to describe a change clearly.
  </Card>

  <Card title="Database" icon="https://mintcdn.com/foundable/bTUqs5K9ofH2F4tQ/icons/database.svg?fit=max&auto=format&n=bTUqs5K9ofH2F4tQ&q=85&s=9f38554dbabb9908cfb3bf8e5b5944f7" href="/build/database" width="1024" height="1024" data-path="icons/database.svg">
    Your website’s data, sign-ups and test users.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.