Launch HN: Pagedraw (YC W18) – Compile UI Mockups to React Code

[jpochtar]

Hi HN! We're Jared and Gabe (YC W18), the founders of Pagedraw (https://pagedraw.io). Pagedraw is a UI builder that turns mockups into React code.

Pagedraw lets you annotate mockups with extra information (like how to connect to the backend, resize for different screens, etc.) to get full, presentational, React Components. They’re React Components just like any others, so they can be interleaved freely with handwritten ones. They don’t require any new dependencies and work well with any existing JSX build system.

You can import the mockups from Sketch or Figma, or draw them from scratch in Pagedraw.

Working as full stack devs, we constantly had to do this translation by hand. It was our least favorite part of our jobs, since the creative work had already been done by the mockup designer. It's so repetitive and mechanical that we decided to stop hand-coding divs and css and write a program to do it instead.

There have been many attempts to automate this stuff in the past. For 20 years, people have been trying to solve the problem with tools like Dreamweaver, Frontpage, and so on. Broadly speaking, they tended to fall into one of two buckets, each with their own problems. In one corner are tools like Dreamweaver, which can produce correct code but have to expose some of the underlying HTML model, making their users play a puzzle game to do something as simple as move an object around. In the other corner are freeform design tools that generate position:absolute code. That doesn’t work if you care about working on different screen sizes, or reflowing the layout around variable-length content as simple as “hello <username>”.

We think the problem is that you have to look at it like a compiler. Past tools never fully worked because they tried to unify two fundamentally different mental models: the designer’s mental model of a free form canvas like Sketch or Photoshop, and the DOM’s mental model of <div> followed by a <p> followed by an <img> and so on. What always happens is one of two things: either the computer’s mental model is imposed on the designer, or the designer’s mental model is imposed on the computer. The former results in a clunky design tool, and the latter results in position:absolute.

What we do instead is recognize that these are two fundamentally different models. Designers work with Sketch by saying “put this button at this pixel”. We can let them do that and still generate flexbox code without positon:absolute, and let everything resize and reflow correctly. Pagedraw does it by inferring constraints from the relative geometries in the mockup. For example, if object A is to the right of object B, we infer it should always remain to the right, regardless of resizing or content reflowing. Sometimes, the developer does have to ask the designer about their intent regarding resizing, which is why Pagedraw also needs you to annotate that information. We then compile those constraints, inferred and annotated, into HTML layout mechanisms like inline-block and flexbox.

It turns out that a lot of other nice things follow from a compiler-like architecture. For one, we separate codegen correctness from codegen prettiness by cleaning up the generated code in discrete optimization passes. Another is the ability to easily retarget for AngularJS, Backbone, React Native, and so on by just swapping the compiler backend. We even have some nice editor features that fell out from hacking a Lispy interpreter onto our internal representation.

We’re excited to see what you all think and hear about your experiences in this area! You can try it at https://pagedraw.io/

[cryodesign]

I'm a designer, so definitely interested in this. But I got a 'Sorry, our editor is optimised for Chrome' message.

I'm using the latest version of Firefox... what features does Chrome have that FF hasn't?

I get it's early stage, so you might have just done a blanket 'If not Chrome show message' check.

If the latest version of FF can support, I would do a more fine grained check.

Will check with Chrome later...

[aczerepinski]

From the site: "Pagedraw generates code guaranteed to work correctly and in all browsers".

So luckily they can fix this issue by re-generating their site, using their site.

[raphaelrk]

I just tried spoofing my user-agent with Firefox, editor and preview worked but the designer was pretty broken. It seems Firefox and Chrome still have slightly different ideas about how layout is supposed to work, would be curious to hear what the differences are.

Super excited for the Figma + React-native support, I think ~20% of my time this past month was converting our designer's figma sketches into react native!

[tmzt]

I'm absolutely a believer that some form of this app will be the future of programming, probably with a touch of Eve, some AI, etc.

I'm also looking at this problem, but coming to it from a different angle. I'm not a designer, and I'm not at home in Sketch. I'm looking at developers that can take a very well designed and coded HTML page, where the designer themselves has built the interaction design in whatever they feel comfortable in. I'm looking at a model of taking those pages and adapting them in a similar way, into React - or other framework - driven applications.

