getting-started.md

astro-portabletext • Documentation

---

Getting started

Installation

Pick your favorite package manager and run one of these:

npm install astro-portabletext
# or
pnpm add astro-portabletext
# or
yarn add astro-portabletext
# or
bun add astro-portabletext

Usage

PortableText component

The PortableText component provides a simple and flexible way to render rich text content. It includes:

• Default rendering for common Portable Text elements (paragraphs, headings, lists, etc.).
• Customizable rendering with your own components or slots.

Basic usage

Here's a minimal example:

/* .astro */
---
import { PortableText } from "astro-portabletext";

const portableText = [
  {
    _type: "block",
    children: [
      {
        _type: "span",
        marks: [],
        text: "This is a ",
      },
      {
        _type: "span",
        marks: ["strong"],
        text: "bold",
      },
      {
        _type: "span",
        marks: [],
        text: " text example!",
      },
    ],
    markDefs: [],
    style: "normal",
  },
];
---

<PortableText value={portableText} />

📚 Learn more:

For details on custom components, slots, and advanced usage, check out the PortableText component documentation.