Snoopy is an open-source tool that gives you immediate visual feedback on your React components.
Focus on delighting your users.
We're fast so you don't break your flow.
Preview both in isolation and in context.
Whatever your tooling preferences, we support them.
To give it a quick try, you can run it with
When you're serious, just add it as a dependency to your project (so it'll run immediately, every time):
npm install --save-dev @prodo-ai/snoopy
The docs are pretty lean right now, as things are changing fast, but it should get you up and running.
Snoopy gets things done. When you hit 💾 Save, everything gets updated instantly. No more waiting for Webpack to get around to it.
And because you're looking at every component, you don't need to click around to get things into the correct state. They're already there.
Computers were made to compute. Snoopy renders everything you've got every time you change anything, giving you all the information you need to make quick decisions.
Everything works out of the box. You don't need to configure anything to get Snoopy running and rendering your components. All you need to do is make a few examples.
Soon, you won't even need to do that.
Snoopy already finds your components for you. Soon it'll be able to analyse the way you interact with them in order to infer the kinds of properties those components need, and provide those properties automatically.
This means you won't have to design your examples up-front. You'll just let Snoopy think a few things up, and then tweak to suit your needs.
Once you're happy with your design, let the machine double-check it for you.
When it comes to design and front-end development, we're not so much looking for "this is right" as "this feels right". Typical development best practices often don't apply.
In the near future, Snoopy will take snapshots of your component examples, and make sure that whenever your design diverges from what you expect, you'll be notified.
And because it can check each component individually, it can work quickly and effectively.
If this intrigues you, tell us on Spectrum and help us design the next phase of Snoopy.
Your UI has so much state that bugs are inevitable. Figuring out what's going on at any given moment is nigh-on impossible. And diagnosing bugs found by your users is even worse.
In the future, Snoopy will help you with this, making sure that you can always track the series of events that got you into a particular state, without the overhead of conventional approaches.
And we're going to make it more fun, too. 😉
If this intrigues you, tell us on Spectrum and help us figure out how we can help you solve your problems with state management.
You've scrolled this far. You're intrigued. Try it out and see how it goes.
And let us know what you think: