Code Editor & Snippets
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.
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.
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.
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.
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.
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.
There are 3 types of Code Snippets.
These are the most used elements in any component: text field, image, button, ...
These are containers that do not contain any CMS variables: card, grid, flex wrapper, ...
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.
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.
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.
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.