Response.
Markdown that reads well mid-sentence.
Renders a model's GitHub-flavored markdown with Dixy typography, code blocks, links and tables. While text is still arriving, unfinished fences and bold are closed for display, so half a reply never turns into a wall of code or stray asterisks.
Make it yours
Preparing the example…
Composition
AnatomyMarkdown is split into blocks at blank lines; finished blocks are memoized, so each new token re-parses only the last one. Install the optional peers react-markdown and remark-gfm.
Response (streaming, headingOffset, components)
├── block — memoized, parsed once
├── block — memoized, parsed once
└── last block — repaired with completeMarkdown while streaming
├── h3 (from #), p, ul, Blockquote, Code
├── CodeBlock (from ``` fences)
└── Table (from pipes), scrollable regionA place to start
UsageImport the stylesheet once at your application root. This complete example reflects the properties selected above.
Loading example…
Details that make a difference
Examples & statesThe finer details
API referenceGenerated from Dixy’s local TypeScript interfaces. Native HTML attributes and refs are forwarded. The table covers Dixy’s own options.
Response
| Prop | Type / description | Default |
|---|---|---|
children* | stringMarkdown from the model, GitHub flavored: tables, task lists, strikethrough and autolinks. Raw HTML is shown as text, never rendered. | — |
streaming | booleanThe text is still arriving. Unfinished fences, code and bold are closed for display, and the region reports itself busy. | false |
headingOffset | numberLevels added to markdown headings so a reply's "# Title" sits below the page's own headings. | 2 (h1 renders as h3) |
components | ComponentsReplace how individual elements render; merged over Dixy's mapping. | — |
remarkPlugins | Options["remarkPlugins"]Extra remark plugins, run after remark-gfm. | — |
placeholder | ReactNodeShown while streaming has started but no text has arrived. | — |
Built from the same foundations
Styling tokensChange Theme settings above to compare appearance, accent, neutral, radius, spacing density, motion and direction. Override component aliases on a Theme root so custom properties follow portaled content too. The wrapper merges className, style, refs and render composition with its owning primitive.
| Token | Purpose |
|---|---|
--dixy-font-body-md | The component-specific starting point. |
--dixy-font-label-md | Control label font and line height; body roles remain readable in text inputs. |
--dixy-color-background-selected | Selected surfaces use semantic color across appearances. |
--dixy-color-border-focus | Focus indication remains visible independently of shadows. |
--dixy-spacing-inset-sm | Density-aware component padding. |
--dixy-motion-transition-feedback | Short state feedback, reduced by the inherited motion setting. |
Consider everyone
AccessibilityHeadings shift down two levels by default, so a reply's # Title does not compete with the page's own h1. External links open in a new tab with rel=noopener. Raw HTML in a reply is shown as text, never rendered. A streaming response sets aria-busy.
Target: WCAG 2.2 AA. Automated tests cover selected behavior; manual screen-reader, contrast, and zoom validation remain part of the release checklist.
Build it. Then understand it.
A partial reply is invalid markdown most of the time. Repairing only the tail (close the fence, pair the **, drop a half-arrived link) keeps every frame readable without changing the final text.
--dixy-font-body-md