---
title: "Visual Editor: change your site on the page | Briks"
url: https://briks.dev/docs/visual-editor
description: "Click anything on your own page to change its words, links, pictures, look, sections and pages, work on it with your team, then publish with no credits used."
last_updated: 2026-10-08
---

# Visual Editor: change your site on the page

The Visual Editor opens your site's own page beside a panel, the way a design tool works. Click anything to change its words, where it leads, its picture or its look for phones, tablets and desktops; add, move, copy or hide elements, sections and pages; and set the whole site's colours and faces. Your changes wait in a draft your team shares and go live when you publish, with no credits used. It comes with paid plans.

10 minute read Checked against the studio on 8 October 2026

## Open it

Where

1. Projects
2. Your project
3. Visual Editor

The **Visual Editor** tab sits beside **Studio** in a workspace on a paid plan; on Free the tab doesn't show. The editor fills the window, and the arrow at the top left goes back to the project. Across the top are:

| In the bar | What it does |
| --- | --- |
| **Open layers** | Opens and closes **Layers**, the page section by section. |
| **Pages** | Picks the page to work on, and adds, renames, moves and deletes pages. |
| **Add** | Adds an element or a section. The A key does the same. |
| Undo and redo arrows | Step back and forward through your changes. ⌘Z and ⇧⌘Z do the same. |
| **Changes** | Lists each change waiting to be published, each with **Drop this change**. |
| **Comments** | Comments pinned to elements on the page. |
| **History** | The site's versions, to look at one or restore it. |
| **Publish** | Reads **Publish 3 changes**, for example. Puts the draft live. |
| **Desktop**, **Tablet**, **Phone** | The width you see the page at: 1440, 834 or 390 pixels. |
| **Use the page** | Lets clicks reach the site, to open its menu or a pop-up and choose inside it. Press P to go back to editing. |
| The ⋯ menu | **Keyboard shortcuts** and **Discard draft**. |
| **Open the page** | Opens the live page in a new tab. |

Good to know

A site published before the Visual Editor came needs one publish before the editor can read it. If the page says “This page has not answered the editor. Publish the site once, then open the editor again.”, publish once from the Studio and open the editor again.

## Choose what to change

- Click anything on the page, or find it in **Layers**. Open a row's arrow to see what sits inside it; choosing on the page opens the way down to it.
- The trail at the top of the panel names what it sits in. Click a step to choose that instead, or press Escape.
- Shift-click to choose several. A change to the look goes to all of them.
- When the same element repeats, such as the cards of a list, they all light up, and a change to the look changes them all. The words of each are its own.
- Right-click anything, or press Shift+F10, for its menu.

### The right-click menu

| Item | What it does |
| --- | --- |
| **Edit text** | Type over the words on the page. |
| **Rewrite with AI** | **Rewrite**, **Shorter**, **Longer**, **Friendlier tone**, **More formal tone** or **Bolder tone**, each up to 0.20 credits. See the new words, then **Keep**, **Try again** or **Discard**. |
| **Replace picture** or **Replace video** | Choose another from your media library. |
| **Alt text…**, **Link…**, **Style…** | Open that part of the panel. |
| **Ask AI** | **New design for this section**, **Fix the layout** or **Ask about this…**. See Ask AI and the builder. |
| **Move up**, **Move down**, **Move out of its container**, **Move into the next container** | Move it among what's beside it, or out of or into a box. |
| **Select parent**, **Select section** | Choose what it sits in, or its whole section. |
| **Lock** | Stops it being chosen on the page by accident. The same item frees it again. |
| **Duplicate**, **Copy style**, **Paste style** | Copy it, or carry its look to another element. |
| **Show** | **Hide on phone**, **Hide on tablet** or **Hide everywhere**. |
| **Section** | **Quick edit section…**, **Add section above…**, **Add section below…**, **Move section up**, **Move section down**, **Duplicate section** and **Section background…**. |
| **Comment**, **Check the page…** | Pin a comment to it, or check the page for problems. |
| **Delete** | Removes it. On a whole section it reads **Remove from page**. |

An item that can't apply stays dimmed and says why. While you type, a small bar offers **Bold**, **Italic**, **Link** and **Line break**.

## Words and links

1. Double-click the words

   Where: Page

   Type over them on the page. Enter keeps them; Escape puts them back. Or type them under **Content** in the panel.

