---
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{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{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{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{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.
  :::
::

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

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

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


## Sitemap

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