---
title: "Examples"
description: "Runnable examples of Comark Content across runtimes and frameworks."
canonical_url: "https://content.comark.dev/examples"
---
# Examples

> Runnable examples of Comark Content across runtimes and frameworks.

Each example wires Comark Content into a different runtime or framework, with its full source browsable inline.

::tip{to="https://content.comark.dev/integrations/nuxt"}
Looking for step-by-step setup instructions instead? See the [integration guides](https://content.comark.dev/integrations/nuxt) for Nuxt, Next.js, Vite, SvelteKit, Nitro, Node, and Hono.
::

## Runtime

::card-group{cols="2"}
  :::card{icon="i-logos-nodejs-icon" title="Node" to="https://content.comark.dev/examples/runtime/node"}
  Read and query content from a plain Node script, with no framework or server.
  :::
::

## Server

::card-group{cols="2"}
  :::card{icon="i-unjs-nitro" title="Nitro" to="https://content.comark.dev/examples/server/nitro"}
  Serve content over HTTP from a minimal Nitro server with `content.handler()`.
  :::
::

## Framework

::card-group{cols="2"}
  :::card{icon="i-logos-nuxt-icon" title="Nuxt" to="https://content.comark.dev/examples/framework/nuxt"}
  Render content authored as YAML, JSON, Markdown, or a json-render spec with Nuxt UI.
  :::

  :::card{icon="i-logos-nuxt-icon" title="Nuxt x Better Auth" to="https://content.comark.dev/examples/framework/nuxt-better-auth"}
  A server-side Content instance with typed routes and a private, auth-gated content area.
  :::

  :::card{icon="i-logos-nextjs-icon" title="Next" to="https://content.comark.dev/examples/framework/next"}
  Render content authored as YAML, JSON, Markdown, or a json-render spec with Next.js and HeroUI.
  :::
::

## Vite

::card-group{cols="2"}
  :::card{icon="i-logos-vue" title="Vue" to="https://content.comark.dev/examples/vite/vue"}
  Vite + Vue with the Vite plugin: content edits hot-reload in the browser.
  :::

  :::card{icon="i-logos-vue" title="Vue schema validation" to="https://content.comark.dev/examples/vite/vue-schema-validation"}
  Vite + Vue with the schema-validation plugin: invalid files are rejected at load time.
  :::

  :::card{icon="i-logos-vue" title="Vue markdown fields" to="https://content.comark.dev/examples/vite/vue-markdown-fields"}
  Vite + Vue with markdown-fields: compare list(), get(), and query() for parsed markdown columns.
  :::

  :::card{icon="i-logos-react" title="React" to="https://content.comark.dev/examples/vite/react"}
  Vite + React with the Vite plugin: read and render content with HMR.
  :::
::


## Sitemap

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