In this post, I'll introduce DoTenX, an open-source application builder, with a focus on its visual UI builder and I'll show you how it can streamline your web development workflow.

Whether you have just started to learn web development or you are a seasoned pro, DoTenX can be a valuable addition to your toolbox.

Before we move on, please take a look at the repository at https://github.com/dotenx/dotenx

With DoTenX, you can leverage your coding skills to create custom elements and widgets for your websites, all without the need for complex code. Its intuitive drag-and-drop editor and near real-time preview make it easy to see your changes as you go, saving you time and frustration.

Whether you're building websites for clients or your own projects, DoTenX has the tools you need to create stunning websites with ease.

---

Let's get started!

Simple mode

When you create a project, you initially get a blank page which is in simple mode:

In simple mode, you can quickly build the UI. It may have limited control over styles, but it provides a good set of commonly used components.

Being open-source you can expect the number of pre-built components to grow significantly in a short period of time.

As a developer, I personally use simple mode, mainly for landing pages or sometimes as a starting point for complex projects.

In this mode, you just add new sections using the button in the middle of the page and customise them using the options menu.

Advanced mode

As most likely you're a software developer or about to become one, let's focus more on the advanced mode.

You can switch to advanced mode at any time by clicking the advanced mode button. Just remember this action is irreversible.

In advanced mode, you have control over the smallest details of your project. You can see 5 tabs in the editor that provide different functionalities.

Elements tab

From left to right, the first tab is the Elements tab which offers various components you can drag and drop onto the canvas (in the middle of the screen).

The built-in elements are categorised into 4 groups:

• Basic

• Compound

• Form

• Charts

This tab also shows you the custom components you create from the existing elements under the Components section.

I'll explain about the Design System and Marketplace options in another post.

Layers

The second tab is the Layers which provides a more convenient way to see the tree of elements and move them around and offers functionalities such as creating custom components.

You can drag the elements from the Elements tab and drop them directly in the exact place on the Layers tab.

You can also hide the elements using this tab which is quite useful especially in larger projects.

Options

Options tab allows you to customize the settings of individual elements using options that are mostly specific to that element.

Some elements allow you to specify the As HTML element option which is important for SEO purposes. For example, you might want to render a Box element as an article or section tag rather than the default div.

Some elements such as Text and Image allow you to use states as well as simple text. I'll go through the concept of states in another post. States provide a powerful mechanism to add complex functionalities to your application. If you come from a background of development in React or similar technologies, you'll find the concepts very familiar.

Styles

The fourth tab is Styles tab which allows you to set the styles of each element. You can apply the styles directly to each element or add classes and set the styles through classes.

There are a few points you need to know about working with the Styles tab.

1. The styles are desktop-first, meaning if you set the styles in the desktop mode, they'll apply to the tablet and mobile modes and so on.

   You can toggle between different modes using these buttons:

1. You can set the styles for other states of elements such as focus, hover, diabled and more.

1. You can easily add new classes by typing in the name and clicking on the create button. Make sure after you create the class click on its name, which turns its colour to red to set the styles of the class. After you're done, click on the class again so you go back to applying the styles to the element.

1. While the Styles tab provides an easy way to set various CSS properties, sometimes you don't find a particular option. You can add any CSS property at the bottom of this tab to your elements or classes.

Data

This is the most advanced concept in the UI builder. If you're already familiar with the concept of states or stores in any of the popular front-end libraries or frameworks, this section is quite easy to use for you and you can implement very complex scenarios very easily.

On the other hand, if you're just getting familiar with the concept of states, DoTenX UI builder can definitely help you make much faster progress.

Using the Data tab you can make API calls, add event handlers with complex functionalities, implement conditional rendering or conditionally apply classes to elements and more.

This section definitely deserves a dedicated blog post which I'll publish soon, so stay tuned!