Markdown

Rendered markdown with a switch to the source. It builds React nodes and never sets innerHTML, so a document you did not write cannot execute — and the RAW toggle is there because rendered output hides exactly what you look at when it renders wrongly.

src/components/ui/markdown.tsx

About

From the component's own source, where it was written.

Rendered markdown, with a switch to the source.

**It builds React nodes. It never sets innerHTML.** Almost every small markdown renderer converts to an HTML string and injects it, which turns any document you did not write — a README from a registry, a model's output, a comment — into script execution. Producing elements means there is no string for a payload to survive in, and the one place raw HTML could appear in markdown is passed through as text instead.

**The RAW toggle is the point of the component.** Rendered markdown hides the difference between a hard line break and a soft one, between * and _, between a real table and an aligned one — and those are exactly what someone is looking for when a document renders wrongly. Source is one click away and copyable.

The supported subset is what documents actually contain: ATX headings, bold, italic, inline code, links, images, fenced and indented code, ordered and unordered lists, blockquotes, horizontal rules, and tables. Setext headings, reference links, footnotes and nested blockquotes are not handled — a complete CommonMark implementation is a library, not a component, and this one is honest about where it stops.

Install

npx astralyx-ui add markdown

Usage

import { Markdown } from '@/components/ui/markdown'

<Markdown>{notes}</Markdown>

Composer

Change the props and the source below follows.

Release notes

Astralyx UI 0.4.0 adds thirty components — charts, views and analytics.

What changed

A QrCode that encodes in the page — no dependency, nothing sent anywhere
Sankey, treemap, radar, scatter and box plots
Gantt, scheduler and org chart

A backup nobody has restored is a hypothesis.

Area	Components
Charts	5
Analytics	5
Views	3

<Markdown>{notes}</Markdown>

Read the full changelog, or ~~skip it~~ install with: npm i -D astralyx-ui.

Props

start on RAWshow toggle

tsx

<Markdown defaultRaw={false} toggle={true}>
  {notes}
</Markdown>

Examples

A release note

tsx

<Markdown>{notes}</Markdown>

Opened on the source

tsx

<Markdown defaultRaw>{notes}</Markdown>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Markdown`

Extends Omit<ComponentProps<'div'>, 'children'>.

Prop	Type	Default	Description
children	string	required	The markdown source.
defaultRaw	boolean	false	Rendered markdown hides hard versus soft breaks, `*` versus `_`, a real table versus an aligned one. Source is one click away and copyable.
toggle	boolean	true	Rendered markdown hides hard versus soft breaks, `*` versus `_`, a real table versus an aligned one. Source is one click away and copyable.
previewLabel	string	'Preview'	—
rawLabel	string	'Raw'	—
copyLabel	string	'Copy markdown'	—
actions	ReactNode	—	Trailing slot in the toolbar.
emptyLabel	string	'Nothing to show.'	Rendered when the source is empty.

Functions

Function	Signature	Description
renderMarkdown	(source: string) => ReactNode[]	—

Behaviour

Topic	Detail	Description
no innerHTML	by construction	Every small renderer converts to an HTML string and injects it, which turns any document you did not write into script execution. Building elements means there is no string for a payload to survive in.
link safety	scheme allow-list	Only http(s), mailto and relative URLs become links; anything else — `javascript:` above all — renders as plain text.
supported	the practical subset	ATX headings, bold, italic, strikethrough, inline code, links, images, fenced code, lists, blockquotes, rules and tables. Setext headings, reference links and footnotes are not — a full CommonMark implementation is a library, not a component.