Storyblok Rich Text Astro Renderer

screenshot of Storyblok Rich Text Astro Renderer

Storyblok Rich Text Renderer for Astro

Overview

The Storyblok Rich Text Renderer for Astro offers a seamless solution for integrating rich text content into Astro applications. Designed to enhance the basic Storyblok + Astro integration, this utility allows developers to efficiently render rich text without the constraints of traditional methods. By converting Storyblok's rich text data structures into nested Astro component nodes, it addresses some common limitations while providing flexibility and ease of use.

This renderer not only outputs HTML but also allows for extensive customization through the RichTextRenderer.astro helper component. This advanced feature enables developers to map Storyblok's rich text elements to various custom components across different frameworks such as SolidJS, Svelte, or Vue. Whether you're simplifying your rich text rendering or looking for advanced control, this package can accommodate your needs.

Features

  • Custom Component Mapping: Easily map rich text elements to any custom component, allowing for greater flexibility in how content is displayed.

  • Automatic Nesting: Converts Storyblok CMS rich text data into structured Astro components, making integration straightforward and organized.

  • Default Resolvers: Comes with sensible out-of-the-box resolvers for marks and nodes, simplifying the implementation process for most projects.

  • Explicit Content Handling: Offers flexibility by allowing users to implement content handling via props, ensuring precise control over data passed to components.

  • Schema Configuration: Provides an easy way to set up nodes and marks configurations, allowing developers to adapt the rendering behavior as needed.

  • Embedded Component Support: The utility supports rendering embedded Storyblok components, enhancing the richness of content that can be displayed.

  • Community Contribution Encouraged: Open contribution guidelines ensure that users can report issues or extend functionality, fostering a supportive development environment.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.