Skip to content
Postkit

Diff. A semantic unified diff with additions and deletions.

  • Technical content
  • Static
  • Stability · Initial
  • ::postkit-diff

theme.ts

 fontWeight: 'bold' fontWeight: 'inherit'  color: 'fg'

Usage.

<Diff
  title="theme.ts"
  diff={`- fontWeight: 'bold'
+ fontWeight: 'inherit'
  color: 'fg'`}
/>

Props. Always in step with the code.

PropTypeDefaultDescription
diffRequiredstringNoneUnified diff text.
titlestringNoneThe displayed diff filename.
Appearance
size"sm" | "md" | "lg""md"The component density and type scale.
variant"outline" | "subtle" | "plain""subtle"The component visual treatment.

Every component also takes unstyled and the part-styling props. Change a default for your whole site with defaults in createPostkit. Part styles

Anatomy. Every part is yours to restyle.

Every part

  • root
  • header
  • title
  • code
  • line
  • marker
  • content

Renderers. One component, everywhere you publish.

  • Headless @postkit/reactSupported
  • Chakra @postkit/chakraSupported
  • Email @postkit/emailAs text
  • Astro @postkit/astroStatic
  • Web components @postkit/elementsPlanned
Postkit

Richer posts, written once, right everywhere.

© 2026 Postkit. MIT licensed.
LicensingPrivacy