MarkDoc Renderers

StudioCMS’s MarkDoc renderer allows you to define custom renderers for your content. This allows you to define custom rendering logic for your content.

MarkDoc React Renderer

A custom renderer for StudioCMS’s MarkDoc renderer that allows the user to use MarkDoc with React and custom React components.

Usage

Normally, users will not need to install the @studiocms/renderers package directly, as it is included as a dependency in the studiocms package. However, defining a custom renderer provided by @studiocms/renderers is possible.

1. Install @astrojs/react using the following command:

   npm

   npx astro add @astrojs/react

   yarn

   yarn astro add @astrojs/react

   pnpm

   pnpm astro add @astrojs/react

2. Install the @studiocms/renderers package as a dependency using the following command:

   npm

   npm i @studiocms/renderers

   yarn

   yarn add @studiocms/renderers

   pnpm

   pnpm add @studiocms/renderers

3. Add the MarkDoc React renderer to your configuration:

   astro.config.mjs

   When using only the astro.config.mjs file, you can add the MarkDoc React renderer to your configuration like so:

   astro.config.mjs

   import { defineConfig } from 'astro/config';
   import db from '@astrojs/db';
   import node from '@astrojs/node';
   import studioCMS from 'studiocms';
   import react from '@astrojs/react';
   import markDocRenderReact from '@studiocms/renderers/exports/markdoc/react';
   
   export default defineConfig({
       site: 'https://demo.astro-studiocms.xyz/',
       output: 'server',
       adapter: node({ mode: "standalone" }),
       integrations: [
           db(),
           react(),
           studioCMS({
               rendererConfig: {
                   renderer: "markdoc",
                   markdocConfig: {
                       renderType: markDocRenderReact({
                           // Define your custom React components here
                       }),
                   }
               },
           }),
       ],
   });

   studiocms.config.mjs

   When using the studiocms.config.mjs file alongside your astro.config.mjs, you can add the MarkDoc React renderer to your configuration like so:

   astro.config.mjs

   import { defineConfig } from 'astro/config';
   import db from '@astrojs/db';
   import node from '@astrojs/node';
   import studioCMS from 'studiocms';
   import react from '@astrojs/react';
   
   export default defineConfig({
       site: 'https://demo.astro-studiocms.xyz/',
       output: 'server',
       adapter: node({ mode: "standalone" }),
       integrations: [
           db(),
           react(),
           studioCMS(),
       ],
   });

   studiocms.config.mjs

   import { defineStudioCMSConfig } from "studiocms";
   import markDocRenderReact from '@studiocms/renderers/exports/markdoc/react';
   
   export default defineStudioCMSConfig({
       //...Rest of your StudioCMS configuration
       rendererConfig: {
           renderer: "markdoc",
           markdocConfig: {
               renderType: markDocRenderReact({
                   // Define your custom React components here
               }),
           }
       },
   });

For more information on how to configure the MarkDoc renderer, see the MarkDoc Configuration documentation.