Using rich text widgets with FastStore

The CMS provides rich text widgets for formatted storefront content. To let editors insert images, set the field widget to draftjs-rich-text-v2. Render that field with RichText from @faststore/core.

Make sure that:

• The store uses the CMS. In discovery.config.js, set contentSource.type to CP.
• Your project uses the latest FastStore version so the storefront can render images added with draftjs-rich-text-v2.
• You can edit and upload the store's CMS schema. See Content plugin.

1. In cms/faststore/components/, define the rich text field as a string and set widget.ui:widget to draftjs-rich-text-v2. For example, cms_component__richtextsection.jsonc:

   
   

   _17

   {

   _17

   "$extends": ["#/$defs/base-component"],

   _17

   "$componentKey": "RichTextSection",

   _17

   "$componentTitle": "Rich text section",

   _17

   "title": "Rich text section",

   _17

   "type": "object",

   _17

   "required": ["content"],

   _17

   "properties": {

   _17

   "content": {

   _17

   "title": "Content",

   _17

   "type": "string",

   _17

   "widget": {

   _17

   "ui:widget": "draftjs-rich-text-v2"

   _17

   }

   _17

   }

   _17

   }

   _17

   }

   
   

2. After changing the schema, open a terminal and run the following command to generate the consolidated schema:

   
   

   _10

   vtex content generate-schema

   
   

3. Upload the schema to the CMS:

   
   

   _10

   vtex content upload-schema

   
   

In a FastStore project, you can run both steps with a single command from the store root:

For more information about these commands, see Content plugin.

1. In src/components, create RichTextSection.tsx and pass the CMS field to RichText from @faststore/core. Set $componentKey to the same value used in the schema:

   
   

   _11

   import { RichText } from '@faststore/core'

   _11

   _11

   export interface RichTextSectionProps {

   _11

   content: string

   _11

   }

   _11

   _11

   export default function RichTextSection({ content }: RichTextSectionProps) {

   _11

   return <RichText content={content} />

   _11

   }

   _11

   _11

   RichTextSection.$componentKey = 'RichTextSection'

   
   

   RichText from @faststore/core is the ready-to-use way to render this field, including images. You can also render the field with your own component, but it must handle the image content stored by the CMS.

2. Export the section in src/components/index.tsx:

   
   

   _10

   import RichTextSection from './RichTextSection'

   _10

   _10

   export default {

   _10

   RichTextSection,

   _10

   }

   
   

For more information about creating and registering sections, see Creating a new section in the CMS.

1. In the VTEX Admin, go to Storefront > All Content.
2. Open an entry containing the image-enabled rich text field.
3. In the rich text toolbar, click the image action.
4. Select an existing image from the Media Gallery or upload a new one. Supported formats are PNG, JPG, JPEG, GIF, WebP, and SVG.
5. Select the inserted image to display its controls. You can:
   • Align the image to the left, center, or right.
   • Resize it by dragging a corner handle.
   • Expand it to the full width of the rich text field.
   • Delete it.
   • Drag it to another position among the text paragraphs.
6. Save the entry and use the branch preview to verify the content on the storefront.
7. When the content is ready, merge the branch to publish it.

The CMS derives the image alternative text from its filename. Use a descriptive filename before uploading the image.