Help Center

Blog

Makeswift Docs

Log in

Upgrading to 0.9.0

Quickstart

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

Concepts

Installation

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

Localization

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

<Page>

The `<ReactRuntimeProvider>` component takes a Makeswift runtime and provides it to the [`<Page>`](/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

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

Image

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

Adds a Shape panel in the Makeswift builder to visually edit an `object`.

Shape

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

getSitemap

An instance method 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

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

getSiteVersion

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

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.

Removed	Use Instead (enum)
`'Carousel40'`	`ComponentIcon.Carousel`
`'Code40'`	`ComponentIcon.Code`
`'Countdown40'`	`ComponentIcon.Countdown`
`'Cube40'`	`ComponentIcon.Cube`
`'Divider40'`	`ComponentIcon.Divider`
`'Form40'`	`ComponentIcon.Form`
`'Navigation40'`	`ComponentIcon.Navigation`
`'SocialLinks40'`	`ComponentIcon.SocialLinks`
`'Video40'`	`ComponentIcon.Video`

Get Started

App Router

Pages Router

Reference

Guides

Upgrading

Integrations