Introduction

What is Comark?

Comark stands for Components in Markdown. It's an extension of the Markdown syntax that lets you use components directly inside your Markdown content:

# Welcome to my blog

This is regular **markdown** with a custom component:

::alert{type="warning"}
This is an important message!
::

The ::alert is a block component that supports properties and children (also known as slots). Learn more about the Component Syntax.

Comark parses this into an AST that can be rendered to HTML. It also supports rendering to Vue or React, turning your Markdown into fully interactive content.

<script setup lang="ts">
import { Comark } from 'comark/vue'
import Alert from './Alert.vue'

const content = `
# Hello World

::alert{type="info"}
Welcome to Comark!
::
`
</script>

<template>
  <Comark :components="{ Alert }">{{ content }}</Comark>
</template>

import { Comark } from 'comark/react'
import Alert from './Alert.tsx'

const content = `
# Hello World

::alert{type="info"}
Welcome to Comark!
::
`

export default function App() {
  return <Comark components={{ Alert }}>{content}</Comark>
}

import { parse } from 'comark'
import { renderHTML } from 'comark/string'

const tree = await parse(`
# Hello World

::alert{type="info"}
Welcome to Comark!
::
`)

const html = renderHTML(tree, {
  components: {
    alert: ([_tag, attrs, ...children], { render }) => {
      return `<div class="alert alert-${attrs.type}" role="alert">${render(children)}</div>`
    }
  }
})
/*
<h1>Hello World</h1>
<div class="alert alert-info" role="alert"><p>Welcome to Comark!</p></div>
*/

When to Use Comark

Comark is ideal for:

• Documentation sites - Write docs in Markdown with interactive examples
• Blog platforms - Rich content with custom components for callouts, embeds, and more
• AI chat interfaces - Stream and render Markdown responses in real-time
• CMS integrations - Let content editors use components without touching code
• Technical writing - Combine prose with live code examples and diagrams

Comparison with Other Tools

Key Features

How It Works

1. Parse - Comark parses your content into a compact Comark AST
2. Transform - The AST can be manipulated, cached, or serialized
3. Render - Framework-specific renderers convert the AST to Vue or React components

Next Steps

Ready to get started? Follow these guides: