Configure preview URLs with postMessage live preview

Set a preview URL expression and postMessage live preview mode for routable frontend content.

Use this when

• preview draft content privately
• open live preview on the real route
• use postmessage preview
• configure preview urls for a collection

Dyrected concepts

previewUrl, previewMode, urlPattern

Additional packages: No additional packages.

Decisions and cautions

Use this recipe only when its runtime matches the project you are documenting or building. Cloud recipes must stay inside the managed content backend boundary. Self-hosted recipes may use the server runtime, database, hooks, and infrastructure you control.

Complete recipe

This is the canonical source compiled and behavior-tested by @dyrected/knowledge.

import { defineCollection, defineTextField, expr } from "@dyrected/core";

export const Docs = defineCollection({
  slug: "docs",
  admin: {
    useAsTitle: "title",
    previewUrl: expr.ifElse("slug", expr.concat("/docs/", "slug"), null),
    previewMode: "postMessage",
    urlPattern: "/docs/{slug}",
  },
  fields: [
    defineTextField({ name: "title", label: "Title", required: true }),
    defineTextField({ name: "slug", label: "Slug", required: true, unique: true }),
  ],
});