create-design-review

A drop-in Figma-style commenting overlay for Vite + React + Express prototypes. Click anywhere on your app to leave a pinned comment. Pins anchor to DOM elements so they survive scroll/resize. Comments are page-scoped and visible to anyone with the URL.

Quick start

In a Vite + React + Express project (e.g. a Replit fullstack JS template):

npx create-design-review

That's it. The CLI will:

1. Copy client/src/components/design-review/ into your project.
2. Copy server/designReviewRoutes.ts into your project.
3. Patch your client/src/App.tsx to render <DesignReview />.
4. Patch your server/routes.ts to call registerDesignReviewRoutes(app).

Restart your dev server, then look for the Feedback button in the bottom-left corner.

Flags

| Flag | What it does | | ----------- | ------------------------------------------------------------- | | --dry-run | Show what would change without writing anything. | | --force | Overwrite existing design-review/ and designReviewRoutes.ts. | | <path> | Install into a specific project directory (default: cwd). |

npx create-design-review ../my-other-prototype --dry-run

Zero-backend mode

If you don't want a backend at all, skip the server install and use the localStorage adapter — comments persist in the user's own browser:

import { DesignReview, createLocalStorageAdapter } from "@/components/design-review";

<DesignReview storage={createLocalStorageAdapter()} />

Custom storage

Pass any object that satisfies the CommentStorage interface (e.g. backed by your own database):

<DesignReview storage={myCustomStorage} />

On the server, registerDesignReviewRoutes accepts a store option for the same purpose:

registerDesignReviewRoutes(app, { store: myDatabaseStore });

Updating

The CLI ships its own copy of the source files. To pick up changes after the canonical source is updated, run inside this package:

npm run sync-templates

Then bump the version and npm publish.