# Markup

> Markup is a multi-tenant feedback platform for live web apps. Stakeholders drop pinned, threaded comments (with optional annotated screenshots) onto any page, and the threads stream into the Markup dashboard in real time. The widget itself is published to npm as `@pixelmatters/markup` — a drop-in `<script>` tag or one React component, no host CSS or build changes required.

This site is the **dashboard** for managing projects, API keys, allowed domains, and threads. It is auth-gated (Google OAuth via Better Auth); the public install docs live at the links below.

## Install the widget

- [Install guide (this site)](https://pixelmatters-markup.pages.dev/docs/install): step-by-step tutorial covering the three install paths (script tag, vanilla JS/TS, React/Preact), configuration, troubleshooting, and a paste-ready prompt for AI coding assistants.
- [Widget README on npm](https://www.npmjs.com/package/@pixelmatters/markup): API reference, browser support, identity model, and the AI prompt section.
- [Widget README on GitHub](https://github.com/Pixelmatters/markup/blob/main/packages/widget/README.md): same content, source-of-truth.
- [Source markdown of the install guide](https://github.com/Pixelmatters/markup/blob/main/docs/widget-guide.md): canonical version in the repo.

## Source

- [Pixelmatters/markup on GitHub](https://github.com/Pixelmatters/markup): monorepo containing the widget (`packages/widget`), Convex backend (`convex/`), and this dashboard (`apps/dashboard/`).
- [Root README](https://github.com/Pixelmatters/markup/blob/main/README.md): repo-level overview, architecture diagram, and workspace layout.
- [Convex backend README](https://github.com/Pixelmatters/markup/blob/main/convex/README.md): widget HTTP API (`/widget/*` endpoints), schema overview, and auth headers.

## Quickstart for LLM-driven setup

When asked to integrate Markup into a codebase, fetch the **AI prompt** block from the widget README and follow it:

- npm package: `@pixelmatters/markup`
- Required config: `apiUrl` (a `https://*.convex.site` URL minted in the dashboard) and `apiKey` (a `markup_…` token from **Settings → API Keys**)
- Add the host domain under **Settings → Domains** (or skip in dev — `localhost` is auto-allowed)
- API surface: `init({ apiUrl, apiKey, position?, theme? }) → destroy()` for vanilla, `<MarkupWidget />` for React/Preact