In this 2 minutes video, you can learn how to code design to web code with pxCode.
In our experiment, the simple card can be completed within 1 minute with pxCode compared to hand-coding which takes around 15 ~ 30 minutes. In more complicated and practical cases, pxCode still empowers users to boost their productivity more than 10–20 times.
Let’s start with this simple card.
Firstly, you can select the root item and enable the X-Ray mode to see the main layout of its children at the left side of the toolbar
As you can see, the root layout is composed vertically
And for the next level, the header part is composed horizontally. And to the next level of the header, one is composed vertically, and another is composed horizontally.
The X-Ray mode gives you a rough idea of how to do the right group structure. So let’s do the grouping now. You can multi-select items by dragging the mouse or press SHIFT key. And group them via context menu or hotkey CTRL + G.
And provide a proper name for the new group, which makes your export code easier to understand.
After grouping is completed, you can recheck the structure via X-ray mode.
You might notice there’s a suggested hint at the root item. You can see the detailed description by hovering.
As you can see, the children of the root item are arranged in vertical order without overlapping, which can be converted into FlexGroup. The button of Convert to FlexGroup Column at the toolbar is also enabled. You can click the toolbar button or click the CONVERT button to apply the suggestion.
Let’s see the result across different resolutions by dragging the Resizer. For better code quality, you can provide more meaningful names to each item. You can click EXPORT CODE to preview the code via the right side of the toolbar.
After completed editing, you can switch to the Snapshot tab. You can create a snapshot to save your final result with a proper name. You can switch to the original version by choosing the first snapshot. Snapshot is useful for you to manage the revision of your editing results.
Now you have completed the simplest card within 2 minutes. In the future, we will try more complicated and practical cases.
You can download the sketch via Github: https://github.com/px2code/pxCode_sketch_file_example/blob/master/Example1.sketch
and you preview via preview shared link from pxCode:
You can check the preview with code via codesandbox:
We are in beta and glad to hear any feedback and suggestion.
Welcome to sign up via https://www.pxcode.io