This post is about how I built a Visual Code generator called Crayons Playground using a web components library called Crayons and how I created two additional npm libraries supporting this tool.
The beauty of this Visual Code editor is that, it automatically generates markup using Crayons Components and it is also built using the Crayons components behind the scene.
About Crayons
Crayons is a design library for developers who build apps for the Freshworks Marketplace. Through pre-built components, it offers control and flexibility to build rich interfaces consistent with the Freshworks product design and experience.
The Crayons Team is using Stencil to build the Crayons components using TypeScript and React-like component semantics and finally publish them as platform native Web components and React wrappers for the same. You can find out more about this in the Stencil documentation.
Why I built the Drag-n-Drop UI builder?
It all started as part of an internal hackathon at Freshworks where we built some cool and awesome stuff for the Marketplace apps.
It’s difficult to build Marketplace Apps UI without HTML & CSS Knowledge. Not every app developer is a designer. I wanted to address this problem by building a drag-n-drop UI builder using Crayons components. It is the answer to some of these questions. Can we have an IDE like tool for building Marketplace apps? How can we have apps with consistent look & feel with alignment to the product? What if we remove the coding barrier for building Marketplace app UIs?
What it does?
Crayons Playground is kind of a Visual Editor for working with the Crayons component library for building Marketplace app user-interfaces without manually writing HTML Markup code. It features a fully drag-n-drop style UI builder. You can build any simple or complex layouts with it.
Target Users
It is with the following people in mind I built this Drag-n-Drop UI builder tool using the Crayons Components library:
- Marketplace App Developers
- Front-end developers and
- Product Managers
Inspirations
The original idea and inspiration for the Crayons Playground came from the full-featured visual editor and code generator for React using Chakra UI called openchakra. All the underlying architecture, code organization and design & communication patterns are borrowed from openchakra. The only difference is Crayons Playground doesn't make use of any JavaScript framework whereas openchakra is completely built using React.
Technology
The Crayons Playground is built using vanilla Web Components without using any component publishing libraries like Stencil, Lit and so on. The reason being I met with some roadblocks in building a drag-n-drop editor using these libraries.
It is using Webpack for bundling, Redux and Immer for application state management.
Using robust state management toolbelts like Redux and Immer guarantees an easy and effective way to manage state throughout the application. Immer helps to keep the state immutable and clean.
It uses other utility libraries like Lodash, JSZip and SortableJS. JSZip is used to package the user interface markup into HTML files and other required JavaScript files for a Marketplace App boilerplate in a compressed format and download them from the browser.
SortableJS is used to re-order the components in the Drag-n-Drop Editor from a separate component called the Children panel on the right side of the app.
In addition to the above mentioned libraries, I have also used two of my own npm libraries called styled-web-components and crayons-extensions. Let's have a brief look at them.
styled-web-components
styled-web-components is a library offering style property primitives for Web components inspired by styled-system. I have already written a post about it in here.
crayons-extensions
crayons-extensions is a small collection of layout components built as an extension for Crayons components. It will help you to construct complex UI layouts with simple component primitives like fw-flex, fw-grid, etc.,
See the Codepen below to understand how can you use the components from crayons-extensions.
I will write a separate post detailing the need, usage and the architecture of crayons-extensions which will be published soon here.
Demo
The below is a demo of the Crayons Playground in action. It shows how to build the user interface by dragging and dropping components, updating their properties, testing them in a Code sandbox like JSFiddle, check the generated HTML code and finally download the project as a Marketplace app. You can also see the app in action in the Freshdesk product.
What's next?
The tool currently produces Crayons v2 version code. Now we have seen what Crayons Playground can do, we can make some broad contours for the distant future.
These are some of the things in the backlog:
- Update to Crayons v3
- Build a complete end-to-end solution for Building Marketplace Apps right from design to deployment.
- Add more UI components and enhancements to the playground.
- Built-in UI templates for common use-cases
- Automatic interaction and behavior wiring with JavaScript using existing events and data interfaces
Top comments (0)