DEV Community

Cover image for Design To Quality Code within 30 minutes — Our New Way

Design To Quality Code within 30 minutes — Our New Way

px2code profile image pxCode ・1 min read

We are fascinated with the idea of “Design to Code.”

We decided to challenge this problem ten months ago and are confident to provide an MVP solution within three months.

And we failed and failed again during these months to provide a satisfactory and workable solution. During these months, we keep finding the root cause and iterate our solutions.

Finally, we come out with our first version of the solution — pxCode.

Alt Text

We would write more articles in detail on how we learned in those iterations.

Why we call NEW WAY because we think engineers want CLEAN code to integrate. So our way is to provide full control for users to decide its structure, which represents as HTML and use standard CSS Grid and Flex tools to layout in Canvas.

Alt Text

We try to simulate the engineer’s thinking meta-model and move into a brand-new visual programming way, which is much faster and joyful.

Please check out the video on the editing details how it can be done and check out the source code.

We are eager to get any feedback.

Let's check out and try pxCode Challenge Day 2:


You can also check the export code which is well-structured and ready for integration via CodeSandbox below and directly check the final result via


Editor guide
douglas72335836 profile image

Have been using it for weeks, thanks for creating this amazing tool guys