API Reference
React Runtime and Hooks
Detailed reference for @toon-ui/react rendering components, runtime hooks, and helper functions.
This page is the operational React reference.
For the full package reference, read @toon-ui/react.
Runtime creation
const runtime = createToonReactRuntime({ components });The runtime contains:
- active catalog
- core events/messages helpers
- parser and validator
- adapter metadata
- layout configuration
Rendering markdown correctly
ToonMessage renders mixed content. It can render markdown internally, but production apps should usually pass their own markdown renderer.
<ToonMessage
content={content}
runtime={runtime}
renderMarkdown={(markdown) => <MessageResponse>{markdown}</MessageResponse>}
renderError={(error) => <MyError details={error.details} />}
onReply={(payload) => append(runtime.messages.toUIMessage(payload))}
onSubmit={(payload) => append(runtime.messages.toUIMessage(payload))}
/>This keeps your prose styling in your app while ToonUI owns only the structured toon-ui blocks.
ToonMessage vs ToonRenderer
| Component | Renders markdown | Renders ToonUI blocks | Use when |
|---|---|---|---|
ToonMessage | Yes | Yes | Assistant output is mixed markdown + UI |
ToonRenderer | No | Yes | Your app renders markdown separately |
Hooks
| Hook | Use for |
|---|---|
useToonUI() | access the current runtime |
useToonAction() | access { events, messages } |
useToonReply() | access low-level reply dispatch |
useToonSubmit() | access low-level submit dispatch |
All hooks must run below ToonProvider.
Helpers
| Helper | Use for |
|---|---|
getToonButtonProps | wire reply/submit button behavior |
getToonInputProps | wire text-like field behavior |
getToonTextareaProps | wire textarea behavior |
getToonCheckboxProps | wire checkbox behavior |
getToonFieldId | create stable field ids |
extractToonMarkdown | strip ToonUI blocks from mixed content |
Custom error rendering
<ToonMessage
content={content}
runtime={runtime}
renderError={(error) => (
<MyAlert title={error.message} details={error.details} />
)}
/>renderError receives parse and validation errors.