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

Astro

A blog example using Comark with Astro content collections and React components.

Next.js

A blog example using Comark with Next.js App Router and React Server Components.

Nuxt

A minimal example showing how to use Comark Syntax with Nuxt UI.

SvelteKit

A SvelteKit example showing Comark with lazy components, MarkdownAsync, and SSR.

VitePress

Using Comark component syntax natively in VitePress via the comark syntax plugin.

Angular

A minimal example showing how to use Comark with Angular and Vite.

HTML Preview

A live markdown editor that renders Comark content to HTML and displays it in a sandboxed iframe preview, with syntax highlighting support.

React

A minimal example showing how to use Comark with React and Vite.

Svelte

A minimal example showing how to use Comark with Svelte and Vite.

Vue

A minimal example showing how to use Comark with Vue and Vite.

Math formulas

Example showing how to use Comark with LaTeX math formulas in React and Vite.

Mermaid diagrams

Example showing how to use Comark with Mermaid diagrams in React and Vite.

Binding (frontmatter + data)

Example showing how to interpolate frontmatter and runtime data into Markdown using the Comark binding plugin in Vue and Vite.

Syntax Highlighting

Example showing how to use Comark with syntax highlighting using Shiki in Vue and Vite.

JSON Render

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

Math formulas

Example showing how to use Comark with LaTeX math formulas in Vue and Vite.

Mermaid diagrams

Example showing how to use Comark with Mermaid diagrams in Vue and Vite.

Punctuation

Example showing how to use Comark with the punctuation plugin for smart quotes, dashes, and symbols in Vue and Vite.

AI SDK

Streaming AI chat with live Comark rendering

Custom Code Block

How to build copy buttons, collapse thresholds, and other code-block UI when Comark does not pass a raw `code` prop.

Astro

A blog example using Comark with Astro content collections and React components.