Components

Vite plugin

Generate the manifest from your Vue and React components.

comark-codemirror/vite scans your component folders and exposes the manifest as a virtual module, with HMR. It reads Vue defineProps (type and runtime forms), withDefaults, <slot name>, and React props interfaces.

vite.config.ts
import { comarkCodemirrorComponents } from 'comark-codemirror/vite'

export default {
  plugins: [
    comarkCodemirrorComponents({
      dirs: ['components/content'],
      // refine or add entries (merged by name)
      manifest: [{ name: 'hero', kind: 'block', group: 'Marketing' }],
    }),
  ],
}
editor.ts
import components from 'virtual:comark-codemirror/components'
import { comark } from 'comark-codemirror'

new EditorView({ extensions: [basicSetup, comark({ components })] })

A ProseCard.vue with

<script setup lang="ts">
withDefaults(defineProps<{
  /** Card title */
  title: string
  variant?: 'soft' | 'outline'
}>(), { variant: 'soft' })
</script>

<template><div><slot /><slot name="footer" /></div></template>

becomes { name: 'prose-card', kind: 'both', props: { title: { type: 'string', required: true, description: 'Card title' }, variant: { type: 'string', enum: ['soft', 'outline'], default: 'soft' } }, slots: [{ name: 'default' }, { name: 'footer' }] }.

scanComponents(root, options) and extractComponent(file, source) are exported for other build tools.

Copyright © 2026