v0.3.10

The Programmable Typesetter for the Web

Postext takes semantic markdown and applies centuries-old editorial layout rules — orphan prevention, column balancing, figure placement — producing publication-grade React components.

Get StartedView on GitHub

What Is Postext

Editorial Layout,
Computed for the Web

CSS gives you responsive layout — flexbox, grid, columns. But it cannot balance columns, prevent orphans, flow text around figures, or place footnotes at the bottom of a column. These are editorial decisions that have been refined over centuries of print typesetting.

Postext bridges that gap. Feed it semantic markdown and a configuration object. It measures text 300–600× faster than the DOM using @chenglou/pretext, then returns React components laid out to professional typographic standards.

Input

# Chapter One

The quick brown fox jumps over
the lazy dog. A paragraph with
a {{figure:hero-img}} reference
and a footnote.[^1]

[^1]: Additional context placed
at column bottom automatically.

Output

Capabilities

What Print Typesetters Knew All Along

Orphan & Widow Prevention

No single lines stranded at the top or bottom of a column. Postext enforces typographic rules that CSS cannot express.

Column Balancing

Content distributed evenly across columns so they end at the same height — the way a professional typesetter would set them.

Text Flow Around Figures

Images, pull quotes, and tables placed inline, floated, or in margins with text flowing naturally around them.

Footnotes & Margin Notes

Footnotes anchored to column bottoms. Margin notes aligned with the paragraph that references them. Endnotes collected at section end.

Hyphenation & Rag Optimization

Intelligent word breaking and right-edge smoothing that prevents rivers of whitespace and produces even text blocks.

Web & PDF Output

One layout engine, two renderers. Generate React components for the web or PDF output for print — from the same source.

API

One Function, Full Control

Call createLayout with your content and a configuration object. Get back a React component laid out to your specifications.

import { createLayout } from "postext";

const Article = createLayout(
  {
    markdown: content,
    resources: [
      { id: "hero", type: "image", src: "hero.jpg", width: 800, height: 400 },
    ],
    notes: [
      { id: "1", type: "footnote", content: "Additional context." },
    ],
  },
  {
    columns: 2,
    gutter: "2rem",
    typography: {
      orphans: 2,
      widows: 2,
      hyphenation: true,
    },
    references: {
      footnotes: { placement: "columnBottom" },
    },
  }
);

Workflow

Three Steps to Publication-Grade Layout

  1. Write Semantic Markdown

    Author your content in enriched markdown with resource references and footnote markers. No layout concerns — just content.

  2. Configure Layout Rules

    Define columns, typography rules, resource placement strategies, and section overrides in a PostextConfig object.

  3. Render React Components

    Call createLayout and receive a React component with pixel-perfect editorial layout — ready for the web or PDF.

Installation

Start in Under a Minute

# Install with your package manager
pnpm add postext
// Quick start
import { createLayout } from "postext";

const Page = createLayout({
  markdown: "# Hello World\n\nYour content here.",
});

export default Page;