README.md

astro-portabletext Examples

This directory provides concise code examples demonstrating specific techniques and features of the astro-portabletext library. These examples are designed to help you learn and adapt the code snippets for your own Astro projects.

💡 Looking for documentation? Refer to the package documentation.

Note: These are not full applications.

Available examples

Customizing Components

• Block.astro — Shows how to extend and override the default rendering of specific block styles (node.style).
• List.astro / ListItem.astro — Covers extending and overriding the default rendering of specific list items (node.listItem).
• Mark.astro — Explains how to extend and override the rendering of specific mark types (node.markType).
• Text.astro — v0.11.0+ Illustrates handling the output of @text nodes in Portable Text.
• Type.astro — Demonstrates handling custom Portable Text types (node._type) to render different components for each type, including a fallback for unknown types.

PortableText component

• portabletext-basic.astro — Provides an example of the most basic usage.
• portabletext-mapped-type.astro — Shows how to associate custom components to different node types.
• portabletext-mapped-type-property.astro — Shows how to associate custom components to different node type properties.
• portabletext-slots.astro — v0.11.0+ Illustrates using the component with slots for enhanced customization.

Advanced techniques

• BlockWithRenderFunction.astro — v0.11.0+ Shows how to use the render function from usePortableText to target and alter specific child nodes.

Contributing

Have suggestions for new examples or improvements? Feel free to open a pull request or an issue in the main repository. Contributions are always welcome!