> This page is for Product.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.makeswift.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

# The basics

> The Makeswift builder is where all of the magic of visual editing happens. It allows you to visually create and update enterprise-grade web experiences with intuitive tools at your disposal. Design beautiful layouts and easily customize your site to match your brand with bespoke components. What you see is what you get with the Makeswift Builder.

The Makeswift builder is where all of the magic of visual editing happens. It allows you to visually create and update enterprise-grade web experiences with intuitive tools at your disposal. Design beautiful layouts and easily customize your site to match your brand with bespoke components. What you see is what you get with the Makeswift Builder.

## Overall layout

The Visual Builder is composed of 4 sections:

#### Navigation Sidebar

Explore your pages and elements, and open files and settings.
![Makeswift builder Navigation Sidebar](/_fern-img/04498e08bed9c58d897cdbe083db647001696aa5c3e5edf5ecc56bff951190c1.webp)

#### Component Toolbar

Access components to add to the Canvas.
![ Makeswift builder
toolbar](/_fern-img/5e120ea447c1765f21b37651cb27456095ac2d336508400f1a8585544fe85a4c.webp)

#### Canvas

Build your pages and see them come to life with an exact preview.
![ Makeswift builder canvas](/_fern-img/06c6e34c60fa80adf2c54138674a5771972e50dc4d2b143f683840c2576695f0.webp)

#### Properties Sidebar

Edit properties of a page, site, or component.
![ Makeswift builder panels](/_fern-img/405a36f41c03791ebbe47981ed0b520ce1add42bb786b51ed4df53f0a6954598.webp)

## Build & Interact modes

In the Component Toolbar, you'll notice two modes that dictate how you can engage with the elements on your Canvas, **Build** and **Interact**.

### Build mode

Build mode is the default mode and is most likely where you'll spend the majority of your time in the Visual Builder. It allows you to customize your website visually by dragging and dropping components, rearranging them to build layouts, and editing their properties.

### Interact mode

Interact mode renders your site in a way that allows you to engage with any interactive element (e.g. buttons, links, etc.) without having to formally [Publish](/product/docs/guides/publishing) your site. This is particularly useful to expose and edit a piece of content that requires a button click to be shown. A good example of this would be content within an accordion.

## Elements Panel

The Elements Panel allows users to easily view and select individual components from your page. Nested components will be displayed in a hierarchical structure, making it easy to understand the page structure and relationship between components.

![Visual builder showing the elements
panel](/_fern-img/a90a08f6de33897e72486f4dc0cff5160f3a9ffb6cdb8c94b8157d078a3c8e64.webp)

## Multiplayer

Makeswift's multiplayer facilitates real-time collaboration for you and your team. You can see who is editing a page in real time right in the canvas.

## Copy & Paste

When creating a site in the Visual Builder, it's common to want to reuse content and layouts that you've previously created. You can use the Visual Builder's copy and paste feature to duplicate elements quickly.

To copy and paste a selected element, use the actions menu at the top right of the [Properties Sidebar](/product/docs/the-visual-builder/builder-basics), or by use keyboard shortcuts.

![Menu actions for component](/_fern-img/fe5d2cefd4c98498765e11feb2abb5bab7a096f58130232adc1d7951db27f137.webp)

* Copy a component `⌘ + C` - copies the selected element to your clipboard
* Paste a component `⌘ + V` - places the copied element in the [Canvas](/product/docs/the-visual-builder/builder-basics) (you choose exactly where to place it)

If you're copying and pasting across sites, any contained resources (like images, colors, global elements) will need to be remapped to the new site.
See our [Copy & Paste Across Sites](/product/docs/guides/the-visual-builder/copy-paste-across-sites) guide for more information.

## Help

If you have any questions about Makeswift or need to access our docs from the builder, click the “?” at the bottom left of the Navigation Sidebar.

![The Help menu in the Navigation Sidebar](/_fern-img/ad4a698bda5ee218008c17810ad63ad2b87362d0c7b24ae8d6213c9ea4089751.webp)

\


#### Contact support

Have an issue that you can't resolve from our docs? Submit a support ticket
and someone on our support team will be happy to help.

#### View docs

You probably know how to get to our docs already, but they're available here
if you ever need to access them quickly from the builder.

#### Diagnostics

Review technical details about your site, the page you're editing, and the
connection between the builder and your host, then copy or download them to
share with support. See [Diagnostics](/product/docs/guides/troubleshooting/diagnostics).

#### Shortcuts

Browse the keyboard shortcuts available in the Visual Builder.