Markdown Viewer

Markdown Viewer component documentation for Velyx. Installation, usage examples, variants, and customization guidance for Laravel Blade, Alpine.js, Livewire, and Tailwind CSS v4.

Markdown Viewer

The Markdown Viewer component renders markdown content with beautiful typography, syntax highlighting, and automatic styling.

Installation

Add the markdown viewer component to your project:

npx velyx@latest add markdown-viewer
pnpm dlx velyx@latest add markdown-viewer
yarn dlx velyx@latest add markdown-viewer
bunx --bun velyx@latest add markdown-viewer

Usage

Basic Markdown

Markdown Viewer

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Markdown Viewer

Full preview from the registry iframe.

Loading preview...

Headings

Markdown Viewer

headings

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Markdown Viewer

Full preview from the registry iframe.

Loading preview...

Text Formatting

Markdown Viewer

formatting

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Markdown Viewer

Full preview from the registry iframe.

Loading preview...

Lists

Markdown Viewer

lists

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Markdown Viewer

Full preview from the registry iframe.

Loading preview...

Code Blocks

Markdown Viewer

code

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Markdown Viewer

Full preview from the registry iframe.

Loading preview...

Blockquotes

Markdown Viewer

quotes

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Markdown Viewer

Full preview from the registry iframe.

Loading preview...

Links

Markdown Viewer

links

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Markdown Viewer

Full preview from the registry iframe.

Loading preview...

Props

Prop Type Default Description
content string '' The markdown content to render. Can be passed as a prop or as slot content.
maxHeight string '420px' Maximum height of the content area with overflow scroll.

Examples

Using Content Prop

<x-ui.markdown-viewer :content="$markdownContent" />

Using Slot Content

<x-ui.markdown-viewer>
    # Your Title

    Your **markdown** content here...
</x-ui.>

### Custom Height

```php
<x-ui.markdown-viewer maxHeight="600px">
    # Long Content

    This content can be up to 600px tall before scrolling...
</x-ui.>

### Custom Styling

```php
<x-ui.markdown-viewer class="shadow-lg">
    # Styled Content

    Add your own Tailwind classes...
</x-ui.>

## Notes

- The component uses Laravel's `Str::markdown()` function for parsing
- HTML input is stripped for security
- Unsafe links are automatically filtered
- The component uses Tailwind Typography (`prose`) classes for styling
- Dark mode is automatically supported via `dark:prose-invert`