Percy Answers:
"Did the visual appearance of my UI change?"
- • Pixel-level screenshot comparison
- • Requires rendering in a browser
- • Great for catching visual regressions
Buoy Answers:
"Is my codebase following the design system?"
- • Static code analysis
- • No rendering required
- • Great for catching design drift
Feature Comparison
What Percy Misses
Hardcoded Values That Render Correctly
#3b82f6 and var(--primary) render as the same blue pixel.
Percy sees identical screenshots. Buoy knows one bypasses your design system.
Code That's Never Rendered
Conditional components, error states, and edge cases might not get screenshot coverage. Buoy scans all code paths, rendered or not.
Duplicate Component Implementations
Two components that look identical in screenshots might be completely separate implementations. Percy can't tell. Buoy identifies them as candidates for consolidation.
Token Usage Patterns
Percy can't tell if you're using spacing-4 or 16px.
Buoy tracks token adoption across your entire codebase.
Speed Comparison
Percy
Render pages → Take screenshots → Upload to cloud → Compare → Return results
Per CI run
Buoy
Scan code → Analyze AST → Report issues
Local or CI
Better Together
Percy and Buoy solve different problems. Use Percy to catch unintended visual changes. Use Buoy to ensure your code follows design system patterns.
When to Use Which
Use Percy when...
- • You need to catch unintended visual changes
- • You're doing cross-browser testing
- • You want screenshot documentation
- • You're testing responsive layouts
Use Buoy when...
- • You need to enforce design system usage
- • You want to find hardcoded values
- • You're measuring token adoption
- • You want fast feedback in development