Skip to main content
Once AppBlips has built your project, you have two ways to refine it: type a plain-English follow-up prompt to describe the change you want, or (if you are in the Website Studio) switch into the visual editor and click directly on the element you want to modify. Both approaches create a new version in your history, so you can always undo if a change misses the mark.

​
Editing with Prompts

After your app is generated, the prompt input stays active and ready for follow-up instructions. Describe the change you want in plain English — AppBlips reads the current version of your app and applies your requested change directly. A few examples of effective editing prompts:
Each follow-up creates a new version in your history, so you can chain as many edits as you like and step back if something doesn’t work.

​
Visual Element Editor (Website Studio)

When working in the Website Studio, the visual element editor lets you point and click on any element in the live preview to select it and describe a change. This is especially useful when you can see exactly what you want to fix but aren’t sure how to describe it in words. To activate the visual editor, click the Click-to-edit key (the pointer icon) in the preview toolbar. The preview switches into selection mode: hover over any element and it highlights to show you what would be selected. Click the element you want to change. An editor bar appears below the preview with the options for that kind of element.

​
Edit text directly

Click any text in the preview, such as a heading, paragraph or button label, and type straight into it. A formatting bar appears while you type:
  • Font, and the font size (Smaller, Larger, or type a size in pixels)
  • Text style (such as bold and italic) and Alignment
  • Text color, from a list of colours or a custom colour
  • Its own Undo and Redo for your typing
Press Enter to start a new line. Click Done, click somewhere else in the preview, or press Ctrl+Enter (⌘+Enter on a Mac) to save the change as a new version. Click Cancel (or press Escape) to throw it away. No AI is involved, so the change is instant.

​
Change an image

Click an image to change it in the editor bar:
  • Image URL: paste the web address of another picture.
  • Upload: replace it with an image from your computer.
  • Fit size to image: appears after you upload a picture. Tick it to keep the image’s width and change its height to match the new picture’s proportions.
  • Alt text (captions icon): opens a small window where you set or edit a short description of the picture for people who use screen readers. It also shows if the image can’t load. Click Apply to save it.

​
Right-click menu: ask AI, add, move, copy, paste and delete

With click-to-edit on, right-click anywhere in the preview. A blue line shows where anything you add or paste will go (before or after the element under your pointer), and a small menu opens. If you right-clicked some text (a heading, paragraph or list item) or an image, it gets a dashed outline and the top of the menu acts on it:
  • Cut: removes it and keeps a copy to paste.
  • Copy: keeps a copy to paste, and leaves it where it is.
  • Duplicate: adds a copy right below it.
  • Move: turns on drag mode, so you can press on it and drag it to a new spot. Turn drag mode off with its key in the preview toolbar when you’re done.
  • Delete: removes it.
These are always in the menu:
  • Ask AI: describe a change, such as “make it bigger” on a heading or “add a signup button here” anywhere else, then click Ask AI or press Enter. The AI is told exactly where you right-clicked: the text or image itself, or otherwise the block you clicked in and the spot marked by the blue line, quoted from the page’s code. That way it lands in the right place at every screen size. The request runs straight away. If you already have a draft or a file in the chat box, or the chat is in Ask mode, it’s added to the chat box for you to send instead. Add to chat always does that.
  • Paste: puts the last thing you cut or copied at the blue line. You can paste on any page of the same project, as many times as you like. It’s greyed out until you’ve cut or copied something.
  • Add text container: type your text in the box that appears (Shift+Enter starts a new line), then click Add or press Enter. It’s added as a new paragraph.
  • Add image: pick a picture from your computer. It’s added to the project’s My images and placed at the line, sized to fit its column.
Each change is saved straight away as a new version, with no AI involved, so Ctrl+Z (⌘Z on Mac) undoes it. Something you add or paste can be clicked and edited like anything else. To close the menu without changing anything, press Escape or click somewhere else. Cut and Copy work inside AppBlips only; they don’t use your computer’s clipboard. If the menu says nothing can be added at that spot, right-click next to some text or an image instead. If the element or spot can’t be found exactly in the page source (for example, because a script added it), the menu tells you and nothing changes.

​
Selecting parent elements

Sometimes you want to edit a container, section background or wrapper rather than the content inside it. After clicking an element, click the Select parent key in the editor bar (an arrow pointing up to a line; its tooltip says “Select the parent”). This is useful when you want to change a section’s background, a card’s fill or a page region’s layout. Keep clicking it to move further out until you’ve highlighted the element you actually want to edit.

