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

# Docs

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

## Docs

- [Introduction](https://docs.makeswift.com/product/docs/getting-started/introduction.md): Makeswift is a composable visual page builder designed to unlock speed and creativity for marketing teams.
- [Creating your site](https://docs.makeswift.com/product/docs/getting-started/quickstart/creating-your-site.md)
- [Component basics](https://docs.makeswift.com/product/docs/getting-started/quickstart/component-basics.md): Learn how to use and customize components in Makeswift.
- [Colors and text styles](https://docs.makeswift.com/product/docs/getting-started/quickstart/colors-and-text-styles.md): Learn about how Makeswift manages colors and text styles and how to use them in your site.
- [Customizing the navbar](https://docs.makeswift.com/product/docs/getting-started/quickstart/customizing-the-navbar.md): Learn how to work with global components in Makeswift.
- [Desktop and mobile](https://docs.makeswift.com/product/docs/getting-started/quickstart/desktop-and-mobile.md): Learn to build responsive designs that look good across desktop and mobile devices.
- [Next steps](https://docs.makeswift.com/product/docs/getting-started/quickstart/next-steps.md): Learn more about what you can do next with your Makeswift site.
- [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.
- [Localization](https://docs.makeswift.com/product/docs/guides/localization/localizing-your-site.md): Localization involves adapting a website's content, layout, and functionality to meet the cultural, linguistic, and regulatory requirements of a specific target audience or geographic region. It goes beyond translation to ensure the website is effective and engaging for the local audience.
- [AI Translations](https://docs.makeswift.com/product/docs/guides/localization/ai-translations.md): Use AI to automatically translate your site content into one or more locales.
- [Previewing and sharing](https://docs.makeswift.com/product/docs/guides/previewing-and-sharing.md): Makeswift allows you to share previews of different versions of your site for enhanced collaboration and feedback.
- [Publishing](https://docs.makeswift.com/product/docs/guides/publishing.md): You can publish changes made to your site and push them to your live domain instantly. Makeswift also allows you to selectively publish individual site resources, such as colors and global components, without publishing content changes to pages.
- [SEO](https://docs.makeswift.com/product/docs/guides/SEO.md): Search Engine Optimization (SEO) is a critical practice for enhancing your website's visibility and ranking on search engine results pages. By optimizing your site's content and structure, you can attract more organic traffic, improve user experience, and help achieve your business goals. This article will guide you through essential SEO concepts and how to leverage the tools in Makeswift's builder to manage them.
- [Diagnostics](https://docs.makeswift.com/product/docs/guides/troubleshooting/diagnostics.md): Learn how to use the Diagnostics dialog in the Makeswift Visual Builder to share diagnostic information with support and your development team.
- [Cookies in Makeswift](https://docs.makeswift.com/product/docs/guides/troubleshooting/cookies.md): Learn how to troubleshoot working with cookies inside the Makeswift Visual Builder.
- [Copy & Paste Across Sites](https://docs.makeswift.com/product/docs/guides/the-visual-builder/copy-paste-across-sites.md): Duplicating content across sites in Makeswift.
- [Paths](https://docs.makeswift.com/product/docs/settings/page/paths.md): A path, or pathname is a string that identifies the location of a file or directory on a web server. It is part of the URL, after the domain, that specifies where an asset or page can be found such as `/about` or `/features`.
- [Metadata](https://docs.makeswift.com/product/docs/settings/page/metadata.md): **Metadata** is stored at the page level and is configured using the properties in the Page tab of the panels sidebar. Out of the box, Makeswift exposes some standard metadata properties that can be used for [SEO](/product/docs/guides/SEO).
- [Site](https://docs.makeswift.com/product/docs/settings/site/settings.md): 
- [Colors](https://docs.makeswift.com/product/docs/settings/site/colors.md): Colors allow you to define a color palette for your website. Colors are shared across all pages in a site ensuring a visually cohesive design throughout your site.
- [Text styles](https://docs.makeswift.com/product/docs/settings/site/text-styles.md): Text styles allow you to save fonts, color, and formatting for text and reuse them across your site. For example, you can create text styles for page titles, subheadings, and paragraph text. If you need to change the text styles on every page in your site, you can easily do so within any page using text styles.
- [Hosting](https://docs.makeswift.com/product/docs/settings/site/hosting.md): Hosting refers to where your website app instance is located. You can either use Makeswift's **default host** or create your own **custom host**. You'll choose which to use when logging into Makeswift for the first time or when creating a new site in a workspace.
- [Domains](https://docs.makeswift.com/product/docs/settings/site/domains.md): Domains are managed in your site settings. Each new site begins with a **makeswift.site** domain. Click "Connect your domain" or "+ Add domain" to add a custom domain.
- [Snippets](https://docs.makeswift.com/product/docs/settings/site/snippets.md): Snippets are blocks of HTML code shared at the site level that can be added to your pages. HTML code that is not visual, such as Google Analytics scripts, Facebook pixels, or custom CSS, should be placed into snippets. We recommend using separate snippets for each semantically distinct block of code to keep things flexible and easy to find.
- [Redirects](https://docs.makeswift.com/product/docs/settings/site/redirects.md): Redirects allow you to forward visitors from one URL to another. They are commonly used when a live page is taken offline to direct visitors to a different URL and prevent them from encountering a broken link.
- [Sitemaps](https://docs.makeswift.com/product/docs/settings/site/sitemaps.md): A sitemap is a file that provides information about the relationship between pages on your site. Search engines like Google read this file to crawl your site more efficiently.
- [Billing](https://docs.makeswift.com/product/docs/settings/workspace/billing.md)
- [Plans](https://docs.makeswift.com/product/docs/settings/workspace/plans.md)
- [Users](https://docs.makeswift.com/product/docs/settings/workspace/user.md): Users in a workspace have access to sites, files, and databases. Each user is assigned a role that determines their permissions within the workspace. User management is handled in your settings.
- [Login methods](https://docs.makeswift.com/product/docs/settings/user/login-methods.md)
- [Early Access](https://docs.makeswift.com/product/docs/settings/user/early-access.md)
- [Docs MCP Server](https://docs.makeswift.com/product/docs/ai-agent-setup.md): Connect the Makeswift docs to your AI agent so it can answer questions grounded in our documentation.