Element antippen, Kategorie wählen, Anmerkung schreiben — fertig. Kein Screenshot-Pingpong, keine Excel-Liste, kein externer Dienst. Eingebunden wird eine fertige Datei per Script-Tag.
Die Anmerkung hängt am Element, nicht an Pixelkoordinaten. Sie sitzt darum auch bei anderer Fensterbreite und nach einem neuen Build noch an der gemeinten Stelle.
„Anmerken“ im Kasten oben rechts, dann auf die Stelle tippen. Was schon angemerkt ist, zeigt sich gestrichelt — doppelt erfasst wird nichts.
Kategorie wählen (Frage, Inhalt, Optik, Blocker), Text schreiben, auf Wunsch einen Screenshot aufnehmen und darauf zeichnen. Gespeichert wird bei jeder Änderung.
Als ZIP exportieren, gemeinsam auf einem Server ablegen oder als Issues nach GitLab abgleichen — inklusive Status und Diskussion in beide Richtungen.
Und nichts, was die geprüfte Seite verändert: Die Oberfläche lebt in einem Shadow-DOM, das CSS der Seite erreicht sie nicht — und umgekehrt.
Die Ansicht wird ohne das Werkzeug aufgenommen, in voller Auflösung. Stift, Rechteck und Kreis markieren, worum es geht.
Fragen und Entscheidungen stehen bei der Stelle, mit Namen und Zeit — statt verstreut in Mails und Chats.
Aus jeder Anmerkung wird ein Issue. Status und Diskussion fließen in beide Richtungen, im Browser, ohne eigenes Backend.
Ohne Server liegen die Anmerkungen im Browser. Ein ZIP gibt sie weiter — ergänzend, zusammenführend oder ersetzend wieder eingelesen.
Jede Anmerkung vermerkt Format und Farbschema an genau dieser Stelle — gleich, wie die Seite ihr Schema schaltet.
Routenwechsel erkennt das Werkzeug selbst. Für Dialoge und Reiter bringt ein kleiner Haken die Stelle wieder herbei.
Designtokens oder das daisyUI-Theme der Seite übernehmen — das Werkzeug zieht beim Themenwechsel mit.
Folgt der Sprache der Seite. Weitere Sprachen werden erst geladen, wenn sie gebraucht werden; eigene Begriffe lassen sich ergänzen.
Mit ⌥⇧R ganz ausblenden. Auf Staging sichtbar, in Produktion ausgeblendet oder gar nicht ausgeliefert.
Das Werkzeug bleibt eigenständig: Das Produkt bindet eine fertige Datei ein, installiert nichts und baut nichts mit. Gewählt wird nur, wo die Anmerkungen liegen.
Der Ordner dist/ liegt unter einem festen Pfad im Produkt, das Tag steht vor </body>. Anmerkungen und Screenshots liegen in der IndexedDB des Browsers und gehen per ZIP weiter.
<!-- index.html, vor </body> --> <script src="/review/overlay.js" data-storage="local" data-project="kunde-x" defer></script>
data-project immer fest setzen — sonst trennen sich die Anmerkungen von localhost und Staging.i18n/.data-start-enabled="false" ausgeblendet starten.Alle Anmerkungen landen in einer JSON-Datei im Projekt, die ein Kollege oder ein KI-Agent direkt abarbeiten kann. Tablet und Handy arbeiten über vite --host gleichzeitig mit.
// vite.config.ts import reviewOverlay from 'review-overlay/vite' export default defineConfig({ plugins: [vue(), reviewOverlay({ feedback: 'review-feedback.json' })], })
vite serve — in den Produktions-Build gelangt nichts.review-feedback.json und review-shots/ in die .gitignore des Produkts.server/review-server.js nutzt nur die Node-Standardbibliothek und bedient Overlay, API und Screenshots. Der Webserver davor meldet an und spielt die Tags in jede HTML-Antwort ein.
# Server starten REVIEW_DATA_DIR=/data/review node server/review-server.js # nginx davor location ~* \.html$ { sub_filter '</body>' '<script src="/__review/config.js"></script><script src="/__review/overlay.js" defer></script></body>'; } location ^~ /__review/ { client_max_body_size 16m; proxy_pass http://review:8732; }
REVIEW_PORT, REVIEW_FEEDBACK, REVIEW_KINDS …Angemeldete Nutzer melden einen Fehler, einen Vorschlag oder eine Frage — eine oder mehrere Anmerkungen, jede als eigenes Issue in GitLab. Ein GitLab-Konto brauchen sie nicht; das Token gibt das Backend des Produkts aus.
const result = await ReviewOverlay.feedback({ gitlab: { url: 'https://git.example.com', project: 'gruppe/feedback-produkt', token: () => backend.requestFeedbackToken(), }, }) // { status: 'sent', iids: [42, 43] } oder { status: 'cancelled' }
| Lage des Produkts | Ablage | Weg |
|---|---|---|
| Beliebige Web-Anwendung, kein Server für das Werkzeug | local — IndexedDB | Script-Tag |
| Vite-Projekt, Durchgang am Dev-Server | server — JSON-Datei | Vite-Plugin |
| Gebaute Anwendung auf Staging oder im Cluster | server — Volume | Eigener Server hinter Webserver mit Anmeldung |
| Rückmeldungen echter Nutzer im laufenden Produkt | GitLab-Issues | ReviewOverlay.feedback() |
| Anmerkungen im eigenen Backend | eigener Adapter | storage: adapter |
Der Reihe nach abzuarbeiten — von Hand oder von einer KI. Die ausführliche Fassung mit allen Optionen steht im README.
dist/ unter einem festen Pfad ausliefern, etwa /review/.defer, data-project fest gesetzt. Längere Werte per window.__reviewConfig.localStorage.clear() beim Abmelden.data-query, wenn die Adresse den Zustand trägt; __reviewLocate für Dialoge und Reiter.Jeder Punkt ist für sich wählbar, keiner Voraussetzung. Ohne sie verhält sich das Werkzeug genau wie oben beschrieben.
Der Name kommt aus der Anmeldung, Build und Mandant hängen an jeder neuen Anmerkung.
ReviewOverlay.setUser({ id: 'u-17', name: 'Ana Beispiel' }) ReviewOverlay.setContext({ build: '2.4.1', tenant: 'nord' })
Zähler, Benachrichtigungen oder eigene Statistik — das Produkt hört mit.
ReviewOverlay.on('pin:create', (pin) => notify(pin)) document.addEventListener('review:sync:done', refresh)
daisyUI-Theme übernehmen oder einzelne Tokens setzen — per Attribut, CSS oder zur Laufzeit.
<!-- Theme der Seite --> <script src="/review/overlay.js" data-tokens="daisyui" defer></script> /* oder per CSS */ :root { --review-accent: #b4235a }
Mit data-autostart="false" wartet das Werkzeug, bis das Produkt die Rechte geprüft hat.
if (user.canReview) await ReviewOverlay.init({ storage: 'server', gitlab: { url, clientId, project }, })
Oben rechts steht der Kasten „Reviewer“. Namen eintragen, auf das Anführungszeichen tippen und irgendein Element dieser Seite anmerken. Mit ⌥⇧R bzw. Alt+Shift+R blendest du das Werkzeug aus und wieder ein. Deine Anmerkungen bleiben in deinem Browser.