---
title: "Watch content changes"
description: "See Markdown edits in your running app without a restart."
canonical_url: "https://content.comark.dev/guide/watch"
---
# Watch content changes

> See Markdown edits in your running app without a restart.

Once a page is read, the instance keeps the parsed result in memory. That's what makes the second read fast, and it's also why a running dev server keeps showing the old text after you edit a file: nothing told the instance the file changed.

There are two ways to fix that, and one of them may already be done for you.

## Watch the folder

[`content.watch()`](https://content.comark.dev/reference/content/watch) starts a file watcher on the source folder. When a file changes, the instance re-parses it and updates its index; when a file is deleted, the entry is removed. Call it once when your server starts, in development only:

```ts
if (process.env.NODE_ENV !== 'production') {
  await content.watch()
}
```

It returns a stop function for when you shut the watcher down, and it's a no-op on sources that can't watch, so the call is safe even if you later switch sources.

Where that call goes depends on your framework:

| Setup                                                                                                        | What to do                                                                                |
| ------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- |
| [Vite](https://content.comark.dev/integrations/vite)                                                         | Nothing. The plugin watches your folder and pushes each change to the browser over HMR.   |
| [Nuxt](https://content.comark.dev/integrations/nuxt#see-edits-while-you-develop)                             | Call `content.watch()` from a Nitro plugin in development.                                |
| [Next.js](https://content.comark.dev/integrations/nextjs#see-edits-while-you-develop)                        | Call `content.watch()` next to the instance, guarded so hot reloads don't start it twice. |
| [SvelteKit](https://content.comark.dev/integrations/sveltekit#see-edits-while-you-develop)                   | Call `content.watch()` from `hooks.server.ts` in development.                             |
| [Nitro](https://content.comark.dev/integrations/nitro), [Hono](https://content.comark.dev/integrations/hono) | Call `content.watch()` at startup in development.                                         |
| [Node](https://content.comark.dev/integrations/node) scripts                                                 | Nothing. Each run is a new process and reads the files as they are.                       |

Watching is a development tool. In production, content usually changes through a deploy or a webhook rather than a file save; see [Deployment](https://content.comark.dev/deployment) for the options there.

## Read fresh on demand

When you want one specific page re-read right now, without a watcher, pass `fresh: true`:

```ts
const page = await content.get('/about', { fresh: true })
```

This bypasses the in-memory copy, reads and parses the file again, and stores the new result. It's handy in a preview endpoint or an admin action, and it's the tool to reach for when a remote source such as GitHub has no watcher to offer.

## React to changes

If your app needs to know when content changed, for example to rebuild a search index or clear a rendered-page cache, subscribe to the hooks the watcher fires:

```ts
content.hooks.hook('watch:file:update', (source, key, file) => {
  // `key` is the file's location in the source, such as 'blog/hello.md'
  // `file` is the freshly parsed page
})

content.hooks.hook('watch:file:remove', (source, key) => {
  // the file was deleted
})
```

`source` is the [instance name](https://content.comark.dev/guide/files-and-paths#internal-identifiers), which matters when you [combine several instances](https://content.comark.dev/advanced/hub). The [hooks reference](https://content.comark.dev/reference/content/hooks) lists every event.

## Which sources can watch

Only the [filesystem source](https://content.comark.dev/sources/filesystem) emits change events out of the box. [GitHub](https://content.comark.dev/sources/github) and most [storage drivers](https://content.comark.dev/sources/unstorage) don't, so `watch()` does nothing there. For those, content updates come from a cache TTL, an explicit [`refresh()`](https://content.comark.dev/reference/content/refresh), or a webhook; [Keep remote content up to date](https://content.comark.dev/deployment/remote-content) walks through the production pattern.


## Sitemap

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