@valkyrianlabs/payload-markdown

Layout-aware Markdown for Payload CMS with live preview, Shiki-powered code blocks, and deeply composable Tailwind-native styling.

Write structured, production-ready content directly in Markdown. Keep Markdown as the source of truth while the plugin handles rendering, layout directives, syntax highlighting, and scoped styling across globals, collections, fields, and blocks.

Built for blogs, docs, changelogs, and content-heavy apps that want control without fighting a bloated editor.

1pnpm add @valkyrianlabs/payload-markdown2

Documentation

Getting Started

Installation

Rendering

Core Concepts

Blocks

Layout

Scoping

Customization

Styling

Code Blocks

Why this exists

Most content systems force you into one of two bad options:

• a heavy rich text editor with JSON-shaped content and inconsistent rendering
• a bare Markdown field with almost no structure and a pile of frontend cleanup work

@valkyrianlabs/payload-markdown takes the better path:

• plain Markdown storage
• structured layout directives
• production-ready rendering
• syntax-highlighted code blocks
• centralized styling control with local escape hatches

The goal is simple:

write fast, render cleanly, keep control.

Highlights

• Drop-in Markdown support for Payload collections
• Markdown field and block support
• Layout-aware directives for sections and columns
• Relative heading-aware grid grouping
• Shiki-powered syntax highlighting
• Live preview-friendly renderer workflow
• Tailwind-native defaults with deep override support
• Config layering across:
  • global
  • collection
  • field vs block
  • direct component props
• Plain Markdown storage for portability and AI-assisted workflows

Example

Write simple Markdown → get structured layouts instantly

Quickstart

1payloadMarkdown({2  collections: {3    posts: true,4  },5})6

1<MarkdownRenderer markdown={content} />2