Example: Advanced Rendering & Custom Components

Last Updated March 22, 2026

The true strength of Omni-Core lies in its ability to interweave rich text with highly interactive React components. This is the perfect approach for rendering complex datasets or experimental protocols.

Rendering Specific Components

Imagine you are documenting an experimental protocol and need to display an interactive player linked to a specific vocal dataset. You can map a custom XML tag present in your MDX directly to a heavy, interactive React component.

1. The Source MDX File

In your Markdown document, you naturally insert your component:

## Vocal Dataset Analysis (Cohort A)

The following excerpt demonstrates intonation variations during the cognitive load test:

2. The React Mapping (mdx-components.tsx)

On the Next.js side, you intercept this tag to inject your interactive client component:

"use client";

import { VocalDatasetPlayer } from '@/components/science/VocalDatasetPlayer';
import { InlineMath, BlockMath } from '@/components/science/MathRenderer';

export const MDX_COMPONENTS = {
  // Redefining standard HTML tags
  h1: (props: any) => 
,
  
  // Mapping your custom analysis components
  VocalDatasetPlayer: (props: any) => ,
  
  // Rendering mathematics (LaTeX) extracted by the AST
  InlineMath: ({ content }: { content: string }) => ,
  BlockMath: ({ content }: { content: string }) => ,
};

Thanks to this strict separation between parsing (Rust) and rendering (React), the engine never slows down, even if your document contains dozens of charts, mathematical equations, or audio samples.