Discuss

Wappler's User Interface

Wappler’s Interface

This section provides information about the main UI components of Wappler.
Wappler’s UI is minimal, intuitive and easy to use. It consists of several main panels, needed in your workflow. The panels can be opened and closed by clicking on their icons in the toolbars:

Left Side

File Manager

The File Manager Panel is located in the left toolbar. It allows you to manage your local and remote files and folders:

Git (Version Control)

The Git panel provides version control options in Wappler. You can create a Git repository for every Wappler project you wish to keep track on. Having a repository is great way to have a good backup of all your project files and their changes:

Server Connect

The Server Conner Panel is where you define your server workflows, visually. Connect to your databases, work with dynamic data, send emails, manage files and folders, process images, create login systems and more:

Routing

The Routing Panel allows you to create SEO friendly URLs for your websites, using the visual URL Rewriting options:

Assets Manager

The Assets Manager Panel shows the image assets of your current project. You can directly drag images from any location on your computer to the assets panel to add them. You can also group your assets in different folders, change the preview size and more:

Using the Search Panel you can do a site-wide search, or search and replace. The search results are displayed in the panel, so you can see them directly:

Projects Manager

The Projects Manager is where you define your projects or manage the existing ones. The project manager also supports importing Dreamweaver site definitions (.ste files):

Options

These are the general options for Wappler. Here you can customize different settings such as - Code Editor, Design View, FTP, System and more:

Right Side

The panels located on the right side of the Wappler window are related to your page, design and front-end workflows. Let’s take a look at what’s available there. Expand the panel, by clicking the expand button:

App Structure

The App Structure Panel is one of the most important part of Wappler and probably the most used one. This is where you design the web site/app structure and appearance. Add elements and components on the page, adjust their dedicated properties in the properties panel:

Design

The design panel provides you with visual tools to style your page content. Here you can adjust the layout, position, text, background, colors, borders and many other CSS properties for any element on the page. You can design for different screen sizes, which creates the required styles and media queries for the selected device:

Styles

The styles panel allows you to write your own custom CSS rules, if you ever feel the need to write your own CSS by hand:

DOM

Unlike the App Structure Panel, which shows you only the components and properties of the frameworks you are using on your page, the DOM Panel gives access to all common HTML elements and their properties or attributes. This is where you will find properties that were not available in the App Structure panel:

Bottom

Publish and Console

Here you will find the publish panel and console. You can define your project settings, targets and publish or sync your site/app to the selected target.

Design Canvas

Design View

Probably the most important part of Wappler’s interface, where you see your design fully rendered. Here you can see how your website or 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:

Code View

Wappler generates clean semantic HTML, CSS and JS code, which you can modify directly in Code View, if you feel comfortable to do so:

Split View

Split View offers a mix of Design and Code views. You can edit the code and see the changes directly in the design part, or vice-versa:

Top

The top toolbar of Wappler offers you different options related to the design and site/app preview.

Responsive Options

You can preview how does your site or app looks on different devices, using the responsive options in the top toolbar:

Preview Options

You can toggle the Preview Mode on, which disables interaction with the elements in Design View and panels. This option makes the Design View act as a browser and react to your clicks as a browser.
You can also use the Open in Browser button, to preview the page in your default web browser:

Error Reporting

If there are any Javascript or connection errors on the page (wrong HTML or missing files) they will be displayed in the top toolbar: