Sign in

pxCode results directly with HTML & CSS. But how do these two programming languages affect this low-code web editor during editing stage?

In this article, we’ll be focusing on understanding HTML. To elaborate the connection between HTML and the structure of pxCode.

On the left side of the editing canvas, you can see the Navigator. In general, all the editing you make on Navigator has a direct relation with HTML generates from pxCode.

▍How does HTML integrates with pxCode?

  • HTML in a sentence
  • HTML in pxCode
  • Navigator: Editing HTML in pxCode
  • HTML in final export code

HTML in a sentence

HTML is HyperText Markup Language, it was used widely for…

In pxCode, 【Flex】 plays an important role on reflecting the final layout pattern. pxCode provides flexible adjustments for Developers to make Media Queries changes under Flex editing. 🤔

Besides Posize & Flex, Media Queries is another factor that affects the final layout pattern and code generates of your Design in pxCode.

While pxCode helps to turn your design into RWD(Responsive Web Design), Media Queries play an important role.

🔵 Media Queries plays a key role to result in RWD

▍What is Media Queries?

【What is Media Queries?】

【Media Queries Overriding in pxCode】

【How to apply Media Queries?】 …

In pxCode, we created a unique feature that helps you to achieve pixel perfect. Pixel Perfect is essential during the editing stage, it helps to identify the suitable position and size for the item selected. 🖊

Posize is a revolutionary feature for Design to Code development

This feature not only helps you to speed up the editing process, but now Developers can also leave their worries aside, the position of items in design file will automatically be placed on a pixel-perfect spot in pxCode, while Posize will directly reflects on CSS generating.

POSIZE = POsition + SIZE. That’s how we came up with it.

▍What is Posize?

【What is Posize in pxCode】

【How to apply Posize?】
🔵 Blue: Pin
· 🟠 Orange: Respect
· 🔘 Transparent: Unpin

【What does Posize affect?】

📣【What is Posize?】

Posize can also be called as…

👉 ‘Handoff‘ is an action of ‘Handover’ between Designer & Developer during Web Development.

On an original design file, components are placed all over the canvas. Right after the designing process, it is required to make some editing specifically to the components, in order to let the design move flexibly according to different Screen Sizes, results in a final Webpage look.

pxCode is now supporting Handoff with Measurement

Why do we need Handoff? 🧐

In an all-in-one tool like pxCode, users can now make all the editing by themselves. But in the orthodox way, Designer & Developers work separately under one project.

Hence, Designers have to hand over their design files for further…

There are so many differences among these tools, but there’s one thing in common: 【To make the Developing Stage easier, faster, and overall better.】

Let’s take a look and see what do these tools offer.

Comparison between Anima, Webflow, Zeplin & pxCode through a chart

From this chart, you can easily tell the differences between these tools. Even if they are aimed to complete the same target — to build a Webpage, but there are still designed differently in the first place to convey different results. Designers & Developers can follow their own needs or reference, to pick the suitable tools.

Let’s have a deeper insight on other tools on…

Developing time plays a crucial role in modern Web Design. Most developing teams want to minimize the time required to go from an idea to a ready-to-use Website, without sacrificing the quality of the design along the way. That’s the reason why numerous developing tools were created within the past years.

and pxCode is one of them.

Difference between Web Development Tool

pxCode is a Responsive Webpage Development tool that was created in the start of 2020. …

First of all, to find out the answer, we should understand the difference between these two —— ‘The difference between AWD & RWD?’ Let’s have a simple answer with its acronyms.

🟠 AWD is the acronym of Adaptive Web Design,
🔵 RWD stands for Responsive Web Design.


In other simple words, Adaptive Web Design(AWD) was designed to adapt different specific screen sizes, which you need to have a few layout designs in advance to achieve. Therefore, it has a different CSS Structure behind it.


While Responsive Web Design(RWD) was designed to fit in any screen sizes, so you only required…

In this article, you’ll learn the essential features of the Inspector in pxCode.

Firstly, what is an Inspector? 🤔

In pxCode, Inspector is located on the right side of the editing page, with four main sections [Layout, Flexbox, Style, Partial Code] listed on the top of the menu bar. Let’s take a deep look into these different sections.

👉 In the previous article, we have been sharing the functions of [Layout], [Media Query Overriding], [Flexbox], [Flexbox Media Query Overriding].

But in this part 2 [Getting Started] article, we’ll be learning another part of Inspector. …

Since the mid of March 2021, pxCode officially supports Figma design files asides from Sketch design, you can now integrate your Figma & Sketch design with @pxCode.

pxCode lets you export your frames and components. With the revolutionary features provided, you hold the complete control to make flexible edits on your design, obtain developer-friendly HTML / CSS/ React code to export for integration.

💡 How to use:

In this article, we will be listing out the steps of integration between Figma and pxCode. Will be separated into TWO PARTS, on Figma & on pxCode.

🟠 on Figma:

1. Install pxCode plugin

In this article, you’ll learn the essential features of the Inspector in pxCode.

Firstly, what is an Inspector? 🤔

Inspector exists in literally every developing tool, it was mainly used to overview the editing stage of your work, it also includes all the functions you need for editing. In one simple word, without Inspector, you can do nothing.

In pxCode, Inspector is located beside the editing canvas, on the right side of the editing page, with four main sections [Layout, Flexbox, Style, Partial Code] listed on the top of the menu bar.


From Design to Code. Your fastest choice for Responsive Webpage.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store