​
Props

  1. ​
    snapshot
    MakeswiftComponentSnapshot
    required
    The Makeswift snapshot to render.
  2. ​
    label
    string
    required
    The label of the element in the Visual Builder.
  3. ​
    fallback
    React.ReactNode
    The content to be rendered until the user opts in to making visual edits to the editable slot.

    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; 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
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 />
    </>
  );
}