Pagedraw UI builder turns your website design mockup into code automatically

For years, one of the holy grails of web design has been trying to automate turning front-end design into clean back-end code. Early attempts included tools like Dreamweaver and FrontPage. Pagedraw, a member of the Y Combinator Winter 2018 class, has developed a tool to fulfill that vision in a modern context.

Typically, a web design team sits down and creates a mockup of the user interface, then turns that into a design in a tool like Sketch. Up until now, developers took that design and translated it into back-end code, Jared Pochtar, Pagedraw co-founder and CEO explained. His company wants to automate that part of the process without trading off on the design or coding side of the equation.

“Pagedraw is a UI builder that turns mockups into code automatically. One of our killer features is importing from Sketch, so designers can work in their favorite tool and programmers don’t need to re-code their work,” he said. The company’s tools are taking aim at software development teams working on web apps using the React javascript framework, but the longer term goal is to include mobile app design, as well.

Pagedraw co-founders Jared Pochtar and Gabriel Guimaraes Photo: Pagedraw

Pochtar says that the previous approaches to solving this problem have suffered because they have tried to combine two vastly different ways of thinking — user interface design and coding. By building a full-fledged design editor and back-end code interface, they believe they have created a tool that respects the requirements of both.

“The problem is that there are two different mental models: the designer’s drawing mental model and the computer’s HTML/CSS model. Past tools have tried to unify the two, either forcing the computer’s model on designers or the designer’s model on the computer. The former results in a clunky design tool, and the latter results in [badly] generated code,” Potchar said.

Potchar and fellow co-founder and COO, Gabriel Guimaraes understand first-hand what goes into this process having worked as full stack developers for a number of years. They say the least favorite part of their jobs is when the design is done and they have to translate it into code. They decided to build a tool to solve that issue.

The founders met the summer before their freshman year at Harvard and hit it off immediately finding common ground in their mutual love for computer science. The two actually started the company while they were still undergrads. In spite of the fact that they raised a healthy $1.3 million in seed money while still in school, they completed their educations while working on the product.

In spite of their youth, their experience includes internships at a who’s who of Silicon Valley companies from Google to Palantir to Dropbox. As young founders, they are soaking up the YC experience and learning from the knowledge of the team and the community.

The company is still young with five customers using the product on a full-time basis, but the product is free for students and people working on open source products to use. The plan is to charge a subscription to enterprise users.

Featured Image: Jamie Jones/Getty Images