IDE integration
2022-07-13
Here is a video for those of you who prefer a video introduction. Others can read on.
Summary
The IDE (Integrated Development Environment) was originally meant for developers, but it turns out no-code users use it just as much to access advanced features. Additionally, the old IDE was indeed a development environment - but not really integrated. It was a separate app and not really user friendly.
This release brings all the features of the IDE into the Editor and improves on them. The old IDE is still available for a while but is considered deprecated and will be removed in the near future.
Toolbar changes
Let's start at the high level, with changes to the Editor's Toolbar. Here is the old and the new:
The only change is that the Play mode button is gone, and the Pages panel was added.
Play mode was redundant as it only highlighted that you are currently using the website. That is, none of the tools are currently enabled. We got rid of that.
The Pages panel is a menu tree for your site / app. You can use it for both navigation and manipulating the pages.
Finnally, most of the changes went into the 2nd tab, which was called Layers panel or File panel. Now it is called the Object editor. Pretty much the entire IDE went into it. Let's start with that because that's the most interesting bit.
Object editor
Again, let's compare the old Layers panel with the new Object editor:
The new Object editor adds the following features:
See the entire filesystem, including the
0andPagesbuckets.Create files, rename files, load files into the preview area (as in, opening the web page).
Focus on any file via double-click: this makes it the top file in the tree. This makes it simpler to navigate a large tree by only showing one file and its children instead of the entire tree above.
Back and forward buttons for navigation. Super useful when you want to follow a file's type, look around, then go back.
Code editor with the file type editable right above the file's body. (Often used.)
File attributes editable on a second tab of the code editor. Note that now only the file attributes are located there, previously the file
type,titleand other properties were there too.It contains various layouts for a comfortable editing experience.
A few images of various Object editor layouts:
And the layouts available when the code editor is open:
Saving the code editor's contents automatically reloads the preview which makes for a really fast feedback loop.
Pages panel
The Pages panel gives you a menu for your project, showing all the pages within Pages buckets. Note that it won't show you any pages you move to the 0 bucket for hiding them. You can still access those from the Object editor.
On this screenshot, its benefit is not so obvious because the web page itself contains a very similar menu, but this is often not the case.
Also, on the Pages panel, you can select and manipulate all the pages. (Open the contextmenu, copy-paste, sort, etc.)
Please do shoot me a message with your experience using it!
Cheers,