Watch Now: Using Builder's GenUI with Your Design System

Announcing Visual Copilot - Figma to production in half the time

Builder logo
builder.io
Contact SalesGo to App

Watch Now: Using Builder's GenUI with Your Design System

Announcing Visual Copilot - Figma to production in half the time

Builder logo
builder.io

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

The Visual Editor is Builder's core interface for creating, editing, and managing content visually through an intuitive drag-and-drop experience. It provides a comprehensive set of tools organized into tabs that allow you to build layouts, style content, add interactivity, and manage complex page structures without writing code.

To get to the Visual Editor:

  1. Log into Builder and go to Content.
  2. Open a content entry. Opening a content entry automatically launches the Visual Editor.

If you've never used the Visual Editor before, try some of these options:

  • Chat with the AI: use the Generate tab to create and iterate
  • Add content blocks: use the Insert tab to drag blocks like Text, Images, and Buttons directly onto your work area
  • Organize your layout: the Layers tab helps you manage and structure your content hierarchy
  • Style your design: the Style tab provides all the visual controls you need for spacing, colors, typography, and more
  • Add interactivity: the Data tab enables dynamic content and user interactions
  • Configure settings: the Options tab offers block-specific controls and advanced properties
  • For Publish, publish your content: go live or schedule your content when ready
  • For Fusion, share your work or submit PRs: get a shareable link for teammates or submit PRs for real code updates to your codebase

Start with basic blocks and styling, then add complexity with custom components, dynamic data, and interactive features.

The video below shows opening a content entry — which launches the Visual Editor — as well as a brief demonstration of where the main features are located.

Connect to Jira and Confluence through OAuth authentication. Once connected, Projects can:

  • Access Jira tickets and Confluence
  • Automatically fix issues

More built-in integrations, such as Google Drive, Supabase, and Zapier are in active development.

Dive deep into all the tabs and features of the Visual Editor by going through the Visual Editor documentation. If this is your first time in the Visual Editor, start with Insert tab to learn how to add blocks to your layout.

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

  • Platform Overview

    AI Overview

  • Integrations

  • What's New

  • Figma to Code Guide

  • Composable Commerce Guide

  • Headless CMS Guide

  • Headless Commerce Guide

  • Composable DXP Guide

  • Design to Code

  • Blog

  • Knowledge Base

  • Community Forum

  • Partners

  • Templates

  • Success Stories

  • Showcase

  • Resource Center

    Glossary

© 2025 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Compliance

Cookie Preferences

Gartner Cool Vendor 2024