Portable Text

Portable Text is an open specification for structured block content. Rich text, images, code blocks, and any custom type you define, stored as JSON and renderable anywhere.

Get started → · Render PT content → · Build an editor →

Try the editor

Type, format, and see the Portable Text output in real time. This is the Portable Text Editor: a fully customizable block content editor you can embed in any React application.

Get started

Render Portable Text Have PT content? Pick your framework and start rendering.

Build a block content editor Set up the Portable Text Editor with custom blocks, rich text, and a toolbar.

What does Portable Text look like?

The same content as an HTML string and as Portable Text:

HTML string

<p>Read the <a href="/docs">documentation</a> for <strong>Portable Text</strong>.</p>

Portable Text

[
  {
    "_type": "block",
    "style": "normal",
    "children": [
      { "_type": "span", "text": "Read the " },
      {
        "_type": "span",
        "text": "documentation",
        "marks": ["a1b2c3"]
      },
      { "_type": "span", "text": " for " },
      {
        "_type": "span",
        "text": "Portable Text",
        "marks": ["strong"]
      },
      { "_type": "span", "text": "." }
    ],
    "markDefs": [
      {
        "_key": "a1b2c3",
        "_type": "link",
        "href": "/docs"
      }
    ]
  }
]

Because content is structured data, you can render it as HTML, React components, Markdown, PDFs, or any other format. Learn more about Portable Text →

Learn more

Schema and concepts The building blocks of the editor: schema, styles, decorators, annotations, and more

Behaviors Events, guards, and actions: the pattern for customizing editor interactions

Explore the playground Try the Portable Text Editor in a live sandbox

Specification The open specification for structured block content