Codename:
Snoopy.

Snoopy is an open-source tool that gives you immediate visual feedback on your React components.

๐Ÿ Run Snoopy.

To give it a quick try, you can run it with npx:

npx @prodo-ai/snoopy

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
./node_modules/.bin/snoopy

๐Ÿ“š Check out the docs.

The docs are pretty lean right now, as things are changing fast, but it should get you up and running.

github.com/prodo-ai/snoopy

๐Ÿšค Unreasonably fast.

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.

๐Ÿค– All the information you need.

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.

Examples rendered in Snoopy

๐Ÿƒโ€โ™€๏ธ Zero-config.

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.

๐Ÿ“ธ Testing is boring.

(Coming Soon)

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.

๐Ÿคนโ€โ™€๏ธ State management is hard.

(Coming Soon)

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.

๐Ÿคทโ€โ™€๏ธ Now what?

You've scrolled this far. You're intrigued. Try it out and see how it goes.

npx @prodo-ai/snoopy

And let us know what you think: