import { MDXRenderer } from 'gatsby-mdx';
export default class MyPageLayout {
render() {
export const pageQuery = graphql`
query MDXQuery($id: String!) {
mdx(id: { eq: $id }) {
code {


MDXRenderer is a React component that takes compiled MDX content and renders it. You will need to use this if your MDX content is coming from a GraphQL page query or StaticQuery.

MDXRenderer takes any prop and passes it on to your MDX content, just like a normal React component.

<MDXRenderer title="My Stuff!">{mdx.code.body}</MDXRenderer>

Manually Providing Scope

Note You should never need to do what is explained here under normal library usage. If you think you need to it is possible there is a bug and you should file an issue.

MDXRenderer accepts a scope prop that can be used in special circumstances to override the imports provided to MDX content. Think of scope like an object where we have import names as keys and the import value as the value.

An example scope object may look like this. Note that React and MDXTag are already imported by MDXRenderer and added to any scope passed in. Therefore they never need to be provided in practice. This is just an example.

import React from 'react';
import { MDXTag } from '@mdx-js/tag';
const scope = {
React: React,
<MDXRenderer scope={scope} title="My Stuff!">{mdx.code.body}</MDXRenderer>
edit this page on GitHub