Time to get artistic with your React apps

Pagedraw goes open source, bringing an artsy feel to building React web apps

Jane Elizabeth
© Shutterstock / FabrikaSimf

Pick up your pencils and get sketching! Pagedraw is a UI builder that helps developers make their React web apps into works of art. This UI builder has recently gone open source, making it easier than ever for developers to use React components for their projects.

Time to get out your art supplies; Pagedraw has just gone open source! This UI builder may work like a Sketch or Figma style design tool, but don’t be fooled. It creates high quality JSX code to be used with Angular or React web apps or pages.

Although Pagedraw is not currently under active development, it’s an exciting step for automating the boring parts of frontend development. Pagedraw is a good foundation for any developer looking to handle complicated, performance sensitive, UI heavy products. It’s not a code-free solution, but it’s a start!

Essentially, Pagedraw is a WYSIWYG editor that generates code for Angular and React components for both designers and developers. Designs live in Pagedraw, while developers install a CLI on the development machine. With every edit, the CLI invokes the compiler. The resulting generated components are saved to JavaScript, HTML, and CSS files that can be copied and used like any other Angular or React file.

What’s more, pre-made designs from Sketch or Figma can be imported directly into the UI builder and treated the same for production.

However, resist the urge to meddle with the generated code. It shouldn’t be modified at all, since the generated files are pure Angular/React components. If you want to change something, you really need to go back to Pagedraw and meddle there, or use the Override code and External component features. That lets you insert specific code without editing the Pagedrawn code by hand.

SEE ALSO: Meet Verified React: The future of automated reasoning?

Getting Pagedraw

It’s easier than ever to take advantage of Pagedraw’s unique approach to UI building, thanks to their recent decision to go open source. Pagedraw is available via GitHub or their website.

Plus, there’s a helpful tutorial available here to help walk developers through the basics of coding with this UI builder.

Jane Elizabeth
Jane Elizabeth is an assistant editor for

Inline Feedbacks
View all comments