Renderers

Every renderer consumes the same RenderDocument, so the meaning of a Markdown document stays consistent across output targets.

HTML

HTML renderer

Renderer demo

The same document can be rendered by multiple targets.

<h1 data-markvia-node-id="mv-heading-1k7y6r8">Renderer demo</h1><p data-markvia-node-id="mv-paragraph-3xgkrw">The same document can be rendered by multiple targets.</p>

React

React renderer

# Renderer demo The same document can be rendered by multiple targets.

Renderer demo

The same document can be rendered by multiple targets.

Vue

Vue renderer

# Renderer demo The same document can be rendered by multiple targets.

Renderer demo

The same document can be rendered by multiple targets.

HTML

The HTML renderer is suited to static pages, server-rendered output, and applications that do not need a client-side runtime:

import { createMarkdown } from '@markvia/core'
import { htmlRenderer } from '@markvia/html'

const html = createMarkdown().render(source, htmlRenderer)

Text is escaped, unsafe URLs are rejected, and event attributes are filtered.

React

The React package provides a Markdown component and a renderReact function:

import { Markdown, renderReact } from '@markvia/react'

;<Markdown content={content} />

Use components to replace the target component for specific Markdown node types:

<Markdown
  content={content}
  components={{
    heading: Heading,
    link: ExternalLink,
  }}
/>

Vue

The Vue package provides a matching Markdown component:

<Markdown :content="content" />

The component also accepts a document or stream, so static documents and live input can share the same API.