Wappler's UI

Welcome to Wappler

This tour is a quick, beginner-friendly map of the Wappler UI.

Welcome. Wappler is a full workspace: project actions, editors, visual panels, and output — all in one place.

Next step: the UI concept map — then we’ll point at the real UI.

UI map

Learn the layout
fast

Spotlight

Follow the highlights
step-by-step

Next tours

Go deeper with
focused tours

The UI map (conceptual)

Use this map as a mental model. Watch one line at a time — the matching block in the diagram will highlight.

• Top bar: global actions and project commands
• Left sidebar: managers (Project, Git, Server/DB, Files)
• Editor workspace: tabs + code/design editors
• Page panels: structure and page-level tools
• Selection panels: properties and styling for what you click
• Bottom area: status + terminal/output (build, run, logs)

What you’ll learn

Where to find: project actions (top bar), managers (left), your editors (center), page/selection panels (when editing a page), and the terminal/output area (bottom).

TIP: If a step mentions ‘HTML editor’ and you don’t currently have a page open, just skip it — those steps are optional.

Top bar

Project actions
+ global commands

Editors

Tabs
+ Design/Code

Output

Build/run
feedback

Learn where things live in the UI.

Recognize which panel you need next.

Know where to look when something fails.

Top Bar

The top bar is your ‘command center’ for project-level actions and global commands.

Orient yourself in top toolbar

Start with the wider context in the top toolbar so the next control makes sense in the full workflow. In the next step, you will focus on Project Manager and see how it fits into this area.

Screenshot: Orient yourself in top toolbarClick to open the larger image

Project Manager

Create, open, and manage projects. If you’re ever unsure which project is open, start here.

Screenshot: Project ManagerClick to open the larger image

Project Settings

Configure frameworks, deployment targets, and project options. You’ll visit this a lot when setting up a new project.

Screenshot: Project SettingsClick to open the larger image

Quick Open

Jump to any file quickly. Great when you know the name and just want to start editing. This step matters because Quick Open is part of App Toolbar Quick Open, and understanding that context makes the next action easier to repeat in your own project.

Screenshot: Quick OpenClick to open the larger image

Left Sidebar

The left sidebar is where you switch between managers: Project, Git, Server Connect workflows, Databases, Files, and more.

Screenshot: Left SidebarClick to open the larger image

Editor Workspace

The center area is your editor workspace: open files in tabs, switch between Design/Code, and work across multiple files without leaving Wappler.

Tabs

As you open files, they appear as tabs. You can keep multiple pages, scripts, and workflows open at once.

Screenshot: TabsClick to open the larger image

Switching context

Use tabs to switch files quickly. Each editor keeps its own state, so you can jump between tasks without losing your place.

Screenshot: Switching contextClick to open the larger image

When editing a page (Optional)

If you have an HTML page open, Wappler shows extra panels to help you design and bind data visually.

Optional: HTML page context

The next steps open a simple page layout so Page Panels and Selection Panels are visible in a consistent state. If you prefer, you can still skip this section.

Consistent page

Same layout
every time

Optional

Skip if you
prefer

When a page is open, Page Panels appear (Structure and page tools).

When you select an element, Selection Panels appear (Properties and Styles).

You can return to this section anytime.

Selection context

This setup step prepares the Selection Panels for the next steps by selecting the page root automatically.

Automatic setup

The page root is selected for you before we point at the panels.

Panel context

Properties and related selection tools are ready for the next steps.

HTML editor surface

This is the HTML editor. It can switch between Design, Code, or Split view.

Screenshot: HTML editor surfaceClick to open the larger image

Page Panels

These panels help you navigate the page: Structure (DOM tree), plus other page-level tools.

Screenshot: Page PanelsClick to open the larger image

Selection Panels

When you select an element on the page, these panels show its Properties, Styles, Data bindings, and more.

Screenshot: Selection PanelsClick to open the larger image

Bottom Area

The bottom area is where you’ll find status, build/run feedback, and a collapsible terminal/output pane.

TIP: If something is running or building, check the bottom area first — it often contains the most useful output.

Screenshot: Bottom AreaClick to open the larger image

Next steps

Pick a tour to go deeper into a specific part of Wappler.

Recommended path

If you want a structured starting point, follow the Learning Basics tour path next.

Start simple

Build confidence
fast

Hands-on

Do the steps
with Wappler

Next tours

Keep going
from there

You’ll start with a tiny, complete workflow.

Each step points at the exact UI you need.

You’ll end with clear ‘what to check’ outcomes.

Choose your next tour

Select one of the related tours to continue learning.