Postkit 0.3 · Works with your design system ›

Richer posts, written once. Right everywhere they’re read.

Give your writing callouts, code, figures and 35 more without building any of them. Each post looks right on your site, in your newsletter and in your editor, from one plain-text file.

Get started Browse the 38 components ›

Notes · 6 min

One article, four renderers

A callout is a small thing, but the moment an article leaves its page it has to survive a feed reader, a newsletter and an editor’s preview pane.

Terminal

npm install @postkit/react

Writers keep their tools. MDX or plain Markdown, the same components either way.

post.mdx

<Callout tone="tip"
  title="Keep the content">
  Change the renderer without
  changing the article.
</Callout>

post.md

:::postkit-callout{tone="tip" title="Keep the content"}
Change the renderer without
changing the article.
:::

Rendered

Typos fail the build, not the reader, with the file and line to fix.

Long reads that hold attention. Takeaways, steps and pull quotes, ready the day you install.

KeyTakeaway

Steps

Install a renderer
Pick your kits
Write

PullQuote

The file stays plain text.

Postkit design principles

Docs developers trust. Code, terminals, diffs and file trees, with copy and highlighting already done.

CodeGroup · Diff · FileTree

import { createPostkit } from '@postkit/react'
import { article, technical } from '@postkit/react/kits'

export const postkit = createPostkit({
  kits: [article, technical],
})

shell

npm install @postkit/react

theme.ts

− variant: 'outline'+ variant: 'subtle'

content

notes

one-article.mdx
changelog

Media that works for every reader. Captions, alt text and numbering built in, not bolted on.

Figure

Four panels, each showing the callout “Keep the content” as one renderer draws it: headless with a hairline border, Chakra on a green tint with a tick, email as a table with a green bar, and the editor with the block selected. — The same three lines of Markdown, drawn by the headless, Chakra, email and editor renderers.

LinkPreview

postkit-org/postkit-js

github.com

Portable web and email components, Markdown tooling and framework adapters.

github.com

Gallery

Your design, not ours. Bring your own CSS or Chakra theme, and switch later without touching a post.

@postkit/react

Semantic markup and the named parts, with a quiet stylesheet you can keep or replace with your own CSS.

Never boxed in. Restyle a part, replace a view, or take the source into your repo. Your posts keep working at every step.

Rungs 1–3
Style
Match your brand with the CSS or theme you already have.
Rungs 4–5
Override
Set house defaults once, and every writer gets them.
Rungs 6–7
Replace
Own any component outright with postkit eject.
Rungs 8
Extend
Add your own and get Markdown support and validation for free.

components: 38
kits: 6
renderers, web components next: 3
licence: MIT

Start with one component. Add the rest when you need them.

npm install @postkit/react

Or @postkit/chakra for the Chakra views. Works with Next.js, React Router, TanStack Router and Astro.