Fern Components | Makeswift

Examples of all styled Fern documentation components used across the Makeswift docs.

Inline Code

Use backticks for inline code: format: "uuid" or X-Auth-Token or npm install makeswift.

Here is an overflowing inline code example: /v3/catalog/products?price:min=10&price:max=100&category=electronics&sort=price&order=asc.

This is a double line inline code block embedded in a sentence: GET /v3/catalog/products?price:min=10 that should wrap naturally within the paragraph text.

Callouts

Info

This is an info callout. Use it for general information or tips.

Note

This is a note callout. Use it for additional context or important details.

Warning

This is a warning callout. Use it for potentially dangerous actions or important caveats.

Error

This is an error callout. Use it for critical issues or breaking changes.

Success

This is a success callout. Use it for confirmations or successful outcomes.

Tabs

React

Next.js

1 import { Makeswift } from "@makeswift/runtime"
2 
3 const client = new Makeswift("your-api-key")

Tables

Header	Argument	Description
`X-Auth-Token`	`access_token`	For more about API accounts that generate `access_token`s, see our Guide to API Accounts.
`Content-Type`	`application/json`	The content type of the request body.
`Accept`	`application/json`	The expected response format.

Steps

Create a new site

Navigate to the Makeswift dashboard and click “Create Site” to get started.

Choose a template

Pick a template that best fits your project, or start from a blank canvas.

Customize your design

Use the Visual Builder to drag and drop components, adjust styles, and build your layout.

Publish your site

When you’re ready, click “Publish” to push your changes live.

Accordion

Single Accordions

What is Makeswift?

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

Do I need to know how to code?

No! Makeswift is a no-code tool that allows you to build fully functioning websites without writing any code.

Accordion Group

How do I create a site?

Navigate to the Makeswift dashboard and click “Create Site” to get started. You can choose from a template or start from scratch.

Can I use a custom domain?

Yes! With a custom host, you can connect your own domain. For the default host, Makeswift provides a free subdomain.

How do I publish my site?

Click the “Publish” button in the top right of the Visual Builder. Your changes will be pushed live immediately.

Can I use custom components?

Yes, with a custom host you can create and integrate your own React components into the Visual Builder.

Cards

Getting Started

Start building your first site with Makeswift

Components

Learn about the available components

Theming

Customize your site’s look and feel

Code Blocks

makeswift.config.ts

1 import { Makeswift } from "@makeswift/runtime"
2 import { TextInput, Style } from "@makeswift/runtime/controls"
3 
4 Makeswift.registerComponent(MyComponent, {
5   type: "my-component",
6   label: "My Component",
7   props: {
8     title: TextInput({ label: "Title", defaultValue: "Hello World" }),
9     className: Style(),
10   },
11 })

Badges

These are the doc badge variants:

Badges are shown inline: Info Note Warning Error Success

Frames