comark-codemirror

Autocomplete everything in Comark

A code editor for Comark, built on CodeMirror 6. Type :: and walk from a component to its props, their values and the next prop in one chain of menus. Bindings like {{ frontmatter.title }} complete from the document itself.
Get startedOpen the playground
---
title: Chained autocomplete
layout: docs
site:
  name: My Blog
---

# {{ frontmatter.title }}

Type `/` on an empty line, `::` for a component, `{{` for a binding.

::card{title="Hello" variant="soft"}
Written for {{ frontmatter.site.name }}.

#footer
:badge[new]{color="green"}
::

One chain of menus for the whole language

    Chained menus
    Picking a component opens its props; a prop opens its values; a value returns to the next prop. → drills in, ← goes back.
    Bindings that know your data
    `{{ frontmatter.* }}` from the live frontmatter, `props.*` from the enclosing component, `data.*`, `meta.*` and loop variables.
    Measured coverage
    Every completable token in comark's 228 SPEC fixtures is offered by the menu — a test, not a claim.
    Plugins add knowledge
    comark's defaults, built-ins and ecosystem plugins contribute components, snippets, scopes and lint — small declarative objects.
    Agents ask the same menu
    `complete()` tells an agent what is valid at a position; `tools()` edits by structure, not offsets.
    Just CodeMirror
    One `comark()` extension next to `basicSetup`. No second editor, no framework lock-in, zero runtime dependencies.
Copyright © 2026