Embed hype as React MDX components


I need to add my hype document as React MDX components as I'm using Docusaurus to create some documentation. Is there an existing MDX component or way to export from hype in this way?

There are some threads concerning Hype and React. The problem is that Hype builds it's own DOM on the fly so having React trying to reflect it's Shadow DOM with the little it actually "sees" and "knows" about Hype will lead to it being most likely constantly reinitialized. There has been guest here on the forum solving it by encapsulating Hype in an iFrame and managing that in an React manner. You could then also build a postMessage bridge to the iFrame sending Hype commands from your React app. Then there are also ways to instruct React that there are certain nodes and decedents that shouldn't be touched. So, in that sense you could "draw a circle" around the Hype DOM and reach into it through window.HYPE.document (to trigger actions from React) and Hype Events to get some feedback from Hype.

1 Like

I am not a MDX user but what I can see on the documentation this caught my eye:

:fire: Blazingly blazing fast : MDX has no runtime, all compilation occurs during the build stage.

So, basically the reactive part might be diminished the moment you render the components. That should make it more likely for a Hype integration as they probally don't interfere with each other anymore.

1 Like