Discuss

Wappler's User Interface

Minimal, easy to navigate and use

Due to rapid development cycles you may find the interface altering from time to time, however the navigational concept generally remains fairly similar. Keep an eye out for the “Released” topics, whenever a newer version becomes available to keep up with the major changes.

Interface Overview

We will break this into 5 parts, left, top, right, bottom and middle.

Left Top

The toolbar contains buttons which allow you to open/close the File Manager, Server Connect and Find/Replace panels grouped at the top.

Left Bottom

The Project Manager, Extensions Overview, Wappler Options and Your Account details are grouped at the bottom.

Top

The toolbar contains tools and options for changing between Design, Code and Split view, as well as screen size options and Undo/Redo buttons.

The toolbar is split into 4 panels, App Structure, Design, Styles, and DOM.
The App Structure and DOM panels are divided into the top half for selection of elements and structure overview. You can add, delete, duplicate, remove, and select elements easily, after an element is selected the properties specific for that element are displayed in the bottom half.
App Structure gives access to all the default components and properties of the framework you are using only.
DOM gives access to all HTML components and properties without limitation, this is where you will find properties that were not available in the App Structure panel.

The Design panel gives you graphical controls over the CSS styles.

The Styles panel gives you full access to all the CSS properties for when you need something the Design panel does not allow.

Bottom

Here you will find the publish panel and console. You can define your project settings, targets, server model settings and publish it to multiple targets.

Middle

The most important part of Wappler’s interface, where you see your design fully rendered. Here you can see how your website or mobile app looks, you can visually add elements (inside, before or after) the selected element, duplicate whole blocks of content or delete anything from the page or app layout, and so much more.