| title | Portable Text |
|---|---|
| description | A JSON-based specification for structured block content |
| template | splash |
import '@/styles/globals.css' import { Card, CardGrid, LinkCard, TabItem, Tabs, } from '@astrojs/starlight/components' import PortableTextEditor from '../../components/editor/editor.astro'
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 →
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.
The same content as an HTML string and as Portable Text:
```htmlRead the documentation for Portable Text.
``` ```json [ { "_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 →