Web

The web reporter is an npm package, or a script served by the bridge. Load it in development, pick any element on the page, describe the change, and the page reloads by itself when the fix is ready.

Prefer to start from working code? The web sample is set up with the published SDK.

Add the reporter

1. Add your dev server’s exact origin to allowedOrigins in pointfix.config.json, for example "http://localhost:5173", and restart the bridge.
2. Install the package as a dev dependency:

   npm install -D @pointfix/web

3. Mount it in development only, for example behind your bundler’s development flag:

   import { mount } from "@pointfix/web";
   
   const capture = mount();
   // On teardown: capture.unmount();

Without a bundler

Load the script the bridge serves instead, in development pages only:

<script src="http://127.0.0.1:4747/sdk/browser.js"></script>
<script>
  const capture = Pointfix.mount();
  // On teardown: capture.unmount();
</script>

An origin is scheme, host and port, with no path or trailing slash: http://localhost:5173 and http://127.0.0.1:5173 are different origins. Requests from an origin that isn’t listed are refused with Origin is not allowed. Add it to allowedOrigins in the config.

API

The reporter lives in a shadow root, so page styles don’t affect it. The agent is chosen in Pointfix’s Preferences; a provider option is ignored.

Pick an element

• Choose Report UI issue in the bottom-right corner, then click an element. An outline and a label follow the pointer so you can see what you’ll select. Esc cancels.
• Or hold Alt + Shift (⌥ ⇧) and click any element at any time.

Clicking a child selects its nearest meaningful ancestor: an element with an id, data-testid or data-pointfix-name, a button, link, form control, or an element with a role. The click is not passed on to the page.

The composer

• The header shows the identifier or name, with the page title, “Web” and the source file when known.
• Optional category chips: Spacing, Color, Text, Size, Layout, Other.
• Type in What should change? and press Send or ⌘/Ctrl + Enter. Esc closes the composer.
• { } Context shows a read-only preview of the Context Packet. The choice is remembered in the browser.

What a report contains

• The element’s name, identifier (id or data-testid), ARIA label (aria-label or aria-labelledby), tag and frame.
• A CSS selector, up to 2,000 characters of text, its role, and computed color, background, font, padding and border radius.
• The page title as the screen, the URL without query string, and the viewport size.
• A PNG screenshot of the visible viewport, with the Pointfix UI left out.

Source attributes

Optional attributes add exact source context:

<button data-pointfix-name="checkout.continue"
        data-pointfix-file="src/Checkout.tsx"
        data-pointfix-line="42">Continue</button>

Progress pill and auto-reload

After you send, a pill at the top right follows the report through Sent, Agent, Relaunch and Review, polling every 2.5 seconds. When the report reaches review and Auto-relaunch is on, the page reloads once. Shortly after, if you are still on the same path, the reporter captures the page again and sends it as the Proposed screenshot. In review the pill links to the dashboard (Open in Pointfix) for the commit.

The report being followed is kept in the tab’s session storage, so tracking continues across the reload. After three failed polls the pill shows Bridge unreachable.

Screenshots and html2canvas

Screenshots are rendered in the browser with html2canvas, which the reporter loads from the bridge. It redraws the page rather than capturing pixels, so:

• Cross-origin images and assets, iframes, video and canvas content may be missing.
• CSS that html2canvas doesn’t support may render differently.

If the screenshot fails, the report is still sent with its DOM context.

CSP, HTTPS and local network

• A development Content Security Policy must allow the bridge, for example http://127.0.0.1:4747, in connect-src and in script-src (for the screenshot library, and for the reporter script when you use the script tag).
• The bridge speaks plain HTTP. A page served over HTTPS can be blocked from loading it as mixed content, and browser local-network restrictions can block requests to 127.0.0.1. Local HTTP development is what the reporter is designed for.
• Never ship the reporter to production: mount it only in development builds.

Demo page

The bridge serves a demo storefront at http://127.0.0.1:4747/demo with the reporter already mounted. A long product name overflows its card as a flaw to practice on. Reports run with your selected agent against your configured project, so set the project up before sending one.