> For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://docs.makeswift.com/developer/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 - [Quickstart](https://docs.makeswift.com/developer/docs/get-started/quickstart.md) - [App Router](https://docs.makeswift.com/developer/docs/get-started/installation/app-router.md) - [Pages Router](https://docs.makeswift.com/developer/docs/get-started/installation/pages-router.md) - [Concepts](https://docs.makeswift.com/developer/docs/get-started/concepts.md): To best understand Makeswift, there are a few core concepts for which to establish common vocabulary. - [Building a Card Component in Makeswift](https://docs.makeswift.com/developer/docs/guides/building-components/card.md): Learn how to create a built-in card component that integrates with Makeswift. - [Building an Accordion Component in Makeswift](https://docs.makeswift.com/developer/docs/guides/building-components/accordion.md): Learn how to create a built-in accordion component that integrates with Makeswift. - [App Router](https://docs.makeswift.com/developer/docs/guides/localization/app-router.md): This guide walks you through setting up localization for your Makeswift site so you can visually customize your site for different locales. - [Pages Router](https://docs.makeswift.com/developer/docs/guides/localization/pages-router.md): This guide walks you through setting up localization for your Makeswift site so you can visually customize your site for different locales. - [Overview](https://docs.makeswift.com/developer/docs/guides/deploying/overview.md): Learn how to deploy your Makeswift application. - [Vercel](https://docs.makeswift.com/developer/docs/guides/deploying/vercel.md): Learn how to deploy your Makeswift application to Vercel. - [Netlify](https://docs.makeswift.com/developer/docs/guides/deploying/netlify.md): Learn how to deploy your Makeswift application to Netlify. - [Docker](https://docs.makeswift.com/developer/docs/guides/deploying/docker.md): Learn how to deploy your Makeswift application with Docker. - [Set cookies](https://docs.makeswift.com/developer/docs/guides/how-to/set-cookies.md): Configuring cookies for use within the Makeswift Visual Builder - [Add fonts](https://docs.makeswift.com/developer/docs/guides/how-to/add-custom-fonts.md): Add fonts to your Makeswift & Next.js project. - [Multi-tenancy](https://docs.makeswift.com/developer/docs/guides/how-to/multi-tenancy/overview.md): Serve multiple Makeswift sites from a single Next.js application by mapping tenants to Site API keys. - [Subdomain-based routing](https://docs.makeswift.com/developer/docs/guides/how-to/multi-tenancy/subdomain-based.md): Route tenants using subdomains in a multi-tenant Makeswift application. - [Path-based routing](https://docs.makeswift.com/developer/docs/guides/how-to/multi-tenancy/path-based.md): Route tenants using URL path prefixes in a multi-tenant Makeswift application. - [Sandbox and Production Storefronts](https://docs.makeswift.com/developer/docs/guides/how-to/sandbox-and-production-storefronts.md): Run a sandbox and a production BigCommerce Catalyst storefront, each in its own store, and manage both as separate sites in a single Makeswift workspace. - [Builder isn't loading](https://docs.makeswift.com/developer/docs/guides/troubleshooting/builder-is-not-loading.md) - [Builder messages](https://docs.makeswift.com/developer/docs/guides/troubleshooting/builder-messages.md): Troubleshoot common error messages shown in the Makeswift builder - [Layout shift on initial page load](https://docs.makeswift.com/developer/docs/guides/troubleshooting/layout-shift.md): Learn how to fix a layout shift on initial page load in your app - [Tailwind styles are being overridden](https://docs.makeswift.com/developer/docs/guides/troubleshooting/tailwind-styles-being-overridden.md): Resolve issues with Tailwind v4 or other @layer-based CSS frameworks being overridden by CSS resets - [Environments](https://docs.makeswift.com/developer/docs/guides/environments.md) - [Upgrading to 0.29.0](https://docs.makeswift.com/developer/docs/guides/upgrading/0.29.0.md) - [Upgrading to 0.28.0](https://docs.makeswift.com/developer/docs/guides/upgrading/0.28.0.md) - [Upgrading to 0.27.0](https://docs.makeswift.com/developer/docs/guides/upgrading/0.27.0.md) - [Upgrading to 0.26.0](https://docs.makeswift.com/developer/docs/guides/upgrading/0.26.0.md) - [Upgrading to 0.25.0](https://docs.makeswift.com/developer/docs/guides/upgrading/0.25.0.md) - [Upgrading to 0.24.0](https://docs.makeswift.com/developer/docs/guides/upgrading/0.24.0.md) - [Upgrading to 0.23.0](https://docs.makeswift.com/developer/docs/guides/upgrading/0.23.0.md) - [Upgrading to 0.22.0](https://docs.makeswift.com/developer/docs/guides/upgrading/0.22.0.md) - [Upgrading to 0.21.0](https://docs.makeswift.com/developer/docs/guides/upgrading/0.21.0.md) - [Upgrading to 0.20.0](https://docs.makeswift.com/developer/docs/guides/upgrading/0.20.0.md) - [Upgrading to 0.19.0](https://docs.makeswift.com/developer/docs/guides/upgrading/0.19.0.md) - [Upgrading to 0.18.0](https://docs.makeswift.com/developer/docs/guides/upgrading/0.18.0.md) - [Upgrading to 0.15.0](https://docs.makeswift.com/developer/docs/guides/upgrading/0.15.0.md) - [Upgrading to 0.14.0](https://docs.makeswift.com/developer/docs/guides/upgrading/0.14.0.md) - [Upgrading to 0.13.0](https://docs.makeswift.com/developer/docs/guides/upgrading/0.13.0.md) - [Upgrading to 0.9.0](https://docs.makeswift.com/developer/docs/guides/upgrading/0.9.0.md) - [](https://docs.makeswift.com/developer/docs/reference/components/page.md): The `` component takes a Makeswift snapshot and renders React elements using [components registered](/developer/docs/reference/reactruntime/register-component) with the runtime. - [](https://docs.makeswift.com/developer/docs/reference/components/makeswift-component.md): The `` component takes a `MakeswiftComponentSnapshot` (returned from calling [getComponentSnapshot](/developer/docs/reference/client/get-component-snapshot)) and renders React elements using [components registered](/developer/docs/reference/reactruntime/register-component) with the runtime. - [](https://docs.makeswift.com/developer/docs/reference/components/slot.md): The `` component takes a `MakeswiftComponentSnapshot` (returned from calling [getComponentSnapshot](/developer/docs/reference/client/get-component-snapshot)) and renders either a fallback or an editable slot. - [](https://docs.makeswift.com/developer/docs/reference/components/react-runtime-provider.md): The `` component takes a Makeswift runtime and provides it to the [``](/developer/docs/reference/components/page) component for rendering snapshots. - [](https://docs.makeswift.com/developer/docs/reference/components/root-style-registry.md): The `` component provides support for Makeswift's CSS-in-JS runtime. - [Checkbox](https://docs.makeswift.com/developer/docs/reference/controls/checkbox.md): Adds a Checkbox panel in the Makeswift builder to visually edit a `boolean` prop. - [Code](https://docs.makeswift.com/developer/docs/reference/controls/code.md): Adds a Code editor in the Makeswift builder to visually edit a string of source code, with syntax highlighting. - [Color](https://docs.makeswift.com/developer/docs/reference/controls/color.md): Adds a Color picker panel in the Makeswift builder to visually edit a RGBA `string` prop. - [Combobox](https://docs.makeswift.com/developer/docs/reference/controls/combobox.md): Adds a Combobox panel in the Makeswift builder to visually edit a generic prop from a list of options. - [Group](https://docs.makeswift.com/developer/docs/reference/controls/group.md): The `Group` control allows you to define and visually edit a group of properties and replaces the deprecated [Shape](/developer/docs/reference/controls/deprecated/shape) control. - [IconRadioGroup](https://docs.makeswift.com/developer/docs/reference/controls/icon-radio-group.md): Adds an icon-based radio group panel in the Makeswift builder to visually select a `string` value from a set of icon options. - [Image](https://docs.makeswift.com/developer/docs/reference/controls/image.md): Adds an Image panel in the Makeswift builder to visually edit an image prop. - [Font](https://docs.makeswift.com/developer/docs/reference/controls/font.md): The `Font` control allows you select a `fontFamily`, `fontStyle`, and `fontWeight`. - [Link](https://docs.makeswift.com/developer/docs/reference/controls/link.md): Adds a Link panel in the Makeswift builder to visually edit a `LinkValue` prop. - [List](https://docs.makeswift.com/developer/docs/reference/controls/list.md): Adds a List panel in the Makeswift builder to visually edit an `array` of items. - [Number](https://docs.makeswift.com/developer/docs/reference/controls/number.md): Adds a Number input in the Makeswift builder to visually edit a `number` prop. - [RichText](https://docs.makeswift.com/developer/docs/reference/controls/rich-text.md): Adds a Rich Text control in the Makeswift builder to visually edit a `ReactNode` of text. - [Select](https://docs.makeswift.com/developer/docs/reference/controls/select.md): Adds a Select option (dropdown) to a component in the Makeswift builder to visually select a `string` value. - [Slider](https://docs.makeswift.com/developer/docs/reference/controls/slider.md): Adds a Slider input in the Makeswift builder to visually edit a `number` prop. - [Slot](https://docs.makeswift.com/developer/docs/reference/controls/slot.md): Add a Slot in the Makeswift builder to visually drop in a `ReactNode`. - [Style](https://docs.makeswift.com/developer/docs/reference/controls/style.md): Add a Style control to your component in the Makeswift builder to visually edit a CSS class `string` prop. - [TextArea](https://docs.makeswift.com/developer/docs/reference/controls/text-area.md): Adds a multiline Text Area to your component in the Makeswift builder to visually edit a `string` prop. - [TextInput](https://docs.makeswift.com/developer/docs/reference/controls/text-input.md): Adds a single-line Text Input panel in the Makeswift builder to visually edit a `string` prop. - [Shape](https://docs.makeswift.com/developer/docs/reference/controls/deprecated/shape.md): Adds a Shape panel in the Makeswift builder to visually edit an `object`. - [constructor](https://docs.makeswift.com/developer/docs/reference/client/constructor.md): The `Makeswift` client is used to fetch data from the Makeswift API. - [getPages](https://docs.makeswift.com/developer/docs/reference/client/get-pages.md): An instance method that provides data about the pages you've created within Makeswift - [getPageSnapshot](https://docs.makeswift.com/developer/docs/reference/client/get-page-snapshot.md): An instance method of the Makeswift [client](/developer/docs/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 `` component. - [getComponentSnapshot](https://docs.makeswift.com/developer/docs/reference/client/get-component-snapshot.md): An instance method of the Makeswift [client](/developer/docs/reference/client/constructor) that fetches a snapshot of a Makeswift component by its `id`. This snapshot is only intended to be rendered by [``](/developer/docs/reference/components/makeswift-component) and [``](/developer/docs/reference/components/slot). - [getSiteVersion](https://docs.makeswift.com/developer/docs/reference/client/get-site-version.md): 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. - [MakeswiftApiHandler](https://docs.makeswift.com/developer/docs/reference/makeswift-api-handler.md): 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. - [constructor](https://docs.makeswift.com/developer/docs/reference/reactruntime/constructor.md): 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. - [registerComponent](https://docs.makeswift.com/developer/docs/reference/reactruntime/register-component.md): Adds your components to the Makeswift builder. - [getSiteVersion](https://docs.makeswift.com/developer/docs/reference/functions/get-site-version.md): 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. - [getSitemap](https://docs.makeswift.com/developer/docs/reference/legacy-apis/get-sitemap.md): 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. - [Docs MCP Server](https://docs.makeswift.com/developer/docs/ai-agent-setup.md): Connect the Makeswift docs to your AI agent so it can answer questions grounded in our documentation.