---
title: "JSON Render"
description: "Example showing how to use Comark with JSON Render and YAML Render in Vue and Vite."
canonical_url: "https://comark.dev/examples/plugins/vue-vite-json-render"
---
# JSON Render

> Example showing how to use Comark with JSON Render and YAML Render in Vue and Vite.

<code-explorer org="comarkdown" repo="comark@c78885ca7504b38afc7ced59aac1a3c6b3cc5425" path="examples/3.plugins/vue-vite-json-render" defaultValue="src/App.vue"></code-explorer>

<browser src="https://comark-json-render.vercel.app"></browser>

## Features

This example demonstrates how to use Comark with JSON Render and YAML Render in Vue:

- **JSON Render Plugin**: Import and configure the `json-render` plugin to parse `json-render` and `yaml-render` code blocks
- **Full Spec Format**: Define a tree of named elements with a root entry point
- **Single Element Shorthand**: Use a simplified format for single elements
- **Nested Layout**: Compose deep component trees by referencing children by key
- **YAML Support**: Write specs in YAML for improved readability
- **Nuxt UI**: Styled with Nuxt UI for a polished look with dark mode support

## Usage

1. Import the json-render plugin:
   ```ts
   import jsonRender from '@comark/vue/plugins/json-render'
   ```
2. Pass the plugin to `Markdown`:
   ```vue
   <Markdown :plugins="[jsonRender()]" />
   ```
3. Use `json-render` or `yaml-render` code blocks in your markdown:
   ~~~json
   ```json-render
   {
     "type": "Text",
     "props": { "content": "Hello" }
   }
   ```
   ~~~
   ~~~yaml
   ```yaml-render
   type: Text
   props:
     content: Hello
   ```
   ~~~

## Learn more

- [JSON Render Plugin Documentation](https://comark.dev/plugins/built-in/json-render)
- [JSON Render](https://json-render.dev/)


## Sitemap

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