Discuss

Wappler's User Interface

On this page

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

Site Manager

The Site Manager Panel is located in the left toolbar:

Screenshot_1|690x431

It allows you to manage your pages, site assets and local and remote files and folders:

Screenshot_2|690x431

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:

Screenshot_3|690x431

Workflows

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

Screenshot_4|690x431

Database Manager

In the Database Manager you have a great visual overview of all your database tables, history of your changes, and database seeds. You can create new tables and fields or edit the data in your database:

Screenshot_5|690x431

Routing

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

Screenshot_6|690x431

Theme Manager

The Theme Manager allows you to build custom styles by selecting different colors, Google fonts, styling options, and more:

Screenshot_7|690x431

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:

Screenshot_8|690x431

Options

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

Screenshot_9|690x431

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:

Screenshot_10|690x431

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:

Screenshot_11|690x431

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:

Screenshot_12|690x431

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:

Screenshot_13|690x431

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:

Screenshot_14|690x431

Bottom

Publish and Terminal

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

Screenshot_15|690x431

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:

Screenshot_16|690x431

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:

Screenshot_17|690x431

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:

Screenshot_18|690x431

Top

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

Project Manager

You can see your current project name, edit the current project options, load a different project, or create a new one. The project manager also supports importing Dreamweaver site definitions (.ste files):

Screenshot_1|690x431

Responsive Options

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

Screenshot_19|690x431

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. Use the Open in Browser button, to preview the page in your default web browser. You can also scan a QR code with your mobile device to preview your page(s) there:

Screenshot_21|690x431

UI Theme Selector

Wappler comes with a set of 20 gorgeous modern UI Themes to choose from. Select the one that suits your taste the most - a dark or a light one:

Screenshot_2|690x431