.mint-aspect-video {
    aspect-ratio: 16 / 9
}
.mint-w-full {
    width: 100%
}

Hero component layout

Preview different screen sizes

How to build a responsive layout

Learn to build responsive designs that look good across desktop and mobile devices.

Desktop and mobile

Makeswift Docs

Makeswift is a composable visual page builder designed to unlock speed and creativity for marketing teams.

Introduction

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 basics

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.

Layouts

Makeswift leverages the power of React to give you unparalleled flexibility and control over your website's design and functionality on an ongoing basis.

Components

Theming is the concept of creating a style palette for your website. With [site colors](/product/site/colors) and [text styles](/product/site/text-styles) you can standardize the available styles for all users in your workspace to use.

Theming

 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.

Files

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.

Responsive design

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.

Localization

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.

Publishing

Quickstart

To best understand Makeswift, there are a few core concepts for which to establish common vocabulary.

Concepts

Environments

An API route for Makeswift that adds support for [preview mode](https://nextjs.org/docs/pages/building-your-application/configuring/preview-mode), [on-demand revalidation](https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation), and other features that make Makeswift work seamlessly with your Next.js app.

MakeswiftApiHandler

BigCommerce x Catalyst

Learn the basics of building with Makeswift, including components, theming, responsive design, and publishing.

Creating your site

Learn how to use and customize components in Makeswift.

Component basics

Learn about how Makeswift manages colors and text styles and how to use them in your site.

Colors and text styles

Learn how to work with global components in Makeswift.

Customizing the navbar

Learn more about what you can do next with your Makeswift site.

Next steps

Learn how to troubleshoot working with cookies inside the Makeswift Visual Builder.

Cookies in Makeswift

Billing

Plans

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.

User settings

Settings

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.

Colors

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.

Text styles

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.

Hosting

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.

Domains

Snippets are blocks of code shared at the site level that can be added to your pages. Code that is not visual, such as Google Analytics, Facebook pixels, or custom CSS, should be placed into snippets. We recommend using separate snippets for each block of code to keep things flexible and easy to find.

Snippets

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.

Redirects

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. 

Sitemaps

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`.

Paths

**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/SEO).

Metadata

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.

Width

Margin is the space between elements, similarly to [padding](/product/component/property-controls/padding) it allows you to create spacing around elements, ensuring proper alignment, readability, and visual balance within a layout.

Margin

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.

Padding

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.

Align items

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.

Backgrounds

Corners, or border radius, is used to create rounded corners on elements by defining the radius of the element's corners.

Corners

Border is used to define the boundary around an element, providing visual separation and emphasis within a page.

Border

Animations add dynamic movement to your pages, enhancing the user experience. You can apply animations to a container (e.g., a box or section) and its direct child elements

Animations

The gap controls allow you to easily adjust the spacing between elements within a box.

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.

Shadows

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.

Height

Visibility allows you to hide elements placed directly within a box. The visibility panel is a visual representation of the box's layout.

Visibility

App Router

Pages Router

This guide walks you through setting up localization for your Makeswift site so you can visually customize your site for different locales.

Learn how to deploy your Makeswift application.

Overview

Learn how to deploy your Makeswift application to Vercel.

Vercel

Learn how to deploy your Makeswift application to Netlify.

Netlify

Learn how to deploy your Makeswift application with Docker.

Docker

Learn how to create built-in components that integrate with Makeswift.

Built-in components

Configuring cookies for use within the Makeswift Visual Builder

Setting Cookies

Builder isn't loading

Learn how to identify and diagnose layout shifts on initial page load in your app

Layout shift on initial page load

Upgrading to 0.24.0

Upgrading to 0.23.0

Upgrading to 0.22.0

Upgrading to 0.21.0

Upgrading to 0.20.0

Upgrading to 0.19.0

Upgrading to 0.18.0

Upgrading to 0.15.0

Upgrading to 0.14.0

Upgrading to 0.13.0

Upgrading to 0.9.0

The `<Page>` component takes a Makeswift snapshot and renders React elements using [components registered](/developer/reference/runtime/register-component) with the runtime.

<Page>

The `<MakeswiftComponent>` component takes a `MakeswiftComponentSnapshot` (returned from calling [getComponentSnapshot](/developer/reference/client/get-component-snapshot)) and renders React elements using [components registered](/developer/reference/runtime/register-component) with the runtime.

<MakeswiftComponent>

The `<Slot>` component takes a `MakeswiftComponentSnapshot` (returned from calling [getComponentSnapshot](/developer/reference/client/get-component-snapshot)) and renders either a fallback or an editable slot.

<Slot>

The `<ReactRuntimeProvider>` component takes a Makeswift runtime and provides it to the [`<Page>`](/developer/reference/components/page) component for rendering snapshots.

<ReactRuntimeProvider>

Adds a Checkbox panel in the Makeswift builder to visually edit a `boolean` prop.

Checkbox

Adds a Color picker panel in the Makeswift builder to visually edit a RGBA `string` prop.

Color

Adds a Combobox panel in the Makeswift builder to visually edit a generic prop from a list of options.

Combobox

The `Group` control allows you to define and visually edit a group of properties and replaces the deprecated [Shape](/developer/reference/controls/shape) control.

Group

Adds an Image panel in the Makeswift builder to visually edit an image prop.

Image

The `Font` control allows you select a `fontFamily`, `fontStyle`, and `fontWeight`.

Font

Adds a Link panel in the Makeswift builder to visually edit a `LinkValue` prop.

Link

Adds a List panel in the Makeswift builder to visually edit an `array` of items.

List

Adds a Number input in the Makeswift builder to visually edit a `number` prop.

Number

Adds a Rich Text control in the Makeswift builder to visually edit a `ReactNode` of text.

RichText

Adds a Select option (dropdown) to a component in the Makeswift builder to visually select a `string` value.

Select

Add a Slot in the Makeswift builder to visually drop in a `ReactNode`.

Slot

Add a Style control to your component in the Makeswift builder to visually edit a CSS class `string` prop.

Style

Adds a multiline Text Area to your component in the Makeswift builder to visually edit a `string` prop.

TextArea

Adds a single-line Text Input panel in the Makeswift builder to visually edit a `string` prop.

TextInput

The `Makeswift` client is used to fetch data from the Makeswift API.

constructor

An instance method that provides data about the pages you've created within Makeswift

getPages

An instance method of the Makeswift [client](/developer/reference/client/constructor) that fetches a snapshot of a Makeswift page at a given path. This snapshot is only intended to be rendered by the `<Page>` component.

getPageSnapshot

An instance method of the Makeswift [client](/developer/reference/client/constructor) that fetches a snapshot of a Makeswift component by its `id`. This snapshot is only intended to be rendered by [`<MakeswiftComponent>`](/developer/reference/components/makeswift-component) and [`<Slot>`](/developer/reference/components/slot).

getComponentSnapshot

A static method on the `Makeswift` class that returns the current version of the Makeswift site. This method is currently only used when calling `getPageSnapshot` and using **Pages Router** in Next.js.

getSiteVersion

The `ReactRuntime` is the bridge between Makeswift and your app. It tells the Makeswift builder about the schema of your components and which breakpoints to use.

Adds your components to the Makeswift builder.

registerComponent

A function that returns the current version of the Makeswift site. This function is currently only used when calling `getPageSnapshot` when using **App Router** in Next.js.

An instance method that provides SEO information about the pages created within Makeswift. You can combine the results of `getSitemap` with SEO information for your hardcoded pages to create a sitemap.

Getting started

The Visual Builder

Guides

Settings

Desktop and mobile

Hero component layout

Preview different screen sizes

How to build a responsive layout

Getting started

The Visual Builder

Guides

Settings

​Hero component layout

​Preview different screen sizes

​How to build a responsive layout

Hero component layout

Preview different screen sizes

How to build a responsive layout