We made a Sketch to ReactJS tool.
Hi developers, Our team makes a tool that can make Sketch to a responsive page 10x faster.
Here is a video showing how to make a responsive page in 30 secs with our tool.
https://www.youtube.com/watch?v=Bv-CQxpswBs
Plus, with 2more clicks, you can have HTML/ React/React Native code.
We are inviting developers to join our beta version. We really need your advice and feedback to make a better tool for frontend developers.
Sign Up beta launch here:
https://bit.ly/2Q80Dbc
More info on our official page:
https://pxcode.io/
Trending on Indie Hackers
Hi! The video looks awesome. FYI, the landing is down:
TypeError: Cannot read property 'length' of undefinedSorry for the inconvenience, it should be fine now.
Seriously? can you import a sketch file and get the perfect ReactJS code?
What is the framework you are using? CSS? Bootstrap? TailwindCSS? custom?
If your tool can import Sketch and output Quality React UI Code your are grand success. There is a great amount of time spent on converting UI designs into code.
Whats the price? Want beta users? want feedback?
I am all for it.
Hello @Venture-Capitalist's here is a 'high chance of success' product to invest.
I am glad you are interested in.
We have spent a lot of time with 20+ iterations for the product.
We would not say perfect or hand-coding code, but quality code for integration.
But yes, we are engineers and indeed care very much about the quality of the code.
After a few iterations with usability testing, finally, we found the root cause that why most of the similar products can't produce quality code.
Our early iterations of the product, we have developed a smart algorithm - one click to do all conversion, but the success rate would be 70~80%, and we found it takes much effort to fix the left 20~30% error part.
So we remove our automatic smart algorithm and change to a new direction - users need to decide the key decision by editing.
We have extracted the essential part of coding design to the web into 2 phases - grouping and layout.
The right group structure means the right generated HTML code.
And the right layout settings for responsive behaviors means the CSS code.
We left the key decisions to our users with our smart editing algorithms.
So with manual editing, the productivity still remains 10~20x faster than manual coding.
You can check out the video of editing concept below
https://www.youtube.com/watch?v=ly2H2iiHst8
BTW, you can check our export code of the sample project from codesandbox.
https://codesandbox.io/s/pxcode-example-s9sxx?file=/src/components/Card.js
We are producing the training video right now, and eager to get your feedback.
Thanks,
BR,
Chris
Layout looks like a small thing but in huge applications the worst part is layout. When I see minor issues in style, color etc I won't be much frustrated because I can confidently say how much time required to fix. But the moment I see layout issues I get upset because I can't predict amount of effort required and I don't know what all side-effects it causes in other places.
If you give me layout only export (should also import the previous export for future modifications) I am ready to pay for that.
Good Luck
Yes, we agree with you.
The group structure and layout is the key factor for the code quality.
After investigation and analysis, we decide
let users make the key decisions
pxCode provides an intuitive and faster way to do editing
We are working hard to evolve the product and all the web pages are also produced by our product.
We know it might take a few hours to be familiar with editor, but in our early experiment and statistic, we really save a lot of time to code design into the web.
Thanks
:-)
That looks very interesting, signed up!
We just open for everyone for beta testing for a while.
This comment was deleted 5 years ago.