Skip to main content
Version: 3.x

Preview Mode

Since version 3.2

Preview Mode is an integral feature of Magic Button, specifically designed to enable content creators to preview their drafts from systems supporting this feature before publishing changes.

How to activate Preview Mode​

Using the Magic Button​

Activate the Preview Mode directly from the Editorial Toolbox. Click on the Magic Button and select the Preview Mode option.

http://localhost:4000

Programmatically​

Alternatively, Preview Mode can be activated programmatically by leveraging the ContributionMode. instance exposed by the user.contributionMode context.

setPreviewMode​

The setPreviewMode method is typically used for safe activation of Preview Mode. This means that if Contribution Mode is not enabled, Preview Mode will not be activated.

app/routes/preview.ts
export const loader = ({ context, request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);

  if (url.searchParams.get("token") !== "MySuperSecretToken") {
    throw new Response("Invalid token", { status: 401 });
  }

  app.user.contributionMode.setContributionMode({
    enabled: true,
    previewMode: true,
  });

  return redirect("/");
};

Check if Preview Mode is enabled​

app/routes/preview.ts
export const loader = ({ context, request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);

  if (url.searchParams.get("token") !== "MySuperSecretToken") {
    return json({ enabled: app.user.contributionMode.previewMode });
  }

  // [..]
};