This comes later. I'm starting with a simple template language that can capture a component-driven design in quick to iterate, programming-in-the-large style. The compiler builds both a backend app which renders HTML that's ready to be infused with reactive goodness without an unsightly flash of re-rendered content.

I'm a one-person show, cranking out a playground site which is now open at https://playground.isymtope.org

[baronjensen]

Yeah there is a tool that is like this app with a Touch of Eve and some AI = https://www.dohnny.com/

[jpochtar]

Love the recursive self-hosting! Where can I read more?

[notheguyouthink]

Fyi, the page fails to render the source text in Safari (OSX 10.13.3)

[pavlov]

Very cool! I particularly like the integration between the web app and the CLI. That seems like a clever way to solve the "browser sandbox border" problem between projects that are edited in the browser yet need to be represented in the file system constantly.

I've worked on React Studio (https://reactstudio.com), which is pretty similar. We also used the compiler metaphor to describe it. The original codegen targets were iOS + Obj-C and Android + Java, and later we built Tizen + C (at a customer's request on their bill) and then React + JS in an attempt to reach a larger audience through a free app. My regret is that we ended up with a sprawling native Mac codebase at a time when a lightweight cloud solution would be more suitable for the average interested potential customer. Oh well. It seemed like the right choice back when generating Xcode projects was the target...

If you don't mind the question, what's your monetization strategy? Right now Pagedraw looks to be completely free, and that's where we ended up with React Studio too. Business-wise, the only thing that's sort of worked for React Studio has been to make customized enterprise editions for large customers. I'm curious if you have something in mind that doesn't involve enterprise sales hell :)

[whoisjuan]

Have you fully consider the Designer's side of this? I feel that to be successful and bridge the gaps between those two mental models you also need to onboard the designers so they can help with generating the right type of mockup (or at least the kind that will help a developer using Pagedraw get the closest to a 1 to 1 code export).

The reason why I ask is that I tried importing several semi-complex but not uncommon (structure wise) files and I got an error saying that I should make sure that the file is correctly formed.

That right away is bad UX. If the designers need to reformat or change the behavior of their files, then they need to be part of the user journey. Right now there's nothing of that as far as I can tell.

[jpochtar]

Pagedraw doesn't impose any organizational requirements on your Sketch files! You're right that requiring certain structures is bad UX; we agree and care deeply about following that principle. The incorrect file formatting error means we don't recognize your upload as a Sketch file at all.

Probably a bug on our side. Could you try emailing the Sketch file to [email protected] and we'll see if we can debug it?

[lwhi]

I think this is cool, but ultimately I think the dream of developing bespoke applications without having to code will be just that ... at least until the singularity occurs and artificial life forms take over the job of building APIs and presentation layers.

Having said that, this looks like it could provide a great starting point for development.

Do you see this product as a tool for developers or a tool for designers to publish their creations directly to the web?

[jpochtar]

Yes! I completely agree. Thanks for posting this, it needs to be brought up in any conversation about code-free tools.

Pagedraw is not a code free tool. It never will be. I don't think it's possible either.

Programming needs to happen in language. Even if you did something like Scratch, (to which I prefer typing,) you still need the arbitrary constructs of language in order to express whatever you want.

Pagedraw is not programming, which only works because we don't really think HTML and CSS are either.

You will absolutely still need to write code to make novel algorithms and custom business logic until the AGI revolution comes. Pagedraw is meant to be used side by side with code implementing the business logic, state management, and anything else novel about your app. Pagedraw will take over more and more of the non-turing complete parts.

Today, with Pagedraw you write state management and API code just like you did before.

> Do you see this product as a tool for developers or a tool for designers to publish their creations directly to the web?

Yes. Both, eventually :) Today the product is a strict replacement for HTML and CSS, so it's something a developer would use to bring designs into production after the designer's done with them.

[redindian75]

As a UI/UX guy, ReactJS/JSX is a very high bar for us to cross. I have tonnes of Sketch/Figma files ready to be wired, as a JS newbie, JSX is too complicated for a Designer mind to understand :-) Any hopes for a beginner friendly language like VueJS or Webcomponents (AMP Pages/Polymer).

The tool has great potential, if u can address the UX market than the dev market. Devs have many many tools they wont give up, but we do not have any hybrid browser based tools which can take a Figma/Sketch and wire it with logic (maybe Ionic Creator)

[zackbrown]

