@storyblok/richtext
Version:
Storyblok RichText Resolver
77 lines (51 loc) • 4.79 kB
Markdown
<div align="center">
<h1 align="center">@storyblok/richtext</h1>
<p>
Official utility designed to convert rich text content—stored in JSON format within Storyblok's CMS—into HTML or framework-specific renderable elements
</p>
<br />
</div>
<p align="center">
<a href="https://npmjs.com/package/@storyblok/richtext">
<img src="https://img.shields.io/npm/v/@storyblok/richtext/latest.svg?style=flat-square&color=8d60ff" alt="@storyblok/richtext" />
</a>
<a href="https://npmjs.com/package/@storyblok/richtext" rel="nofollow">
<img src="https://img.shields.io/npm/dt/@storyblok/richtext.svg?style=appveyor&color=8d60ff" alt="npm">
</a>
<a href="https://discord.gg/jKrbAMz">
<img src="https://img.shields.io/discord/700316478792138842?label=Join%20Our%20Discord%20Community&style=appveyor&logo=discord&color=8d60ff">
</a>
<a href="https://twitter.com/intent/follow?screen_name=storyblok">
<img src="https://img.shields.io/badge/Follow-%40storyblok-8d60ff?style=appveyor&logo=twitter" alt="Follow @Storyblok" />
</a><br/>
<a href="https://app.storyblok.com/#!/signup?utm_source=github.com&utm_medium=readme&utm_campaign=@storyblok/richtext">
<img src="https://img.shields.io/badge/Try%20Storyblok-Free-8d60ff?style=appveyor&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAHqADAAQAAAABAAAAHgAAAADpiRU/AAACRElEQVRIDWNgGGmAEd3D3Js3LPrP8D8WXZwSPiMjw6qvPoHhyGYwIXNAbGpbCjbzP0MYuj0YFqMroBV/wCxmIeSju64eDNzMBJUxvP/9i2Hnq5cM1devMnz984eQsQwETeRhYWHgIcJiXqC6VHlFBjUeXgav40cIWkz1oLYXFmGwFBImaDFBHyObcOzdW4aSq5eRhRiE2dgYlpuYoYSKJi8vw3GgWnyAJIs/AuPu4scPGObd/fqVQZ+PHy7+6udPOBsXgySLDfn5GRYYmaKYJcXBgWLpsx8/GPa8foWiBhuHJIsl2DkYQqWksZkDFgP5PObcKYYff//iVAOTIDlx/QPqRMb/YSYBaWlOToZIaVkGZmAZSQiQ5OPtwHwacuo4iplMQEu6tXUZMhSUGDiYmBjylFQYvv/7x9B04xqKOnQOyT5GN+Df//8M59ASXKyMHLoyDD5JPtbj42OYrm+EYgg70JfuYuIoYmLs7AwMjIzA+uY/zjAnyWJpDk6GOFnCvrn86SOwmsNtKciVFAc1ileBHFDC67lzG10Yg0+SjzF0ownsf/OaofvOLYaDQJoQIGix94ljv1gIZI8Pv38zPvj2lQWYf3HGKbpDCFp85v07NnRN1OBTPY6JdRSGxcCw2k6sZuLVMZ5AV4s1TozPnGGFKbz+/PE7IJsHmC//MDMyhXBw8e6FyRFLv3Z0/IKuFqvFyIqAzd1PwBzJw8jAGPfVx38JshwlbIygxmYY43/GQmpais0ODDHuzevLMARHBcgIAQAbOJHZW0/EyQAAAABJRU5ErkJggg==" alt="Follow @Storyblok" />
</a>
</p>
## Features
- **Framework-Agnostic Rendering**: Outputs raw HTML by default but can be configured to produce framework-specific elements, such as React components or Vue nodes.
- **Custom Resolvers**: Allows developers to override default rendering behavior for specific elements like links, images, and embedded components. This enables integration with custom components or styling frameworks like Tailwind CSS.
Storyblok
- **Image Optimization**: Supports image optimization options, including lazy loading, responsive sizing, and format conversion (e.g., to WebP), enhancing performance and user experience.
Storyblok
- **TypeScript Support**: Provides full TypeScript typings with generics, ensuring type safety and improved developer experience across different frameworks.
## Documentation
For complete documentation, please visit [package reference](https://www.storyblok.com/docs/packages/storyblok-richtext)
## Contributing
If you'd like to contribute, please refer to the [contributing guidelines](CONTRIBUTING.md).
## Community
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
- [Discuss Storyblok on Github Discussions](https://github.com/storyblok/storyblok/discussions)
For community support, chatting with other users, please visit:
- [Discuss Storyblok on Discord](https://discord.gg/jKrbAMz)
## Support
For bugs or feature requests, please [submit an issue](https://github.com/storyblok/richtext/issues/new/choose).
> [!IMPORTANT]
> Please search existing issues before submitting a new one. Issues without a minimal reproducible example will be closed. [Why reproductions are Required](https://antfu.me/posts/why-reproductions-are-required).
### I can't share my company project code
We understand that you might not be able to share your company's project code. Please provide a minimal reproducible example that demonstrates the issue by using tools like [Stackblitz](https://stackblitz.com) or a link to a Github Repo lease make sure you include a README file with the instructions to build and run the project, important not to include any access token, password or personal information of any kind.
### Feedback
If you have a question, please ask in the [Discuss Storyblok on Discord](https://discord.gg/jKrbAMz) channel.
## License
[License](/LICENSE)