You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
## Summary
- Reframes the CLI README around Vizzly as a visual testing/regression
platform instead of leading with agent context.
- Removes the extra pitch-heavy "Why Vizzly?" section so the README gets
to CLI usage faster.
- Adds the Vizzly inspector mascot asset and includes docs assets in the
npm package file list.
- Aligns package metadata and CLI help copy with the new README framing.
## Validation
- pnpm run build
- node bin/vizzly.js --help
- node bin/vizzly.js context --help
- rg -n "Visual review for agents and teams|Vizzly CLI for visual
review|Fetch build context for agents and reviewers" README.md
package.json src dist
- git diff --check
- npm --cache .tmp/npm-cache pack --dry-run
Full pnpm test was started and then intentionally skipped because this
is a README/help/package metadata change.
Vizzly keeps the visual truth behind your UI: approved baselines, meaningful diffs, review state, comments, and preview links in one place. That makes it useful for humans reviewing product changes and for LLM agents that need to understand what the UI is supposed to look like before they edit it.
8
+
<palign="center">
9
+
<imgsrc="./docs/assets/vizzly-mascot-inspector.png"alt="Vizzly bear inspecting a screenshot"width="220" />
10
+
</p>
9
11
10
-
Unlike tools that re-render components in isolation, Vizzly captures screenshots directly from your functional tests: the real thing. Whether you're validating AI-generated code or testing manual changes, you get reviewed visual evidence before anything hits production.
12
+
Vizzly is a visual testing and regression platform for teams that ship UI. It
13
+
captures screenshots from your real tests, compares them to approved baselines,
14
+
and gives you useful review data: meaningful diffs, comments, approvals, build
15
+
status, and preview links.
11
16
12
-
## Why Vizzly?
13
-
14
-
**Local TDD workflow.** See changes as you type, not after CI. The `vizzly tdd` command runs a local dashboard that compares screenshots instantly and exposes the current workspace as local context.
15
-
16
-
**Meaningful diff metadata.** Vizzly stores rich diff evidence: changed regions, cluster metadata, fingerprints, hotspots, confirmed regions, and image URLs. Agents can inspect what changed instead of guessing from a pass/fail label.
17
-
18
-
**Any screenshot source.** Playwright, Cypress, Puppeteer, Selenium, native mobile apps, or even design mockups. If you can capture it, Vizzly can compare it.
19
-
20
-
**Approved baselines as truth.** Cloud context carries human review state. Local context carries the downloaded or generated baseline metadata. That is the bridge between TDD locally and collaborative review in Vizzly.
17
+
This package is the CLI and local SDK surface. Use it to run local visual TDD,
18
+
upload screenshots from CI, generate static reports, and fetch machine-readable
19
+
build or diff data for scripts, automation, and coding agents.
21
20
22
21
## Quick Start
23
22
24
-
Requires Node.js 22+.
23
+
You need Node.js 22+.
25
24
26
25
```bash
27
26
pnpm install -g @vizzly-testing/cli
28
27
29
28
vizzly init
30
29
```
31
30
32
-
### Local Development (TDD Mode)
31
+
### Start Local TDD
33
32
34
-
Start the TDD server, run your tests in watch mode, and see visual diffs instantly at `http://localhost:47392`.
33
+
Start the TDD server, run your tests, and open the dashboard at
34
+
`http://localhost:47392`.
35
35
36
36
```bash
37
37
vizzly tdd start
38
38
pnpm test -- --watch
39
39
```
40
40
41
-
The dashboard shows diffs in real-time. Accept or reject changes right from the UI.
41
+
The dashboard shows screenshots, baselines, and diffs as they arrive. Accept or
42
+
reject changes right from the UI.
42
43
43
-
### Cloud Integration (CI/CD)
44
+
### Run With Cloud Review
44
45
45
-
For team collaboration and CI pipelines:
46
+
Use cloud builds when you want shared baselines, team review, and CI status:
46
47
47
48
```bash
48
49
vizzly login
49
50
vizzly run "pnpm test" --wait
50
51
```
51
52
52
-
The `--wait` flag polls for results and exits with code 1 if visual differences are detected.
53
+
`--wait` blocks until Vizzly finishes processing the build. It exits with code
54
+
`1` when visual differences need review.
53
55
54
-
For CI environments, set your project token:
56
+
In CI, use a project token:
55
57
56
58
```bash
57
59
export VIZZLY_TOKEN=your-project-token
58
60
vizzly run "pnpm test" --wait
59
61
```
60
62
61
-
### Visual Context For Agents
63
+
### Inspect Builds And Diffs
62
64
63
-
Use `vizzly context` when you want Vizzly to act like a visual context store, not just a test runner.
65
+
Use `vizzly context` when you need build, comparison, screenshot, or review
66
+
queue data from the terminal.
64
67
65
-
This is especially useful for LLM agents, automation, and quick debugging loops. Instead of
66
-
making a bunch of narrow API calls, you can ask for one build, comparison, screenshot, or review
67
-
queue bundle and get the evidence in one place.
68
+
This is useful for scripts, coding agents, and debugging loops. Instead of
69
+
making a pile of narrow API calls, ask for one focused bundle and get the
vizzly context build current --source local --agent
77
80
vizzly context screenshot build-detail-screenshots --source local --json
81
+
vizzly context review-queue --source local --json
78
82
```
79
83
80
-
`--json` is the durable automation path. `--agent` gives a compact handoff for prompt assembly and local dogfooding. Add `--full` when an agent really needs the complete build context payload, or `--include screenshots,diffs,comments` when the compact JSON needs selected detail.
84
+
`--json` is the durable automation path. `--agent` gives a compact handoff for
85
+
prompt assembly. Add `--full` when you need the whole payload, or
86
+
`--include screenshots,diffs,comments` when compact JSON needs selected detail.
81
87
82
-
Local context is read-only and file-backed. It reads your existing `.vizzly` workspace state from
83
-
TDD runs, including screenshots, diffs, and any saved hotspot or region metadata.
88
+
Local context is read-only and file-backed. It reads your existing `.vizzly`
89
+
workspace state from TDD runs, including screenshots, diffs, and saved hotspot
90
+
or region metadata.
84
91
85
-
Cloud context is also read-only right now. That is intentional. It keeps the trust model simple:
86
-
Vizzly helps you see and inspect visual changes, while people still decide what gets approved.
92
+
Cloud context is also read-only right now. That is intentional. Vizzly helps you
93
+
see and inspect visual changes, while people still decide what gets approved.
The client SDK is lightweight—it just POSTs to the local server. Works with any test runner. SDKs available for [JavaScript](https://docs.vizzly.dev/integration/sdk/javascript), [Ruby](https://docs.vizzly.dev/integration/sdk/ruby), [Swift](https://docs.vizzly.dev/integration/sdk/swift), and [more](https://docs.vizzly.dev/integration/sdk/overview).
113
+
The client SDK is lightweight. It posts screenshots to the local Vizzly server
114
+
or the cloud build wrapper. It works with any test runner.
0 commit comments