Since you like the idea of wiring Sketch designs with logic, but you want a solution created for a UX designer, it sounds like you'd like Haiku. We're in the same YC batch as Pagedraw. https://www.haiku.ai/

Haiku focuses on connecting UX designers with developers through shared version histories (git & npm), on a foundation of animated & interactive code components. Haiku supports Vue, plus React, native iOS and native Android.

[shermablanca]

Not to plug, but if you’re near SF we are organizing a full day conference to to help introduce people new to React in a linear manner.

https://www.reactathon.com

[acemarke]

As someone who spends a lot of time helping answer questions about using React: what aspects of React and JSX do you consider to be a "high bar"? What concerns about React cause you to say it's not "beginner friendly" ?

[jpochtar]

coming soon! We're just putting our pants on one leg at a time :)

[athesyn]

I wouldn't say it's too complicated for designers to understand, just a different way of thinking that they haven't practiced yet.

[yodon]

I created a text field, deleted it, and added another ending up with a slightly mis-defined UI element.

The name in the UI is Text 4, the prop is text3 and the css class is text_4.

That said, I’m totally in love. Can I just ask for Typescript generation, please? (UPDATE: My god it’s already there in the full version - Thank you!)

[jpochtar]

We're working on simplifying the common case usage for props, but they are complicated right now because we're going for giving you the full flexibility of React. What that means for us is that props have 2 parts: their definition and their usage. Go into the CODE tab of the sidebar and you'll see the prop definitions on top and the usages below. When you create a new binding by clicking "make dynamic", we automatically create both a definition and a usage for you. We don't do a great job of keeping the names in sync because we expect you'll rename the prop (and update the usage).

https://documentation.pagedraw.io/data-binding/

[yodon]

I’ve installed the pagedraw-cli app but am getting crashes because my project is on the D:/ drive and it’s inheriting the drive specifier and looking for my C:/users folder under D:/users. Super excited to go deeper with this.

[wgerard]

Really awesome idea! Excited to try this out.

> Working as full stack devs, we constantly had to do this translation by hand. It was our least favorite part of our jobs, since the creative work had already been done by the mockup designer. It's so repetitive and mechanical that we decided to stop hand-coding divs and css and write a program to do it instead

This is definitely repetitive and annoying, just to add another data point to your own. I think people fundamentally want excellent WYSIWYG tools, it's just that the implementation leaves a lot to be desired usually (e.g. Frontpage). Really glad to see someone take another swing at this.

Quick nitpick: One of the links on your homepage ("Learn more") is broken (https://documentation.pagedraw.io/worfklow, looks like it's missing a trailing slash)

[jpochtar]

Thanks! Just fixed the link :)

[fnando]

> Sorry, our editor is optimized for Chrome

Internet Explorer all over again. ‍️

[dan1234]

Worst thing is it all seems to work fine in Safari as soon as I change my user agent string to Chrome, so it doesn't even seem to using any Chrome specific features…

[jpochtar]

Hey sorry about that! Could an Electron app work for you instead? We have some betas at https://documentation.pagedraw.io/electron/

[ggg9990]

A highly specialized Web app doesn’t need to support more than one browser. If you’re a Firefox user, consider it as though it said “please download the Spotify app to use our service on your machine.”

[monkmartinez]

And inevitable considering the pace of technology. Nothing is perfect, and IMO, its best to just get on the with it.

[urda]

Yup and closed tab. Either make your product work in the major browsers or don't make it at all. Not acceptable here.

[damienn]

A similar tool already exists for mobile native & JS: https://www.yotako.io/ It does the same without annotating designs, in fact you don't need the intermediate editor with Yotako...

[aj_g]

Why don't you support Firefox?

> You can import the mockups from Sketch or Figma

How do I import Figma designs? I tried the Sketch import, doesn't work through that.

Excited to use this. Congrats on your launch.

[jaequery]

I'm really curious how accurate the tool generates responsive designs. I feel like, it would have it's limits.

It would be helpful to know what those limitations are before spending too much time and only to find out it won't work for us.

[jpochtar]

For sure, thanks for pointing this out. We have https://documentation.pagedraw.io/why-not/, but we're trying to be clearer about how exactly our layout system works with https://documentation.pagedraw.io/layout/.

