OMNI-CORE LogoOMNI-CORE
omni-mdxomni-3D (soon)Open SourceAbout
GitHubDocumentation
OMNI-CORE

Knowledge must flow freely to shape the future.

Ecosystem

  • omni-mdx
  • omni-3D

Resources

  • Documentation
  • Interactive Playground

Legal & Open Source

  • GitHub Organization
  • Notice

TOAQ GROUP © 2024 - 2026

Released under the MIT License.

Navigation

Getting Started

  • Introduction
    • Web & Next.js
    • Python Engine
    • Build from Source
  • Syntax Guide

Web Integration

  • Next.js Integration
  • Binary AST Transfer
  • Custom Components
  • Unified & Plugins Ecosystem Integration
    • Basic App Router
    • Advanced Rendering
    • Live Client Editor

Python

  • Introduction & Core Engine
    • Basic Parsing & Traversal
    • Advanced Analysis & RAG
    • Native Qt Rendering
    • HTML & Web Rendering
    • Basic Parsing
    • Advanced Analysis
    • HTML Rendering
    • Qt Rendering

Architecture & Core

    • Design Philosophy
    • The Rendering Pipeline
    • Lexing & Tokenization
    • AST Node Design
    • Math & JSX Handling
    • Protocol Specification
    • Zero-Copy Decoding
    • Memory Lifecycle
    • WASM Bindings (Browser)
    • Node.js Native Addons
    • Python Bindings (PyO3)
  • Security
    • Benchmarks
    • Fuzzing Results
Docs
Web Integration
Examples
Live Client Editor

Example: Live Client Editor

Last Updated March 22, 2026

While Server-Side Rendering is recommended for static documentation, Client-Side Rendering is essential when dealing with user-generated content or building live preview interfaces.

Because Omni-Core is powered by Rust and compiled to WebAssembly (WASM), it can run directly inside the user’s browser at near-native speeds.

ℹ️ Information
Full Source Code: Try the live editor example yourself by cloning omni-mdx-sandbox/next.

The Architecture

To parse MDX on the client, you must use the "use client" directive in Next.js. The parsing process is typically wrapped inside a useEffect hook to continuously generate the AST whenever the user’s input changes.

Implementation: Live Preview Editor

Here is how you can build a real-time split-pane editor. The user types raw Markdown on the left, and the WASM engine instantly renders the AST on the right.

tsx
"use client";

import { useState, useEffect } from 'react';
import { parseMdx, MDXClientRenderer } from '@toaq-oss/omni-mdx/client';
import { MDX_COMPONENTS } from '@/components/mdx-components';

export default function LiveEditor() {
  const [input, setInput] = useState('# Type your MDX here\\n\\nWatch it render instantly!');
  const [ast, setAst] = useState(null);

  useEffect(() => {
    // The WebAssembly engine parses the input in real-time
    const compile = async () => {
      try {
        const parsedAst = await parseMdx(input);
        setAst(parsedAst);
      } catch (error) {
        console.error("Parsing error:", error);
      }
    };
    
    compile();
  }, [input]);

  return (
    

      {/* Left Pane: User Input */}