Yozora React

A monorepo contains react components render Yozora AST Nodes. See https://yozora.guanghechen.com for details.

Use @yozora/react-yozora to render the @yozora/ast.

Choose @yozora/react-gfm for @yozora/parser-gfm ASTs, or @yozora/react-gfm-ex for tables, strikethrough, extended autolinks and task lists. @yozora/react-yozora adds footnotes, math, admonitions and executable code. The presets share @yozora/react, the rendering kernel. The former @yozora/react-markdown API now lives in @yozora/react-yozora.

The current prerelease line uses 3.0.0-alpha.26 across all public packages. See the release notes for breaking changes and known limitations, and release workflow for maintainer commands.

yozora.demo.mp4

Component demo

Run pnpm demo and open http://127.0.0.1:7302 to test themes, Markdown, the code editor, and live JSX. See packages/demo for development commands.

Styles

Import the stylesheet for the highest-level Yozora component you use:

import '@yozora/react-yozora/style.css'
import { ThemeProvider } from '@yozora/react-renderer'

Each styled package exports ./style.css, including its dependency components. For example, standalone editor users import @yozora/react-renderer-code/style.css. CSS is loaded explicitly so ESM, CommonJS, and server rendering remain usable without an automatic CSS loader. Keep these imports in your application's CSS entry point.

Styles are compiled with Tailwind CSS v4. The consumer does not need Tailwind, content scanning, or Emotion. Utilities use the yz prefix, and Preflight is excluded. Custom CSS can target existing yozora-* classes and override the --yozora_* tokens. Library rules are unlayered so ordinary host resets do not outrank component selectors. Utilities follow component rules; use matching specificity or explicit important utilities when overriding more specific component selectors. Use vscLightModernSchema.colors and vscDarkModernSchema.colors for direct color-map access. The former lightSchema and darkenSchema exports were removed.

Migrating from Emotion

• Add the stylesheet import; remove @emotion/css if your application no longer uses it.
• Import ThemeProvider from @yozora/react-renderer. Replace theme="light" with theme="vsc" variant="light-modern", and theme="darken" with theme="vsc" variant="dark-modern". Keep className and style. The new palettes replace the old colors; see the theme API.
• ThemeProvider.breakpoints, IThemeContext.breakpoints, and IBreakpoints remain available. The default small-screen threshold is 479px in compiled CSS; custom xsMinus queries render scoped <style media="..."> elements and work before hydration and without JavaScript. Both paths use the same responsive rules.
• For nonce-based CSP, pass the response nonce to ThemeProvider through its nonce prop. Custom breakpoint styles in both the theme and Markdown receive it. Nested providers inherit the nonce unless they supply their own.
• INodeStyleMap remains available without an Emotion dependency. Custom renderers continue to use INodeRendererMap, className, and React style props.
• Tables now render inside .yozora-table-scroll for horizontal scrolling. Direct-child selectors such as .yozora-markdown > section > table need to account for this wrapper; descendant selectors such as .yozora-markdown table continue to work.
• Minimum supported browsers are Chrome/Edge 111, Safari 16.4, and Firefox 128.
• Runtime JSX previews can use application CSS classes that were included at build time; class names created only inside runtime code strings are not compiled on demand.

Usage

See @yozora/react-yozora

• npm

  npm install --save @yozora/react-yozora@alpha

• yarn

  yarn add @yozora/react-yozora@alpha

import '@yozora/react-yozora/style.css'
import { calcDefinitionMap, calcFootnoteDefinitionMap } from '@yozora/ast-util'
import { ImageViewer, ThemeProvider } from '@yozora/react-renderer'
import YozoraParser from '@yozora/parser'
import { MathJaxProvider, Markdown, MarkdownProvider } from '@yozora/react-yozora'

const parser = new YozoraParser()
const ast = parser.parse(`source markdown contents`, { shouldReservePosition: true })
const definitionMap = calcDefinitionMap(ast)
const footnoteDefinitionMap = calcFootnoteDefinitionMap(ast)

<MathJaxProvider>
  <ThemeProvider theme="vsc" variant="light-modern">
    <MarkdownProvider
      definitionMap={definitionMap}
      footnoteDefinitionMap={footnoteDefinitionMap}
      ImageViewer={ImageViewer}
    >
      <Markdown ast={ast} />
    </MarkdownProvider>
  </ThemeProvider>
</MathJaxProvider>

Overview

Core

Package Name	Description
@yozora/react	Shared document layout and Provider; renderer defaults are supplied by a preset.
@yozora/react-renderer	AST renderers, SVG/image previews, themes, syntax highlighting, tokens and utilities.

AST presets

Package Name	AST standard and additions
@yozora/react-gfm	@yozora/parser-gfm base nodes.
@yozora/react-gfm-ex	GFM plus tables, strikethrough, extended autolinks and task lists.
@yozora/react-yozora	GFM-Ex plus footnotes, math, admonitions and executable code.

Markdown components

Package Name	Token Name
@yozora/react-renderer-admonition	admonition
@yozora/react-renderer-code	code

@yozora/react-renderer-code also exports CodeEditor, CodeEmbed, CodeLiteral, CodeLive, CopyButton, and LightButtons for standalone use. See its component documentation. It also provides runner factories for Graphviz, JSX, and math.

Other components

Package Name	Description
@yozora/react-embed-jsx	React component for rendering jsx directly in browser.
@yozora/react-embed-graphviz	React component for rendering graphviz (dot) directly in browser.
@yozora/react-embed-math	Render formula with mathjax in react.
@yozora/react-embed-mermaid	Render Mermaid diagrams as SVG in React.