We give you controls to annotate your design with layout behaviors. The css we generate is 100% accurate to the constraints you specify, but our constraint system doesn't capture 100% of desired layouts (yet!)

We have 2 ways for you to control responsiveness: A flexbox-y constraint system, and media queries (Screen Size Groups). They're roughly the same controls html/css give you, though hopefully presented in a cleaner manner.

[nojvek]

Really really like that you used VSCode's monaco editor.

Dunno how possible it is, but I would definitely pay for a vscode plugin to have a native app like experience.

Design -> Code is definitely a big problem. Creation time is one, but updating should be easy too.

Also I would love a reverse, code -> Design output as well, so it's a two way tweaking experience, where both design and code are always in sync. i.e React -> Sketch

[pault]

I work at a shop that has to turn around a lot of simple SPAs very quickly, and a tool like this, if it works as advertised, could be a godsend. I will definitely be trying this out at some point in the next few days.

[gablg1]

Awesome! Email us at [email protected] if you have any questions. Excited to see how it turns out for your SPAs.

[nojvek]

You talk a lot about the compiler backend. Suppose we use a different UI library other than the big ones like React and Angular. How can I plug in my custom backend ?

Do you have plans to open source the backend ? So devs over time can make it even smarter for all sorts of use cases ?

Open source and profitable are orthogonal things. You can still be profitable and build a solid product with a raving community.

[jpochtar]

Definitely! I'm glad to see this is on other people's minds :)

We're huge on backwards compatibility (and think everyone should be), which is why we don't want to expose something we haven't stabilized yet. We'll have a way to export our just-before-codegen internal representation (shame on me for forgetting the PL term) once it settles down a bit. It's very much like a DOM, so there's not too much craziness there.

We'll be launching a bunch more backends in the coming weeks, so there's a good chance we'll have first-party support for your favorite framework anyway :)

[k__]

How does it work with incremental Sketch imports?

I often get a new version of a sketch file now and then and would need to import that new version while keeping/updating the old components I already have

[jpochtar]

You can keep working on your Sketch file after importing it into Pagedraw. Subsequent uploads will merge your changes in Sketch with your edits in Pagedraw.

We're pretty proud of the mechanism (it fell out almost for free from our live collaboration mechanism!) and will almost certainly blog about it when we have time.

https://documentation.pagedraw.io/sketch/#bring-in-future-in...

[ranyefet]

Looks really cool! If it actually generate nice code, it will be awesome! I’m gonna play with it this weekend!

How does it work with CSS?

[jpochtar]

You never have to write CSS for a Pagedraw generated component. If you must use custom css, you can mark a block in Pagedraw as a handwritten component coming from a designated file. In that component (done entirely by hand, outside Pagedraw), you can of course use whatever CSS you want. Pagedrawn components and handwritten components play nicely together; the CSS we generate shouldn't interfere at all with the CSS you write by hand for non-Pagedraw components.

[ezconnect]

Doesn't work on Firefox

[jpochtar]

This was tough for us, because we're big believers in the standards-based web. We 100% promise that all the code we generate works across all browsers.

Unfortunately, while most of the editor works in all browsers, getting full support is really hard. We're doing a lot of things that get pretty deep in the browser, so we wanted to lock things down as much as possible.

We almost were electron-only to ensure consistency, and can still give you the electron app today. We felt it was better to launch with Chrome + Electron than just Electron for an optional installation-free experience, which is why we only support Chrome.

I'm personally really sorry as an engineer that we don't support Firefox, Safari, and other browsers yet. It's on our roadmap :)

[akatechis]

Also doesn't work on Safari. The "error" message tells you to use Chrome instead (or ask for an app download).

[gablg1]

We just released a v0 of our Electron app. Will upload Windows links shortly. Check it out at https://documentation.pagedraw.io/electron/

[typeformer]

This is awesome I hope a company like Webflow considers buying you out or building something similar.

[shawn-butler]

>> Another is the ability to easily retarget for AngularJS, Backbone, React Native, and so on by just swapping the compiler backend.

I couldn't find any reference to this in your documentation. Exactly how easy and/or do you have any samples projects I can check out? ReactNative would be my primary use and I assume alot of other potential users as well.

[gablg1]

Right now our compiler has 4 different targets: JSX, CoffeeScript, Javascript (React.createElement), and Typescript. Support for React Native, Angular, and others is coming soon.