Universal MDX
npx @fullproduct/universal-app install with/automatic-docsThis adds the @app/mdx workspace package for universal Markdown/MDX rendering, plus the @app/docs app with automatic documentation generation.
import { MarkdownTheme, MarkdownImage } from '@app/mdx'- MarkdownTheme.tsx
- MarkdownImage.tsx
- markdown.theme.css
Markdown rendering with @bacons/mdx
The @app/mdx package provides a universal theme for rendering MDX content on both Web and React Native. It builds on @bacons/mdx , which compiles MDX at build time and provides a set of customizable components for headings, paragraphs, links, images, and more.
How it works
- MarkdownTheme — Wraps MDX content and maps markdown elements (h1–h3, p, ul, li, blockquote, a, img) to your design system components from
@app/ui - MarkdownImage — A responsive image component used for
imgelements in MDX, with layout-based dimension calculation - markdown.theme.css — Web-specific styles for the theme (typography, list styling, anchor links on headings)
Markdown is rendered through @bacons/mdx’s MDXComponents, which accepts custom component overrides per element type. MarkdownTheme passes your primitives so MDX inherits your app’s look and feel.
Usage
import MarkdownTheme from '@app/mdx'
import ReadMe from './ReadMe.mdx'
<MarkdownTheme>
<ReadMe />
</MarkdownTheme>See MarkdownTheme and MarkdownImage for full docs.
Automatic documentation generation
The @app/docs app uses a regenerate-docs script that scans your features/ and packages/ workspaces and generates MDX documentation for schemas, resolvers, and components. This keeps docs in sync with your codebase while letting you add custom developer notes where needed.
How it works
The script looks for:
- Schemas in
{workspace}/schemas/{SchemaName}.schema.ts - Resolvers via their DataBridge in
{workspace}/resolvers/{resolverName}.bridge.ts - Components with
getDocumentationProps()in{workspace}/**/{ComponentName}.tsx
Each generated page includes imports, type definitions, usage examples, and links back to source files. You can extend any page with custom notes via .docs.mdx files placed next to the source.
Regenerate docs
npm run regenerate:docsFull guide
For schema, resolver, and component docgen, custom notes, and opt-out behavior, see:
- Automatic Docgen — Complete guide to the documentation system
Automatic docgen means your documentation stays up to date with your codebase. You write the code once, and comprehensive docs are generated. Add custom developer notes via .docs.mdx files next to the source when you need manual polish.