Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


Take files utilizing Stripe’s Markdoc format and render as static HTML. Works for standard Markdown as well.


This plugin looks to nodes created by gatsby-source-filesystem, so that plugin needs to be installed if not already.

npm install gatsby-transformer-markdoc

or if you need gatsby-source-filesystem as well

npm install gatsby-transformer-markdoc gatsby-source-filesystem

How to use

// In your gatsby-config.js
plugins: [
    resolve: `gatsby-transformer-markdoc`,
    options: {
      // Which file extensions should be parsed by Markdoc? Defaults to 'Markdoc'
      fileExtensions: ["mdoc"],
      // Config object for Markdoc, see example site for usage
      config: {},
  // If you weren't previously using gatsby-source-filesystem the config would look something like this
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/path-to-mdoc-files/`,

Plugin options


Array of strings. Nodes created by gatsby-source-filesystem include an extension field. Tell gatsby-transformer-markdoc nodes with a certain file extension should be parsed by Markdoc. For comparison gatsby-transformer-remark transforms all nodes with md or markdown extensions.


Pass an object with config options for Markdoc as outlined here: https://markdoc.dev/docs/syntax#config

MarkdocReact component

import MarkdocReact from "gatsby-transformer-markdoc/components/MarkdocReact"

This component allows you to use the Markdoc React renderer, just pass it the usual arguments. /site/src/pages/using-react-component.tsx has an example.


The Markdown/Markdoc file in string form to be rendered.


The Markdoc Config options object as outlined here. Ideally in the future this would fallback to the pluginOptions by default.


The React components to be used by the renderer. More here.

© 2023 Gatsby, Inc.