Toybox (YC S18) – Communicate changes to sites without writing code

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