React Code View is a React component library for rendering code with live preview and syntax highlighting. It provides a CodeView component that combines an editable code editor, live preview, and syntax highlighting, allowing developers to create interactive code examples. The library includes build tool plugins (unplugin) for Vite, Webpack, Rollup, esbuild, and Rspack that enable importing markdown files as React components with automatic code block processing. At its core, it uses Sucrase for JSX/TS transformation, Shiki for syntax highlighting, and CodeMirror 6 for the editing experience, with code execution happening in a sandboxed environment.
Mintlify's @mintlify/mdx is a thin TypeScript library that wraps next-mdx-remote-client to provide a simplified MDX rendering experience for Next.js applications. It adds rich syntax highlighting via Shiki, including support for language-specific highlighting, line highlights, diffs, and twoslash-powered TypeScript type hover popups. The library exposes three main APIs: `serialize` (server-side compilation), `MDXClient` (client-side rendering), and `MDXRemote` (RSC component that combines both). It includes pre-configured remark plugins (GFM, Smartypants, Math) and rehype plugins (Katex, syntax highlighting) with the ability to extend with custom plugins. The package also provides UI components for twoslash popups and a Shiki transformer for shell placeholder highlighting. The codebase is well-structured with clear separation of concerns, though test coverage is limited to the shell placeholder transformer.