Excellence Easy Way For QA

React 18+ · MIT · @fivepixels-js/react 0.2.24

You do not need a heavyweight QA platform.
Click the exact location review it with the team, and promote it to an issue only when needed.

npm i @fivepixels-js/react

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

WHY TEAMS MISS THINGS

Why does feedback
keep losing context?

The moment feedback leaves the screen for screenshots and chat,
the team starts explaining the location and intent all over again.

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

Open staging

Start on the same review screen your team already shares.

Click and leave feedback

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

Confirm and resolve

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

No more explaining things in words

01 / CASES

Follow the case in context

Open the marker window to see the case list, thread, assignee, and status without leaving the page under review.

MARKER WINDOW

02 / DESCRIBE

Add feedback on the spot
inspect, write, complete

Inspect the element, write the change in the composer, and hit Complete Feedback without switching tools.

FEEDBACK COMPOSER

03 / OVERVIEW

See the whole review surface

Collapse to a quick activity bar, or expand the panel to browse every feedback item on the page.

PANEL OVERVIEW

04 / DEVICE

Check feedback across viewports

Laptop, Mobile, and Dark mode notes stay pinned on the same screen, so responsive issues keep their breakpoint context.

DEVICE PREVIEW

Only the review features you need

One-click feedback

Leave it on the element—no more explaining which one

Pinned location

Reopen the page and the same spot is recognized automatically

On-screen comments

Review and discuss without switching apps

Live replies and confirmation

Replies, confirmations, and resolutions in one flow

Direct UI tweaks

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

Before / After

See before and after states at a glance

Faster alignment

Move from verbal explanations to visual agreement

Clear intent

No vague feedback—just actionable changes

Drop onto staging

Attach to your current screen—no separate QA SaaS

Minimal learning curve

Leave and view modes—anyone can start right away

Quick setup

Add it once near the root of your React app

Client handoff guide

Clients can join reviews quickly via /guides/client

Shadow DOM support

Independent styling without host CSS interference

Try without a backend

Save feedback in your current browser

Gradual rollout

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

Hide it on your live site

Use `visibility.devOnly` while your team reviews staging

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.

Start setup

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. UI Edit lasts only for the current tab session and resets on refresh. fivepixels supports review and communication; it never edits the codebase automatically.

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

No. Start with localStorage, then connect your API when teammates need to see the same feedback.

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