UI map
Learn the layout
fast
fast
Wappler's UI
A quick orientation to Wappler: main panels, editors, and the core workflow for building and previewing apps.
Welcome to Wappler
Section titled “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.
Spotlight
Follow the highlights
step-by-step
step-by-step
Next tours
Go deeper with
focused tours
focused tours
The UI map (conceptual)
Section titled “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
Section titled “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
+ global commands
Editors
Tabs
+ Design/Code
+ Design/Code
Output
Build/run
feedback
feedback
Learn where things live in the UI.
Recognize which panel you need next.
Know where to look when something fails.
Top Bar
Section titled “Top Bar”The top bar is your ‘command center’ for project-level actions and global commands.
Orient yourself in top toolbar
Section titled “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.
Project Manager
Section titled “Project Manager”Create, open, and manage projects. If you’re ever unsure which project is open, start here.
Project Settings
Section titled “Project Settings”Configure frameworks, deployment targets, and project options. You’ll visit this a lot when setting up a new project.
Quick Open
Section titled “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.
Left Sidebar
Section titled “Left Sidebar”The left sidebar is where you switch between managers: Project, Git, Server Connect workflows, Databases, Files, and more.
Editor Workspace
Section titled “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.
As you open files, they appear as tabs. You can keep multiple pages, scripts, and workflows open at once.
Switching context
Section titled “Switching context”Use tabs to switch files quickly. Each editor keeps its own state, so you can jump between tasks without losing your place.
When editing a page (Optional)
Section titled “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
Section titled “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
every time
Optional
Skip if you
prefer
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
Section titled “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
Section titled “HTML editor surface”This is the HTML editor. It can switch between Design, Code, or Split view.
Page Panels
Section titled “Page Panels”These panels help you navigate the page: Structure (DOM tree), plus other page-level tools.
Selection Panels
Section titled “Selection Panels”When you select an element on the page, these panels show its Properties, Styles, Data bindings, and more.
Bottom Area
Section titled “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.
Next steps
Section titled “Next steps”Pick a tour to go deeper into a specific part of Wappler.
Recommended path
Section titled “Recommended path”If you want a structured starting point, follow the Learning Basics tour path next.
Start simple
Build confidence
fast
fast
Hands-on
Do the steps
with Wappler
with Wappler
Next tours
Keep going
from there
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
Section titled “Choose your next tour”Select one of the related tours to continue learning.