---
title: "Introduction"
description: "A small content layer that turns a folder of Markdown into a typed API."
canonical_url: "https://content.comark.dev/getting-started/introduction"
---
# Introduction

> A small content layer that turns a folder of Markdown into a typed API.

Comark Content is a content layer for Markdown. You point it at a folder of `.md` files, and it gives you a small API to read one page, list pages, and build navigation. It's built on [Comark](https://comark.dev), the Markdown parser, and works with any framework.

You don't need a build step, a database, or a folder convention. One file and one call are enough:

```md [content/about.md]
---
title: About
---

# About us

We write documentation for a living.
```

```ts [content.ts]
import { comarkContent } from 'comark-content'
import fs from 'comark-content/sources/fs'

export const content = comarkContent({
  source: fs('./content'), // the folder that holds your Markdown
})

const page = await content.get('/about') // reads ./content/about.md
page?.data.title // 'About'
```

`page.data` is the frontmatter. `page.nodes` is the parsed body, ready for a Comark renderer in Vue, React, Svelte, or plain HTML.

## What it does

Comark Content sits between your Markdown and your app:

1. **Reads** files from a source: a local folder, a [GitHub repository](https://content.comark.dev/sources/github), or any [storage driver](https://content.comark.dev/sources/unstorage).
2. **Parses** each file with Comark: frontmatter up front for listings, the body on demand when you read a page.
3. **Serves** the result through three methods: [`get()`](https://content.comark.dev/guide/read-and-list), [`list()`](https://content.comark.dev/guide/read-and-list#list-pages), and [`navigation()`](https://content.comark.dev/guide/navigation).

Everything else is optional. When you need it, add [generated types](https://content.comark.dev/guide/typescript), [full-text search](https://content.comark.dev/plugins/built-in/full-text-search), [SQL queries](https://content.comark.dev/plugins/built-in/sql-query), [several sources](https://content.comark.dev/advanced/hub), or a [content snapshot](https://content.comark.dev/deployment/with-a-snapshot) for hosts that don't ship your files.

## Comark and Comark Content

[Comark](https://comark.dev) parses and renders one Markdown document. Comark Content manages a collection of them.

|        | [Comark](https://comark.dev)      | [Comark Content](https://content.comark.dev)                  |
| ------ | --------------------------------- | ------------------------------------------------------------- |
| Input  | One Markdown string               | A folder, repository, or storage bucket of files              |
| Output | A parsed document, or rendered UI | `get`, `list`, `navigation`, plus optional search and queries |
| Scope  | One document at a time            | Many documents, indexed                                       |

You use both: Comark Content reads and parses your files, and a Comark renderer (`@comark/vue`, `@comark/react`, `@comark/svelte`, `@comark/html`) turns each parsed page into UI.

## Where to go next

::card-group{cols="2"}
  :::card{icon="i-lucide-rocket" title="Quick start" to="https://content.comark.dev/getting-started/installation"}
  Read your first Markdown file from a script in a few minutes.
  :::

  :::card{icon="i-lucide-monitor" title="Render your first page" to="https://content.comark.dev/getting-started/render-your-first-page"}
  Pick your framework and render a page in it.
  :::

  :::card{icon="i-lucide-layers" title="Why a content layer?" to="https://content.comark.dev/compare/why-a-content-layer"}
  What a content layer is and when you need one.
  :::

  :::card{icon="i-lucide-cpu" title="How it works" to="https://content.comark.dev/advanced/how-it-works"}
  The pipeline from a source to your app, for when you want the details.
  :::
::


## Sitemap

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