Svelte Portabletext screenshot

Svelte Portabletext

Author Avatar Theme by Portabletext
Updated: 7 Feb 2025
75 Stars

Transform Portable Text content into Svelte components

Categories

Overview

The Portable Text renderer for Svelte is a tool that allows users to render Portable Text block content with Svelte components. It requires Svelte 3.47.0 or higher. This renderer provides basic functionality for displaying block content with formatting and text styles. However, customization is needed for working with images, custom styles, blocks, and marks.

Features

  • Customizable rendering: Users can use the components prop to determine how the renderer should process each block, mark, or style type.
  • Accessing surrounding blocks: The renderer allows users to access blocks surrounding the current one for rule-based design.
  • Custom context: Users can pass context to the <PortableText> component to have custom external data exposed to all components.

Installation

To install the Portable Text renderer for Svelte, use the following command:

npm i @portabletext/svelte -D

Please note that Svelte 3.47.0 or higher is required for this package to work properly.

Summary

The Portable Text renderer for Svelte is a useful tool for rendering Portable Text block content with Svelte components. It provides basic functionality for block content with formatting and text styles, but additional customization is needed for more advanced features like images and custom styles. Users can customize the rendering process using the components prop and can access surrounding blocks for rule-based design. Additionally, the renderer allows users to pass custom context to the <PortableText> component.