This library is currently in development.
agit
agit

A Tool forComfortable QA

/

May 29: We've added 3 new solution pages

Leave feedback right on the screen you're reviewing.
Start light pin it where you click, and escalate to an issue only when you need to.

npm i @fivepixels-js/react
View on 2'm 5'm guide
/

Why do so many teams still struggle to adopt QA tools?

WHY TEAMS MISS THINGS

A learning curve
that's too steep

The QA tool you adopted to help the team
becomes the bottleneck—and adoption gets abandoned

01 / CONTEXT

Feedback drifts away from the screen.

The moment it moves to screenshots and chat, it's hard to remember exactly what you were talking about.

02 / REVIEW

"Which button?" keeps coming back.

Without markers, every review round starts with finding it again and explaining it again.

03 / SETUP

Heavy QA rollouts keep getting postponed.

When adoption looks like a big project, the review flow you actually need keeps slipping to the next release.

04 / HANDOFF

Client feedback stays vague.

One comment on the product screen lands faster than a long annotated message thread.

Three steps is enough now

01

Open staging

Start on the same review screen your team already shares.

02

Click and leave feedback

Instead of a messenger thread, pin comments right where you clicked.

03

Confirm and resolve

Replies, status changes, and re-review stay in one flow.

No more explaining things in words

BEFORE

The chat loop

CHAT LOOP
S
Search Stitchable

# project-eagle

Optional topic
74
Today
J
Jessy5:14 PM

@Mark The Slack design in the UiEditSection.tsx message area is a mess. I sent a screenshot.

M
Mark5:18 PM

I checked the screenshot, but I can't find what needs to be fixed.

New
J
Jessy5:21 PM

Build a Slack-style skeleton like the screenshot and just swap the content.

M
Mark5:23 PM

Point me to the exact spot and I'll fix it right away.

AFTER

Right on screen
agree on before / after

DIRECT MARKER

Packed with features

  • 01
    One-click feedback

    Leave it on the element—no more explaining which one

  • 02
    Pinned location

    Reopen the page and the same spot is recognized automatically

  • 03
    On-screen comments

    Review and discuss without switching apps

  • 04
    Live replies and confirmation

    Replies, confirmations, and resolutions in one flow

  • 05
    Direct UI tweaks

    Adjust text, spacing, color, alignment, and more on screen

  • 06
    Before / After

    See before and after states at a glance

  • 07
    Faster alignment

    Move from verbal explanations to visual agreement

  • 08
    Clear intent

    No vague feedback—just actionable changes

  • 09
    Drop onto staging

    Attach to your current screen—no separate QA SaaS

  • 10
    Minimal learning curve

    Leave and view modes—anyone can start right away

  • 11
    Half-day setup

    Mount it on a React app in half a day

  • 12
    Client handoff guide

    Clients can join reviews quickly via /guides/client

  • 13
    Shadow DOM support

    Independent styling without host CSS interference

  • 14
    localStorage demo

    Try it in the browser with no backend

  • 15
    Gradual rollout

    Tag only what you need with data-report-id—no full-app tagging

  • 16
    devOnly setting

    Limit exposure before production with `visibility.devOnly`

    • Flexible ways to work

    FOR SOLO

    Install once and you're done

    Use it personally without an API or server

    • Side-project notes

      Leave comments right on the screen and find the same spot again later.

    • One staging page

      Start light by adding data-report-id to just one high-traffic review page.

    • Hide in production

      Use devOnly on internal and staging environments—keep it off live.

    Install guide
    1// 1) Install
    2npm install @fivepixels-js/react react react-dom
    3
    4// 2) Mount once at the app root
    5<FivePixels
    6  project={{ id: "my-app" }}
    7  visibility={{ devOnly: true }}
    8/>
    9
    10// 3) Only on elements you want (optional)
    11<button data-report-id="hero-cta">
    12  Get started
    13</button>

    Built for individuals

    Current flow
    fivepixels
    Screenshots + arrows
    Markers pinned on screen
    Back and forth on Slack or email
    Status and replies in one list
    "That button over there"
    Comments on the element you clicked
    Heavy adoption review first
    Light attach on staging
    Repeated client re-confirmation
    Re-review unresolved items only

    Teams that need QA right now

    Early startups

    Founders, PMs, and designers review directly—and feedback scatters across verbal updates.

    Teams without a system

    Tools exist but rules don't, so the same issue gets explained again across channels.

    Freelancers

    When clients say "just a small tweak," you want to pin it right on the screen.

    Teams with no rollout bandwidth

    Learning a new QA app and onboarding feels bigger than shipping itself.

    Questions before you adopt

    No. It helps you leave precise feedback, confirm it, and hand off into the issue flow your team already uses.

    Yes. Because feedback stays on the product screen they are already viewing, it feels natural on staging reviews.

    Not necessarily. Start with the localStorage flow, then connect handlers when you need shared persistence.

    We aim for a small start: install, mount once, and tag one high-traffic review area.

    Free & Open Source

    fivepixels is free and open source. Rather than learning yet another QA SaaS,
    we add a thin review layer on top of the product screen you already use.

    contribute
    BROUGHT BY CODI@kimsangjunv1
    Codi profile
    fivepixels