Use the preview

The preview is not a picture of your app. It is the app itself, running. When you add a record in the preview, it is saved in your app's database. While Crisp builds, the preview waits, then shows the finished change once and tells you what changed.

The preview controls#

• Back and Forward move through the pages you visited in the preview, like a browser.
• Reload loads the current page again, at the same place on the page.
• The path bar shows which page you are on, such as /bookings, and follows along when you click links in your app. Type another path and press Enter to go there.
• Desktop, Tablet and Phone change the size of the preview, so you can check how your app looks on other screens. With Tablet or Phone chosen, Turn shows the screen sideways. These buttons are hidden on a phone, where the preview already has a phone width.
• Edit lets you click any part of your app to change it. See Change what you see.
• Share preview makes a link that lets someone else open the preview. See Show the preview to someone.
• Open in a new tab opens your app on its own, in a full browser tab.

Show the preview to someone#

Your preview is private: only you can open it, while you are signed in to Crisp. To show it to a client or a friend before you publish, share a link:

1. 1 Press Share preview above the preview (or choose Share preview in the More menu).
2. 2 Choose how long the link works: 1 hour, 1 day or 7 days.
3. 3 Press Make a link and copy it, and send the link. Whoever opens it sees your app, without a Crisp account.

• The panel lists the links that are on, with when each one ends and how often it was opened. Press Copy to copy one again.
• Press Turn off to stop a link at once. Everyone viewing the preview through a link is signed out. Links that are still on work again when opened.
• A link to the preview shows your app with its test data and test payments. To give people your finished app, publish it: a published app is public, at its own address.
• A link to a phone app opens it in a phone frame in any web browser, on a computer, an iPhone or an Android phone, with no Expo Go needed. Someone with an Android phone can also scan the QR code in the preview to open it in Expo Go. A phone app preview is not private: turning off a link stops the link, not the app's own address.
• A project started before previews were private stays open to anyone who has its preview address until its app is updated. To make it private, ask Crisp: "Update the app to the latest version."

While Crisp builds#

While Crisp works on your app, a line under the preview controls says Crisp is changing your app, with a moving bar. The preview keeps showing your app as it was until the build is done, so you never see a page that is only half changed. You can keep using it meanwhile. The first build is different: there is no earlier version to keep, so your app appears within about half a minute and fills in as Crisp works.

When the build is done, the preview loads the page you are on once, at the same place on the page. If nothing on screen changed, it does not reload at all. A short note then says what changed, for example Updated. 4 files changed.

• See changes opens the list of changed files, with every line that was added or removed.
• Open /books/new goes to a page the build added or changed, so you can try it at once. Up to two pages are offered.
• The note closes by itself after a few seconds. It stays while the pointer is on it. Press the cross to close it at once.

Change what you see#

Small changes do not need a request. Press Edit above the preview, point at your app (the part under the pointer is outlined) and click the part you want to change. A panel opens next to it. Press Esc to close the panel, and again to stop editing.

• Text: change the words.
• Text color and Background: pick one of your app's own colors, so the change matches the rest of the design in light and dark mode.
• Font size, Padding, and Space between items for a row or a grid of things.
• Font weight and Alignment.
• Visibility: hide it, or show it again.

Press Apply to save everything you changed in the panel at once. The preview updates in a few seconds. Visual edits are free: no AI is used, and nothing is charged. Each one is saved as a version in the chat, so you can undo it like any change. See Undo anything.

Some parts cannot be changed this way, for example text that comes from your data, or a style that changes with what the app is doing. The panel says why and offers Ask Crisp to change this. Ask Crisp about this adds that part to your message in the chat, with the file and line where it is written, so Crisp changes that part and nothing else. Write what should change and send it. To ask about several parts at once, hold Shift (or Cmd on a Mac, Ctrl on Windows) and click each part: every part you click goes straight into your message, and you can then write one request about all of them.

When something breaks#

When your app hits an error, a card appears at the bottom of the preview. It says in plain words what broke and on which page. Details shows the file, the line and the exact error. The same error is shown once, with a count, however often it happens. The card shows errors in the page and errors in the parts of the app that work behind it.

• Fix it asks Crisp to fix the error. Crisp gets the error, the page and the file, so you do not have to describe it. Nothing happens until you press it.
• While Crisp is building, there is no button: Crisp already sees errors in the preview while it works and fixes them before it finishes.
• If the same error comes back after two fixes, the card offers Try a different approach instead: Crisp steps back and plans another way, because trying the same fix again would only cost more.
• Press the cross to dismiss an error, or the arrow to make the card smaller.

What the messages in the preview mean#

If the preview stays blank or shows an error, see The preview does not load.

The preview and your live app#

The preview is for trying the app while you build it. It may be asleep, or show a half-finished change while Crisp is working. When you want other people to use your app, publish it: your live app has its own address and its own data. See Publish your app.