---
title: "MarkdownView Markdown"
description: "A read-only view that renders GitHub-flavored Markdown."
category: Data
status: beta
since: 0.3.4
tags: [markdown, sanitize, theme]
syncStatus: reviewed
verified: true
---

## Usage

### Basic
`content` is the only input, parsed as GFM.
::::TuffDemoWrapper{demo="MarkdownViewMarkdownViewDemo" code-lang="vue"}
---
code: |
  <script setup lang="ts">
  const content = '# Release notes\n\n- Added API tables\n- Kept sanitize enabled by default'
  </script>

  <template>
    <TxMarkdownView :content="content" />
  </template>
---
::::

### Rich Markdown
::::TuffDemoWrapper{demo="MarkdownViewMarkdownDemo" code-lang="vue"}
---
code: |
  <script setup lang="ts">
  const richContent = [
    '# Documentation sample',
    '',
    '- [x] Completed task',
    '- [ ] Pending task',
    '',
    '| Feature | Status |',
    '| --- | --- |',
    '| Table | Supported |',
    '',
    '```ts',
    'export const ok = true',
    '```',
  ].join('\n')
  </script>

  <template>
    <TxMarkdownView :content="richContent" />
  </template>
---
::::

### Themes
`theme` pins light or dark; `auto` follows the document theme.
::::TuffDemoWrapper{demo="MarkdownViewLightDarkDemo" code-lang="vue"}
---
code: |
  <template>
    <TxMarkdownView :content="richContent" theme="light" />
    <TxMarkdownView :content="richContent" theme="dark" />
  </template>
---
::::

### Best Practices

- Keep `sanitize` on for user-generated, remote, or plugin-provided content.
- Pass normalized Markdown; don't mix in partially escaped HTML unless you rely on Markdown HTML on purpose.
- Set `theme` explicitly on previews and cards that don't follow the document theme.
- Use it for display only; pair it with an editor or textarea outside when users edit.

## API Reference

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `content` | `string` | required | Markdown source string. |
| `sanitize` | `boolean` | `true` | Cleans the output with DOMPurify; nothing renders until it loads. |
| `theme` | `'auto' \| 'light' \| 'dark'` | `'auto'` | `auto` resolves from the document's `data-theme` or theme classes, falling back to `light`. |

## Overview

- Parses with `marked` using `gfm` and `breaks` (a single newline breaks the line).
- With `sanitize=true`, nothing renders before DOMPurify is ready; if its import fails, the body stays empty.
- With `sanitize=false`, the output goes straight into `v-html`; use it only for trusted content.
- `theme="auto"` reads and observes `data-theme` and the `light` / `dark` classes on both `html` and `body`.
- The wrapper carries the resolved `light` / `dark` class and a matching `data-theme`.

## Technologies

- The bundled `github-markdown.css` is a global import shared with `TxStreamMarkdown`; every rule is scoped to `:where(.tx-markdown-view, .tx-stream-md)`, so a host's own `.markdown-body` is untouched. Keep the scope when re-vendoring it.
- Source: `packages/tuffex/packages/components/src/markdown-view/`.

<TuffDocSourceLink />