2px - UI Feedback

Mark UI issues on the page you are viewing and add notes. Markers and screenshots stay on this device or sync to your team (paid).

2px — Point. Comment. Fix. 2px is an AI-powered visual feedback tool for developers, QA engineers, designers, and product managers. On supported ordinary webpages, click an element and leave a comment; 2px attaches the technical evidence a developer needs to reproduce and fix the issue — automatically. Browser-protected pages such as chrome:// pages do not permit extension injection. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CORE FEATURES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ● Precise Element Marking — Activate marker mode by clicking the 2px icon in the Extensions menu (puzzle icon), or on the toolbar if you pinned it (or with the Alt+Shift+M shortcut, or Start Marking in the 2px Panel: Extensions menu (puzzle icon) → ⋮ next to 2px → 2px Panel), and click an element on a supported webpage. When the CSS selector 2px builds for the element uses an id, class or attribute, has no sibling-position part (such as :nth-of-type), is at most 2,048 characters long and leads back to the clicked element, 2px stores that selector, the tag name and the clicked point's relative position, and uses them to place the pin on that element again after the page changes; if the element can no longer be found or is not visible, the pin is hidden. Drag-area markers, and element markers saved without such an anchor, stay at their saved page position. ● Pixel-Precise Nudge — Select a marker and use the arrow keys to move its element on the page by 2px (Shift for 10px) as a live preview. Then press Enter to copy a fix prompt to your clipboard (the page address, the time, the selector, the distance moved, the element's layout context, and a suggested CSS change) — paste it into your AI tool. The prompt is built on your device and is not sent to 2px. ● Drag Area Selection — Need to mark a region instead of a single element? Draw a selection rectangle over any area of the page. ● Rich Annotations — For every marker, add: - Detailed description (the optional AI suggestions can also propose a title) - Feedback type (11 types, such as Bug, Layout, Feature, Improve, Question) - Priority: Critical, High, Medium, Low - Voice dictation into the description (optional; uses Chrome speech recognition, which Google processes) ● Evidence Pack — Saved automatically on this device with every marker you create: - Up to 26 computed CSS values of the marked element - Up to 10 recent console errors and warnings logged after you activate 2px on the tab (2px's own errors and warnings can be among them) - Up to 10 recent failed requests: the page's requests that got an HTTP 4xx/5xx response the browser reports (this can include requests made before you activated 2px on the tab), the page's fetch requests that failed or got such a response after you activated 2px on the tab, and some requests made by 2px itself on the page that failed or got an error response - The time it was collected ● Screenshots — When the marker form opens, 2px captures the visible part of the tab and shows it as a preview; it is saved with the marker when you save (if no preview was taken, the screen is captured right after saving). Screenshots are not masked automatically, so check the screen for personal information before saving. ● Save+AI Copy — The marker form's "Save+AI" button saves the marker and copies an AI fix request, built on your device, to your clipboard: the marker's description (up to 1,000 characters), type, priority and selector, the page address, the time it was captured (with your time zone), and up to 4,000 characters of page evidence: the start of the element's HTML (up to 1,500 characters, which can include input field values), its CSS values, recent console errors and warnings, and failed requests. After a failure to build the full request, a simpler fallback request with the whole description (up to 5,000 characters) and no page evidence is copied instead. It is not sent to 2px — check it before pasting it into an AI tool. ● AI Diagnose (rule-based checks; no AI model is used) — From the marker form, run on-demand checks. The accessibility, CSS and responsive checks run on your device; the SEO and design checks are Cloud Checks: - Accessibility — automated page-wide checks for selected WCAG 2.2 Level A/AA criteria, with technique references (not a conformance audit) - CSS checks on the marked element — clipped overflow, z-index problems, flex/grid and unit issues, low text contrast, focus styles - Responsive hints at the current window width — horizontal page overflow, fixed widths, small touch targets, and whether the page's readable stylesheets have mobile media queries - SEO audit (Cloud Check) — title and description, social tags, headings, image alt text, links, JSON-LD structured data - Design consistency (Cloud Check) — whether the marked element's colors, font sizes and weights, and spacing match values used elsewhere on the page or a 4px grid - Cloud Checks run on api.2px.dev only after you allow them for the site (you are asked each time unless you choose "Don't ask again on this domain for 30 days"). They send a page summary limited to these parts: the host name and a hash of the path; the title, description, language and robots values, and social tags (the canonical and social-image addresses cut to host names); headings; image alt text or its absence, host names, file types, size attributes and lazy-loading flags; link text, host names and external/nofollow flags; JSON-LD types, field counts and whether required fields are present; word, H1, image and link counts; the page's colors, fonts, spacing values, dark-mode signals and CSS custom properties (names and values); the marked element's tag, selector, label, a short text sample with common personal-data patterns masked, six style values and on-screen position; and the number of open shadow roots and the time the collector loaded. It is sent with a random installation ID (or your license key and, for some keys, a random device ID), the consent version and the request time. The full page address, page HTML, cookies, input values and screenshots are not sent. ● Dashboard — A web dashboard for the feedback in your team workspace (cloud sync of extension markers is offered on Solo and above; separately, connecting a project with a supported install tag lets the extension attempt to send newly created markers to that project): - Kanban tasks (Todo / In Progress / Review / Done) - Filter by status, priority, and common feedback types, and view feedback per project - Review sessions — create a session by title, start and end it, and see completed sessions; while a session is live, Team plans and above can join the team's LiveKit voice and screen-sharing room - Marker status (Open / In Progress / Needs Info / Resolved / Reopened / Closed) - Analytics — feedback KPI cards, including backlog aging, on every plan; the Analytics page's trend, status, team-activity and project charts on Solo and above - ⌘K Command Palette — quick navigation, theme and language commands - Dark mode - English and Korean interface ● Team Collaboration (web dashboard) — Real-time presence indicators, @mentions, comment threads, and Webhook integration. ● Share Links — Create a link to a project or page so clients and guests can view its feedback without an account and, while the link is active, comment on existing markers. Guests cannot add new markers from a share link. ● Local Export — Download marker data as a JSON file, or copy it to your clipboard in the text format you choose. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WHO IS 2px FOR? ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ● Frontend Developers — Review staging and production UI. Evidence Pack keeps recent console errors and failed requests with each marker on your device, and Save+AI adds them to the AI fix request you copy. ● QA Engineers — Document bugs with screenshots and technical context attached. No more "see attached screenshot" tickets. ● Designers — Give pixel-perfect feedback directly on live pages. Nudge a misaligned element by 2px and copy a fix prompt for your AI tool. ● Product Managers — Triage feedback with priority, status, and Kanban. ● Agencies & Freelancers — Share review links so clients can see feedback and reply to it without an account. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PRICING ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Free — $0/month: ✓ Limits: 50 markers/project in the workspace (marking in the extension on your device is not limited by plan); 3 projects; 1 team; 1 member; 100 MB cloud storage per team for files uploaded in the web dashboard (on Free, screenshots stay on your device); 0 Webhooks ✓ Features: click/drag marking, screenshots + Evidence Pack, local AI Fix prompt, the web dashboard (without cloud sync of extension markers), and local download and copy of marker data Solo — $9/month ($7/month billed annually): ✓ Includes all Free features ✓ Limits: 500 markers/project; unlimited projects; 1 team; 1 member; 2,048 MB cloud storage per team (screenshots and attachments combined); 0 Webhooks ✓ Features added: cloud sync, share links, and analytics Team — $29/month ($23/month billed annually): ✓ Includes all Solo features ✓ Limits: 2,000 markers/project; unlimited projects; 3 teams; 10 members; 10,240 MB cloud storage per team (screenshots and attachments combined); 5 Webhooks ✓ Features added: custom tags, Webhooks, voice calls, and voice memos Growth — $79/month ($63/month billed annually): ✓ Includes all Team features ✓ Limits: unlimited markers/project; unlimited projects; unlimited teams; unlimited members; unlimited cloud storage; unlimited Webhooks ✓ Feature added: audit log Marker limits count active markers stored in the cloud, per project; markers uploaded by cloud sync from the extension have no project, so all of a team's cloud-synced extension markers share one limit. Team limits apply to creating teams: the count includes every team you own or belong to, the limit comes from the highest active plan among the teams you own, joining a team by invitation is not limited by it, and each team has its own plan (new teams start on Free). Marker retention (all plans): markers on your device stay until you delete them or remove the extension (unless you turn on the optional, off-by-default setting that replaces the oldest marker once a marker limit you set is reached; a synced marker deleted in the workspace is also removed from the extension on your device when it syncs, unless you changed it on this device and that change has not uploaded yet, in which case it is kept as a conflict for you to resolve); workspace markers do not expire: deleting one (an admin can delete any marker, an editor only their own) marks it as deleted instead of erasing the stored record, 2px does not erase deleted marker records automatically, and a screenshot the extension uploaded for a deleted marker can be erased from 24 hours later by the hourly cleanup in the uploader's or a workspace admin's signed-in extension. Deleting a project (admins only) or the workspace deletes its marker records instead of marking them as deleted, but uploaded files are not erased at the same moment (closing your account deletes the content of a workspace only you belong to; markers you added to other people's workspaces stay there without your name). CURRENT RELEASE LIMITS Not included in v3.4.10: advanced export integrations in the extension, native chat-app integrations, the REST API, a customer-installable command-line tool (CLI), SSO/SAML, a customer-facing Admin Console, self-service custom-branding configuration, priority support, dedicated support, and any response-time SLA. General support is offered at contact@2px.kr without a guaranteed response time. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ KEYBOARD SHORTCUTS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ● Alt+Shift+M — Toggle marker mode (change it any time at chrome://extensions/shortcuts) ● Arrow keys — Move the selected marker's element (2px / Shift=10px) ● Enter — After moving, copy the fix prompt to clipboard ● ⌘K (Ctrl+K on Windows and Linux) — Command palette in the web dashboard ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PRIVACY — LOCAL-FIRST BY DESIGN ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ● Free users: Core marker data is stored locally, with no account required for core marking. Network requests occur only when a user explicitly signs in, invokes a network-backed cloud, license, AI suggestion, or Cloud Checks action, or successfully connects a project with a supported install tag (the extension then attempts to send newly created markers to https://api.2px.dev). ● Paid users: Cloud sync is opt-in. Only the disclosed marker metadata and screenshots are transmitted. Full-page HTML and browsing history are excluded; screenshots are not masked and can show anything visible on screen, and teammates in the workspace can see them. ● With consent, AI auto-classify sends the marker description (its start as a draft title), selector, and bounded element context to api.2px.dev; it does not send screenshots, the full page, form inputs, or page URL. ● No third-party APIs: the extension talks only to 2px services (api.2px.dev, license.2px.dev) and the 2px Supabase project. Optional voice dictation uses Chrome's built-in speech recognition, which sends audio to Google while you record. ● Remote-code policy: release source forbids eval, new Function, and remote script loading and is configured for local WXT bundling. ● Full privacy policy: https://2px.dev/privacy/ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SUPPORT & LINKS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ● Website: https://2px.dev ● Docs: https://2px.dev/docs ● Privacy Policy: https://2px.dev/privacy/ ● Support: contact@2px.kr Made with care for the web development community.