​
Selecting several elements

To change or delete several elements at once, select them together:
  • Drag a box: press anywhere in the preview and drag (a plain click still selects or edits one element as before). A blue box follows your pointer, and everything that fits completely inside it gets a dashed outline. Release to select those elements. Only the outermost ones count: a box around three cards selects the three cards, not the headings inside them. Hold the pointer near the top or bottom edge of the preview to scroll while you drag, and press Escape to cancel.
  • Shift+click: hold Shift and click elements one at a time to add them. Shift+click a selected element again to take it out.
  • Shift+drag: hold Shift while dragging a box to add its elements to what you already have selected.
In the phone and tablet views, dragging scrolls the page as a finger would, so hold Shift to draw a box there. A box isn’t available in drag mode, where dragging moves an element. With several elements selected, the editor bar shows how many there are. Describe a change in its text box, then click Apply with AI (or Add to chat to send it later) and the AI changes all of them. Click the trash key, or press Delete, to remove them all as one new version. Press Escape or click the close key to clear the selection. A single plain click selects just one element again. Up to 40 elements can be selected at a time.

​
Arranging Elements

The editor bar has keys to rearrange whatever you have selected. Each one is saved straight away as a new version, with no AI involved:

​
Drag to move

You can also drag text, images, buttons or whole sections to a new spot. Next to the click-to-edit key is a Drag mode key (the move icon). Turn it on (this also turns click-to-edit on), then press on an element in the preview and drag it: a copy of it follows your pointer (large elements shrink so you can still see the page), and a line shows where it will land, before or after the element under your pointer, anywhere on the page. Release to move it, or press Escape to cancel. Hold the pointer near the top or bottom edge of the preview to scroll while you drag. In drag mode, hovering outlines what a drag would move, and a click selects an element without editing its text. To move a container such as a card or a section, click it (use Select parent if needed), then drag from anywhere inside it. Turn drag mode off to edit text in place again. Words inside a paragraph or heading move with their paragraph. Elements stay in the normal page flow, so the layout still adapts to every screen size. List items can only be moved among list items, and table cells among table cells. If the dragged element or the spot where you drop it can’t be found exactly in the page source (for example, because a script added it), nothing moves. The element is selected so you can describe the move to AI instead. Ctrl+Z (⌘Z on Mac) undoes the last change, even while you’re working in the preview. When you move or delete a whole section, its section marker goes with it. A duplicate gets no id attributes, so links to the original section still land on the original.
  • Links: type a web address, or pick one of your site’s pages or a #section from the suggestions. The arrow key next to the field makes the link open in a new tab.
  • Fill: a colour for sections, buttons and links. If the element has a gradient, a solid fill replaces it.
  • Wallpaper: upload an image as a section’s background, whether or not the section had one before.

​
Asking AI About One Element

When a change is more than a quick tweak, click Ask AI in the editor bar and describe it. Apply with AI makes the change right away. Add to chat puts the request in the chat box so you can add to it before sending. Either way, the request includes the element’s exact source code and the page section it’s in, so the AI edits that element and not a look-alike somewhere else. If a direct edit can’t be matched to the page’s source, for example because a script creates that part of the page, the bar tells you why and switches to Ask AI.

​
Editing the code yourself

If you know a bit of HTML, CSS or JavaScript, you can change the code directly: open the Code tab, click Edit, make your change and click Save. Suggestions appear as you type. See Edit the code yourself.

​
Undo/Redo History

Every edit — whether made through a prompt, the visual editor or the code editor — saves a version to your history automatically. Use the Previous version and Next version arrows in the preview toolbar to step back and forward, or press Ctrl+Z to undo and Ctrl+Y or Ctrl+Shift+Z to redo (⌘Z and ⌘⇧Z on Mac). You can move between versions freely at any point without losing your work. To jump straight to an older version, open the history drawer.
Combine both editing modes for the best results. Use the visual editor to pinpoint a specific element you want to change, then use a follow-up prompt to describe complex behavior changes — like adding new interactivity or restructuring a section. Switching between the two gives you precision on individual elements and flexibility for bigger changes.
Ready to share your finished app? Learn how to download it as a standalone HTML file in Export Your App. To revisit how to write effective prompts from the start, see Building Apps.