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

Hi HN! We're Jono and Brendan, the founders of Toybox (YC S18). Toybox lets designers, marketers, and copywriters communicate changes to developers on any website, without having to write code. These changes get annotated as CSS edits so engineers can understand, reply, and implement the fixes (https://www.toyboxsystems.com).

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

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 :)

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.

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).

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.