Metadata Renderer

React components that render metadata documents of various types consistently.

📖 Full documentation: https://open-resource-discovery.github.io/metadata-renderer/

👉 LIVE DEMO https://open-resource-discovery.github.io/metadata-renderer/playground

Supported formats

• OpenAPI 2.0, 3.0 / 3.1+ (JSON or YAML) — via Scalar
• CSN Interop — via csn-interop-renderer
• AsyncAPI 2.x / 3.x (JSON or YAML) — via @asyncapi/react-component
• A2A Agent Cards — via @open-resource-discovery/a2a-editor
• MCP Server Cards — via @open-resource-discovery/mcp-server-card-ui

More formats will be added over time. See the Support page for the current list.

Install

Requires Node.js ≥ 22, npm ≥ 10, and React 18 or 19.

npm install @open-resource-discovery/metadata-renderer

Usage

The default MetadataRenderer auto-detects the format from the input string and dispatches to the appropriate renderer.

import { MetadataRenderer } from '@open-resource-discovery/metadata-renderer';
import '@open-resource-discovery/metadata-renderer/styles';

export function MyView({ file }: { file: string }) {
    return <MetadataRenderer content={file} />;
}

The styles import is side-effecting and must appear once in your application entry file.

Protocol-specific renderers

If you already know the format, import only the renderer you need — the rest stays out of your bundle:

import { OpenApiRenderer } from '@open-resource-discovery/metadata-renderer/openapi';
import { CsnRenderer } from '@open-resource-discovery/metadata-renderer/csn';
import { AsyncApiRenderer } from '@open-resource-discovery/metadata-renderer/asyncapi';
import { A2ARenderer } from '@open-resource-discovery/metadata-renderer/a2a';
import { McpRenderer } from '@open-resource-discovery/metadata-renderer/mcp';

Theming

Pass a theme prop to override the default color tokens. Use the createTheme helper for a type-safe camelCase API:

import { MetadataRenderer, createTheme } from '@open-resource-discovery/metadata-renderer';

const theme = createTheme({
    primary: '#0098ff',
    background: '#1e1e1e',
    foreground: '#d4d4d4',
});

<MetadataRenderer content={file} className="dark" theme={theme} />;

See the Usage guide for the full prop reference and theming tokens.

Maintainers: to change how each renderer is styled internally (native library output and this project's custom components), see STYLING.md.

Development

npm run dev              # Vite dev server (demo app)
npm run build            # Build library to dist/
npm test                 # Run unit tests
npm run typecheck        # TypeScript check
npm run website:start    # Start the Docusaurus docs site locally

Contributing

Please see CONTRIBUTING.md for details on how to contribute to this project.

License

Please see our LICENSE for copyright and license information. Detailed information including third-party components and their licensing/copyright information is available via the REUSE tool.