# JSON Render

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

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



</code-explorer>

## Features

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

- **JSON Render Plugin**: Import and configure the `json-render` plugin to parse `json-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
- **Nuxt UI**: Styled with Nuxt UI for a polished look with dark mode support

## Usage

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

## Learn More

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