Introduction: HTML in pxCode

pxCode
pxCode: Design to Code
2 min readJun 10, 2021

--

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 Developer during Web development. It is also an essential programming language for Front-end Developers, used to decide the structure of a Webpage.

【 HTML in pxCode】

In pxCode, we integrate perfectly with HTML.

But different than orthodox Web Developing way, Developer can now develop in a visual way through pxCode——without writing a single line of code.

Simply select the component, you can use Group or Flow Content to decide the structure of the design. This way of editing helps developer to save up their developing time, components of Design can be Grouped well in an efficient way.

With dislodging the coding skill requirement, now Web Development has been popularized, everyone can convert their Design into HTML by pxCode.

You can group the component by 【Ctrl + G】

【Navigator: Editing HTML in pxCode】

Navigator is located on left side of the editing space in pxCode. Navigator is basically a ‘tree’ of the structure, you can clearly view all your editing action results on it.

Whatever editing you make, it will directly reflects on the Navigator. Navigator helps you clearly understand the structures of your current

All the editing will be generated into HTML code on right Inspector

HTML in final export code

After completing the editing process, you can proceed to code export.

With the [Code Export] button on the top right, you can export your HTML code for further integrations and purposes.

Asides from HTML code, you can also export CSS (SCSS), React JS & React Code in pxCode.

“With pxCode’s visual editing way, you can convert your Design into Code without programming skill.”

** For understanding CSS in pxCode, you can click on here to know more.

--

--

pxCode
pxCode: Design to Code

From Design to Code. Your fastest choice for Responsive Webpage. https://www.pxcode.io