comark-properties

A document's chosen frontmatter keys, such as status, pull request, author, date, and tags, as a box of properties at the top or where ::properties sits. A Comark plugin for HTML, Vue, React, and Svelte.

pnpm add comark comark-properties

import { createHtmlRenderer } from "@comark/html";
import properties, { components } from "comark-properties/html";

const render = createHtmlRenderer({ plugins: [properties()], components });

---
status: Ready for review
pr: https://github.com/onmax/comark-ui/pull/111
author: onmax
date: 2026-10-23
tags: [colors, docs]
---

Options: keys (default ["status", "pr", "author", "date", "tags"]), labels per key, and top (default true) to put the box at the top of a document with no ::properties. A pull request or issue link reads as owner/repo#123, any other link as its address, and a list as badges.

The plugin adds every problem to meta.issues: a value it can't show, a ::properties with nothing to show, and content inside it. Each issue names the key or block and says how to fix it.

Renderers

| Renderer | Import | | --- | --- | | @comark/html | comark-properties/html: the styles are inlined | | @comark/vue | comark-properties/vue | | @comark/react | comark-properties/react | | @comark/svelte | comark-properties/svelte |

Each entry exports the parse plugin as default and the renderer's components. The Vue, React, and Svelte components add the styles when they mount; import comark-properties/style.css with your styles so a server-rendered page doesn't shift.

The styles follow shadcn/ui: they read its CSS variables, such as --background and --border, when the page has them, and use its neutral theme otherwise. Set the shared --comark-* tokens to theme every plugin at once; the rules sit in a comark CSS layer, so any plain rule of your own wins.