Last year we released the official Rich Text Renderer for React, which enabled Rich Text content to be easily rendered on React applications. Today, the package has more than 12k monthly downloads.

As our community started to grow, we've heard more and more community members asking for support for other JavaScript frameworks, such as Vue and Svelte.

Today, we are excited to announce the Rich Text HTML Renderer! This is an extension of the original React package, including the same API support. You can check out the documentation on GitHub or NPM.

With this new official package, our growing community of developers can render Rich Text content on any JavaScript project.

We also have two new examples demonstrating how to use the package with Vue and Svelte.

#Getting Started

The easiest way to get started is by installing the package with npm or Yarn:

# npm
npm i @graphcms/rich-text-html-renderer

# Yarn
yarn add @graphcms/rich-text-html-renderer

On your application, you can import the astToHtmlString function, which receives the content as an argument, and outputs an HTML string based on it.

import { astToHtmlString } from '@graphcms/rich-text-html-renderer';

const content = {
  children: [
    {
      type: 'paragraph',
      children: [
        {
          bold: true,
          text: 'Hello World!',
        },
      ],
    },
  ],
};

const html = astToHtmlString({
  content,
});

This example will output the following HTML:

<p>
  <b>Hello world!</b>
</p>

The package contains built-in TypeScript declarations, so there’s no need to install a separate package for that! It also supports rendering custom Models and Assets, so you won’t be limited at all!

Take it for a spin, and let us know how it goes. We're keen to gather your feedback on our community, or, even better, offer contributions on improving it for everyone.