Log inGet started
Code Editor & Snippets

Code Editor & Snippets

category
Dieter Crombez, 2020/07/17

This month we released a completely reimagined code editor and enhanced it with some cool new features.

Before we dive into the details let’s do a quick recap of the full infrastructure.

Our collaborative web design platform SiteManager contains
4 environments tailor-made for all profiles in a digital agency.
The project dashboard is the central place where all web projects are managed. The visual CMS is an easy-to-use content editor optimized for non-technical end-clients. The design environment is a no-code interface where graphic designers can style the page and layout components.

A digital agency with diverse profiles

The code environment is the beating heart of the platform. In this environment, front-end developers can edit and create all components for the visual CMS and design editor without limitations. This makes SiteManager the most powerful cloud-based web editor on the market today.

New UX/UI

Our old UX/UI had a lot of clutter. All the code options were shown in one big list. To add CMS or Design functionality you had to go to another page in the platform and then return to the code editor to apply your changes.

Old UX/UI code editor

The new code editor focuses on the code. You can switch between HTML, CSS, and JavaScript. If you want to create CMS variables a side panel will open. You never leave the code editor when creating and editing the components of your website. All settings can now be opened from a central configuration button.

New UX/UI code editor

Preview Mode

The first enhancement we made was adding a preview panel to the code editor. With a single click, you can open a panel showing the component you are working on. You can resize this panel to match your screen resolution perfectly. Especially for big monitors, this can make a huge difference. The panel width is also saved automatically.

Preview panel code editor

With the preview panel active, you can open the CMS panel to edit the content of the component. You can also open the design panels for the design editor and start making design changes right from the code environment. This is a huge timesaver as you no longer have to switch between views to make these small changes.

Code Snippets

We are proud to introduce a new feature we have been working on for a long time. Code Snippets are small pieces of code that are fully functional. They automatically have the CMS variables (with edit buttons), design panels (with design selector) linked and ready to go.

Add Code Snippets to your components

There are 3 types of Code Snippets.

Elements

These are the most used elements in any component: text field, image, button, ...

Structures

These are containers that do not contain any CMS variables: card, grid, flex wrapper, ...

Collections

These are containers that do contain CMS variables: form, masonry, tabbed content, ...

With these code snippets, you will be able to code the most common web components in seconds. This low-code feature makes creating components a very efficient activity.


We do plan to add more snippets in the coming months and rebuild all page components in the upgrade center with this format.

Design Selector

The Design Selector enables easy access to the design panels of an element inside your page and layout components. It also visually shows the margin, padding, width, height, and constructor name. Simply hover over the element to activate this effect.

Design Selector

The Design Selector is available for the panels used with code snippets. Previous projects do not automatically have this feature. In the coming months, we will update our templates and components with this feature. The template “Interior” is the first template converted with design panels.

What’s Next?

In the coming months, we will continuously update the new code editor with improvements coming from our users and internal testers. We also started developing a code snippet solution for layout components. In August we are going to release a new code function for back-end developers.

We also started working on a no-code engine for the design editor where you can build your own components (using the code snippets logic). The current release date for this is scheduled towards the end of Q4 this year.

Ready to grow together?

Join the community of web design professionals who believe that time saving cloud technology enables to scale their web design business.
Get started