JSON Render
The JSON Render plugin transforms json-render code blocks into UI components. It parses JSON Render specs and converts them into Comark AST nodes, enabling declarative UI composition within markdown.
The plugin is part of the core comark package — no additional dependencies are required.
Basic Usage
With Parse API
import { parse } from 'comark'
import jsonRender from 'comark/plugins/json-render'
const markdown = `
\`\`\`json-render
{
"root": "card",
"elements": {
"card": {
"type": "Card",
"props": { "title": "Hello" },
"children": ["text"]
},
"text": {
"type": "Text",
"props": { "content": "World" }
}
}
}
\`\`\`
`
const result = await parse(markdown, {
plugins: [jsonRender()]
})With Vue
<script setup lang="ts">
import { Comark } from '@comark/vue'
import jsonRender from '@comark/vue/plugins/json-render'
const markdown = `
\`\`\`json-render
{
"type": "Card",
"props": { "title": "Hello" }
}
\`\`\`
`
</script>
<template>
<Suspense>
<Comark :plugins="[jsonRender()]">{{ markdown }}</Comark>
</Suspense>
</template>With React
import { Comark } from '@comark/react'
import jsonRender from '@comark/react/plugins/json-render'
const markdown = `
\`\`\`json-render
{
"type": "Card",
"props": { "title": "Hello" }
}
\`\`\`
`
function App() {
return (
<Comark plugins={[jsonRender()]}>{markdown}</Comark>
)
}With Svelte
<script lang="ts">
import { Comark } from '@comark/svelte'
import jsonRender from '@comark/svelte/plugins/json-render'
const markdown = `
\`\`\`json-render
{
"type": "Card",
"props": { "title": "Hello" }
}
\`\`\`
`
</script>
<Comark {markdown} plugins={[jsonRender()]} />JSON Render Spec Format
The plugin supports two spec formats:
Full Spec (with root and elements)
A full spec defines a tree of named elements with a root entry point:
```json-render
{
"root": "card-1",
"elements": {
"card-1": {
"type": "Card",
"props": { "title": "Welcome" },
"children": ["text-1"]
},
"text-1": {
"type": "Text",
"props": { "content": "This is JSON Render inside Comark" }
}
}
}
```root- The key of the root element in theelementsmapelements- A map of element definitions, each with:type- The component/element type nameprops- Properties passed to the elementchildren- Array of element keys that are children of this element
Single Element (shorthand)
When you only need a single element, you can omit root and elements:
```json-render
{
"type": "Text",
"props": { "content": "Hello World" }
}
```The plugin automatically wraps this in a full spec with a template root.
How It Works
The plugin runs in the post phase of parsing. It:
- Walks the Comark AST looking for
prenodes withlanguage: "json-render" - Parses the JSON content of the code block
- Converts the JSON Render spec into Comark AST nodes
- Replaces the original code block with the generated AST
Text elements are converted to plain text nodes. All other elements are converted to Comark element nodes with their props as attributes.
Examples
See the JSON Render example for a complete working implementation.
Resources
- JSON Render - JSON Render project home
Related
- Parse API - Main parsing API
- Vue Rendering - Using with Vue
- React Rendering - Using with React
- Creating Plugins - Build custom plugins