Affinity Design
Client Guide

Live Builder

Use Live Builder for direct visual editing on React websites

What Live Builder Is

Live Builder is the visual editor used for many React websites.

It is built for faster, more direct editing when you want to work on the page itself.

Best Uses

Use Live Builder when you want to:

  • click and edit content directly
  • move quickly between pages and sections
  • update forms or SEO areas while seeing the page
  • make visual changes with a more live feel

Typical Flow

  1. Open the website detail page.
  2. Click Website Builder or Open builder.
  3. If your site is a React site, Live Builder opens.
  4. Click the part of the page you want to change.
  5. Make the edit.
  6. Review the result.
  7. Publish when ready.

When Live Builder Is Better Than Snapshot Builder

Live Builder is often better when:

  • you want faster visual feedback
  • the page is React-based
  • you want a more direct editing feel

Good Habit

Use small, clear edits first. Review the page after each meaningful change so the final result stays clean.

On this page