A lazy-loaded markdown component for Object UI based on react-markdown with GitHub Flavored Markdown support.
- Internal Lazy Loading: react-markdown is loaded on-demand using
React.lazy()andSuspense - Zero Configuration: Just import the package and use
type: 'markdown'in your schema - Automatic Registration: Components auto-register with the ComponentRegistry
- Skeleton Loading: Shows a skeleton while react-markdown loads
- XSS Protection: All content is sanitized via rehype-sanitize
- GitHub Flavored Markdown: Full support for tables, strikethrough, task lists, etc.
pnpm add @object-ui/plugin-markdown// In your app entry point (e.g., App.tsx or main.tsx)
import '@object-ui/plugin-markdown';
import type { MarkdownSchema } from '@object-ui/plugin-markdown';
// Now you can use markdown type in your schemas
const schema: MarkdownSchema = {
type: 'markdown',
content: '# Hello World\n\nThis is **markdown** text.'
};import { markdownComponents } from '@object-ui/plugin-markdown';
import { ComponentRegistry } from '@object-ui/core';
// Manually register if needed
Object.entries(markdownComponents).forEach(([type, component]) => {
ComponentRegistry.register(type, component, { namespace: 'plugin-markdown' });
});The plugin exports TypeScript types for full type safety:
import type { MarkdownSchema } from '@object-ui/plugin-markdown';
const schema: MarkdownSchema = {
type: 'markdown',
content: '# Hello World\n\nThis is **markdown** text.'
};MarkdownSchema has one authority — it is declared in @object-ui/types and
re-exported by this package — so the members are listed here rather than
re-declared as a second copy in a code block.
| Member | Type | Required | Default | Read by |
|---|---|---|---|---|
type |
'markdown' |
yes | none | the registry, to resolve this renderer (registered under the plugin-markdown namespace) |
content |
string |
yes | none — see the note below | MarkdownRenderer, which forwards it to the lazy implementation; supports GitHub Flavored Markdown |
className |
string |
no | none | MarkdownRenderer, which puts it on the markdown container as Tailwind classes |
Every other member is inherited from BaseSchema; this renderer reads none of
them.
⚠️ content: what the contract says and what the runtime does. The type declarescontentREQUIRED and the component'sinputsmanifest declares itrequired: true— but the renderer readsschema.content || '', so a node that omits it renders empty instead of failing. Both statements are true, and neither is widened or narrowed here.
sanitize and components appear on the interface only as ADR-0049 retirement
tombstones (?: never, objectui#6972) — they are not authorable members and
nothing reads them. Sanitization is unconditional: there is no authored spelling
that turns it off.
- Headers (H1-H6)
- Bold, italic, and inline code
- Links and images
- Lists (ordered, unordered, and nested)
- Tables
- Blockquotes
- Code blocks with syntax highlighting
- Strikethrough
- Task lists
- Autolinks
The plugin uses a two-file pattern for optimal code splitting:
MarkdownImpl.tsx: Contains the actual react-markdown import (heavy ~100-200 KB)index.tsx: Entry point withReact.lazy()wrapper (light)
When bundled, Vite automatically creates separate chunks:
index.js(~200 bytes) - The entry pointMarkdownImpl-xxx.js(~100-200 KB) - The lazy-loaded implementation
The react-markdown library is only downloaded when a markdown component is actually rendered, not on initial page load.
By using lazy loading, the main application bundle stays lean:
- Without lazy loading: +100-200 KB on initial load
- With lazy loading: +0.19 KB on initial load, +100-200 KB only when markdown is rendered
This results in significantly faster initial page loads for applications that don't use markdown on every page.
# Build the plugin
pnpm build
# The package will generate proper ESM and UMD builds with lazy loading preservedMIT — see LICENSE.