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

# The Visual Builder

> Documentation for Makeswift — the composable visual page builder for marketing teams and developers

## Docs

- [The basics](https://docs.makeswift.com/product/docs/the-visual-builder/builder-basics.md): 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.
- [Pages Tab](https://docs.makeswift.com/product/docs/the-visual-builder/pages.md): View and manage your site's pages.
- [Layouts](https://docs.makeswift.com/product/docs/the-visual-builder/layouts.md): Layout refers to the composition of your page. Pages are in and of themselves components containing other components. The Makeswift builder gives you controls to organize and navigate layouts easily.
- [Elements](https://docs.makeswift.com/product/docs/the-visual-builder/elements.md): Elements are instances of [components](/product/docs/the-visual-builder/components) you manage in the [canvas](/product/docs/the-visual-builder/builder-basics). An Element can be as simple as a single button, or a complex section comprising of many panels, images, and text.
- [Components](https://docs.makeswift.com/product/docs/the-visual-builder/components.md): Makeswift leverages the power of React to give you unparalleled flexibility and control over your website's design and functionality on an ongoing basis.
- [Theming](https://docs.makeswift.com/product/docs/the-visual-builder/theming.md): Theming is the concept of creating a style palette for your website. With [site colors](/product/docs/settings/site/colors) and [text styles](/product/docs/settings/site/text-styles) you can standardize the available styles for all users in your workspace to use.
- [Files](https://docs.makeswift.com/product/docs/the-visual-builder/files.md): This guide provides an overview of the file management and sorting features available in Makeswift. These features are designed to help you efficiently organize, manage, and locate your files within the platform.
- [Responsive design](https://docs.makeswift.com/product/docs/the-visual-builder/responsive-design.md): Responsive design refers to the optimization of your page designs for different screen sizes. You can switch device modes at the top center of the page builder browser bar to switch into that breakpoint.
- [Width](https://docs.makeswift.com/product/docs/the-visual-builder/panels/width.md): The width panel makes it easy to adjust the width of elements on your pages. With intuitive handles and inputs, you can quickly set exact pixel widths or percentages to get your layout just right.
- [Margin](https://docs.makeswift.com/product/docs/the-visual-builder/panels/margin.md): Margin is the space between elements, similarly to [padding](/product/docs/the-visual-builder/panels/padding) it allows you to create spacing around elements, ensuring proper alignment, readability, and visual balance within a layout.
- [Padding](https://docs.makeswift.com/product/docs/the-visual-builder/panels/padding.md): Padding is the space created between a box's border and its contents. This differs from margin which is used to push elements away from each other.
- [Align items](https://docs.makeswift.com/product/docs/the-visual-builder/panels/alignment.md): Align items controls the vertical alignment of elements within a box. It ensures that elements are properly aligned, whether at the top, middle, or bottom, providing a balanced and aesthetically pleasing layout.
- [Backgrounds](https://docs.makeswift.com/product/docs/the-visual-builder/panels/backgrounds.md): The backgrounds panel allows you to add color or media behind content inside of a box. This can be used to create visual interest, separate content, or add depth to your design.
- [Corners](https://docs.makeswift.com/product/docs/the-visual-builder/panels/corners.md): Corners, or border radius, is used to create rounded corners on elements by defining the radius of the element's corners.
- [Border](https://docs.makeswift.com/product/docs/the-visual-builder/panels/borders.md): Border is used to define the boundary around an element, providing visual separation and emphasis within a page.
- [Animations](https://docs.makeswift.com/product/docs/the-visual-builder/panels/animations.md): Animations add dynamic movement to your pages, enhancing the user experience.
- [Gap](https://docs.makeswift.com/product/docs/the-visual-builder/panels/gap.md): The gap controls allow you to easily adjust the spacing between elements within a box.
- [Shadows](https://docs.makeswift.com/product/docs/the-visual-builder/panels/shadows.md): Boxes can have shadows to give them a more real-world, dimensional feel. Add shadows by clicking the “+” in the “Shadows” panel located in the sidebar.
- [Height](https://docs.makeswift.com/product/docs/the-visual-builder/panels/height.md): Height allows you to set the height of a Box to be driven by its content or to stretch to match the tallest element in the same row.
- [Visibility](https://docs.makeswift.com/product/docs/the-visual-builder/panels/visibility.md): Visibility allows you to hide elements placed directly within a box. The visibility panel is a visual representation of the box's layout.