---
title: "Examples"
description: "Explore Comark examples to learn how to add Comark in your projects."
canonical_url: "https://comark.dev/examples"
---
# Examples

> Explore Comark examples to learn how to add Comark in your projects.

Each example wires Comark into a framework or build setup, with its full source browsable inline.

## Frameworks

<card-group cols="2">
<card icon="i-simple-icons:astro" title="Astro" to="https://comark.dev/examples/frameworks/astro">
A blog example using Comark with Astro content collections and React components.
</card>
<card icon="i-simple-icons:nextdotjs" title="Next.js" to="https://comark.dev/examples/frameworks/nextjs">
A blog example using Comark with Next.js App Router and React Server Components.
</card>
<card icon="i-simple-icons-nuxt" title="Nuxt" to="https://comark.dev/examples/frameworks/nuxt">
A minimal example showing how to use Comark Syntax with Nuxt UI.
</card>
<card icon="i-simple-icons-svelte" title="SvelteKit" to="https://comark.dev/examples/frameworks/sveltekit">
A SvelteKit example showing Comark with lazy components, MarkdownAsync, and SSR.
</card>
<card icon="i-simple-icons-vitepress" title="VitePress" to="https://comark.dev/examples/frameworks/vitepress">
Using Comark component syntax natively in VitePress via the comark syntax plugin.
</card>
</card-group>

## Vite

<card-group cols="2">
<card icon="i-simple-icons-angular" title="Angular" to="https://comark.dev/examples/vite/angular">
A minimal example showing how to use Comark with Angular and Vite.
</card>
<card icon="i-lucide-file-code" title="HTML Preview" to="https://comark.dev/examples/vite/html">
A live markdown editor that renders Comark content to HTML and displays it in a sandboxed iframe preview, with syntax highlighting support.
</card>
<card icon="i-simple-icons-react" title="React" to="https://comark.dev/examples/vite/react">
A minimal example showing how to use Comark with React and Vite.
</card>
<card icon="i-simple-icons-svelte" title="Svelte" to="https://comark.dev/examples/vite/svelte">
A minimal example showing how to use Comark with Svelte and Vite.
</card>
<card icon="i-simple-icons-vuedotjs" title="Vue" to="https://comark.dev/examples/vite/vue">
A minimal example showing how to use Comark with Vue and Vite.
</card>
</card-group>

## Plugins

<card-group cols="2">
<card icon="i-lucide-calculator" title="Math formulas" to="https://comark.dev/examples/plugins/react-vite-math">
Example showing how to use Comark with LaTeX math formulas in React and Vite.
</card>
<card icon="i-simple-icons-mermaid" title="Mermaid diagrams" to="https://comark.dev/examples/plugins/react-vite-mermaid">
Example showing how to use Comark with Mermaid diagrams in React and Vite.
</card>
<card icon="i-lucide-replace" title="Binding (frontmatter + data)" to="https://comark.dev/examples/plugins/vue-vite-binding">
Example showing how to interpolate frontmatter and runtime data into Markdown using the Comark `binding` plugin in Vue and Vite.
</card>
<card icon="i-lucide-code" title="Syntax Highlighting" to="https://comark.dev/examples/plugins/vue-vite-highlight">
Example showing how to use Comark with syntax highlighting using Shiki in Vue and Vite.
</card>
<card icon="i-lucide-braces" title="JSON Render" to="https://comark.dev/examples/plugins/vue-vite-json-render">
Example showing how to use Comark with JSON Render and YAML Render in Vue and Vite.
</card>
<card icon="i-lucide-calculator" title="Math formulas" to="https://comark.dev/examples/plugins/vue-vite-math">
Example showing how to use Comark with LaTeX math formulas in Vue and Vite.
</card>
<card icon="i-simple-icons-mermaid" title="Mermaid diagrams" to="https://comark.dev/examples/plugins/vue-vite-mermaid">
Example showing how to use Comark with Mermaid diagrams in Vue and Vite.
</card>
<card icon="i-lucide-quote" title="Punctuation" to="https://comark.dev/examples/plugins/vue-vite-punctuation">
Example showing how to use Comark with the punctuation plugin for smart quotes, dashes, and symbols in Vue and Vite.
</card>
</card-group>

## AI

<card-group cols="2">
<card icon="i-simple-icons-vercel" title="AI SDK" to="https://comark.dev/examples/ai/nuxt-ai-sdk">
Streaming AI chat with live Comark rendering
</card>
</card-group>


## Sitemap

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