> ## Documentation Index
> Fetch the complete documentation index at: https://docs.plannotator.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Annotate a Website or HTML File

> Use Plannotator to annotate a URL, local HTML file, or supported folder and return structured feedback to a coding agent. Use App Notes for live pages.

Use Plannotator when a coding agent needs structured feedback on a URL, local HTML file, or folder of documents. Plannotator imports the source into its review UI, where you can highlight text, add comments, and send the annotations to the active agent session.

Use the free, local-first [App Notes browser extension](https://chromewebstore.google.com/detail/app-notes/lkknpieefdjpoancolcioblkpgnhpffl) when you need to click and annotate elements directly on an arbitrary live web page. Plannotator does not place an annotation overlay on the live DOM.

*Originally published April 12, 2026, by backnotprop. Last reviewed July 19, 2026. Maintained by the Plannotator project.*

This workflow was added in [Plannotator pull request #545](https://github.com/backnotprop/plannotator/pull/545). The [original short demo](https://d17ygohy796f9l.cloudfront.net/videos/annotate-url.mp4) shows a URL moving into the annotation editor.

## Choose the right website annotation workflow

* **Plannotator:** Import a documentation URL, render a local HTML file, or browse a supported folder, then return annotations to a coding agent.
* **App Notes:** Attach notes to elements on an arbitrary live website, then copy or export the notes from your browser.

App Notes is a separate browser workflow. It does not send notes through a Plannotator annotation session.

## Annotate a URL, HTML file, or folder with Plannotator

Run the CLI directly:

```bash theme={null}
plannotator annotate https://docs.stripe.com/api
plannotator annotate docs/guide.html
plannotator annotate ./docs/
```

In Claude Code and other agents that install the slash command, run:

```text theme={null}
/plannotator-annotate guide.html
```

Codex can run `!plannotator annotate guide.html` or invoke `$plannotator-annotate`. The [agent guides](/open-source/agents) show the exact command for each supported agent.

Plannotator handles each source differently:

| Source                        | Default behavior                                                         |
| ----------------------------- | ------------------------------------------------------------------------ |
| URL ending in `.md` or `.mdx` | Fetch the Markdown source directly                                       |
| Other HTTP or HTTPS URL       | Fetch through Jina Reader and convert to Markdown                        |
| Local `.html` or `.htm`       | Render the HTML in a sandboxed iframe                                    |
| Folder                        | Open a file browser for `.md`, `.mdx`, `.txt`, `.html`, and `.htm` files |

Plannotator imports a URL into its annotation UI. The converted page may not preserve every layout, control, or interaction from the live site.

Use `--markdown` to convert a local HTML file to Markdown instead of rendering it:

```bash theme={null}
plannotator annotate docs/guide.html --markdown
```

`--render-html` remains accepted for compatibility, but local HTML already renders as HTML by default.

## Annotate a live website with App Notes

Install [App Notes from the Chrome Web Store](https://chromewebstore.google.com/detail/app-notes/lkknpieefdjpoancolcioblkpgnhpffl) when you need to comment on the live page rather than an imported copy. Turn on annotation mode, click a page element, and add a note. Notes remain available as you move between pages on the site, and you can copy or export them when the review is finished.

App Notes keeps its notes in browser extension storage and has no Plannotator account, analytics, advertising, or cloud storage. Its [source and release packages are available on GitHub](https://github.com/plannotator/app-notes); the [latest release](https://github.com/plannotator/app-notes/releases/latest) includes separate Chrome and Firefox packages with checksums.

## Fetch a page without Jina Reader

Plannotator uses [Jina Reader](https://jina.ai/reader/) by default for ordinary web pages. Jina handles many JavaScript-rendered pages and returns Markdown with navigation and boilerplate removed.

Use direct fetch and local conversion for one run:

```bash theme={null}
plannotator annotate https://example.com/guide --no-jina
```

You can also disable Jina Reader in the environment or local config:

```bash theme={null}
export PLANNOTATOR_JINA=0
```

```json theme={null}
{ "jina": false }
```

Set `JINA_API_KEY` if you want Plannotator to authenticate its Jina Reader requests. The request and page content leave your computer when Jina Reader is used.

## Open the source safely

Raw local HTML runs inside a sandboxed iframe with an opaque origin. Scripts are allowed so interactive artifacts can work. The page can still request external images, fonts, scripts, or APIs, so open untrusted HTML only when you accept that network boundary.

Converted Markdown does not reproduce every layout or interaction. Use raw HTML when the presentation or behavior is part of the review. Use `--markdown` when the text and document structure matter more than the rendered page.

When you select **Send Feedback**, Plannotator returns the selected text, comments, deletions, and global feedback to the active agent session. It does not edit the remote page or the local HTML file.

<CardGroup cols={2}>
  <Card title="Annotate rendered HTML" icon="code" href="/open-source/workflows/html" arrow="true">
    Review iframe security, local support assets, pinpoint comments, and HTML version history.
  </Card>

  <Card title="Annotate a folder" icon="folder-open" href="/open-source/workflows/folders" arrow="true">
    Browse supported files in one session and return the combined feedback to your agent.
  </Card>

  <Card title="Send structured feedback" icon="message-pen" href="/open-source/workflows/annotations-and-feedback" arrow="true">
    See the annotation types and inspect the Markdown returned to an agent.
  </Card>

  <Card title="Choose HTML or Markdown" icon="file-code" href="/learn/code-context/ai-agent-html-vs-markdown" arrow="true">
    Pick the format that best supports the review question and source of truth.
  </Card>
</CardGroup>