2. Change where it leads

   Where: Link

   A link or button leads to a **Page** of the site, a **Section**, a **Web address**, an **Email**, a **Phone** number or a **File**, and can **Open in a new tab**.

3. Check it at each width

   Where: Bar

   Switch between **Desktop**, **Tablet** and **Phone** to see how the words wrap.

Words kept in your site's details, such as its email address or its name, change everywhere they show, and the panel says how many places that is. The editor warns about a dash used as punctuation and offers a comma, and about a button whose words wrap onto two lines. **Quick edit** in the panel lists every word and picture of one section in a single form.

## The look

The panel has five tabs: **Element**, **Motion**, **Quick edit**, **Site** and **Check**. Under **Element**, **Look** holds **Layout**, **Space inside** and **Space outside**, **Text**, **Fill**, **Stroke** and **Effects**. A value set at the width you are looking at shows in full; one carried up from a smaller width shows greyed, and hovering a field shows its clear button.

| You want | Do this |
| --- | --- |
| A smaller headline on phones only | Switch to **Phone**, then choose a smaller **Size** under **Text**. Tablets and desktops keep theirs. |
| Something hidden on phones | Right-click it and choose **Show**, then **Hide on phone**. |
| A colour of the site's own | Under **Fill**, click a swatch. Each is painted as your site paints it, and the panel says how well the words read on their ground. |
| More space inside | Drag a green handle on the page, or set it under **Space inside**; the frame button there opens each side. |
| A change on hover | Choose **On hover** at the top of the look, then set it. Point at it on the page to see it. |
| Something that moves in | Under **Motion**, pick an **Entrance** such as **Fade**, **Rise** or **Slide from the left**, its **Time** and **Wait**, and press **Play** to see it once. |

Colours are your site's own roles, never a colour of their own, so the site stays in step. Classes the panel does not set are kept as they are, listed under **Kept as written**.

The **Site** tab sets what every section reads: its **Colours**, its **Type** for headlines and text, **Text styles**, **Buttons**, **Boxes**, and under **Page** its mode, corners, width and rhythm. The × beside a setting returns it to your site's own design.

## Add and arrange

