Live Preview: Try Your App Right Away

The live preview pane sits right next to your prompt. While the AI works, the preview shows a Building… screen with a peek at the code being written. As soon as the build finishes, your app appears and is ready to use: click buttons, fill in forms, and use it just like a real app, right there in the preview. The preview runs in a fully sandboxed environment. That means your app is completely isolated from the rest of AppBlips and can’t interfere with it.

​

Desktop and Mobile Views

Use the device keys in the middle of the preview toolbar to switch between Smartphone, Tablet and Desktop views. Smartphone and Tablet wrap your app in a device frame so you can check how it looks on a smaller screen, and the rotate key turns the device between portrait and landscape. Desktop opens in Full size: your app fills the whole preview area at its real size, the way it looks in a desktop browser. Next to the device keys are three more keys. Rotate works in the Smartphone and Tablet views. Full size (four arrows pointing outward) works in the Desktop view and is on by default: click it to see your app inside a fixed-size desktop window frame instead, scaled to fit. Click it again to go back to Full size. Websites and imported sites open in Full size too. Reload (the circular arrow) restarts your app in any view. A key that doesn’t apply to the current view is greyed out. On a phone or tablet, AppBlips always shows your project the way it looks on that device, filling the screen. The device keys, Rotate and Full size are hidden there, and the Build and Preview panes take turns on screen (switch with Chat and Preview at the top) instead of sitting side by side. Your chosen view is kept for when you open the project on a computer. You can also adjust the zoom from the same toolbar (it’s greyed out in Full size, which always shows your app at its real size). Zoom out to see the whole layout at a glance, or zoom in to check fine details. Click the zoom percentage to go back to fitting the preview to the pane. To try your app in a full browser window, click Open in a new tab.

​

Browser bar and pages

In the Desktop and Full size views, a browser bar sits above the preview, like the top of a web browser:

• Back, Forward and Reload keys work inside your app, the same as in a browser.
• The box in the middle shows your project’s name. It’s for reference only, so there’s nothing to type in it.

The Smartphone and Tablet views leave the browser bar out, so the preview looks like the real device. To reload your app in those views, use the Reload key next to the device keys. While the AI is testing your app, the preview toolbar shows what it’s doing. Click the Stop key (the square) next to it to end the test. When a website has more than one page, a page picker appears in the preview toolbar. Choose a page from it to open that page. A website can have up to 12 pages.

​

Live code preview

While AppBlips is building, a generating code card on the Building screen shows the latest lines of code as the AI writes them. It stays visible for the whole build.

• On a multi-page website, the card shows the name of the page being written.
• When Reasoning is on, a thinking strip shows what the AI is considering before it writes.

If you’d rather not see the code, turn off Live code preview in Settings → Workspace.

​

Code View

Once generation is complete, you can inspect the generated HTML using the Code tab in the preview toolbar. It always shows each page’s full source, including after small edits. You can also edit the code yourself. The Code tab appears in the preview toolbar alongside the preview itself. It is shown by default; to hide it, go to Settings → Workspace and turn off the Code view toggle. You can also turn on Auto Follow Code (also in Settings → Workspace) to have the code panel automatically scroll to follow the latest line during generation.

​

Edit the code yourself

You can change a page’s code by hand:

1. Open the Code tab and pick the page you want to change.
2. Click Edit at the top right of the code.
3. Type your changes. Tab indents the line.
4. Click Save (or press Ctrl+S, ⌘S on Mac).

To throw your changes away instead, click Cancel. You can’t edit while the AI is working, so wait for it to finish first.

​

Autocomplete

While you type, a short list of suggested words appears under the cursor:

• Press the up and down arrow keys to pick a suggestion.
• Press Enter or Tab to insert it, or click it.
• Keep typing to ignore the list, or press Escape to close it.
• Press Ctrl+Z (⌘Z on Mac) to undo an inserted suggestion.

Suggestions come from words already in your code, plus common JavaScript keywords, HTML tags and attributes, and CSS properties (inside <style> blocks and CSS files). The list doesn’t pop up when you type in the middle of a word. Everything is worked out on your computer. Nothing is sent to the AI, and no tokens (the units your AI provider bills you for) are used. Autocomplete is on by default. To turn it off, open Settings → Workspace and switch off Code autocomplete.

​

Saving and errors

• Each save becomes a new version, so Previous version undoes it like any other edit.
• If you switch to the preview before saving, your unsaved changes are kept until you come back. Switching to another page first asks whether to discard them.
• If your change has a JavaScript error, the chat shows where it is, for example: “Your code edit has an error at line 18: Uncaught ReferenceError: score is not defined. Fix it in the Code tab, or ask the AI to fix it.”
• AppBlips doesn’t ask the AI to fix errors in your own edits automatically (it does for the AI’s own builds). That way your edit is never overwritten and no tokens are spent without you asking. Fix it in the Code tab, or ask the AI in the chat.

For an imported site, this tab is always shown and is called Files. See Browse the project’s files.

​

Undo and Redo

Every time AppBlips generates or updates your app, the result is saved as a new version in your history. The preview toolbar shows the version number, such as v3, between two curved arrows. If a change doesn’t go the way you expected, click Previous version (the arrow on the left) to step back. Next version (the arrow on the right) moves you forward again. Keyboard shortcuts do the same: Ctrl+Z to undo, and Ctrl+Y or Ctrl+Shift+Z to redo (⌘Z and ⌘⇧Z on Mac). You’re never locked in to the latest version — undo and redo freely at any point in your session.

​

History Drawer

The history drawer lets you browse every version of your app, which is saved with the project. Click the panel icon in the header (its tooltip says Show history drawer) to see your past builds and refinements, grouped by chat, and click any entry to restore that version as your current working state. This is particularly handy when you want to compare two different approaches or recover a version you stepped past.