StellarUI

<stellar-markdown>

Dependency-free markdown renderer for authored child text.

Preview

Dependency-free markdown renderer for authored child text.

# Heading one ## Heading two ### Heading three #### Heading four ##### Heading five ###### Heading six Paragraph with **bold**, *italic*, ~~strikethrough~~, `inline code`, \*escaped asterisks\*, [a safe link](/components/stellar-markdown), and [StellarUI](https://stellarui.dev). ![Example image](https://picsum.photos/seed/stellar-markdown/900/420) > Blockquote text with [example](https://example.com). > [!HINT] > Hints render with a lightweight visual marker. > [!WARNING] > Warnings call attention to risky choices. > [!ALERT] > Alerts mark the highest priority note. - Unordered item - Nested unordered item - [x] Completed task - [ ] Open task - [-] Indeterminate task 1. Ordered item 1. Nested ordered item 2. Another ordered item | Feature | Support | | --- | ---: | | Tables | Yes | | Tasks | Yes | --- ```curl curl https://stellarui.dev \ -H "Accept: application/json" ```

Markup

Copy

<stellar-markdown code="editor">
# Heading one

## Heading two

### Heading three

#### Heading four

##### Heading five

###### Heading six

Paragraph with **bold**, *italic*, ~~strikethrough~~, `inline code`, \*escaped asterisks\*, [a safe link](/components/stellar-markdown), and [StellarUI](https://stellarui.dev).

![Example image](https://picsum.photos/seed/stellar-markdown/900/420)

> Blockquote text with [example](https://example.com).

> [!HINT]
> Hints render with a lightweight visual marker.

> [!WARNING]
> Warnings call attention to risky choices.

> [!ALERT]
> Alerts mark the highest priority note.

- Unordered item
  - Nested unordered item
- [x] Completed task
- [ ] Open task
- [-] Indeterminate task

1. Ordered item
   1. Nested ordered item
2. Another ordered item

| Feature | Support |
| --- | ---: |
| Tables | Yes |
| Tasks | Yes |

---

```curl
curl https://stellarui.dev \
  -H "Accept: application/json"
```
</stellar-markdown>

Properties

Prop	Type	Default	Notes
`active-heading-on-intersect`	`string`	`''`	Optional Datastar expression run from heading data-on-intersect events.
`active-heading-signal`	`string`	`''`	Optional Datastar signal name updated from heading data-on-intersect events.
`code`	`pre \| editor`	`pre`

Events

Slots

Notes

Authored child text is the markdown source. The component trims outer blank lines and removes common indentation before rendering.
Supported block syntax: `#` through `######` headings with clickable anchor links, paragraphs, `>` blockquotes, `[!HINT]`, `[!TIP]`, `[!NOTE]`, `[!INFO]`, `[!WARNING]`, `[!ALERT]`, and `[!DANGER]` callouts inside blockquotes, `-` unordered lists, `1.` ordered lists, nested lists by indentation, `- [ ]`, `- [x]`, and `- [-]` task lists, pipe tables, `---` or `***` horizontal rules, and triple-backtick fenced code blocks with optional language labels.
Supported inline syntax: `**bold**`, `*italic*`, `~~strikethrough~~`, inline backtick code, `[label](href)` links, `![alt](src)` images, and backslash escapes like `\*literal\*`.
The MVP escapes text by default instead of allowing raw HTML, and unsafe link protocols such as `javascript:` are rendered without a live `href`.
`code='pre'` is the default and renders fenced code as native `pre > code` blocks.
`code='editor'` emits `stellar-code-editor` for fenced code without importing the editor into the markdown bundle. Fences labeled `curl`, `bash`, `sh`, or `shell` use the bundled curl language module. Fences labeled `ron` use the bundled RON language module.