10 ms·
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 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 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/ https://www.toyboxsystems.com/
Thanks, Brendan & Jono
- Yoric 8y agoThat sounds interesting. Do you plan to port this to Firefox? I'd love to test it :)
- bmaho 8y agoRight 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 :)
- Kagerjay 8y agoHow do you differ from Webflow and zeplin/figma?
- bmaho 8y agoZeplin 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).
- soared 8y agoYour 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.