Toybox
p/toybox
Bug reporting made easy
Sharon Pope
Toybox — Visually edit your site's CSS without inspecting code.
Featured
23

Toybox gives you the power to visually edit any website's CSS without inspecting code. As you make edits, we create & store clean CSS annotations for you and your developers.

How it works:

1. With 1 click - capture any web page (live or local) and re-render it within Toybox

2. Visually edit and annotate your UI.

3. Share, comment, and collaborate.

Replies
Yuri Sagalov
I had a chance to play with Toybox, and it’s absolutely the best way to provide actionable feedback on website design, copy, style, etc... before even deploying the site live. Love it.
Brendan Mahony
@yuris Thanks so much Yuri - look forward to hearing more of your thoughts/ways we can improve!
Jeremy Evans

I've been looking for a product that does this for over a year! Toybox is very low-friction to get started, and when I use it to send feedback to team members they instantly understand my feedback. Can't wait to see the new features as they release them.

Pros:

Super simple to use, no need to change workflows

Cons:

None :)

Chris Frantz
Will definitely be using this!
Brendan Mahony
@frantzlight Super excited to hear your feedback!
Jacob Eiting

Toybox is a nice way for my co-worker and I to bounce things back and forth without getting up and disrupting each other, or sharing screenshots over and over. We're just getting started with it but I'm excited to see how it changes our workflow.

Pros:

Nice way to handle visual collaboration

Cons:

Browser plugin

James Sulinski
We're using this as we prepare to launch, and it's super helpful for efficiently communicating about design on SSRs and SPAs. The team behind it is also great and I can't wait to see what they build for their next features.
Brendan Mahony
@jsulinski Thanks so much James - look forward to hearing more of your thoughts!
Mahyar Raissi
This is a pain I experienced myself and this product would totally solve that. I love how all the change requests are translated into actual css snippets that developers can just copy into their projects. Will definitely use this product 👍
Brendan Mahony
@mahyarraissi Thanks so much - really excited to hear your feedback!
Greg Stone
Hey, congrats! This looks like a rad product and I'm rather excited about it. Just so you know, your "Sign Up" link takes users to an unsecure page, not https. I typed it in manually, but you might want to fix that up so as not to turn away potential users. :)
Brendan Mahony
@gregstone14 Hey Greg. Thanks so much for letting us know - we just updated those links on the site! Excited to hear what you think about Toybox :)
Jesse Korzan
I was hoping to use this on our application (we've been looking for something like this)... but the CSS in the inspector is very inaccurate (often not rendering most of the elements). Maybe it's not ready for more complex UI. But the potential is there... I'll check back later and see if it's improved.
Brendan Mahony
@jessekorzan Hey Jesse! Totally hear you - we're actively working on making the CSS inspector more accurate. Taking a look at your site now to see what we can do.
Jesse Korzan
@bmaho2211 Thanks mate... it's the local version that's rendering blanks... I'd be willing to change my markup or CSS if you thought that was an easy fix to use this tool.
Brendan Mahony
@jessekorzan We want to make local environments rock solid but really appreciate your patience/being flexible. We're working on it now - thanks again!
Jono Kolnik
Hey PH! Brendan and I have been creating web apps together for over a decade. Brendan is a UX designer and I’m a full-stack engineer and we built Toybox because our old process was as follows: 1. I would push a change to production 2. Brendan would review the update and see it looked nothing like the mockups he made. 3. We'd either: sit next to one another and go through the small visual edits pixel-by-pixel OR Brendan would create spreadsheets and slack threads with screenshots and annotations of CSS changes. This sucked and was wasting a lot of our time so we decided to build a tool for our own internal visual/design review. We created Toybox to be a place where developers can share their WIP, designers can easily make tweaks without knowing how to code, and all of the changes are saved as CSS annotations - allowing for quick implementation. We hope you find this tool useful for your product development process and we’d absolutely love to hear your feedback. We’ll be here to answer any questions and comments. Thanks so much everyone! P.S. For those wondering why the name Toybox - it’s an homage to the t-shirt company we started together in high school, which put us on the entrepreneurial journey that lead us here today!
Lisa Simpson

Awesome idea!

Pros:

Love the speed that you can apply and share feedback to designs

Cons:

Max Keilson

Very easy to use for a technologically challenged person (me) who wants to edit the visual identity of a site clearly and share that with people able to make those edits reality.

Pros:

Straightforward editing

Cons:

None

Lee Fuhr
I was stoked to use this to help my Squarespace CSS-fu, but the capture was pretty far off so… kinda… what's the point. Live site (https://www.iquotexpress.com/): http://cozy.es/0Tuyjf Toybox capture: http://cozy.es/GpTmyU Looks pretty good from far, but now… the nav has a background, the Sign In isn't a button, there's an extra piece of text showing… and we haven't even got past the hero.
Jono Kolnik
@cozysd Hey Lee! Thank you for pointing that out! I will dig into that myself right away and get back to you once it's fixed :)
Lee Fuhr
@kolnik Anything?
Jono Kolnik
@cozysd so sorry about that, we've put a ton of work into the rendering and hopefully it looks better now!