Announcing JitBlox 0.23

Today I'm excited to announce JitBlox 0.23. Despite the minor version bump, this is a big release with many improvements to our component editor. If you're not familiar with JitBlox, it's an online environment that speeds up design and prototyping of component-based (Angular) applications. JitBlox lets you build working prototypes without coding, providing a jump-start for your next web project.

Let's take a look at what’s in store for JitBlox 0.23.

Component designer improvements

The component designer has undergone a major design update. The previous version of the template editor attempted to mimic the final CSS positioning of elements. However, in a dynamic, data-driven application, there are too many moving parts that are not known at design time, so we've stepped away from that approach and decided to display all elements in a tree structure instead, focusing on template structure and logic.

The result is an element tree that looks a bit like the element inspector that can be found in every web browser, but with more emphasis on semantics instead of HTML tags and attributes.

Component data

The component data editor (previously known as Class view) is now more integrated with the template editor, taking less space and allowing to see all component properties at a glance without closing the template. The same panel also houses the less-used editors for route parameters and component information.

Directives and extensions

Directives (instructions that add additional behaviour to elements) have always been supported by JitBlox, but they were tucked away in the detail editor and could be only added to existing elements. With this release, we've introduced a new type of toolbox item named an extension, which (among others) represents a directive. You can recognize an extension by the icon and you can apply one in two ways:

• Add one together with a new element by dropping the extension onto the template just like any other component.
• Extend an existing element by dropping the extension onto it while you hold the Ctrl-key (Windows) or Option key (MacOS).

Extensions are a powerful way to separate concerns. That's why the template editor now also clearly shows which extensions have been applied to an element, and you will be able to edit their properties separately. As an example, here is a button that has a Material Tooltip directive applied to it:

Toolbox improvements

The toolbox has also undergone some updates that make it easier to locate items:

• We've updated the categorization, making it easier to discover which components are available.
• Because 3rd party components are mixed with native HTML elements in the same category, we've added some color coding that makes it easier to distinguish native HTML elements from 3rd party components and toolbox items that are built into JitBlox.
• If you already know what you are looking for, the toolbox now also has a quick search function.

Angular 12 support

Angular 12 was released on May 12, 2021. It has many improvements like Nullish Coalescing, inline Sass support, TypeScript 4.2 support and experimental support for Webpack 5. New JitBlox projects will be based on Angular 12 by default.

What's next?

At this moment, we're working hard to support Bootstrap 5, which was released on May 5, 2021. We are integrating lots of components from the popular ng-bootstrap project and are creating extensions for native Bootstrap components and utilities that make setting up Bootstrap 5 projects a breeze. Leave your email if you want to be the first to be notified.

We are also investigating the possibility to extend the component editor with a component preview feature, in addition to the current Live Preview which always opens in a new window. This brings some challenges regarding screen estate, but also for previewing components that depend on external inputs. I'd love to hear your thoughts on this.

As always, we are never short of ideas and suggestions are always welcome. That's why we also created the first version of our roadmap if you like to read more.