Make visual edits

Visual edits let you change how your project looks directly in the preview. Using the Select tool in the chatbox, you can edit text, change colors, and adjust styles like font size, formatting, and alignment. Each change shows in the preview right away. Making a visual edit doesn’t automatically update your project’s code. Each edit you add goes into a batch above the chatbox. When you’ve made all the edits you want, click Save changes. Bolt then processes the whole batch and updates your code to match. Making visual edits in the preview is free. Bolt uses tokens only when you save your changes. To edit a single element, you can also select the element and describe what you want in a prompt instead. Visual edits are available on all plans.

​

Visual edits workflow

The following screenshot shows how you see the visual edits workflow on your screen.

• Step 1: Turn on the Select tool.
• Step 2: Click an element in the UI and make your edits.
• Step 3: A marker shows where you’ve added changes.
• Step 4: See your edits in a batch above the chatbox. Click Save changes to have Bolt save them to your project code.

​

Select an element

1. Open your Bolt project.
2. In the chatbox, click Select.
3. In the preview, point to the element you want to target. Bolt highlights each element as you hover.
   You can also use the arrow keys while hovering to move between elements. The up arrow moves to the element containing the one you’re pointing at, and the down arrow moves back.
4. Click the element. Your selection appears above the chatbox, and the toolbar appears.
5. (Optional) Adjust your selection:
   • To change which element is selected, press ESC, then click something else.
   • To select an element inside your selection, use CMD+click (on Mac) or CTRL+click (on Windows).
6. After selecting an element, you can do any of the following:
   • Double-click text and edit it directly in the preview.
   • Adjust the style or formatting of the element. The toolbar shows only properties you can edit on that specific element.
   • Describe the edits you want in a prompt.

​

Edit text directly

1. Select an element that contains text.
2. Double-click the text to edit it.
3. Type your changes.
   While editing, you can apply formatting using common keyboard shortcuts, like CMD+B (on Mac) or CTRL+B (on Windows) for bold.
4. In the toolbar, click Add changes (blue checkmark) to add your edits to the batch.

​

Adjust style and formatting using the toolbar

1. Select an element. The toolbar appears under the element you selected.
2. (Optional) To move the toolbar, grab it (using the grip icon) and drag it to a new location.
3. Adjust any of the available properties, like font size, alignment, or color. See Toolbar options for the full list of properties and which elements they apply to.
4. Click Add changes (blue checkmark) to add your edits to the batch.

​

Toolbar options

The properties in the toolbar show what you can edit for the selected element. For example, a text element has properties like font size and text alignment, and an image has properties like opacity and object fit. The following table lists each property and what it does. The Available for column uses these groups:

• All elements: Every element you can select.
• Media: Images, videos, and icons.
• Text: Text elements, including links and buttons that contain text.
• Containers: Elements that hold and organize other elements.

​

Color options

Type color and Background color open the same color picker. The preset swatches show colors already used in your project. To use a different color, click the plus icon to open the Custom color menu. There, you can:

• Use the gradient area and hue slider to find the exact color you want.
• Click the eyedropper to sample a color from anywhere on your screen.
• Type an exact value in HEX or RGB. Use the dropdown to switch between the two formats.

​

Object fit options

• Cover: Fills the space and crops the image’s edges if needed.
• Contain: Fits the whole image without cropping, which can leave empty space.
• Fill: Stretches the image to fit exactly, which can distort it if it isn’t the same proportions as the containeru.
• None: Shows the image at its original size.

​

Batch and save multiple edits

When you add a visual edit in the preview, the details appear above the chatbox and start a batch. The batch collects your edits so Bolt can process them all at once when you click Save changes. We recommend saving edits in a batch, since it uses fewer tokens than sending each edit separately. You can create and save one batch of edits for each page in your project. Because you can’t navigate through your project while you’re using the Select tool, you need to save the edits from one page and then turn off the Select tool before navigating to the next page. To create a batch of edits:

1. Select an element, make your edits, then click Add changes (blue checkmark). The edit is added to the batch and appears above the chatbox. A marker also appears on the element in the preview.
2. Keep selecting elements and adding edits to the batch. The batch shows how many edits it contains, with a label like 3 visual changes.
3. (Optional) Before saving, review the list of edits. If there are any you no longer need, you can delete them individually or delete the batch.
4. Click Save changes to send your batch to Bolt. Bolt applies the edits and saves them to the project code.

​

Add a note to the batch

You can add a note to a batch of edits to give Bolt additional instructions. For example, a note can tell Bolt to apply changes across different pages in your project. If you change the size and color of a section heading and want the headings on your other pages to match, you can add a note like: Apply these changes to the section headings on the other pages too. To add a note:

1. After creating a batch of edits, type the note in the chatbox.
2. To save the batch with a note, click Save changes next to the batch, or click the blue arrow in the chatbox.

​

Describe changes using a prompt

Sending a prompt for a selected element works the same as any other prompt. Describe the change you want, and Bolt builds it. Unlike with visual edits, your prompt goes straight to Bolt instead of into a batch, so you don’t see changes in the preview until Bolt finishes.

1. Select an element.
2. In the chatbox, describe the change you want.
3. Send your prompt.

​

Undo or remove visual edits

There are a few ways to undo an edit:

• If you haven’t yet added the edit to the batch, click outside the element or press ESC. The element reverts to how it looked before you made any changes.
• If you added the edit to the batch but haven’t saved it yet, click Delete (trash can icon) next to the edit to remove it.
• If you already sent your batch and Bolt saved the edit, there’s no way to undo that edit alone. However, you can use your project’s version history to roll back a batch of edits.