Payload Markdown

@valkyrianlabs/payload-markdown adds portable Markdown authoring to Payload CMS. It provides a CodeMirror-backed admin field, an optional reusable Payload block, server-rendered Markdown output, Shiki code highlighting, heading anchors, GFM support, and registry-backed content directives.

The stored value remains Markdown. Configuration, presentation, directive themes, and code rendering stay in source-controlled Payload config instead of being baked into CMS-authored content.

Quick Install

1pnpm add @valkyrianlabs/payload-markdown

1import { payloadMarkdown } from '@valkyrianlabs/payload-markdown'2import type { Config } from 'payload'3 4const config: Config = {5  plugins: [6    payloadMarkdown({7      collections: {8        posts: true,9      },10    }),11  ],12}13 14export default config

1import { MarkdownRenderer } from '@valkyrianlabs/payload-markdown/server'2 3export function PostBody({ content }: { content?: string | null }) {4  return <MarkdownRenderer collectionSlug="posts" markdown={content} />5}

What It Covers

• Plain Markdown storage for portable content.
• Automatic Markdown field installation for field-first collections.
• Automatic vlMdBlock installation for collections with blocks fields.
• Manual markdownField() and MarkdownBlock exports for explicit schemas.
• Server-rendered Markdown with Shiki, GFM, heading anchors, and sanitized HTML.
• Directive rendering for content patterns that should stay readable in Git.
• CodeMirror autocomplete, snippet variants, syntax highlighting, closing labels, and non-fatal diagnostics.
• Local SVG icon packs for buttons, cards, and callouts.
• Top-level and collection-scoped code, themes, and config namespaces.
• Stable hook classes and data-* attributes for styling and tests.

Documentation Map