@portabletext/astro demo

Text formatting #

Plain, emphasized, linked and strong text, that can also be combined. Obviously it also supports inline code, underlined text and strike-through.

But aside from that, it also supports completely custom annotations - be it structured references to book/movie characters🐺Eddard "Ned" StarkThe head of House Stark, the Lord of Winterfell, Lord Paramount and Warden of the North., term definitionsa statement of the exact meaning of a word, especially in a dictionary., speech synthesis controls (configurable) or some other fun and creative use case.

Blocks can also contain "inline objects", which contain user-defined data. Maybe you want to represent a price in a given currency, but be able to get a live exchange rate in the users local currency? In January 2022, a Whopper was about 5 USD at your local Burger King restaurant in Miami.

Blocks #

"Blocks" in Portable Text are... well, block-level items.
By default, you will see things like blockquotes, headings and regular paragraphs.

Aside from that, you can drop in pretty much any data you want, as long as you define an Astro component to render it. Here is a code block, highlighted at build time by Astro’s built-in Code component (Shiki), for instance:

---
import {PortableText} from '@portabletext/astro'
import Code from '../components/Code.astro'

const value = [/* array of portable text blocks */]
---

<PortableText
  value={value}
  components={{
    type: {code: Code},
  }}
/>

But it can really be anything - like a map of annotated markers, for instance - all represented by structured JSON:

Lists #

Of course, you will want lists!

• They are fully supported
• They can be unordered or ordered
• Reasons why ordered lists might be better:
  1. Most lists have some priority
  2. Not conveying importance/priority is lazy

You can also go beyond ordered/unordered...

Here is a list of schnauzers, as indicated by the schnauzer list type and icon:

• Kokos
• Pippi