JSON Render
The comark/plugins/json-render plugin transforms json-render and yaml-render code blocks into UI components. It parses JSON Render specs and converts them into Comark AST nodes, enabling declarative UI composition within markdown. No additional dependencies required.
Usage
<script setup lang="ts">
import { Comark } from '@comark/vue'
import jsonRender from '@comark/vue/plugins/json-render'
</script>
<template>
<Suspense>
<Comark :plugins="[jsonRender()]">{{ content }}</Comark>
</Suspense>
</template>import { Comark } from '@comark/react'
import jsonRender from '@comark/react/plugins/json-render'
<Comark plugins={[jsonRender()]}>{content}</Comark><script lang="ts">
import { Comark } from '@comark/svelte'
import jsonRender from '@comark/svelte/plugins/json-render'
</script>
<Comark {content} plugins={[jsonRender()]} />Features
Full Spec
A full spec defines a tree of named elements with a root entry point. Both JSON and YAML are supported and produce identical output:
```json-render
{
"root": "card-1",
"elements": {
"card-1": {
"type": "Card",
"props": { "title": "Welcome" },
"children": ["text-1"]
},
"text-1": {
"type": "Text",
"props": { "content": "Hello from JSON Render" }
}
}
}
``````yaml-render
root: card-1
elements:
card-1:
type: Card
props:
title: Welcome
children:
- text-1
text-1:
type: Text
props:
content: Hello from JSON Render
```root— Key of the root element in theelementsmapelements— Map of element definitions, each withtype,props, and optionalchildren
Single Element
When only one element is needed, omit root and elements:
```json-render
{
"type": "Text",
"props": { "content": "Hello World" }
}
``````yaml-render
type: Text
props:
content: Hello World
```The plugin automatically wraps this shorthand in a full spec with a template root.
API
jsonRender()
Returns a ComarkPlugin that replaces json-render and yaml-render code blocks with Comark AST nodes. Takes no options.
Returns: ComarkPlugin
The plugin runs in the post phase, walking the AST for pre nodes with language: "json-render" or language: "yaml-render", parsing the spec, and replacing the node with the generated elements. Text type elements become plain text nodes; all other types become element nodes with their props as attributes.