> This page is for Developer.

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

# <Slot>

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

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

## Props

**`snapshot`** `MakeswiftComponentSnapshot` — required

The Makeswift snapshot to render.

---

**`label`** `string` — required

The label of the element in the Visual Builder.

---

**`fallback`** `React.ReactNode`

The content to be rendered until the user opts in to making visual edits to
the editable slot.

> **Note**
>
> If `fallback` is not provided, it will be set to `null` by default. In
> this case, the user will not be able to see the element in the Canvas,
> but they will be able to select it from the Elements Panel.
>
> One good use case for this default is with [Dynamic Routes](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes);
> for example, product detail pages. If the route renders many pages, it
> might be unreasonable to expect the user to visually edit each one
> before publishing. Because the `null` default will not show any content
> until the user opts in, the user could publish the site without
> affecting any visual content. They could then update and publish
> individual pages as they are ready.

---

## Usage in the Visual Builder

The `<Slot>` component will render its fallback by default until the user opts in to visual editing. Visually, this component provides a checkbox property that allows the user to toggle between displaying the fallback and the editable slot itself, including any user generated content within it.

## Example

### Basic Example

The following example creates a home page with a header, a footer, and a main content section that can be edited in the Makeswift Visual Builder using the `<Slot>` component.

**`@/app/page.tsx`**

```tsx @/app/page.tsx
import { Slot } from "@makeswift/runtime/next";
import { getSiteVersion } from "@makeswift/runtime/next/server";
import { client } from "@/makeswift/client";

export default async function Page() {
  const mainContentSnapshot = await client.getComponentSnapshot(
    `main-content`, //unique identifier of the component rendered on the page
    { siteVersion: await getSiteVersion() }
  );

  return (
    <>
      <header />
      <Slot snapshot={mainContentSnapshot} label={`Main Content`} />
      <footer />
    </>
  );
}
```