Gridbox 3 Editor. Libraries and Tools

In our previous blog posts about Gridbox 3, we took a deep dive into the admin panel, explored its structure, reviewed submission forms, and looked closely at how content is managed behind the scenes. Now, it’s time to move forward.

Today, we’re stepping into the heart of Gridbox — the Editor. The place where ideas turn into layouts, and layouts turn into real websites. So, ladies and gentlemen, let’s begin the Editor overview in Gridbox 3.

If we use an allegory and compare the Joomla website builder Gridbox to a watch, then in version 3, we have completely replaced the internal mechanism. Visually, Gridbox remains recognizable, the same tool you are used to. But inside, it has become different: more precise, stable, and well-balanced.

Creating a new visual design would not have been a problem for us. The team has more than enough ideas and creative vision. But we deliberately chose not to make radical visual changes. A working tool should not force customers to relearn how to use it. Our goal is to preserve the familiar comfort while improving everything under the hood.

In Gridbox 3, everything is still in its place, but it looks cleaner, works faster, and feels more reliable. All improvements are made with care for the community and their daily work in mind.

In Gridbox 3, we've reimagined our approach to the global interface. The CSS was optimized, and all animations in the Editor were removed.

Previously, we focused on visual effects to highlight the aesthetics and capabilities of the Gridbox tools. Now our priority is practicality and reliability. Gridbox no longer needs to prove what it is capable of. You already know its power.

We also replaced all custom dropdowns with native browser dropdowns, the same ones used in the admin panel. This increased stability and reduced the amount of code. The product tour was also removed. Gridbox is intuitive and does not require additional guidance.

Code Refactoring

We literally went through every line of code. The code was reviewed, reworked, and optimized with one goal in mind — maximum stability and predictability. As a result, we achieved a clean code structure. This means fewer errors and conflicts, more stable Editor performance, and a solid foundation for future updates.

Attention to Detail

We paid attention even to elements that are rarely noticed but still affect the overall feel of the product.

All default images were optimized in size and weight, including language flags and placeholder images.

The favicon was aligned with the Joomla standard. Joomla uses a black favicon in the admin panel, but for the editor (frontend), we kept a colored one. This helps you navigate faster when you have many browser tabs open. We pay attention to even details that usually go unnoticed.

We already covered modes in detail in the blog post about Submission Forms, so here we will only briefly mention that Mode works instantly, looks impressive, and all interface elements correctly adapt to the dark theme.

The dropdown menu Tools has been reworked in Gridbox 3. Several options were refined and reorganized to improve clarity, consistency, and overall workflow.

Media Manager

The Media Manager fully matches the one used in the Gridbox admin panel. It is now a unified, polished tool with no surprises. You can find more details about the Media Manager of Gridbox 3 in the blog post: 

• Gridbox 3. Media Editors and TinyMCE

Photo Editor

The Photo Editor in Gridbox 3 follows the same principle as the rest of the editor tools: familiarity, clarity, and consistency. It fully matches the Photo Editor used in the Gridbox admin panel, so everything feels predictable and easy to use from the first click.

Nothing new to learn, no surprises, just a polished and unified tool that fits naturally into your workflow. If you’d like a deeper look at all available features, we’ve already covered the Photo Editor in detail here:

• Gridbox 3. Media Editors and TinyMCE

Font Library

The Font Library modal was redesigned and aligned with the native Gridbox 3 style. It became larger and now displays more information. The appearance of the font list was also updated.

The modals for adding Google Fonts, Web Safe Fonts, and uploading custom fonts still include convenient search and dropdowns, the style of which is now consistent across the entire Gridbox.

Three new fonts were added to Web Safe Fonts:

• UI Monospace
• UI Sans Serif
• UI Serif

UI Sans Serif became the default font in Gridbox 3. It is a system font pulled directly from your operating system. This approach makes the site interface feel familiar and user-friendly. There is also a technical benefit: your website does not load additional font files, improving speed and optimization.

Icon Library

We moved the Icon Library into a separate tool. Previously, icons were only available through plugins.

Classic icon libraries available in existing versions of Gridbox are an outdated approach. Even if you use just one icon, the entire library is loaded. If you use icons from multiple libraries, all of them are loaded. PageSpeed, as you can imagine, is not happy about that.

In Gridbox 3, we fully switched to SVG icons. When you add an icon, only that icon is loaded, without the entire library. This approach is encouraged by Google PageSpeed.

Gridbox now comes with a default set of modern icons. You can easily add or remove your own icons by simply uploading an SVG file. No complex preparation or formatting required.

After upgrading from Gridbox 2, you will see the new default icon set.  Icons already used on your sites won’t disappear and will continue to work exactly as before. They are still fully editable, but they will no longer appear in the Icon Library. If needed, you can easily replace them with lightweight SVG icons, reducing unnecessary connections and significantly improving your site’s loading speed. Google PageSpeed will definitely purr.

Code Editor

The Code Editor received a new design and now fully matches the Gridbox 3 style. It is placed in a standard modal and follows a unified visual language.

In Gridbox 3, the priority has shifted toward functionality. Now it is a tool for inserting and applying code, not for showcasing interface effects.

In version 3, you have access to a modal with extensive input hints. In dark mode, the Code Editor looks especially clean and professional. Check it out!

When opening the Page menu, you will notice that the New Page option has been removed. The reason is simple: the same function is available through the Save button. We removed duplication to make the interface cleaner and more logical.

Settings

The Settings window, along with all other modals, now fully matches the Gridbox 3 style and mirrors the admin interface we covered earlier in blog post Gridbox 3. Revamped Content Management. Clean, modern, and consistent, no surprises, no visual noise. Just a familiar, well-structured experience that feels the same everywhere you work.

Version History

Version History received a new design. This was done intentionally to ensure that all elements of Gridbox 3 resonate with each other. We also removed some icons to avoid overloading the perception of information.

Add to Menu

There are no radical changes here, but convenience is built from such small details. We replaced the dropdowns. Instead of small windows with constant scrolling, classic browser dropdowns with clear and very convenient hierarchy are now used. Adding menu items has become faster, simpler, and more visual.

The Site Settings modal is now designed in the standard Gridbox 3 style and expands to the screen height. More space and less scrolling significantly simplify viewing and filling in data.

In the Page Structure, all icons were replaced with folders, making the layout visually simpler and more logical. Editing of the Sticky Header and Lightbox plugins was removed from their previous locations and moved to Off-Canvas Content within Page Structure.

All this allowed us to significantly optimize the HTML and CSS. The code was reduced by almost half, and the structure was streamlined.

We updated the icons and redesigned the Library. The modals now follow the same Gridbox 3 style, and the display of added elements has become cleaner and more understandable.

The new design is used in different parts of Gridbox, helping reduce code and increase stability.

The Shortcuts modal now matches the overall Gridbox 3 style. Previously, it used separate CSS. Now it is a unified modal, the same as throughout the entire interface. Gridbox 3 speaks a single visual language, with less custom code and a more seamless user experience.

Gridbox 3 is not about a visual wow effect. It is about the feeling of confidence that comes while working. When the interface does not distract you. When tools behave predictably. When you feel that the product is thought out down to the smallest details.

We deliberately chose the path of internal rework: cleaned up the code, unified the interface, removed all unnecessary features, and left only what truly helps you work faster and more smoothly. Gridbox has become stricter and more mature, exactly how a professional tool should be.

Gridbox 3 is a solid foundation for the future. For new features, new ideas, and new projects. And most importantly, it is still the same familiar Gridbox, but refined to a state where it truly unlocks its full potential.

To be continued 😉

Leave a comment