Getting Started

Welcome to Wappler - a visual builder for dynamic, data driven and highly interactive custom web sites, CMS systems and mobile apps.

Migrating Dreamweaver Site Definitions into Wappler

In this short Wappler tutorial we will show you how to export all your site definitions from Dreamweaver so they can be imported directly into Wappler. Your imported Dreamweaver site definitions will …

Accessing the DOM Tree

Unlimited power to users that might need access to additional attributes and properties Use the DOM Tree to explore the full structure of your pages. Selecting an item in the DOM structure will allow …

Using the CSS Styles Panel

CSS Styles visual editor with instant preview functionality for rapid design. Wappler has multiple ways to style your pages. From the App Structure properties panel using the built in pre-configured B…

Using Dynamic Attributes - Part 1: Disabling Confirm Password Field

Wappler's full potential is realised when we begin using Dynamic Data, Events, and Attributes. For this tutorial we have a form, where users enter their details. We'd like to apply dynamic attributes …

Using Dynamic Attributes - Part 2: Showing Elements Based on Condition

Dynamically show/hide HTML and Bootstrap 4 elements based on Events We'd like to hide the personal details container when the user has not agreed to the terms and conditions by selecting the checkbox.…

Using Dynamic Attributes - Part 3: Toggling Class Based on Condition

In this tutorial, we will toggle a class when a field value is not valid, and we will also show a message to the user. First, select the email field (1). This field type is set to email (2). This way…

Wappler Shortcut Keys

List of shortcut keys used in Wappler As we develop our weekly updates we will continue to keep this list updated, so check back regularly. General Action Windows MacOS Linux New File CTRL N …

App Connect Introduction

Intro Next generation front-end framework for reactive, data-driven web sites and apps App Connect is a high performance front-end framework just as powerful as React, Angular and VueJS. App Connect …

Using the Design Panel

Design panel provides you with visual tools to style your page content. You can design for different screen sizes, which creates the required styles and media queries for the selected device. Addin…

Using the File Manager

With the File Manager integrated in Wappler you can easily explore and manage your project files and folder, located in the local project folder or on the selected target. File Manager Overview To …

How to download Wappler?

How to download Wappler? We will explain to you how to download Wappler from your profile. After you made your purchase, you can download Wappler from your account page . Navigate to the Downloa…

Setting Up a Lightweight Dev Environment with NodeJS and SQLite

Intro You don’t need to install and configure any local servers to run your dynamic Wappler web app or site. You can use the powers of the integrated in Wappler NodeJS server in combination with a S…

Bootstrap Integration

Bootstrap and Wappler’s visual integration Bootstrap does not need an introduction, being the world’s most popular front-end open source toolkit, featuring a responsive grid system and extensive preb…