---
title: "JSON Render"
description: "Plugin for rendering JSON Render specs as UI components in Comark. Supports both json-render and yaml-render code blocks."
canonical_url: "https://comark.dev/plugins/built-in/json-render"
---
# JSON Render

> Plugin for rendering JSON Render specs as UI components in Comark. Supports both json-render and yaml-render code blocks.

The `comark/plugins/json-render` plugin transforms `json-render` and `yaml-render` code blocks into UI components. It parses [JSON Render](https://json-render.dev/) specs and converts them into Markdown AST nodes, enabling declarative UI composition within markdown. No additional dependencies required.

## Usage

<code-group>
```vue [Vue]
<script setup lang="ts">
import { Markdown } from '@comark/vue'
import jsonRender from '@comark/vue/plugins/json-render'
</script>

<template>
  <Suspense>
    <Markdown :plugins="[jsonRender()]">{{ content }}</Markdown>
  </Suspense>
</template>
```


```tsx [React]
import { Markdown } from '@comark/react'
import jsonRender from '@comark/react/plugins/json-render'

<Markdown plugins={[jsonRender()]}>{content}</Markdown>
```


```svelte [Svelte]
<script lang="ts">
  import { Markdown } from '@comark/svelte'
  import jsonRender from '@comark/svelte/plugins/json-render'
</script>

<Markdown {content} plugins={[jsonRender()]} />
```
</code-group>

---

## 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:

<code-group>
~~~json [json-render]
```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 [yaml-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
```
~~~
</code-group>

- **`root`**: Key of the root element in the `elements` map
- **`elements`**: Map of element definitions, each with `type`, `props`, and optional `children`

### Single element

When only one element is needed, omit `root` and `elements`:

<code-group>
~~~json [json-render]
```json-render
{
  "type": "Text",
  "props": { "content": "Hello World" }
}
```
~~~


~~~yaml [yaml-render]
```yaml-render
type: Text
props:
  content: Hello World
```
~~~
</code-group>

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 Markdown 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.

---

- [Parse API](https://comark.dev/reference/parse)
- [Plugin Example](https://comark.dev/examples/plugins/vue-vite-json-render)


## Sitemap

See the full [sitemap](https://comark.dev/sitemap.md) for all pages.