Launch HN: Pagedraw (YC W18) – Compile UI Mockups to React Code
124 comments
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...
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...
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.
So luckily they can fix this issue by re-generating their site, using their site.
Actually, yes! All the parts of our site which are made in Pagedraw are fully cross-browser supported. That includes our landing page, dashboard, and parts of our editor.
Based on the feedback in this thread we're going to bump up the priority of this concern. Getting this kind of feedback is why we're doing this launch thread, so we really appreciate it.
Based on the feedback in this thread we're going to bump up the priority of this concern. Getting this kind of feedback is why we're doing this launch thread, so we really appreciate it.
I will sound harsh but I'm really curious so I have to ask:
- What was the thinking behind supporting only Chrome?
- For a tool that support cross-browser, wouldn't it expected that tool itself runs on multiple browsers?
- Is it really reasonable not to spend time to support multiple browsers and have let possible first adapters to have bad taste with the product ?
- What was the thinking behind supporting only Chrome?
- For a tool that support cross-browser, wouldn't it expected that tool itself runs on multiple browsers?
- Is it really reasonable not to spend time to support multiple browsers and have let possible first adapters to have bad taste with the product ?
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!
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!
We had a good conversation about this before down at https://news.ycombinator.com/item?id=16468276.
tl;dr: would you like the Electron app instead? It's available at https://documentation.pagedraw.io/electron/
It 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.
Our editor was almost electron-only, but felt it was better to launch with Chrome + Electron than just Electron. Our editor isn't a normal webpage; it's doing all kinds of crazy nonstandard things webpages shouldn't do. It's only in the browser at all so we can re-use a web engine as our editor's rendering engine, since we occasionally show you snippets of compiled code.
I'm personally really sorry as an engineer that we don't support Firefox, Safari, and other browsers yet. It's on our roadmap :)
tl;dr: would you like the Electron app instead? It's available at https://documentation.pagedraw.io/electron/
It 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.
Our editor was almost electron-only, but felt it was better to launch with Chrome + Electron than just Electron. Our editor isn't a normal webpage; it's doing all kinds of crazy nonstandard things webpages shouldn't do. It's only in the browser at all so we can re-use a web engine as our editor's rendering engine, since we occasionally show you snippets of compiled code.
I'm personally really sorry as an engineer that we don't support Firefox, Safari, and other browsers yet. It's on our roadmap :)
Do you mind sharing some of the primary reasons this is required by your editor?
>all kinds of crazy nonstandard things webpages shouldn't do
>all kinds of crazy nonstandard things webpages shouldn't do
- until recently, there wasn't a universal cross-browser API for pinch zoom support. Not sure if that's still the case.
- we do a lot of work with the selection/focus browser API, which doesn't always work the same / have the same APIs
- until recently, Firefox had a different opinion about where an outline should go wrt positon:absolute children
...and what seems like a million more little things. We decided it was more practical to do Chrome + Electron (basically the same) than try to cover every browser where the standards don't exist or aren't met, since we're touching a lot of surface area and weird corners of the browser.
- we do a lot of work with the selection/focus browser API, which doesn't always work the same / have the same APIs
- until recently, Firefox had a different opinion about where an outline should go wrt positon:absolute children
...and what seems like a million more little things. We decided it was more practical to do Chrome + Electron (basically the same) than try to cover every browser where the standards don't exist or aren't met, since we're touching a lot of surface area and weird corners of the browser.
Thanks. I think it’s a good decision, it seems like a classic example of needing to recognize sometimes going against conventional wisdom makes the most sense given particular circumstances, like gaining critical mass in a start up. As to where the right decision might be different for a later stage company.
Hey thanks for explaining and like I said - I get it's early stage - was just curious what was missing in FF.
Anyway, will try out the Electron version and definitely be keeping an eye on this one...
Anyway, will try out the Electron version and definitely be keeping an eye on this one...
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
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
Yeah there is a tool that is like this app with a Touch of Eve and some AI = https://www.dohnny.com/
Love the recursive self-hosting! Where can I read more?
I need to update the doc site, but the source is at https://github.com/tmzt/isymtope
You should have seen it when the iframes all tried to load in the nested view, I counted probably six deep! ;)
I wonder if there might be a good meta format for a reactive-component AST or intermediate language which could be target different frameworks?
You should have seen it when the iframes all tried to load in the nested view, I counted probably six deep! ;)
I wonder if there might be a good meta format for a reactive-component AST or intermediate language which could be target different frameworks?
Fyi, the page fails to render the source text in Safari (OSX 10.13.3)
Thanks. Is this a known issue with Monaco?
I'll have to borrow a Mac and take a look at this.
I'll have to borrow a Mac and take a look at this.
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 :)
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 :)
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.
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.
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?
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?
Cool. I can't really send it because I'll be violating the infosec policy of my company (I was already violating it trying to upload it, lol)...
I feel that eventually, you will need to set a certain standard. Not because is required on your side, but because this is how every designer/developer relationship should work. People just don't know how to do it because there's no standard or methodology. Think how horrible would be if developers didn't have Git to collaborate... Well, that's basically the state of developer-designer collaboration. I think with this product you guys are in a good position to help solve this problem.
I feel that eventually, you will need to set a certain standard. Not because is required on your side, but because this is how every designer/developer relationship should work. People just don't know how to do it because there's no standard or methodology. Think how horrible would be if developers didn't have Git to collaborate... Well, that's basically the state of developer-designer collaboration. I think with this product you guys are in a good position to help solve this problem.
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?
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?
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.
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.
> Pagedraw is not programming, which only works because we don't really think HTML and CSS are either.
I'd beg to differ; I don't think the scenario is as clear cut as you suggest, because there are a huge number of ways of developing FE for a design. Lots of compromises inevitably need to be made, and lots of choices need to be taken.
Humans are great at filtering and choosing based on experience, instinct and an understanding of industry norms / best practice .. and are able to continuously update their 'mental model' of the options available.
Having said that, tools that help to take the repetitive strain out of developing for FE are a great idea. I just wouldn't look to such a tool as a panacea.
I'd beg to differ; I don't think the scenario is as clear cut as you suggest, because there are a huge number of ways of developing FE for a design. Lots of compromises inevitably need to be made, and lots of choices need to be taken.
Humans are great at filtering and choosing based on experience, instinct and an understanding of industry norms / best practice .. and are able to continuously update their 'mental model' of the options available.
Having said that, tools that help to take the repetitive strain out of developing for FE are a great idea. I just wouldn't look to such a tool as a panacea.
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)
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)
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.
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.
Oh yes, I signed up on day0 and finally scored an invite few weeks back. Coming from Adobe PPro/AE motiongraphics background, it was so exciting to see a timeline based tool.
But I primarily viewed it as micro-interaction & animation tool (like Lottie or Rubberhose) - didnt think of it as a UI interface builder. I didnt know it can do Vue. I'll fire it up again to see how I can use it as a lively UI/Interface Builder.
But I primarily viewed it as micro-interaction & animation tool (like Lottie or Rubberhose) - didnt think of it as a UI interface builder. I didnt know it can do Vue. I'll fire it up again to see how I can use it as a lively UI/Interface Builder.
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
https://www.reactathon.com
That's awesome! We might be interested in doing something together with a react conference— how do we get in touch? Can you shoot me an email?
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" ?
Thanks for the reply.
I guess programmer's mind are wired different :)
I getby copy/pasting JS snippets or fork fully made apps or follow tutorials etc to make my stuff move, behave & work. Good enough for prototypes and explaining my designs interactively.
But React feels like Level:10. I do get the "concept" of React (tell the overall endstate, the code redraws the page to that, instead of focussed DOM targeting). It feels like something which can be one only after MASTERING JS.
I started learning Vue - it felt more natural & simple. Like Python. Conceptually add a <CDN script> & go. It does all the magic and works right away (loved typing lazyload to lazyload). No nodeserve npm -v or bower -x, .git, command-line cd mkdir launch serve localhost. It maybe second nature for programmers, but it is daunting.
It is not specific to React, but to toolkits like Polymer as well. It was supposed to be simple webcomponents:
<googlemaps zip=02891></googlemap>
...but "importmodules", "server start", various little files to make it work & the localhost it needs to run. Uff! too much overload. Just discovered AMP, loving the fact that it has no JS :) :) so it kinda levels the playing field :)
I guess programmer's mind are wired different :)
I getby copy/pasting JS snippets or fork fully made apps or follow tutorials etc to make my stuff move, behave & work. Good enough for prototypes and explaining my designs interactively.
But React feels like Level:10. I do get the "concept" of React (tell the overall endstate, the code redraws the page to that, instead of focussed DOM targeting). It feels like something which can be one only after MASTERING JS.
I started learning Vue - it felt more natural & simple. Like Python. Conceptually add a <CDN script> & go. It does all the magic and works right away (loved typing lazyload to lazyload). No nodeserve npm -v or bower -x, .git, command-line cd mkdir launch serve localhost. It maybe second nature for programmers, but it is daunting.
It is not specific to React, but to toolkits like Polymer as well. It was supposed to be simple webcomponents:
<googlemaps zip=02891></googlemap>
...but "importmodules", "server start", various little files to make it work & the localhost it needs to run. Uff! too much overload. Just discovered AMP, loving the fact that it has no JS :) :) so it kinda levels the playing field :)
Have you checked out StackBlitz (https://stackblitz.com/)? They can get you a full, sharable React or Angular environment in one click. Full disclaimer, we're partnering with them to bring you some of Pagedraw, but I just really like their stuff!
As a beginner programmer back in the day, setting up my tools was way harder than actually writing code. Setting up tools isn't programming! Don't think you're not a programmer because you don't want to deal with it— no one does. I hope StackBlitz can save a generation of potential programmers from being scared away because installing tools is gross.
As a beginner programmer back in the day, setting up my tools was way harder than actually writing code. Setting up tools isn't programming! Don't think you're not a programmer because you don't want to deal with it— no one does. I hope StackBlitz can save a generation of potential programmers from being scared away because installing tools is gross.
coming soon! We're just putting our pants on one leg at a time :)
just saw VueJs on the upcoming list! Yay!
Webcomponents support (StencilJS*) would take this to another level! We can draw/design components to be used and reused!
[0] https://stenciljs.com/
Webcomponents support (StencilJS*) would take this to another level! We can draw/design components to be used and reused!
[0] https://stenciljs.com/
You can draw components and re-use them in Pagedraw today! It's what Pagedraw's all about (despite the name :P)
https://documentation.pagedraw.io/components/ and https://pagedraw.io/tutorials/components
https://documentation.pagedraw.io/components/ and https://pagedraw.io/tutorials/components
I wouldn't say it's too complicated for designers to understand, just a different way of thinking that they haven't practiced yet.
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!)
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!)
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/
https://documentation.pagedraw.io/data-binding/
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.
Thanks to PageDraw crew for helping with this... looks like it’s a bug in the upstream netrc package used for persisting user credentials locally. Workaround for now is to copy your project to the C:/ when playing with the command-line version of pagedraw.
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)
> 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)
Thanks! Just fixed the link :)
> Sorry, our editor is optimized for Chrome
Internet Explorer all over again. ️
Internet Explorer all over again. ️
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…
Hey sorry about that! Could an Electron app work for you instead? We have some betas at https://documentation.pagedraw.io/electron/
My Mac won't open it, is it because I need to change some preference or because its an unregistered app?
You can open it by right-clicking and then clicking "Open" instead of the regular double click, because it's an unregistered app.
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.”
Then why is it a web app? What happened to open standards? Why not just make it a standalone application, following your logic?
You’re right, it’s not a web app. It is a stand-alone application built on top of Chrome the way that other apps are built on Qt or WPF.
Right, and I'm saying I fundamentally disagree with this vendor-locking approach. Qt doesn't lock me into a particular environment and is cross-platform. It's a view framework, not an entire browser. Huge difference.
If your product is useful enough people will install what they need to, like Photoshop and Excel.
I agree also its an early iteration of the product. I think you would prefer to get a working version out there earlier and get feedback about the product rather than wait a month and get it right in every browser.
[deleted]
And inevitable considering the pace of technology. Nothing is perfect, and IMO, its best to just get on the with it.
If you just get on with it, you're contributing to make Chrome a monopoly, and that will in turn slow down the pace of technology. Google/Chrome won't act differently from Microsoft/IE6. There's no reason to invest in improving a browser if there's no one left to compete against you.
Yup and closed tab. Either make your product work in the major browsers or don't make it at all. Not acceptable here.
>> Either make your product work in the major browsers or don't make it at all. Not acceptable here.
I don't agree. Especially for a startup trying to get an MVP out the door.
If your product is aimed at a technically oriented audience then its a reasonable assumption that they have Chrome installed.
I don't agree. Especially for a startup trying to get an MVP out the door.
If your product is aimed at a technically oriented audience then its a reasonable assumption that they have Chrome installed.
That is how the IE only path started, getting MVP out of the door by supporting IE 5.
Those are the same arguments that Microsoft attempted to make as IE was pushed to the masses, and that was a disaster for the web and everyone involved.
If you don't learn the history of technology, you will be doomed to repeat it.
If you don't learn the history of technology, you will be doomed to repeat it.
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...
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.
> 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.
We haven't launched the Figma integration yet, (it's behind a config flag,) but it's coming soon! Sketch should be working today. Could you email us at [email protected] if it's not?
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.
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.
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.
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.
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
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
All credit for the monaco editor to our awesome friends at Stackblitz (stackblitz.com). Gonna announce the depth of that partnership soon ;)
Native VS Code integration is already here! The “3 screens” you see (design, code, preview) are just there for the demo— only the design editor on top is part of Pagedraw. You get to use your regular text editor (VS Code included), and localhost env if you use the full version and install the CLI https://documentation.pagedraw.io/cli/
> Design -> Code is definitely a big problem. Creation time is one, but updating should be easy too.
Updating is super easy if you do the updates in Pagedraw. Since everything is component based, you should never touch the generated code. All the code you write goes in adjacent components that import and are imported by Pagedrawn components. You never need to roundtrip, because you never need to edit the generated code
Native VS Code integration is already here! The “3 screens” you see (design, code, preview) are just there for the demo— only the design editor on top is part of Pagedraw. You get to use your regular text editor (VS Code included), and localhost env if you use the full version and install the CLI https://documentation.pagedraw.io/cli/
> Design -> Code is definitely a big problem. Creation time is one, but updating should be easy too.
Updating is super easy if you do the updates in Pagedraw. Since everything is component based, you should never touch the generated code. All the code you write goes in adjacent components that import and are imported by Pagedrawn components. You never need to roundtrip, because you never need to edit the generated code
We have a ton of components. And our sketch files have slight mismatches. So I wondered if it could do a two sided sync.
Code accounts for so many states that sometimes design doesn’t account for. Error, loading, empty, too many items, network disconnected etc.
Code accounts for so many states that sometimes design doesn’t account for. Error, loading, empty, too many items, network disconnected etc.
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.
Awesome! Email us at [email protected] if you have any questions. Excited to see how it turns out for your SPAs.
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.
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.
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 :)
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 :)
Will be definitely be looking out for it.
This is a great first minimum delightful product. Good job.
This is a great first minimum delightful product. Good job.
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
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
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...
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...
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?
How does it work with CSS?
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.
Doesn't work on Firefox
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 :)
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 :)
> We 100% promise that all the code we generate works across all browsers.
By supporting only Chrome, you're showing that you consider Firefox/Safari/Edge as second class citizens, making it harder to trust that you will keep supporting non-Chrome browsers in your generated code.
By supporting only Chrome, you're showing that you consider Firefox/Safari/Edge as second class citizens, making it harder to trust that you will keep supporting non-Chrome browsers in your generated code.
As someone who also made this difficult decision to launch a product with only Chrome support: don’t feel bad, and don’t feel responsible for haters. Supporting other browsers, even those that are standards compliant, is a nefarious class of technical debt: from verifying scrollbar sizing to performance degradations, you add a tremendous amount of overhead to ongoing QA - especially important when you have a small team without dedicated QA resources or processes, and a clientele with an eye towards aesthetic detail. We owe it to our respective missions to focus on what matters.
For my part, I look forward to trying the product!
For my part, I look forward to trying the product!
As a basically-everything-except-Chrome user, I'm increasingly skeptical of excuses this. There's almost certainly some feature(s) that you've spent a lot of time on that provide less value than having the app working in Firefox and Safari.
As soon as I saw it was Chrome only, I closed out.
As soon as I saw it was Chrome only, I closed out.
On the other hand think of it from their perspective if you want your odds of success to be higher you have to focus on the biggest user base, simple 80/20. I doubt that an additional feature vs friefox support is a fair comparison.
For anyone else looking for the electron app mentioned above it’s at https://documentation.pagedraw.io/electron/ BUT only in Mac and Linux versions
Windows versions are also up now! Please let us know if you run into any issues.
Doesn't work on Edge, Firefox, or even Safari. I am sorry, your first sentence "big believers in standards" is just a lie. It is just developer laziness for supporting non standard stuff and doing User Agent sniffing.
Rule #1 is do feature detection not user agent detection. What are you doing that is "pretty deep in the browser"? NaCL? Experimental Chrome features?
Rule #1 is do feature detection not user agent detection. What are you doing that is "pretty deep in the browser"? NaCL? Experimental Chrome features?
Also doesn't work on Safari. The "error" message tells you to use Chrome instead (or ask for an app download).
Safari doesn't support fancy pants features like telling which mouse button is held down (event.buttons on MouseMove, works everywhere else since IE9), which makes it a total pain in the behind for any kind of drawing app.
If I could drop support for it completely I would open up a bottle of champagne. It truly is the new IE of the web.
If I could drop support for it completely I would open up a bottle of champagne. It truly is the new IE of the web.
Exactly... But curiously Chrome is receiving all the hate instead...
We just released a v0 of our Electron app. Will upload Windows links shortly. Check it out at https://documentation.pagedraw.io/electron/
This is awesome I hope a company like Webflow considers buying you out or building something similar.
>> 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.
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.
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.
This is very cool and a very tricky problem to solve. Will you support webcomponents one day? Also, please hire a designer :)
I design in code ... grab a bootstrap template and quickly design/code in the browser via Inspect element; save it as I go along.
What are front end devs so busy with nowadays that they dont have the time to code the UI?
What are front end devs so busy with nowadays that they dont have the time to code the UI?
Probably meant for designers, not so much devs.
It's best for developers working together with designers. If you're a solo designer, you don't need to push an app to production (or I'd consider you a developer), so you're probably perfectly happy staying in Sketch or Figma. As a developer, I really don't like having to translate my designers' work into JSX and CSS, so Pagedraw can do it for me!
If you're doing both the code and the design, and you like to design via the inspect element tab, then Pagedraw may not be for you.
If you're doing both the code and the design, and you like to design via the inspect element tab, then Pagedraw may not be for you.
Nice work!
This is really promising for bridging UI/UX and programming.
The paradigm seems right to this javascript dinosaur.
Hopefully some day it can work like Visual Studio Design View where a non UI/UX programmer can produce a quick mockup and have it actually work without worrying about knowing intricacies of XAML.
Interesting bug/glitch: Just by clicking a few controls in MainScreen, the generated mainscreen.js code produced really deep nesting divs.
We are talking about divs like this:
<div className="mainscreen-0-0-0-0-0-0-0-0-0-0-0-0">
when nothing really had changed on the screen.
This is really promising for bridging UI/UX and programming.
The paradigm seems right to this javascript dinosaur.
Hopefully some day it can work like Visual Studio Design View where a non UI/UX programmer can produce a quick mockup and have it actually work without worrying about knowing intricacies of XAML.
Interesting bug/glitch: Just by clicking a few controls in MainScreen, the generated mainscreen.js code produced really deep nesting divs.
We are talking about divs like this:
<div className="mainscreen-0-0-0-0-0-0-0-0-0-0-0-0">
when nothing really had changed on the screen.
Looks really nice.
Can I get this on my desktop? (In other words: Can I work on this from a plane?)
I don't see anything about pricing in there, so using a web service (and having to log in...) to use this, I'm not super happy about. Balsamiq has a good system: They have both a desktop and a web version, let you import/export between the two, and charge you for licenses and online storage.
[edit: And furthermore, if you do a desktop version, you can also do it as a vscode extension, that'd be super cool]
Can I get this on my desktop? (In other words: Can I work on this from a plane?)
I don't see anything about pricing in there, so using a web service (and having to log in...) to use this, I'm not super happy about. Balsamiq has a good system: They have both a desktop and a web version, let you import/export between the two, and charge you for licenses and online storage.
[edit: And furthermore, if you do a desktop version, you can also do it as a vscode extension, that'd be super cool]
seems like you can get an electron app if you're on mac or linux: https://documentation.pagedraw.io/electron/
The robo dog asking me if I know John Connor is giving me bad vibes. I do like what I see. I don't understand the demo though what am I supposed to do?
Hah! I didn't even know we had Terminator quotes in there. Our adorable little Pagedog's inspired by a different... uh... buuuurp.. uh, high concept, sci-fi comedy universe ;)
Did you get to https://pagedraw.io/tutorials/basics? It's the button in the first section that says "Continue to demo"
Did you get to https://pagedraw.io/tutorials/basics? It's the button in the first section that says "Continue to demo"
Yeah I did. I like it. I just can't afford the 2k a month price :( I wish there was a yearly individual license for say 75$/month
I am impressed, but it really needs to be portable across all major browsers.
Sounds phenomenal - hopefully you can spin up a few more servers so the home page will load under all this interest :)
UPDATE: the tutorials just loaded... looks AMAZING!
UPDATE: the tutorials just loaded... looks AMAZING!
Tough question: How will this get distribution? How would I find out about it without reading Hacker News?
Sign up and tell your friends about it! We'll email you product updates :)
We haven't thought too far beyond HN + word of mouth. How would you do distribution?
We haven't thought too far beyond HN + word of mouth. How would you do distribution?
Amazing product. We've been using at Qulture.Rocks and it's helping us a lot.
Typescript support? (Please)
It's there! The main demo link goes to a simplified version of Pagedraw for the walkthrough, but if you sign in and use the full version from https://documentation.pagedraw.io/install/, you can choose between JSX, CoffeeScript, Javascript (React.createElement), and Typescript!
It's the same mechanism we'll use later to let you choose between React, Angular, React Native, ERB, etc.
It's the same mechanism we'll use later to let you choose between React, Angular, React Native, ERB, etc.
Is Vue support planned?
yes, depending on demand. Get your friends / coworkers to message us if they need it too
I second this, mainly because the Angular to Vue transition is more straightforward than going completely to React, so would be of more immediate help to more people.
Also I think that Vue is arguably more straightforward than React in the minimal model-view one-way binding use case. Whereas React is a subset of the more general functional reactive programming model and will probably be outpaced at some point with something language-agnostic.
Also I think that Vue is arguably more straightforward than React in the minimal model-view one-way binding use case. Whereas React is a subset of the more general functional reactive programming model and will probably be outpaced at some point with something language-agnostic.
:raises hand:
I'm a Pagedraw customer, and I'm really excited to see their HN launch! Congratulations, team! :)
Awesome project!
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/