Get to know Kontent.ai’s open source rich text resolver

Content creators expect a lot of freedom when it comes to working with text. They expect to be able to craft engaging, visually appealing content that incorporates various elements; from formatted text and tables to embedded components and linked items. For developers tasked with bringing this content to life, the challenge lies in transforming rich text into a format that renders beautifully across different platforms and frameworks.

That's why we're excited to highlight our open source rich text resolver: a powerful utility that bridges the gap between content creation and seamless presentation.

Kontent.ai developer Daniel Pokorny explains the ins and outs of the rich text resolver in the video below, including a full demo of its capabilities.

Challenges of working with rich text

Rich text elements often hold some of the most important content for digital experiences. When content creators work in Kontent.ai's rich text editor, they expect to have the freedom to:

• Structure text with headings, lists, and tables
• Insert custom components, like product showcases or testimonials
• Embed existing content items such as calls-to-action or videos
• Link to other content items

But translating this rich content into your application presents unique challenges. Each framework has its own way of rendering content, and Kontent.ai-specific entities need special handling to ensure they appear as intended.

Enter the rich text resolver

The Kontent.ai rich text resolver provides an elegant solution for transforming Kontent.ai rich text into structured formats suitable for resolution and rendering across various environments.

At its core, the resolver uses Portable Text: a universal standard for rich text representation. This approach gives developers incredible flexibility while maintaining consistency across platforms.

Key features of the rich text resolver

• Framework agnostic: Works seamlessly with React, Vue, Svelte, Astro, and vanilla HTML
• Custom resolution: Define exactly how each element should be rendered
• Simplified node parsing: Transform HTML into simplified node trees
• Ready-made components: Use built-in components or create your own for images, tables, and more
• Full control: Extensive options for traversing and modifying portable text nodes

Real-world applications

Consider a scenario where your marketing team creates a blog post containing:

• Custom callout components for important information
• Links to related product pages
• Embedded testimonial content items
• Tables with pricing information

With the rich text resolver, you can define exactly how each of these elements should appear, regardless of your tech stack. For organizations using multiple frameworks or planning to migrate in the future, this consistency is invaluable.

How to get started

The rich text resolver is available as an npm package and can be installed with the package manager of your choice:

npm i @kontent-ai/rich-text-resolver

From there, implementation is straightforward:

1. Transform rich text content to portable text
2. Define resolvers for each content type
3. Render using your framework of choice

For a more detailed breakdown, check the resources shared below.

How to stay involved

As an open source tool, the rich text resolver benefits from community contributions and feedback. We encourage you to:

• Star the GitHub repository
• Report issues or suggest improvements

Resources and further reading

Want to know even more? Check out our documentation:

• Full GitHub documentation
• Rich text resolution guide

We're committed to empowering developers with tools that make content management more flexible and development more efficient. The rich text resolver is another step toward that goal, and we can't wait to see what you build with it.