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

# Edit Text and Styles by Clicking

> Use Visual Edit to change words and styles right on the page, without the AI

**Visual Edit** lets you change your site by clicking on it: double-click a sentence to rewrite it, or pick a new size or color from a panel. Changes save on their own, and no AI is involved, so they are instant and use no credits.

In this example we rewrite the sentence under the Northwind headline, try a bigger text size, and undo it.

## Turn on Visual Edit

**1. Click Visual Edit**

In the toolbar above the preview, click **Visual Edit**.

![The Visual Edit button outlined in the toolbar above the preview](https://mintcdn.com/locusdigital/HHtyEzypiRRWLDpM/images/how-tos/site-builder/ve-01-button-closeup.webp?fit=max\&auto=format\&n=HHtyEzypiRRWLDpM\&q=85\&s=d89c8d1788b3d21065513a4421367957)

![The builder with the Visual Edit button outlined in the toolbar above the preview](https://mintcdn.com/locusdigital/HHtyEzypiRRWLDpM/images/how-tos/site-builder/ve-01-button.webp?fit=max\&auto=format\&n=HHtyEzypiRRWLDpM\&q=85\&s=23293002a39ba0f25651114b5f20b714)

**2. See the editing panel**

The chat on the left is replaced by the editing panel. Until you pick something, it says **Click an element in the preview to edit its styles, or open the Navigator.** As you move the mouse over the page, each part of it is outlined and labeled.

![The builder in Visual Edit: an empty editing panel on the left and the Northwind home page on the right](https://mintcdn.com/locusdigital/HHtyEzypiRRWLDpM/images/how-tos/site-builder/ve-02-mode-on.webp?fit=max\&auto=format\&n=HHtyEzypiRRWLDpM\&q=85\&s=140193217f43c726213c4919e7248c8b)

The thin strip of icons on the far left switches the panel between the **Style inspector**, the **Navigator** (a list of everything on the page), **Pages**, **Components**, a **Page audit**, and **Back to chat**.

## Change the words

**1. Click the text you want to change**

Click once on the text. It gets a blue outline and a label such as **p · page.tsx · Double-click to edit**, and the panel on the left shows its styles.

![The sentence under the Northwind headline outlined in blue, with the label Double-click to edit and a small card with AI and Font tabs](https://mintcdn.com/locusdigital/HHtyEzypiRRWLDpM/images/how-tos/site-builder/ve-03-selected-closeup.webp?fit=max\&auto=format\&n=HHtyEzypiRRWLDpM\&q=85\&s=7dd6eb388c7e816dc360a693fe4ff7e0)

![The builder in Visual Edit with the sentence selected in the preview and the Style inspector open on the left](https://mintcdn.com/locusdigital/HHtyEzypiRRWLDpM/images/how-tos/site-builder/ve-03-selected.webp?fit=max\&auto=format\&n=HHtyEzypiRRWLDpM\&q=85\&s=82cb0926c68a50e9de8de95d3ac00096)

A small card also opens next to it. Its **AI** tab sends a request about this part of the page to the AI chat, for example "make this shorter". That is a normal AI request, and Visual Edit closes so you can watch it work.

**2. Double-click to edit it in place**

Double-click the text. A hint appears under it: **Enter to save · Esc to cancel**.

![The sentence in edit mode with the hint Enter to save, Esc to cancel](https://mintcdn.com/locusdigital/HHtyEzypiRRWLDpM/images/how-tos/site-builder/ve-04-editing-closeup.webp?fit=max\&auto=format\&n=HHtyEzypiRRWLDpM\&q=85\&s=f107754a129414d1bf9860a031472578)

**3. Type the new text**

Select the old words and type the new ones. For Northwind we wrote: "We travel to the source, roast in small batches, and ship every bag fresh to your door."

![The sentence now reading We travel to the source, roast in small batches, and ship every bag fresh to your door.](https://mintcdn.com/locusdigital/HHtyEzypiRRWLDpM/images/how-tos/site-builder/ve-05-typed-closeup.webp?fit=max\&auto=format\&n=HHtyEzypiRRWLDpM\&q=85\&s=3c5ffdc50b8b0968429e1dd257f135fb)

**4. Press Enter to save**

Press **Enter** (or click anywhere else on the page). The toolbar shows **Saving...** for a moment. That is all: there is no Save button. Press **Esc** instead if you want to throw the edit away.

![The toolbar showing Saving...](https://mintcdn.com/locusdigital/HHtyEzypiRRWLDpM/images/how-tos/site-builder/ve-06-saved-closeup.webp?fit=max\&auto=format\&n=HHtyEzypiRRWLDpM\&q=85\&s=b05920bfb661a4acbe53d7da5dc20cf9)

## Change a style

With something selected, the panel on the left shows its styles. The **Text** section has the font, **Size**, **Weight**, line and letter spacing, alignment and more. Further down are **Colour & fill**, **Spacing**, and sections for layout, borders, effects and motion.

**1. Pick a new value**

For Northwind we tried a bigger size for the sentence: under **Size**, we clicked **xl** (it was **lg**).

![The Size buttons in the Text section, with lg selected and xl outlined](https://mintcdn.com/locusdigital/M_JYGUPhEpPH7WWL/images/how-tos/site-builder/ve-07-size-before-closeup.webp?fit=max\&auto=format\&n=M_JYGUPhEpPH7WWL\&q=85\&s=582115ef2f9ff8a9ca91916cfa0750e1)

The page changes right away, and the change saves on its own a moment later.

![The editing panel with xl selected and the sentence on the page now larger, wrapping onto three lines](https://mintcdn.com/locusdigital/M_JYGUPhEpPH7WWL/images/how-tos/site-builder/ve-08-size-after-closeup.webp?fit=max\&auto=format\&n=M_JYGUPhEpPH7WWL\&q=85\&s=caed880e86a182ea9556d149825902d2)

> [!TIP]
>
> At the top of the panel, **Styling** has **All**, **Phone only**, **Tablet** and **Desktop**. Choose **Phone only** to change how something looks on phones without touching the desktop design. **State** lets you style **Hover**, **Focus** and **Pressed** separately, for example a button's color when the mouse is over it.

## Undo a visual change

The bigger size made the sentence wrap onto three lines with one word on the last line, so we took it back.

**1. Click the undo arrow**

While Visual Edit is on, undo and redo arrows appear in the toolbar. Click the undo arrow to take back the last change. Each click undoes one more, text edits included.

![The undo arrow outlined in the Visual Edit toolbar](https://mintcdn.com/locusdigital/M_JYGUPhEpPH7WWL/images/how-tos/site-builder/ve-09-undo-button-closeup.webp?fit=max\&auto=format\&n=M_JYGUPhEpPH7WWL\&q=85\&s=4e0640a4bb55786beadaa2febd7fc6c0)

![The sentence back at its original size on two lines, still with the new wording](https://mintcdn.com/locusdigital/M_JYGUPhEpPH7WWL/images/how-tos/site-builder/ve-10-after-undo-closeup.webp?fit=max\&auto=format\&n=M_JYGUPhEpPH7WWL\&q=85\&s=e4359cde2b2b25609229c2ea4f40f7ee)

## Turn off Visual Edit

Click the Visual Edit button again (it is purple while Visual Edit is on), click **Back to chat** at the bottom of the icon strip, or press **Esc** twice.

![The purple Visual Edit button outlined, next to the undo and redo arrows](https://mintcdn.com/locusdigital/M_JYGUPhEpPH7WWL/images/how-tos/site-builder/ve-12-exit-closeup.webp?fit=max\&auto=format\&n=M_JYGUPhEpPH7WWL\&q=85\&s=72570c832abe6f69061ff79542b7586d)

> [!NOTE]
>
> Like changes from the chat, visual edits are saved to **Your site** but are not live until you [publish](/how-tos/site-builder/publish).

## When to use Visual Edit, and when to ask the AI

| Use Visual Edit for | Ask the AI for |
| - | - |
| Fixing a typo or rewording a sentence | Adding a new section or page |
| Trying a different size, color or spacing | Changes across many pages at once |
| Small changes you want to see instantly | Anything that needs new features, like a form |

## Next

> **[4. Add a new page](/how-tos/site-builder/add-a-page)**
>
> Ask the AI for a new FAQ page and link it from the footer.


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