- **Add** offers **Section**, **Text**, **Heading**, **Button**, **Picture**, **Video**, **Icon**, **Divider**, **Form** and **Embed**. Click one to add it where you chose, or drag it to where it should land.
- An **Embed** shows a page from another website. Maps and players from Google, YouTube, Vimeo, Spotify, SoundCloud and Calendly work on every site; any other website must be added first under **Settings**, **Preferences**, **Allowed websites**.
- **+ Add section** between two sections offers **Designed** (free, the sections Briks builds with, in your site's colours), **Blank** (free) or **Generate with AI**, about 5 credits: your words go to the builder as a change.
- **Picture** in the **Element** tab replaces it with **Replace from your media**, sets its **Alt text** (or marks it **Decorative, nothing to read aloud**), crops it and sets the point that stays in view at each width. **Section background…** sets a colour, gradient, picture or video behind a section.
- Picture swaps join the draft and go live with your other changes.
- In **Layers**, a section's row on the home page moves it up or down, copies it or hides it, and hidden sections are listed under **Hidden from this page** to show again. On other pages, a section's row moves it or takes it off the page. **Rename** gives a layer a name of your own, which is only for the editor and never published.

## Pages

**Pages** lists the site's pages. **Add page** starts a **Blank page** or a **Copy of a page**, with its **Title** and **Address**. Each page's menu has **Search and share** (its **Search title**, **Search description**, **Hide from search engines** and **Share picture**), **Rename**, **Duplicate**, **Move up**, **Move down**, **Hide from menu** and **Delete**. Deleting a page asks where links to it should lead instead. Page changes wait in the draft like any other.

## Work on it together

- **One shared draft.** Your changes are saved to the project's draft a moment after you make each one, so they survive a reload, a closed tab or another device, and everyone who opens the editor sees them. The bar says **Draft saved · not live yet**, with when and by whom. If someone else changed the draft since you opened it, a bar asks you to **Reload** before you go on.
- **Who else is here.** The faces of others with the editor open sit in the bar. Hover one to see the page and element they are on; their chosen element is outlined in their colour. Nothing is locked.
- **Comments.** Choose an element and press C, or right-click and choose **Comment**. Type @ to name someone. A comment is up to 2,000 characters, is pinned to the element, and has **Reply**, **Resolve** and **Open again**. Everyone in the workspace can comment, Viewers included; only Editors, Admins and Owners can resolve. The bell tells everyone, and people you name also hear it in their chats with the Briks bot.

Viewers can open the editor to look through the site and comment. The page says “You can look through this site here. Your role in this workspace can't change it.”

## Ask AI and the builder

For something the panel does not do, such as a new element or another layout, **Ask AI** in the right-click menu, or **Ask the builder** at the foot of the **Element** tab, sends your words to the builder about the element you chose, as a normal change that uses credits:

- **New design for this section** and **Fix the layout** show what the work usually takes against your balance before you send, such as **Design it for about 5 credits**. The change builds and publishes as a Studio message does, and **Versions** takes it back.
- **Ask about this…** answers a question about the element here, free, without building anything.
- Publish or discard the draft first: the builder works from the published site, so the editor asks you to before it sends.
- **Write alt text** in **Picture** is free when a description of the picture is already stored, otherwise up to 0.10 credits. **Use this** keeps it.

The **Check** tab looks at the page at the width you are on for pictures without alt text, words hard to read, headings out of order, reading order, and links and buttons without a name. Checking is free; a fix marked **Uses credits** goes to the builder.

## Publish, or change your mind

- Nothing goes live until you publish. A draft holds up to 300 changes.
- **Publish** writes the changes into your site's code and publishes it as a new version, usually in about half a minute, with no credits used. Publishing empties the draft.
- If a change can't be made, nothing is published, and the editor says which and why.
- **Drop this change** in **Changes** removes one. **Discard draft** in the ⋯ menu drops them all, for everyone editing the site, and asks first.
- **History** lists the site's versions. **Preview** shows one as it was published, and **Restore** puts it back live; your draft is kept. See [Versions, undo and redo](https://briks.dev/docs/versions).

## Keyboard shortcuts

| Keys | What they do |
| --- | --- |
| Escape | Choose what the element sits in, or put typed words back. |
| Arrow down, left and right | Choose the first element inside, or the one beside it. |
| Enter or a double-click | Type the element's words. |
| ⌘B, ⌘I, ⌘K | Bold, italic or a link, while typing. |
| Alt with the up or down arrow | Move it, or its list item. |
| ⌘D, Backspace | Duplicate or delete it. |
| ⌘Alt+C, ⌘Alt+V | Copy its style, or paste the style. |
| A, C, P | Add, comment, or use the page. |
| ? | Show every shortcut. |

On Windows, Ctrl takes the place of ⌘.

### Does the Visual Editor use credits?

Changes made in it, and publishing them, use none. Only the AI items do: rewriting words (up to 0.20 credits), writing alt text that isn't stored yet (up to 0.10 credits), and anything sent to the builder, which is charged as a change.

### Who can use it?

Everyone in a workspace on a paid plan. Owners, Admins and Editors change and publish; Viewers look through and comment.

### Why can I not type some words?

Their words are worked out in the site's code, or sit among other elements. Choose each part on its own, or ask the builder.

### Can two of us edit at once?

Yes. You share one draft, see each other in the bar, and the editor asks you to reload if someone changed the draft since you opened it.

## Read next

- [Working on a project **Making changes** How to change your site by writing to Briks: what to say, adding pictures, what a change holds and costs, inner pages, queued requests and fixing a miss.](https://briks.dev/docs/making-changes)
- [Working on a project **Versions, undo and redo** Every build and change is saved as a version of your site. Undo a change, redo it, or put any earlier version back live exactly as it was, with no credits held.](https://briks.dev/docs/versions)
- [Your site's features **Media library** Upload your own pictures and videos once to the workspace media library, place them on any project from the prompt box, and swap pictures on a site for free.](https://briks.dev/docs/media-library)
- [Getting started **Credits and plans** How Briks credits work: holds of 50 and 5, charges for the work done, estimates and builds that wait, what happens at zero, and what each plan includes.](https://briks.dev/docs/credits-and-plans)

Still stuck?

Write to [hello@briks.dev](mailto:hello@briks.dev) with your project's name and what you expected to see. A screenshot helps.