Launch HN: Toybox (YC S18) – Communicate changes to sites without writing code
38 comments
My clients (VPs of Marketing and CEOs) would never provide feedback in a tool like this.
It's Email or a phone call every time because they don't have the time it desire to learn a new tool for what to them is a one off design project.
It's Email or a phone call every time because they don't have the time it desire to learn a new tool for what to them is a one off design project.
Totally hear you there. Thanks for the feedback!
We've seen freelancers and agencies record feedback themselves while on the phone with their clients but appreciate your honesty - super helpful for us.
We've seen freelancers and agencies record feedback themselves while on the phone with their clients but appreciate your honesty - super helpful for us.
Mine will never ever. But maybe if it becomes as popular as email or excel. Ahh, the life of a giga corporate cog.
I thought I'd check the demo site, but it's spinning the loading animation for more than a couple of minutes now. Perhaps there's a big traffic spike with the launch news. I'll check it out some other time if I remember.* But this is one of the most important things to address quickly.
* Don't trust users to remember and go back to a site that seemed interesting but wasn't working or loading.
* Don't trust users to remember and go back to a site that seemed interesting but wasn't working or loading.
Really love this concept, awesome job guys. Do you think marketing and growth teams will use to surface ideas for copy and layout changes? I could definitely see a future feature that let teams vote too -- would be super valuable for growth teams that are moving fast.
We've started seeing some Marketing/Growth teams use the product to communicate copy changes etc. so we're interested in how else we can provide value there.
Love the idea of upvoting edits. Will definitely test that out more :)
Love the idea of upvoting edits. Will definitely test that out more :)
Great to see Toybox getting some attention. While I'm still not convinced that BSD-0 is the best license, it certainly encourages innovation in the space.
Wait, you're not Robert Landley!
Naming stuff: one of the hard problems of computer science.
Wait, you're not Robert Landley!
Naming stuff: one of the hard problems of computer science.
That sounds interesting. Do you plan to port this to Firefox? I'd love to test it :)
Right now, you can view and edit any web page in Firefox but to capture it, you have to use our Chrome Extension.
We’re looking at other ways to “capture” pages i.e. js snippet, firefox, etc.
Let me know if you have any preferences or ideas there :)
We’re looking at other ways to “capture” pages i.e. js snippet, firefox, etc.
Let me know if you have any preferences or ideas there :)
How do you differ from Webflow and zeplin/figma?
Zeplin and Figma help teams in the handoff from design to development. They take design files and automatically translate the vector-based shapes to CSS without having to manually redline.
We go the opposite direction - from development to design. We capture web apps or sites (not design files) and allow non-technical teammates to make edits and communicate those changes with developers.
Webflow allows anyone to create and host a website from scratch using their robust WYSIWYG.
Unlike Webflow though, with Toybox you can capture any web app or site and make edits using our WYSIWYG (don’t need to have originally built it using Toybox).
We go the opposite direction - from development to design. We capture web apps or sites (not design files) and allow non-technical teammates to make edits and communicate those changes with developers.
Webflow allows anyone to create and host a website from scratch using their robust WYSIWYG.
Unlike Webflow though, with Toybox you can capture any web app or site and make edits using our WYSIWYG (don’t need to have originally built it using Toybox).
Your hn demo is super interesting. It would be cool to see designers fix popular websites (cough reddit) and then be able to release those changes to the public.
Replying to myself -
It would actually be excellent "tool/side-project marketing" (like unsplash.com was for crew.co). If you set up a demo page like that, gave access to certain designers, and let them use your tool for free to showcase their redesigns of major sites.
It would actually be excellent "tool/side-project marketing" (like unsplash.com was for crew.co). If you set up a demo page like that, gave access to certain designers, and let them use your tool for free to showcase their redesigns of major sites.
Yea that is awesome. Definitely going to set that up! Thanks so much :)
This would be super cool. Could even do community-based upvoting on what a leading website should look like.
Curious as to how the legal end would work re: IP. If you have 1,000 people redesigning Reddit and publishing it for all to see, there's bound to be some serious design overlap (whether intentional or not) when said company eventually goes through a redesign.
Curious as to how the legal end would work re: IP. If you have 1,000 people redesigning Reddit and publishing it for all to see, there's bound to be some serious design overlap (whether intentional or not) when said company eventually goes through a redesign.
My thoughts were that you give the website owner free/full access to the redesign and engagements stats for users on the redesign. If users are more engaged and the company earns more ad revenue from the redesign.. maybe they can just implement it?
Oh that's awesome. And yea - not sure how the legal end would work either. Will ask around and let you know what we hear!
That would be cool. Sounds like you could build a community around that.
Love that idea. So kind of like dribble but instead of screenshots of redesigns, it's the developed site?
Definitely like the HN demo!
Few questions:
1. Is there a way to set different CSS for different breakpoints? It seems like if I tweak it for desktop size, it also applies to the mobile screen.
2. Is there an output that shows the full CSS diff so I know the extent of what I have to change, as a developer? Ideally you'd even be able to pull in source maps and generate a patch file for me to just apply.
3. Could you even make it so that this just generated a PR on the GitHub repo with the changes in the CSS/LESS/SCSS? Seems like that may require a lot more integration with the tooling, so might not be worth it.
Few questions:
1. Is there a way to set different CSS for different breakpoints? It seems like if I tweak it for desktop size, it also applies to the mobile screen.
2. Is there an output that shows the full CSS diff so I know the extent of what I have to change, as a developer? Ideally you'd even be able to pull in source maps and generate a patch file for me to just apply.
3. Could you even make it so that this just generated a PR on the GitHub repo with the changes in the CSS/LESS/SCSS? Seems like that may require a lot more integration with the tooling, so might not be worth it.
Thanks!
1. Breakpoints are definitely something we’ve heard and are actively working on!
2/3. Another great idea - would love to hear more about what you hope to extract from the full css diff, versus change by change? The patch file/PR is an awesome idea and something we definitely want to push on as we integrate more with the chrome dev tool api :)
- Jono
1. Breakpoints are definitely something we’ve heard and are actively working on!
2/3. Another great idea - would love to hear more about what you hope to extract from the full css diff, versus change by change? The patch file/PR is an awesome idea and something we definitely want to push on as we integrate more with the chrome dev tool api :)
- Jono
Wow! This looks awesome. After signing up and playing around with it; I can actually see this fitting in to my real workflows. I see you guys have integrations coming soon, and the only request I would have is Asana support.
Glad to hear that!
Just added that to our backlog :) Wondering how you envision those changes within Toybox being displayed/integrated in Asana?
Just added that to our backlog :) Wondering how you envision those changes within Toybox being displayed/integrated in Asana?
Wow this is really neato! Often times, I find myself not only changing CSS, but editing the HTML. Does that work in Toybox?
At the moment, our WYSIWYG allows you to edit the CSS properties of any element. The only HTML element you can edit via Toybox at the moment is changing text.
Would love to hear how you'd envision editing the HTML? Wondering what types of edits you're currently making to the HTML via the console?
Would love to hear how you'd envision editing the HTML? Wondering what types of edits you're currently making to the HTML via the console?
This is cool and solves some of the issues around staying organized when creating a final polish punchlist that come up, even when I'm doing the design and dev myself :-).
Couple thoughts -
When adding a new comment, I was surprised that mine became "1" which reflowed all the numbers. Seems like it would be helpful to append the comments so that the numbers stayed static.
Also, it would be neat if I could change the styles of all the similar elements at the same time. For example, when editing the .storylink class, it would be neat if I could choose to edit all similar elements or just that specific instance (like I can in the normal inspector). That would make it easier to preview my changes and make what I am trying to change clearer to the developer.
Another feature this brought to mind would be a way to preview all the colors in use on the page, kind of reverse engineering SCSS color variables. That way a designer could preview what changing orange --> green across all uses might look like before committing to it. The designer could also suggest a new color be added to the palette. In a dream world, this would also work for all font styles in use. Basically creating a reverse style sheet so you could see and consolidate minor differences. Maybe this is what you mean by style and component linting?
Finally, it would be cool to have "versions" or "groups" of the edits. We often debate whether we should go one direction or another, and being able to flip between a few options without fully coding a solution would be neat.
Cool project and good work!
Couple thoughts -
When adding a new comment, I was surprised that mine became "1" which reflowed all the numbers. Seems like it would be helpful to append the comments so that the numbers stayed static.
Also, it would be neat if I could change the styles of all the similar elements at the same time. For example, when editing the .storylink class, it would be neat if I could choose to edit all similar elements or just that specific instance (like I can in the normal inspector). That would make it easier to preview my changes and make what I am trying to change clearer to the developer.
Another feature this brought to mind would be a way to preview all the colors in use on the page, kind of reverse engineering SCSS color variables. That way a designer could preview what changing orange --> green across all uses might look like before committing to it. The designer could also suggest a new color be added to the palette. In a dream world, this would also work for all font styles in use. Basically creating a reverse style sheet so you could see and consolidate minor differences. Maybe this is what you mean by style and component linting?
Finally, it would be cool to have "versions" or "groups" of the edits. We often debate whether we should go one direction or another, and being able to flip between a few options without fully coding a solution would be neat.
Cool project and good work!
1. Can't agree more with the numbering issue. We're going to be fixing that ASAP :)
2. We're currently working on adding the ability to edit just one element or all that are associated with that class. Should be live in a few days!
3. Yes and yes. We're super interested in this idea as well. We've been testing out showing all the style elements in use on any given page ( i.e. on this page you're using these 5 grays, 4 type styles etc.). With that information, we can allow users to "add" those elements to their saved styles and see if something on the page doesn't match. For instance, the red we use is #C8080A but I can now see that in these 8 places we're using a red that doesn't match. Would love to hear your thoughts around this!
4. There is actually a "History" tab located on the side-panel where you can view the changes made to that page over time. Let me know if that's what you meant and how we could improve the visibility/usability of that!
2. We're currently working on adding the ability to edit just one element or all that are associated with that class. Should be live in a few days!
3. Yes and yes. We're super interested in this idea as well. We've been testing out showing all the style elements in use on any given page ( i.e. on this page you're using these 5 grays, 4 type styles etc.). With that information, we can allow users to "add" those elements to their saved styles and see if something on the page doesn't match. For instance, the red we use is #C8080A but I can now see that in these 8 places we're using a red that doesn't match. Would love to hear your thoughts around this!
4. There is actually a "History" tab located on the side-panel where you can view the changes made to that page over time. Let me know if that's what you meant and how we could improve the visibility/usability of that!
1,2: Awesome, excited to see the updates
3: Cool, sounds like you are thinking about this in a similar way. The one place where there might be issues is when using opacity, i.e. the color is defined in hex in one place and as rgba in another. I am not sure how to solve it, but might be something to keep an eye on. :-)
4: I did notice the history tab, and I think that is very helpful for seeing where an edit went off the rails. I was more meaning 2 completely different edits for the same page side by side. For example, here is what a page looks like with new-font-x vs new-font-y. Thinking about it more, maybe you could just import the page into your system twice? Not sure if you are preventing dupe URLs.
3: Cool, sounds like you are thinking about this in a similar way. The one place where there might be issues is when using opacity, i.e. the color is defined in hex in one place and as rgba in another. I am not sure how to solve it, but might be something to keep an eye on. :-)
4: I did notice the history tab, and I think that is very helpful for seeing where an edit went off the rails. I was more meaning 2 completely different edits for the same page side by side. For example, here is what a page looks like with new-font-x vs new-font-y. Thinking about it more, maybe you could just import the page into your system twice? Not sure if you are preventing dupe URLs.
3. Totally hear you with regards to opacity. Will have to think about how we deal with that :)
4. Ohhh I see. Yea that's an awesome idea. Basically showing a diff between different design decisions? We'll definitely play around with that and see what we can do!
4. Ohhh I see. Yea that's an awesome idea. Basically showing a diff between different design decisions? We'll definitely play around with that and see what we can do!
I find this interesting, but feel like there should be a "less developer" focused version for non-dev communication. IE: Product manager, stakeholder, etc. Give them an easier way to annotate parts of the page with notes, versus the current way: screenshots and highlighting things with paint, powerpoint, etc
Edit: I see the screenshot view is sorta closer to what I am getting at. Either way, sounds like you guys are solving an interesting problem and should be easy to communicate the value if you clean up the UX. I just was overwhelmed at first.
Edit: I see the screenshot view is sorta closer to what I am getting at. Either way, sounds like you guys are solving an interesting problem and should be easy to communicate the value if you clean up the UX. I just was overwhelmed at first.
Agree with you there.
We've been thinking about having an "advanced" toggle which would hide the "developer focused" inspector and just leave a comment field. Wondering if you have thoughts on how we could do this better??
We've been thinking about having an "advanced" toggle which would hide the "developer focused" inspector and just leave a comment field. Wondering if you have thoughts on how we could do this better??
So, overall I think given the problem you are solving, there is a LOT of thought that could be done in regards to UX. So, ignoring that you guys are probably keeping that in mind, I have a few smaller comments that seem like immediate thoughts.
1) It isn't clear what is clickable and what isn't, I feel like I should be able to click on the blue comment badges and see related comments (or is that # related to requested change count?)
2) Secondarily to this, when I click on a dom element, it automatically defaults to the inspector tab, when I feel like this gets too deep for a product owner just wanting to make comments on a section
3) I am not clear on what the difference between a red highlight box around elements and a blue one means
After looking at it a few minutes more, other than the comments above, I think you are thinking about it in the right way. I feel like there are levels of depth/advanced features that should feel more progressive -- right now it seems like feature overload on that first view. Maybe the default view is just something where you can click on dom elements and add comments, the second "tab" is "Request Markup Changes" where there are no comments -- when you select an element you can make markup changes with the advanced inspector and there is a history of those, and then you might could even get rid of the "screenshot" view. Or maybe mix the screenshot "highlight area" functionality with the first/non-dev oriented commentary tab/view
Sorry if that last paragraph isn't concise, I can rewrite it better if some of it wasn't helpful. Also this is all obviously just my opinion
Edit: I made edits above ^ Edit: Last edit. I also notice the UI/UX seems a bit different on your landing page demo vs what is present in the demo link. I personally kinda like the comments having their own dedicated space to the left of the page, then you could toggle the advanced inspector tab on the right, in and out cleanly. Not sure if there is a way to change the comments to the left currently, or that was a previous build. But I feel like it addresses some of my commentary above.
1) It isn't clear what is clickable and what isn't, I feel like I should be able to click on the blue comment badges and see related comments (or is that # related to requested change count?)
2) Secondarily to this, when I click on a dom element, it automatically defaults to the inspector tab, when I feel like this gets too deep for a product owner just wanting to make comments on a section
3) I am not clear on what the difference between a red highlight box around elements and a blue one means
After looking at it a few minutes more, other than the comments above, I think you are thinking about it in the right way. I feel like there are levels of depth/advanced features that should feel more progressive -- right now it seems like feature overload on that first view. Maybe the default view is just something where you can click on dom elements and add comments, the second "tab" is "Request Markup Changes" where there are no comments -- when you select an element you can make markup changes with the advanced inspector and there is a history of those, and then you might could even get rid of the "screenshot" view. Or maybe mix the screenshot "highlight area" functionality with the first/non-dev oriented commentary tab/view
Sorry if that last paragraph isn't concise, I can rewrite it better if some of it wasn't helpful. Also this is all obviously just my opinion
Edit: I made edits above ^ Edit: Last edit. I also notice the UI/UX seems a bit different on your landing page demo vs what is present in the demo link. I personally kinda like the comments having their own dedicated space to the left of the page, then you could toggle the advanced inspector tab on the right, in and out cleanly. Not sure if there is a way to change the comments to the left currently, or that was a previous build. But I feel like it addresses some of my commentary above.
1) That # is currently the order of the comments made. Can see how that can be pretty misleading. Going to be playing around with that more :)
2) Agree with this as well. Trying to think of ways to make this work for multiple personas.
3) Another great point. Red highlight box means you have either selected that element or someone has made an edit to that element.
4) Love the ideas in that paragraph. We're thinking about removing the screenshot and bringing more of that functionality into just one screen to reduce cognitive load. We'll be playing with this in the next coming days so would love to hear what you think then!
And yep that's how it used to be designed. We recently changed it because our users (and us internally lol) we're having difficulty making sense of the page when there was so much going on. Will definitely keep that in mind though and maybe make it optional if you want the comments to show on the right-side!
2) Agree with this as well. Trying to think of ways to make this work for multiple personas.
3) Another great point. Red highlight box means you have either selected that element or someone has made an edit to that element.
4) Love the ideas in that paragraph. We're thinking about removing the screenshot and bringing more of that functionality into just one screen to reduce cognitive load. We'll be playing with this in the next coming days so would love to hear what you think then!
And yep that's how it used to be designed. We recently changed it because our users (and us internally lol) we're having difficulty making sense of the page when there was so much going on. Will definitely keep that in mind though and maybe make it optional if you want the comments to show on the right-side!
I built something similar: with http://WebFiddle.net you can see what any site would look like with custom CSS and JS applied, its like an editor for changing the web/plugins/extensions ect. Used by technical types.
Thanks for sharing that. Took a quick look and looks really cool!
For years Jono and I have struggled to communicate changes with one another during the development cycle. As a UX designer and Jono as a full-stack engineer, we spend hours going back-and-forth, trying to make small but important tweaks to sites. This was by far the most frustrating part of our jobs, driving us to try to solve this age-old problem.
While learning about the development to design handoff, we’ve come across some common challenges teams face. First, not all companies have sophisticated or easy to deploy staging environments to quickly share works-in-progress. Second, some designers make tweaks using Chrome Inspector, but these changes don’t persist and are recorded nowhere near the relevant web page. Lastly, the majority of these conversations are happening in unofficial and unformalized spaces, making it easy to dismiss and disregard.
The first problem we attempted to solve was creating a way to share web pages without a staging environment. To do this, we built a chrome extension that collects and sends the rendered DOM of the current page to Toybox. People write HTML and CSS in creative ways, so making sure we accurately re-render the captured page within Toybox has consistently been a fun and difficult challenge (looking at you CSS in JS...).
We built Toybox in a way that doesn’t require prior front-end knowledge to use. We created an inspector that makes any page feel like Squarespace—a universal WYSIWYG of sorts. As you make tweaks, those edits get saved as CSS allowing a developer to contextually review where on the page a change was requested and the relevant code required to resolve that change. To see it in action, we made a demo of Hacker News here: https://app.toyboxsystems.com/share/Zodzjmzhpx3w
We're excited about the possibilities of having a rendered web page within Toybox. We’re currently testing the concept of style and component linting. Instead of the rules being tabs vs. spaces :) we can lint for incorrect uses of color, accessibility, typography, button styles, and so forth by using design files or style guides as inputs. With the rise of component libraries and design systems, we’re excited to further automate these QA efforts and make this communication channel even smarter.
We’d love to hear your feedback and personal experiences when it comes to this phase of the development process. You can try Toybox for free here: https://www.toyboxsystems.com/
Thanks, Brendan & Jono