Introducing the rich content viewer

Now that you have an editor enabled, let's add a viewer to display the content you create with it.

npm i ricos-viewer

import { RicosViewer } from 'ricos-viewer';

const content = {
  blocks: [
    {
      key: 'd79aa',
      text: "Hi there! I'm Ricos, your rich content framework. 👾",
      type: 'header-two',
      depth: 0,
      inlineStyleRanges: [],
      entityRanges: [],
      data: {},
    },
  ],
  entityMap: {},
  VERSION: '7.5.0',
};

<RicosViewer content={content} />;

Hi there! I'm Ricos, your rich content framework. 👾

Now let's add some plugins to Ricos and display the new content:

npm i wix-rich-content-plugin-video wix-rich-content-plugin-divider

Important Note: Viewer plugins are imported from [plugin]/viewer. Editor plugins are imported from [plugin]. (see viewer example below)

import { RicosViewer } from 'ricos-viewer';

import { pluginVideo } from 'wix-rich-content-plugin-video/viewer';

import { pluginDivider } from 'wix-rich-content-plugin-divider/viewer';

<RicosViewer content={contentWithPlugins} plugins={[pluginDivider(), pluginVideo()]} />;

Example of content: contentWithPlugins