Editing text on your website

Every piece of text on your website can be changed: headlines, paragraphs, button labels, and menu links. This article walks through the three ways to edit text in the B12 Editor (asking the AI Agent, typing directly with Visual edit, and working in the code editor), then shows you how to style your text and make your changes live. Text editing works on every plan, and there's nothing to set up first.

Choosing the right editing method

• The AI Agent is best when you want text written or rewritten for you, or when the same change needs to happen in several places. You describe the change in plain language, and the AI Agent makes it.
• Visual edit is best for quick, small fixes: correcting a typo, updating a heading, or changing your phone number. You click the text and type the new version yourself.
• The Code editor gives you direct access to your site's files. It's the most precise option, and the right one if you're comfortable reading code, like HTML. In some cases, the text you want to change might be hidden in the code and won't be available in Visual edit.

Editing text with the AI Agent

Describe the change in plain language and the AI Agent makes it for you. There are two ways to ask: type your request in the chat, or select the text on your website first, so the AI Agent knows exactly which element you mean.

Sending a request in the chat

1. Open the Chat tab in the left panel.
2. Type what you'd like changed. The more specific your request, the more precise the result. Name the page, quote the exact text where you can, and say what should stay the same. Here are a few prompts to copy and adapt:
   

    

   Change the heading "[current heading]" on my [page name] page to "[new heading]". Don't change anything else.

   Rewrite the text on my [About] page so it sounds more [warm and welcoming]. Keep the same information and layout.

   Check every page of my website for spelling and grammar mistakes and fix any you find.

   A vague request (for example, "make my homepage text more exciting") invites broader changes than you might expect, sometimes including layout. If the AI Agent changes more than you wanted, you can restore a previous version of your site.

    

    

3. Press Enter to send your request. The AI Agent shows a task list while it works, then an AI edits card summarizing what changed.
   
4. Check the website preview on the right. Your new text appears there right away, already saved.

Selecting the text first

If it's easier to point at the text than to describe it, or if the text you clicked shows Content not editable, select it before you ask:

1. Click Visual edit in the chat input at the bottom of the left panel.
2. In the website preview on the right, click the text you want changed. The left panel switches to that element's settings.
   
   If a text element is selected, it shows up in the chat.
   
   
   You can also type your request directly in the pop-up that will appear.
   
   
   
   
   
3. Type your request in the chat input. You don't need to say where the text is, because the AI Agent knows which element you selected.
4. Press Enter to send. The AI Agent makes the change and saves it, the same as any other request.

Editing text with Visual edit

Visual edit lets you click any text on your site and type the replacement yourself. Here's how:

1. Click Visual edit in the chat input at the bottom of the left panel.
2. In the website preview on the right, click the text you want to change. The left panel switches to that element's settings.
3. In the Content box, edit the text. The preview updates as you type.
   
4. Click Save in the bar at the bottom of the left panel that reads "You have unsaved changes."

Some parts of your site are built as interactive components, and their text shows Content not editable when clicked. You can still change that text. Keep the element selected and ask the AI Agent, as described in Editing text with the AI Agent, or edit it in the code editor.

Styling your text

While an element is selected in Visual edit, the left panel also holds its styling controls. Scroll to Typography to adjust how the text looks:

• Font: choose Default, Sans, Serif, or Mono to give this element a different font family from the rest of your site.
• Weight and style: make the text lighter or heavier, from Thin through Bold to Black.
• Font size: pick a size from the dropdown. Each option shows its pixel value.
• Alignment: align the text left, center, right, or justified.
• Text case: switch between sentence case, title case, uppercase, and lowercase without retyping anything.
• Line height: adjust the space between lines of text.
• Letter spacing: adjust the space between individual letters.

Below Typography, the Text color setting changes the color of the selected text. It draws from your site's color palette, so your choice stays consistent with the rest of your design.

These controls affect only the element you've selected, and they save the same way as text edits: with the Save button in the unsaved-changes bar. To change fonts or colors across your whole site at once, use the Design panel instead. See Editing your website's style for a full walkthrough.

Editing text in the code editor

If you're comfortable reading HTML, you can edit your text at the source. Your site is built from real code files, and each page has its own file.

1. Click Code in the toolbar above the website preview.
2. In the file list, open the page you want to edit. Page files live in the src/pages folder and are named after the page, like about.astro.
   
3. Find the text and type your changes.
4. Click Save in the top-right corner of the editor.

Saving and publishing your text changes

Each editing method saves a little differently, and saving isn't the same as publishing. Here's how the three compare:

• AI Agent changes are applied and saved automatically as soon as the task finishes.
• Visual edit changes are saved when you click Save in the unsaved-changes bar at the bottom of the left panel.
• Code changes are saved when you click Save in the top-right corner of the editor.

Saved changes appear in the editor, but not on your live website yet. When you're happy with your text, click Publish in the top-right corner to make it live. Every saved change also creates a version of your site, so you can always go back.

Frequently asked questions

→Can the AI Agent write new text for me, not only edit what's there?

⇒Yes. Ask it to draft new content, for example "Write a short introduction for my Services page." It uses your business description for context, and you can edit the result afterward.

→How do I undo a text change I don't like?

⇒Every saved change creates a version of your website. In the chat, find the card for an earlier version and click Restore. Restoring doesn't consume AI credits.

→Why isn't my new text showing on my live website?

⇒Saved changes stay in the editor until you publish. If you've already published and still see old text, refresh the page in your browser.

→Can I edit text from my phone?

⇒Yes. Open the B12 Editor in your phone's browser and send your request to the AI Agent, the same way you would on a computer.

Next steps

• Editing your website with the AI Agent
• Editing your website's style
• Previewing and publishing your B12 website