Draft Mode CMS Lab

cd apps/experiments/draft-mode-cms-lab
pnpm install
pnpm dev

Edit markdown, save a draft to Vercel Blob or memory, enable Next.js Draft Mode for preview, then publish to a live path. Follows the App Router Draft Mode guide pattern.

FeaturesCopy Anchor Link

• Markdown editor - draft store
• Blob backend with memory fallback
• draftMode().enable() preview cookie
• Publish to /live/[slug]
• Preview gate when Draft Mode is off

API ReferenceCopy Anchor Link

POST /api/cms/draft - save draftCopy Anchor Link

GET /api/cms/draft?slug= - read draftCopy Anchor Link

POST /api/cms/publish - promote to liveCopy Anchor Link

GET /api/draft?slug= - enable Draft Mode + redirect to previewCopy Anchor Link

Implementation DetailsCopy Anchor Link

lib/cms-store.ts writes cms/draft|live/<slug>.md to Blob when configured. Preview pages check draftMode().isEnabled.

Use CasesCopy Anchor Link

• CMS preview workflows
• Teaching Draft Mode cookies
• Blob-backed content drafts

LimitationsCopy Anchor Link

• Lite markdown HTML is not a full sanitizer.
• Memory drafts reset on cold start.
• No CMS auth secret on the draft enable route (add one in production).

Use in your projectCopy Anchor Link

Deploy or copy apps/experiments/draft-mode-cms-lab/ and adapt the Route Handlers and pure helpers in logic.ts. Keep honest fallbacks when optional services are missing.

DeploymentCopy Anchor Link

Deploy on Vercel

Local DevelopmentCopy Anchor Link

cd apps/experiments/draft-mode-cms-lab
pnpm install
pnpm dev

Open http://localhost:3010

ConfigurationCopy Anchor Link

Vercel / Next.js Features UsedCopy Anchor Link

• Draft Mode
• Route Handlers
• Vercel Blob (optional)

Next StepsCopy Anchor Link

• Explore related labs from the registry relatedSlugs
• Harden secrets, auth, and input limits before production
• Prefer platform primitives when you outgrow demo patterns