> Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Working with Rich Content ## Article: Working with Rich Content ## Article Link: https://dev.wix.com/docs/go-headless/get-started/tutorials/self-managed-headless/other-tutorials/working-with-rich-content.md ## Article Content: # Tutorial: Working with Rich Content Some of the data that the [JavaScript SDK](https://dev.wix.com/docs/sdk.md) returns, such as blog posts and database collection items, contains rich content. Rich content is enhanced text content that can include things like formatted text, link previews, images, and video. The SDK returns rich content as complex objects. If you’re creating a headless project with a custom frontend, it can be challenging to render the objects yourself. If you build your frontend using [React](https://react.dev/), you can use the `@wix/ricos` package to render rich content objects returned by the SDK. [Ricos](https://dev.wix.com/docs/ricos/getting-started/introduction.md) is designed for editing and rendering rich content objects. It supports Wix rich content objects. This tutorial explains how to use Ricos to render the rich content objects returned by the SDK. It includes examples for both the [Blog](https://dev.wix.com/docs/sdk/backend-modules/blog/introduction.md) and [Data](https://dev.wix.com/docs/sdk/backend-modules/data/introduction.md) modules. This process has three steps: 1. [Retrieve your headless project's rich content using the SDK.](#step-1-retrieve-rich-content-data) 1. [Create a React component that can render rich content objects.](#step-2-create-a-rich-content-viewer-component) 1. [Add the component to your page’s code.](#step-3-render-rich-content-on-a-site) ## Before you begin Before getting started, you need: * A Wix site or headless project with either the Wix Blog app installed, or with at least one database collection. * A blog post or collection item with rich content. To add rich content to a blog post, use the [Blog Post Editor](https://support.wix.com/en/article/wix-blog-writing-posts-in-wix-blog) to add things like formatted text or images to a post. Use the CMS to [add rich content](https://support.wix.com/en/article/cms-formerly-content-manager-working-with-rich-content-and-adding-it-to-a-dynamic-page) to your collection. * [Create an OAuth app](https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/authentication/about-authentication.md) for your headless project. Retrieve your app’s client ID. You’ll need to use it in your code. ## Step 1. Retrieve rich content data The first step in rendering rich content is to retrieve it in your frontend code using the SDK. To do this: 1. In the terminal, run the following commands to install the necessary SDK packages: * **SDK:** `yarn add @wix/sdk` * **Blog** (if you’re retrieving Blog content): `yarn add @wix/blog` * **Data** (if you’re retrieving CMS content): `yarn add @wix/data` 1. Create a new file in your project called `rich-content-api.js`. 1. At the top of your file, add the following import statements. ```javascript import { createClient, OAuthStrategy } from '@wix/sdk'; //If you’re retrieving Blog content: import { posts } from '@wix/blog'; //If you’re retrieving CMS content: import { items } from '@wix/data'; ``` 1. Create an [SDK client](https://dev.wix.com/docs/sdk/articles/set-up-a-client/about-the-wix-client.md) by adding the following code to your code file. Fill in the value for your client ID, which can be found in your project's [**Headless Settings**](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Foauth-apps-settings). Adjust the value of `modules` if you are only working with Blog or CMS: ```javascript const wixClient = createClient({ auth: OAuthStrategy({ clientId: '' }), modules: { posts, items }, }); ``` 1. Add a function to your file called `getRichContent`. This function retrieves the rich content data from your project.
To retrieve collection items Use the SDK Data module’s [`query`](https://dev.wix.com/docs/sdk/backend-modules/data/items/query.md) method to retrieve your project’s CMS items. You can use the [query builder](https://dev.wix.com/docs/sdk/backend-modules/data/items/wix-data-query/introduction.md) to refine your results. Example code: ```javascript export async function getRichContent() { const queryResults = await wixClient.items.query('MyCollectionName').find(); return queryResults.items[0].myRichContentField; } ```
To retrieve blog posts Use the SDK Blog module’s [`queryPosts`](https://dev.wix.com/docs/sdk/backend-modules/blog/posts/query-posts.md) method to retrieve your project’s blog posts. You must specify `{fieldsets: ["RICH_CONTENT"]}` in your `queryPosts()` call. You can use the [query builder](https://dev.wix.com/docs/sdk/backend-modules/blog/posts/posts-query-builder/ascending.md) to refine your results. Example code: ```js export async function getRichContent() { const queryResults = await wixClient.posts.queryPosts({fieldsets: ["RICH_CONTENT"]}).find(); return queryResults.items[0].richContent; } ```
## Step 2. Create a rich content viewer component The next step is to create a React component that uses the `@wix/ricos` package to display rich content objects. The package include a `RicosViewer` react component that can render rich content object. The component doesn't support all content types by default. For some content types, you must enable the relevant [Ricos plugin](https://dev.wix.com/docs/ricos/getting-started/introduction.md#plugins). In our code, we'll import and use the `quickStartViewerPlugins` function to enable all plugins. The viewer generates a React class component with the rendered rich content. This means you can only work with this component in client code. If your project supports [React Server Components](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components), make sure to add `"use client"` at the top of your code file. To create your component: 1. Install the `@wix/ricos` package and its dependencies. ```bash yarn add @wix/ricos ``` 1. Create a new file in your project called `RichContentViewer.jsx`. 1. Add `"use client"` to the top of the file if needed. See the introduction to this section for details. 1. Import `React`, the Ricos viewer package, `quickStartViewerPlugins`, and the plugins css file. ```javascript import React from "react"; import { quickStartViewerPlugins, RicosViewer } from '@wix/ricos'; import '@wix/ricos/css/all-plugins-viewer.css'; ``` 1. Create an array of initialized plugin objects using `quickStartViewerPlugins()`. ```javascript const plugins = quickStartViewerPlugins(); ``` > **Note:** If you don't want to enable every plugin, import only the plugins you want to enable, and then include them specifically in the `plugins` array. > >
> Example: Enable only the Divider and Heading plugins >
    >
  1. > Import pluginDivider and pluginHeading instead of quickStartViewerPlugins from '@wix/ricos': > 
    import { pluginDivider, pluginHeadings, RicosViewer } from '@wix/ricos';
    >
    2. >
  2. > Create an array of initialized plugin objects: > 
    const plugins = [pluginDivider(), pluginHeadings()];
    >
    3. >
>
1. Create a React component called `RichContentViewer` that accepts `content` as a prop and returns a `RicosViewer` component with `content` and the `plugins` array from the previous step passed in as props. Export the component. ```js const RichContentViewer = ({ content }) => { return ; }; export default RichContentViewer; ``` ## Step 3. Render rich content on a site The final step is to create a React component that uses the code from the previous sections to retrieve rich content and display it on a page. If you’re working in a framework like Next.js, this component would probably be a React Server Component defined in the code file for a particular page on your site. To create this component, do the following: 1. Add the following import statements to your file. Make sure to include the correct paths to your `rich-content-api` and `RichContentViewer` files. ```javascript import React from "react"; import RichContentViewer from "./RichContentViewer"; import { getRichContent } from "./rich-content-api"; ``` 1. Create a component called `RichContent` that uses your `getRichContent` function to retrieve your content, and then passes the result to your `RichContentViewer` component. ```javascript async function RichContent() { const richContent = await getRichContent(); return (
Your rich content:
); } ``` 1. Export another component called `Page` that includes your `RichContent` component. In a real site, this component would likely include other elements of your page. ```js export default function Page() { return ( ); } ``` ## Example code ### rich-content-api.js ```js import { createClient, OAuthStrategy } from '@wix/sdk'; import { items } from '@wix/data'; const wixClient = createClient({ auth: OAuthStrategy({ clientId: '' }), modules: { items }, }); export async function getRichContent() { const queryResults = await wixClient.items.query('MyCollectionName').find(); return queryResults.items[0].myRichContentField; } ``` ### RichContentViewer.jsx ```js "use client"; import React from "react"; import { quickStartViewerPlugins, RicosViewer } from '@wix/ricos'; const plugins = quickStartViewerPlugins(); const RichContentViewer = ({ content }) => { return ; }; export default RichContentViewer; ``` ### page.jsx ```js import React from "react"; import RichContentViewer from "@/app/components/RichContentViewer/RichContentViewer"; import { getRichContent } from "@/app/model/rich-content-api"; async function RichContent() { const richContent = await getRichContent(); return (
); } export default function Page() { return ( ); } ``` You now have a basic app that can render rich content using React. For more information about working with the SDK, see the [SDK Reference](https://dev.wix.com/docs/sdk.md).