@toon-ui/react

@toon-ui/react is the package for teams that want control, not just convenience.

Use it when the UI layer matters enough that defaults are not enough.

Why use `@toon-ui/react`?

Use it when you want:

explicit adapter ownership
custom component mapping
design-system integration
stricter rendering guarantees

What it owns

React rendering runtime
adapter creation
adapter coverage metadata
preset merging
helper props for custom controls

Core APIs

createToonReactAdapter()
createToonReactRuntime()
ToonMessage
ToonRenderer
extractToonMarkdown()
getToonButtonProps()
getToonInputProps()
getToonTextareaProps()
getToonCheckboxProps()
basicPreset()
useToonAction()

Recommended starting pattern

import {
  createToonReactAdapter,
  createToonReactRuntime,
  getToonButtonProps,
  type ToonButtonComponentProps,
} from '@toon-ui/react';

function MyButton(props: ToonButtonComponentProps) {
  return <button {...getToonButtonProps(props)}>{props.node.label}</button>;
}

const adapter = createToonReactAdapter({
  level: 'default',
  components: {
    button: MyButton,
  },
});

const runtime = createToonReactRuntime({ adapter });