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
Site Manager
The Site Manager Panel is located in the left toolbar:
It allows you to manage your pages, site assets and 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:
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:
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:
Routing
The Routing Panel allows you to create SEO friendly URLs for your websites, using the visual URL Rewriting options:
Theme Manager
The Theme Manager allows you to build custom styles by selecting different colors, Google fonts, styling options, and more:
Search
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:
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 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.
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 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):
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.
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:
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:
