Introduction

Comark parses Markdown with blocks like ::tabs into a tree, and renders it with HTML, Vue, React, or Svelte. Comark UI adds the blocks: tabs and charts, annotated screenshots, suggested code changes, callouts, and more.

You install every block with one package, comark-ui, or each block on its own. All of them share one version.

Comark UI is an independent project by @onmax, not made by the Comark team.

Reads without a script

Every block renders to HTML that reads on its own. Tabs, carousels, and zoom add behavior when their script runs, and the page still reads top to bottom when it doesn't.

Same markup in every renderer

The HTML, Vue, React, and Svelte renderers output the same markup, so the same styles and tokens apply to each. Renderers lists which package supports which.

Never throws

A block that's written wrong still renders. Its problem goes in meta.issues as one sentence that names the block and says how to fix it. Validation shows how to read them.

Themed by shadcn/ui tokens

The blocks follow shadcn/ui's CSS variables, so they match a site that uses them with no setup. Elsewhere, eight --comark-* tokens theme every block at once. Theming lists them.

Made for agents

Agents write most of these documents. An agent skill teaches the syntax, and comark-linter checks a document before anyone reads it. Agents shows how to set them up.

Each package is a parse plugin and a set of components.

1. The parse plugin reads its blocks while Comark parses. It checks their props, does any work that needs the network or the disk, such as downloading a favicon, and writes the result onto the node.
2. The components draw the node. They never parse URLs or split children, so the four renderers stay small and output the same markup.
3. The script, for blocks that have one, adds behavior in the browser: switching tabs, zooming, copying code.

Each block's page starts with its demos. Open any demo in the playground to edit it live.