Response markdown Renders streaming markdown, tables, code, math, and diagrams with Vlak typography and safe default links.
Preview The brief needs one owner per decision .
const review = { owner: 'Legal', status: 'ready' };
Completion: 2 / 3 2/3 2/3
In action A structured answer Show a simple review flow with code and a diagram.
Start with a small review loop and make its state visible.
Review checklist
Step Owner Draft Product Review Legal
const review = { owner: "Legal", status: "ready" };
The completion ratio is:
2 3 ≈ 0.67 \frac{2}{3} \approx 0.67 3 2 ≈ 0.67 Rendering diagram…
Diagram source flowchart LR
Draft --> Review
Review --> Decision
Replay response
Recorded text streams locally. Code, math, and the diagram render in your browser.
When to use Use it for Pass the current response text and streaming=true while receiving it. Completed content uses static parsing. Use the optional renderer subpath and install its documented dependencies. It needs no model vendor or Tailwind runtime. Import the documented KaTeX stylesheet to render equations and local math fonts correctly. Set imageOrigins to exact permitted origins when response images should load. Otherwise image descriptions remain readable. Use trusted components overrides for application-specific rendering. Native root attributes, styles, and refs are preserved. Avoid Passing model-authored markup through a custom component that injects it as trusted content. Assuming the renderer starts a model request, persists a message, or executes displayed code. Importing renderer code into the root component package when a lightweight application does not use it. Install React package npm install @noorddev/vlak-react streamdown@^2.6.0 shiki@^3.19.0 @streamdown/math@^1.0.2 @streamdown/cjk@^1.0.3 mermaid@^11.12.2 katex@^0.16.27 Load the stylesheet once at your app root, then import the components you use.
import "@noorddev/vlak-react/css";
import "katex/dist/katex.min.css";
import { ResponseMarkdown } from "@noorddev/vlak-react/components/response-markdown"; Per-component imports are available at @noorddev/vlak-react/components/response-markdown.
Copy the source npx @noorddev/vlak-cli add response-markdown Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.
shadcn registry npx shadcn add https://vlak.dev/r/response-markdown.json Installs the same source through the shadcn CLI.
React import { Response } from "@noorddev/vlak-react";
import { ResponseMarkdown } from "@noorddev/vlak-react/components/response-markdown";
import "katex/dist/katex.min.css";
<Response status="streaming">
<ResponseMarkdown streaming>{"Give each decision a **clear owner**."}</ResponseMarkdown>
</Response> See the integration example to compose these components with your application's model and data.
Props ResponseMarkdown Optional streaming Markdown, math, code, and diagrams with Vlak paint and safe default URLs.
Prop Type Default Description childrenrequired stringstreamingbooleanfalseTrue while the application is receiving this response. mathbooleantruediagramsbooleantruelineNumbersbooleanfalseimageOriginsreadonly string[]noImagesOnly images from these exact origins load. The default renders image descriptions. baseUrlstringOrigin used to resolve relative image addresses. componentsComponentsTrusted application components override Vlak's Markdown elements.
Also accepts Omit<HTMLAttributes<HTMLDivElement>, "children">.
The ref reaches HTMLDivElement.
Keyboard Keys Does Tab Reaches links, scrollable tables and code, diagram controls, and the native source disclosure. Enter, Space Activates the focused code or diagram button; the native source summary expands or collapses.
Accessibility Changing response text stays outside a live region. Compose with Response for short response status announcements. Headings, lists, tables, readable code, and math retain semantic markup. Tables and code are keyboard-scrollable. Raw markup is disabled and sanitized. Links allow web and mail protocols; other protocols and incomplete links remain inert text. Math uses KaTeX with its default trust restrictions. Diagrams load only after a complete fence and use strict rendering with source fallback. Diagram zoom controls have descriptive names, 44px targets, and visible focus. Invalid or oversized diagrams preserve their source. Markup The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.
npm install @noorddev/vlak import "@noorddev/vlak/css"; <div class="rs-response-markdown"><p class="rs-response-markdown-paragraph">Give each decision a <strong class="rs-response-markdown-strong">clear owner</strong> and a next step.</p></div> Classes .rs-response-markdown-paragraph .rs-response-markdown-strong .rs-response-markdown-list .rs-response-markdown-item .rs-response-markdown-quote .rs-response-markdown-inline .rs-response-markdown-link .rs-response-markdown-image .rs-response-markdown-image-description .rs-response-markdown-table-region .rs-response-markdown-table .rs-response-markdown-th .rs-response-markdown-td .rs-response-markdown-rule .rs-response-markdown-diagram .rs-response-markdown-diagram-viewport .rs-response-markdown-diagram-art .rs-response-markdown-diagram-header .rs-response-markdown-diagram-title .rs-response-markdown-diagram-action .rs-response-markdown-diagram-icon .rs-response-markdown-summary .rs-response-markdown-feedback .rs-response-markdown .rs-response-markdown-h1 .rs-response-markdown-h2 .rs-response-markdown-h3 .rs-response-markdown-h4 .rs-response-markdown-h5 .rs-response-markdown-h6