Rendering a json-render spec

Sometimes the data is the layout: a CMS, a form builder, or an AI agent emits a json-render description of the UI to render. For that, comark ships the json-render plugin. It turns a json-render code block into a component tree at parse time, bridging plain data and rendered components.

The spec

A spec is a map of named elements plus a root entry point. Each element has a type (the component tag), optional props, and optional children:

```json-render
{
  "root": "hero",
  "elements": {
    "hero": {
      "type": "page-hero",
      "props": { "title": "Built from JSON", "description": "No template required." }
    }
  }
}
```

Text elements become plain text nodes; every other type becomes an element node with its props as attributes. A single element can skip root/elements and be written inline.

Rendering it

Register the plugin on the parser, then render the resulting nodes just like any other Comark Content document, mapping each type to a component:

import jsonRender from 'comark/plugins/json-render'

export const content = comarkContent({
  source: fs('./content'),
  markdown: { plugins: [jsonRender()] },
})

<script setup lang="ts">
import { UPageHero as PageHero } from '#components'
</script>

<template>
  <MarkdownDocument :value="page" :components="{ PageHero }" />
</template>