Support a base set of NPM packages for building custom React Components (e.g. Playground)

[michielmulders]

I'm trying to design a custom component, but I'm unable to install any dependencies myself using NPM.

For example, I'm designing a custom code component where the user can input an API key, modify the request, and then send it to our backend. The returned response is then shown below the request. This allows them to play with the different requests from the docs on their own accounts, building an interactive playground as it is.

However, I'm missing a syntax highlighting package. I tried installing it via NPM but this had no effect. I would like Mintlify to embed/install a base set of packages that help clients quickly build interesting components like an interactive playground. This would make the custom component feature much more useful and it can kickstart a small community/marketplace where users can find cool plugins to improve their docs.

E.g. prism react render for syntax highlighting

import Highlight, { defaultProps } from "prism-react-renderer";
import theme from "prism-react-renderer/themes/vsDark";

E.g. what I'm trying to build:

Thanks,
Michiel

[novusnota]

+1, would love to see react-zoom-pan-pinch and codemirror's packages available for import and use.

Currently, one can only use packages that have UMD builds — by importing them via injecting a new <script> tag beforehand, then accessing the window.[package_injected_name] property within the component once the if (window.package_injected_name_here) { ... } check passes.

[michielmulders]

@novusnota How do you do this? Do you inject the script tag at the top of a React component in your snippets folder? Do you perhaps have a small example? I didn't think of this approach, but it depends on UMD builds being available. So not the best solution haha.

[novusnota]

Here's an example of using a UMD library in Mintlify: https://github.com/orgs/mintlify/discussions/1071

I think it can be simplified further, but it's a good start. Perhaps injecting the script tag can be done within the React component instead of the global script — this would load the script only on the relevant pages, but can be detrimental to those pages' performance (and lead to repeated injection issues if we use this component more than once). Maybe if you add an id to the script tag, you could check for it, but I doubt there won't be any issues in the async scenario with many components doing that.

Therefore, the global script + React component combo seems to be the local optimum.