Ghost Headless + Markdown/MDX

Hey! I was hoping to understand more about what types of content the headless version of Ghost supports. I noticed that the Ghost Docs (which are apparently headless Ghost + Gatsby) currently render a form of HTML or MDX that includes components like complex tables with classnames, but not sure exactly how this would work in practice, except perhaps by inserting all of the content into HTML blocks. Does anyone know what the Docs site is doing under the hood, or done something similar before? Thanks!

You’re almost there. If you’re wanting a combination of regular content and React components then you could use the HTML card just to wrap around those components. In theory there wouldn’t be a need for MDX as you’ll already be feeding rendered markup into your React app. The missing part would be to make your React app read and render those components that are nested within the content coming from the Ghost API.

Does that make sense? Happy to go into more detail :smiley:

Ah ok thanks!
When you say ‘feeding rendered markup into React’, do you just mean setting innerHTML?

Not quite, you’ll need to parse the HTML coming from Ghost through React so it can pick up those components and render them in the browser. Briefly did some digging and found this library which parses a string of HTML through React: