---
title: "Render your first page"
description: "Pick your framework and turn a parsed page into HTML or components."
canonical_url: "https://content.comark.dev/getting-started/render-your-first-page"
---
# Render your first page

> Pick your framework and turn a parsed page into HTML or components.

`content.get()` returns data, not HTML. `page.nodes` is a parsed tree that a **Comark renderer** turns into components for your UI framework: `@comark/vue`, `@comark/react`, `@comark/svelte`, or `@comark/html` for plain markup.

Each framework guide takes you from an empty app to a rendered page. Pick yours:

::card-group{cols="2"}
  :::card{icon="i-logos-nuxt-icon" title="Nuxt" to="https://content.comark.dev/integrations/nuxt#render-a-page"}
  A server instance, a `/api/content` route, and `<MarkdownDocument>` from `@comark/vue`.
  :::

  :::card{icon="i-logos-nextjs-icon" title="Next.js" to="https://content.comark.dev/integrations/nextjs#render-a-page"}
  Read the instance directly from a server component and render with `@comark/react`.
  :::

  :::card{icon="i-logos-svelte-icon" title="SvelteKit" to="https://content.comark.dev/integrations/sveltekit#render-a-page"}
  Read from a `load` function and render with `@comark/svelte`.
  :::

  :::card{icon="i-logos-vitejs" title="Vite (Vue and React)" to="https://content.comark.dev/integrations/vite#render-a-page"}
  The Vite plugin serves your content in dev and ships a snapshot for production.
  :::

  :::card{icon="i-logos-nodejs-icon" title="Node.js" to="https://content.comark.dev/integrations/node"}
  Scripts, generators, and pipelines: read and render to HTML with `@comark/html`.
  :::

  :::card{icon="i-unjs-nitro" title="Nitro" to="https://content.comark.dev/integrations/nitro"}
  Serve content over HTTP from a standalone server.
  :::

  :::card{icon="i-logos-hono" title="Hono" to="https://content.comark.dev/integrations/hono"}
  Mount the handler on Node, Bun, Deno, or Cloudflare Workers.
  :::
::

## Two ways to read

The guides use one of two shapes, depending on where your framework runs code:

- **Read in-process.** Server code imports `content` and calls `content.get()` directly. Next.js server components, SvelteKit `load` functions, Nitro routes, and Node scripts work this way. No HTTP route is needed.
- **Read over HTTP.** Browser code can't touch the filesystem, so the server exposes the instance with [`content.handler()`](https://content.comark.dev/reference/content/handler) and the browser reads it with [`createContentClient()`](https://content.comark.dev/reference/client/create-content-client). Nuxt pages and Vite apps use this shape, and the other guides offer it as an option.

Both shapes return the same `page` object, so you can switch later without changing how you render.

## After the first page

Once you see a rendered page, continue with the pages under **Working with content**: [list pages](https://content.comark.dev/guide/read-and-list#list-pages), [build navigation](https://content.comark.dev/guide/navigation), [see edits while you develop](https://content.comark.dev/guide/watch), and [add types](https://content.comark.dev/guide/typescript). When your app is ready to ship, [choose how to deploy](https://content.comark.dev/deployment).


## Sitemap

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