What to watch
When you drag elements, pay attention to nesting, not just position. A card moved into the wrong parent may still render, but it becomes harder to reason about later.
Drag & Drop Elements
You can drag any of the elements inside App Structure. Just select the element you want to move and start dragging it in the tree: When the element which you ar
Drag and Drop Elements
Section titled “Drag and Drop Elements”Use Wappler drag-and-drop editing deliberately so page structure stays clear while you move faster in Design view.
Introduction
Section titled “Introduction”Drag and drop is one of the fastest ways to reshape a page in Wappler, but it is also where structure can quietly get damaged. The goal is not just to move something until it looks right. The goal is to keep parent-child relationships, layout intent, and future editability intact while you work visually.
Modern-safe workflow
Use drag and drop for layout refinement, then confirm the structure in the editor surfaces instead of relying only on appearance.
Move small pieces before moving large page sections.
Watch where containers start and end.
If the structure becomes unclear, pause and reselect the intended parent.
Use drag and drop with Bootstrap layout rules in mind.
Use drag and drop deliberately
Section titled “Use drag and drop deliberately”These habits keep visual editing fast without making later maintenance harder.
Reorder siblings first
Section titled “Reorder siblings first”The safest moves are usually within the same parent. Reordering siblings changes flow without changing the structural role of the element.
Low-risk move
Start with sibling reordering when you want visual refinement without structural surprise.
Be careful crossing layout boundaries
Section titled “Be careful crossing layout boundaries”Moving an element into a different row, column, or section changes more than its position. It changes what that element belongs to.
Check the parent
If the destination parent changes, the meaning of the element usually changes too.
Confirm the result
Section titled “Confirm the result”After a structural move, briefly check the relevant editor panel or selection context so the new hierarchy is explicit, not accidental.
Trust structure, not appearance
A page can look correct while still being nested in the wrong place.
Next steps
Section titled “Next steps”After you can move elements safely, the next job is controlling styling hooks and spacing without mixing responsibilities.
HTML Editor
Section titled “HTML Editor”Browse HTML Editor tours: Quick Overview, Design + Code, and Page Panels.
HTML Editor
Section titled “HTML Editor”This menu lists the HTML Editor tours. Use it to jump into a topic (Quick Overview is a good start).
HTML Editor: Quick Overview
Section titled “HTML Editor: Quick Overview”Get a quick overview of Html Editor: Main Toolbar and Design Toolbar.
HTML Editor
Section titled “HTML Editor”Use this quick overview to understand how the HTML Editor fits together before you learn any single control in isolation. You will see the main workspace, the view-switching model, and the editing surfaces that form the foundation for page building, inspection, and refinement in Wappler.
Main Toolbar
Section titled “Main Toolbar”The main toolbar contains common page actions and view controls.
Design Toolbar
Section titled “Design Toolbar”The Design toolbar provides design-specific tools and modes.
Design + Code
Section titled “Design + Code”Browse Design + Code tours: Overview, How To’s, and Reference.
Design + Code
Section titled “Design + Code”Choose a design or code topic.
Page Panels
Section titled “Page Panels”Browse Page Panels tours: Overview, How To’s, and Reference.
Page Panels
Section titled “Page Panels”Choose a page panel topic.
Selection Panels
Section titled “Selection Panels”Browse Selection Panels tours: Overview, How To’s, and Reference.
Selection Panels
Section titled “Selection Panels”Choose a selection panel topic.
Design + Code Overview
Section titled “Design + Code Overview”Explore HTML Editor Design Code: key areas and how they work together.
Design + Code
Section titled “Design + Code”The Design and Code relationship is easier to learn when you treat it as one workflow viewed from two angles. This overview shows how the visual canvas and underlying markup support each other, and why understanding that handoff makes later editing decisions more deliberate.
Switch views
Section titled “Switch views”Use the toolbar to switch between Design, Code, and Split views.
Design View
Section titled “Design View”Design View renders the page so you can select and edit elements visually.
Code View
Section titled “Code View”Code View lets you edit markup with full code tooling.
How To’s
Section titled “How To’s”Goal-based how-to guides for the HTML Editor, covering common design and code workflows.
Design + Code How To’s
Section titled “Design + Code How To’s”Use this menu when your next question is task-based rather than conceptual. It gathers the common Design and Code workflows in one place, so you can start from the job you need to complete and then jump into the focused tour that shows the exact control sequence.
Design + Code Reference
Section titled “Design + Code Reference”Reference hub for HTML Editor Design + Code topics, linking only to reference tours for Design View and Code View.
Design + Code Reference
Section titled “Design + Code Reference”Jump to a specific reference topic for Design View or Code View.
Design View
Section titled “Design View”Browse Design View tours: Overview, How To’s, and Reference.
Design View
Section titled “Design View”Overview, How To’s, and Reference for Design view.
Code View
Section titled “Code View”Browse Code View guides for editing HTML directly, navigating markup faster, and using Monaco-powered tools inside the HTML Editor.
Code View
Section titled “Code View”Overview, How To’s, and Reference for Code view.
Components
Section titled “Components”Explore Components: Components picker and Search and browse.
Structure panel
Section titled “Structure panel”The components workflow makes more sense when you first see where Wappler exposes page structure and insertion tools together. This tour starts by locating that area in context, then explains how component selection and component insertion support the rest of your editing workflow.
Insertion point
Section titled “Insertion point”We’ll select body as the insertion point. This step matters because Insertion point is part of Page Panels Structure Body, and understanding that context makes the next action easier to repeat in your own project.
Components picker
Section titled “Components picker”We’ll use Insert Child to open the Components picker. This step matters because Components picker is part of Page Panels Structure Body, and understanding that context makes the next action easier to repeat in your own project.
Search and browse
Section titled “Search and browse”Use search to find components, then select one to insert. This step matters because Search and browse is part of Components Popup Anchor Right, and understanding that context makes the next action easier to repeat in your own project.
Design Toolbar
Section titled “Design Toolbar”Learn what the Design toolbar controls in the HTML Editor, from element actions and responsive helpers to faster canvas editing.
Design Toolbar
Section titled “Design Toolbar”The Design toolbar is where page editing shifts from passive viewing to active manipulation. This tour places the toolbar in context, explains the kinds of actions it centralizes, and helps you see why many design-view tasks begin here before you move into a panel or the canvas.
Code Tools
Section titled “Code Tools”Learn the HTML Editor code tools for search, formatting, navigation, and repeatable edits while working in Code View.
Code tools
Section titled “Code tools”The code tools area is where editing commands stop being abstract shortcuts and become repeatable page-maintenance actions. This tour shows where those tools live, when you reach for them during normal code editing, and how they support faster changes without leaving the HTML Editor.
Editor tooling
Section titled “Editor tooling”Use Code View for fast editing, navigation, and refactoring.
Page Panels Overview
Section titled “Page Panels Overview”Explore HTML Editor Page Panels: key areas and how they work together.
Page Panels
Section titled “Page Panels”The page panels are the organizing surfaces that keep the HTML Editor manageable once a project grows. This overview explains what those panels are for, how they support everyday editing and navigation, and why understanding their roles makes the rest of the page workflow easier to follow.
Structure
Section titled “Structure”Use Structure to browse, search, and edit your page’s component tree.
AI Assistant
Section titled “AI Assistant”Use the AI Assistant to ask questions and apply changes safely to your page. This step matters because AI Assistant is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
Network
Section titled “Network”Use Network to inspect XHR/fetch and asset requests while previewing your page. This step matters because Network is part of the Network panel, and understanding that context makes the next action easier to repeat in your own project.
How To’s
Section titled “How To’s”Goal-based how-to guides for the Page panels, including common tasks and navigation between panels.
Page Panels How To’s
Section titled “Page Panels How To’s”Choose a quick walkthrough from the list.
Page Panels Reference
Section titled “Page Panels Reference”Find your way around HTML Editor Page Panels: Page Panels Reference.
Page Panels Reference
Section titled “Page Panels Reference”Use this reference tour as a map of the page-panel area before you depend on it for navigation. It points out the main panels and entry points, explains what each one helps you do, and gives you a reliable mental index for later page-management work.
Structure
Section titled “Structure”Get oriented in the App Structure panel: key tools, common workflows, and where to look next.
Structure
Section titled “Structure”Choose what you’d like to learn about the Structure panel.
AI Assistant
Section titled “AI Assistant”Browse AI Assistant tours: Overview, How To’s, and Reference.
AI Assistant
Section titled “AI Assistant”Pick an overview, a goal-based How To, or the full reference for the AI panel. This step matters because AI Assistant is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
Network
Section titled “Network”Get oriented in the Network panel: key tools, common workflows, and where to look next.
Orient yourself in Page Panels area
Section titled “Orient yourself in Page Panels area”Start with the wider context in the Page Panels area so the next control makes sense in the full workflow. In the next step, you will focus on Network and see how it fits into this area.
Network
Section titled “Network”Pick an overview, a goal-based How To, or the full reference for the Network panel. This step matters because Network is part of the Network panel, and understanding that context makes the next action easier to repeat in your own project.
Selection Panels Overview
Section titled “Selection Panels Overview”Explore HTML Editor Selection Panels: Selection Panels and Switch panels.
Selection Panels
Section titled “Selection Panels”The selection panels are where Wappler turns a chosen element into actionable settings, styles, and data context. This overview explains how those panels work together, why they matter to everyday editing, and how the focused tours build on this same selection-first workflow.
Switch panels
Section titled “Switch panels”Use the tabs to switch between Properties, Design, Styles, and Data.
How To’s
Section titled “How To’s”Goal-based how-to guides for the Selection panels, focused on switching context and working faster.
Selection Panels How To’s
Section titled “Selection Panels How To’s”Choose a quick walkthrough from the list. This step matters because Selection Panels How To’s is part of Selection Panels, and understanding that context makes the next action easier to repeat in your own project.
Selection Panels Reference
Section titled “Selection Panels Reference”Find your way around HTML Editor Selection Panels: Selection Panels Reference.
Selection Panels Reference
Section titled “Selection Panels Reference”Treat this reference tour as a map of the selection panels before you rely on them for faster editing. It points out the main panel families, explains what each one is responsible for, and helps you remember where to return when a selected element needs deeper inspection.
Inspector
Section titled “Inspector”Get oriented in the Inspector panel: key tools, common workflows, and where to look next.
Inspector
Section titled “Inspector”Overview, How To’s, and Reference for the Inspector panel.
Design Panel
Section titled “Design Panel”Browse Design panel guides for layout controls, spacing presets, responsive tweaks, and inspector-driven page adjustments.
Design
Section titled “Design”Adjust layout and presets with the Design inspector.
Styles Panel
Section titled “Styles Panel”Browse Styles panel guides for class management, CSS inspection, rule editing, and jump-to-source workflows in the HTML Editor.
Styles
Section titled “Styles”Organise classes and CSS overrides.
Data Panel
Section titled “Data Panel”Browse Data panel guides for bound datasets, source inspection, picker workflows, and selection-aware data previews.
Preview datasets bound to the current selection.
Design View Reference
Section titled “Design View Reference”Find your way around HTML Editor Design View: where to find the main controls and what they do.
Design View reference
Section titled “Design View reference”Use this reference tour as a map of Design View before you depend on it for faster editing. It highlights the surfaces and controls you revisit most often, explains what each one is for, and helps you remember where to return when a visual selection or preview task comes up.
Main toolbar
Section titled “Main toolbar”Use the main toolbar to switch between Design, Code, and Split views.
Design toolbar
Section titled “Design toolbar”The Design toolbar provides tools and toggles for working visually.
Canvas
Section titled “Canvas”Select, inspect, and manipulate elements directly on the canvas.
Code View Reference
Section titled “Code View Reference”Find your way around HTML Editor Code View: where to find the main controls and what they do.
Code View reference
Section titled “Code View reference”Treat this reference tour as a map of Code View before you start using it under time pressure. It points out the controls and surfaces you revisit most often, explains what each one is for, and helps you remember where to return when you need direct source editing.
Main toolbar
Section titled “Main toolbar”Use the main toolbar to switch views and access editor tools.
Context menu
Section titled “Context menu”Right-click in the editor for common actions.
Editor
Section titled “Editor”Use find/replace, go to line, and formatting to work faster.
Design View Overview
Section titled “Design View Overview”Explore HTML Editor Design View: key areas and how they work together.
Switch to Design View
Section titled “Switch to Design View”Design View is the live editing surface where page structure becomes something you can inspect and manipulate directly. This overview explains why the view matters, what kind of work belongs here, and how it connects to the toolbar and panels you use for deeper changes.
Design toolbar
Section titled “Design toolbar”The Design toolbar contains tools for selecting, inserting, and working with the page.
Canvas
Section titled “Canvas”Click elements on the canvas to select them.
How To’s
Section titled “How To’s”Goal-based how-to guides for Design View, focused on working visually with layout and components.
Design View How To’s
Section titled “Design View How To’s”Choose a walkthrough.
Code View Overview
Section titled “Code View Overview”Get oriented in Code View: key tools, common workflows, and where to look next.
Switch views
Section titled “Switch views”Code View is the part of the HTML Editor where you inspect the real source behind the visual page. This overview shows how to reach it, what kinds of tasks belong there, and why understanding its role makes later find, replace, format, and line-navigation commands easier to use well.
Editor
Section titled “Editor”Edit markup directly in Code View.
How To’s
Section titled “How To’s”Goal-based how-to guides for Code View, focused on editing, navigation, and productivity.
Code View How To’s
Section titled “Code View How To’s”Choose a walkthrough.
Find in Structure
Section titled “Find in Structure”Learn how to find in Structure in the Page panels. Use this tour as a quick refresher.
Finding something in structure is faster once you treat the page tree as a navigation tool instead of a static outline. This how-to starts from that goal, then explains how locating the right node gives you the context you need before editing, inserting, or inspecting anything else.
Open Structure
Section titled “Open Structure”Switch to the Structure tab.
Search
Section titled “Search”Use the search box to filter and jump to matching nodes. This step matters because Search is part of the Structure panel, and understanding that context makes the next action easier to repeat in your own project.
Pick a result
Section titled “Pick a result”Select a matching node in the tree to focus it. This step matters because Pick a result is part of the Structure panel, and understanding that context makes the next action easier to repeat in your own project.
Use the AI Assistant
Section titled “Use the AI Assistant”Learn how to use the AI Assistant in the Page panels. Use this tour as a quick refresher.
Using the AI assistant works best when you treat it as a contextual helper tied to the page you are editing. This how-to begins with that framing, then shows how to approach the assistant so its suggestions stay grounded in the current page structure and editing goal.
Open AI Assistant
Section titled “Open AI Assistant”Switch to the AI Assistant tab. This step matters because Open AI Assistant is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
Write a prompt
Section titled “Write a prompt”Describe what you want to do. Use the suggested actions to apply changes. This step matters because Write a prompt is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
Apply changes
Section titled “Apply changes”Review the suggested edits and apply them when ready. This step matters because Apply changes is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
Debug with Network
Section titled “Debug with Network”Learn how to debug with Network in the Page panels. Use this tour as a quick refresher.
Network debugging is easier when you start with the page-level tools that expose request activity in context. This how-to frames the goal before you click anything, then shows how the HTML Editor helps you connect a page action to the network behavior you need to inspect.
Open Network
Section titled “Open Network”Switch to the Network tab. This step matters because Open Network is part of the Network panel, and understanding that context makes the next action easier to repeat in your own project.
Watch requests
Section titled “Watch requests”Preview the page and look for XHR/fetch and asset requests appearing here. This step matters because Watch requests is part of the Network panel, and understanding that context makes the next action easier to repeat in your own project.
Inspect a request
Section titled “Inspect a request”Select a request to inspect its headers and response. This step matters because Inspect a request is part of the Network panel, and understanding that context makes the next action easier to repeat in your own project.
App Structure Overview
Section titled “App Structure Overview”Explore HTML Editor Structure: key areas and how they work together.
Structure panel
Section titled “Structure panel”Use the Structure panel to navigate the page’s element hierarchy, select elements, and perform element-level operations.
Toolbar
Section titled “Toolbar”Use the toolbar to adjust what’s shown in the tree, manage frameworks, and quickly search. This step matters because Toolbar is part of the Structure panel, and understanding that context makes the next action easier to repeat in your own project.
Element tree
Section titled “Element tree”The tree reflects your current page. Selecting a node usually selects the element in the editor.
How To’s
Section titled “How To’s”Goal-based how-to guides for the App Structure panel, focused on navigation, selection, and organizing.
Structure How To’s
Section titled “Structure How To’s”Pick a task to learn step-by-step.
HTML Editor: App Structure Panel Reference
Section titled “HTML Editor: App Structure Panel Reference”Reference tour for the App Structure panel: panel layout, navigation tools, element selection, and how to work through the page DOM hierarchy.
Reference overview
Section titled “Reference overview”Use this reference tour as a map of the Structure panel before you depend on it for navigation and editing. It highlights the parts of the tree you revisit most often, explains what each area is responsible for, and helps you remember where structural page actions begin.
Structure toolbar reference
Section titled “Structure toolbar reference”Show All Elements: include hidden/framework-specific nodes. Manage frameworks: enable/disable framework visibility. Find Elements: search the tree. ?: open Structure panel tours. Menu (⋯): Collapse All, Expand All, Refresh.
Structure context menu reference
Section titled “Structure context menu reference”Right-click an element in the tree to access Insert Before/After/Child, Move to Separate File, Duplicate, and Delete.
AI Panel Overview
Section titled “AI Panel Overview”Get oriented in the AI panel: key tools, common workflows, and where to look next.
AI panel
Section titled “AI panel”Use this overview to place the AI area inside the broader HTML Editor workflow before you start asking it for changes. You will see where the panel fits, what kind of help it is designed to provide, and how to treat it as an editing aid instead of a black box.
Conversation area
Section titled “Conversation area”Your prompts and responses appear here. Use the How To’s to learn common workflows. This step matters because Conversation area is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
AI Panel Reference
Section titled “AI Panel Reference”AI panel reference for the HTML Editor: modes, toolbar controls, and common text actions.
Reference overview
Section titled “Reference overview”This reference walks through the AI panel controls and common workflow patterns. This step matters because Reference overview is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
Toolbar
Section titled “Toolbar”Use the toolbar to change modes, start new chats, open history, and pick models. This step matters because Toolbar is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
Text actions
Section titled “Text actions”Use text actions to copy, reuse, or refine content as you iterate. This step matters because Text actions is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
Conversation
Section titled “Conversation”Use the conversation area to review results, copy content, and iterate. If you’re not seeing options yet, models may still be loading.
How To: Ask a question
Section titled “How To: Ask a question”Learn how to ask a question in the AI panel. Use this tour as a quick refresher.
Goal: Ask a question
Section titled “Goal: Ask a question”Ask mode is best for explanations and guidance without applying changes automatically. This step matters because Goal: Ask a question is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
Set mode to Ask
Section titled “Set mode to Ask”Make sure the assistant is in Ask mode before you submit your question. This step matters because Set mode to Ask is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
Write your question
Section titled “Write your question”Be specific and include relevant context (file, component, goal). This step matters because Write your question is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
Refine the question or try a different model if needed. This step matters because Done is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
How To: Use Act mode
Section titled “How To: Use Act mode”Learn how to use Act mode in the AI panel. Use this tour as a quick refresher.
Goal: Use Act mode
Section titled “Goal: Use Act mode”Act mode is best when you want the assistant to propose or perform concrete changes. This step matters because Goal: Use Act mode is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
Switch to Act
Section titled “Switch to Act”Switch the mode to Act before requesting edits. This step matters because Switch to Act is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
Review the result
Section titled “Review the result”Review the proposed changes and apply only what you understand. This step matters because Review the result is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
If needed, start a new chat to reset context. This step matters because Done is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
How To: Choose a model
Section titled “How To: Choose a model”Learn how to choose a model in the AI panel. Use this tour as a quick refresher.
Goal: Choose a model
Section titled “Goal: Choose a model”Different models can be better at different tasks (speed vs. quality). This step matters because Goal: Choose a model is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
Open the model menu
Section titled “Open the model menu”Open the model selector in the AI panel. This step matters because Open the model menu is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
Confirm selection
Section titled “Confirm selection”Select a model and continue with your prompt. This step matters because Confirm selection is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
Try the same prompt with a different model to compare. This step matters because Done is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
How To: Use history
Section titled “How To: Use history”Learn how to use history in the AI panel. Use this tour as a quick refresher.
Goal: Use history
Section titled “Goal: Use history”History helps you find previous prompts and responses. This step matters because Goal: Use history is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
Toggle history
Section titled “Toggle history”Open the history list to review earlier chats. This step matters because Toggle history is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
Reuse a previous prompt
Section titled “Reuse a previous prompt”Reuse a prompt when you want similar results on a new page. This step matters because Reuse a previous prompt is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
Use New to start fresh when needed. This step matters because Done is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
How To: Stop generation
Section titled “How To: Stop generation”Learn how to stop generation in the AI panel. Use this tour as a quick refresher.
Goal: Stop generation
Section titled “Goal: Stop generation”Stop cancels the current generation if it’s taking too long or going off-track. This step matters because Goal: Stop generation is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
Use Stop
Section titled “Use Stop”Use Stop to cancel output, then adjust your prompt. This step matters because Use Stop is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
You can adjust the prompt and try again. This step matters because Done is part of the Page Panels area, and understanding that context makes the next action easier to repeat in your own project.
Network Panel Overview
Section titled “Network Panel Overview”Explore HTML Editor Network: Network panel and Requests tree.
Orient yourself in Page Panels area
Section titled “Orient yourself in Page Panels area”Start with the wider context in the Page Panels area so the next control makes sense in the full workflow. In the next step, you will focus on Network panel and see how it fits into this area.
Network panel
Section titled “Network panel”The Network panel shows requests made by the Design view, including XHR and asset loading.
Requests tree
Section titled “Requests tree”Each request appears as a tree node. Expand nodes to inspect details like headers and payloads.
How To’s
Section titled “How To’s”Goal-based how-to guides for the Network panel, focused on inspecting requests and debugging.
Orient yourself in Page Panels area
Section titled “Orient yourself in Page Panels area”Start with the wider context in the Page Panels area so the next control makes sense in the full workflow. In the next step, you will focus on Network How To’s and see how it fits into this area.
Network How To’s
Section titled “Network How To’s”Choose a quick walkthrough from the list. This step matters because Network How To’s is part of the Network panel, and understanding that context makes the next action easier to repeat in your own project.
HTML Editor: Network Panel Reference
Section titled “HTML Editor: Network Panel Reference”Reference tour for the Network panel: request and response inspection, timing details, HTTP diagnostics, and how to debug network activity while building.
Orient yourself in Page Panels area
Section titled “Orient yourself in Page Panels area”Start with the wider context in the Page Panels area so the next control makes sense in the full workflow. In the next step, you will focus on Toolbar and see how it fits into this area.
Toolbar
Section titled “Toolbar”Use the toolbar to filter requests, clear the list, and control what you see. This step matters because Toolbar is part of the Network panel, and understanding that context makes the next action easier to repeat in your own project.
Request context menu
Section titled “Request context menu”Right-click a request to access actions like copying URLs or opening in a new tab. This step matters because Request context menu is part of the Network panel, and understanding that context makes the next action easier to repeat in your own project.
Tree details
Section titled “Tree details”Expand a request node to inspect request/response headers, body, and timing. This step matters because Tree details is part of the Network panel, and understanding that context makes the next action easier to repeat in your own project.
Bind a property
Section titled “Bind a property”Learn how to bind a property in the Selection panels. Use this tour as a quick refresher.
Properties tab
Section titled “Properties tab”Property binding makes more sense when you first see where selection and data-aware editing meet. This how-to starts from that context, then explains why opening the right panel is the key step before you connect an element property to dynamic data.
Choose a property
Section titled “Choose a property”Find the property you want to bind for the selected element.
Pick a dynamic value
Section titled “Pick a dynamic value”Use a dynamic data value so it updates automatically. This step matters because Pick a dynamic value is part of the Properties panel, and understanding that context makes the next action easier to repeat in your own project.
Adjust layout
Section titled “Adjust layout”Learn how to adjust layout in the Selection panels. Use this tour as a quick refresher.
Open Design
Section titled “Open Design”Layout adjustments become easier when you begin from the selection surfaces that expose the right controls in context. This how-to starts there, then shows how selecting the right element and opening the correct panel keeps layout changes intentional instead of trial and error.
Adjust layout controls
Section titled “Adjust layout controls”Use the Design panel controls to tweak layout-related settings for the selected element.
Verify in the editor
Section titled “Verify in the editor”Check the result on the selected element in the editor.
Apply classes
Section titled “Apply classes”Learn how to apply classes in the Selection panels. Use this tour as a quick refresher.
Open Styles
Section titled “Open Styles”Applying classes is safer when you start from the selection workflow that makes the target element explicit. This how-to begins with that panel context, then explains how class changes fit into everyday page editing without losing track of which element you are styling.
Add a class
Section titled “Add a class”Add one or more classes to the selected element.
Override styles
Section titled “Override styles”Create overrides to customize styles without leaving the editor. This step matters because Override styles is part of the Styles panel, and understanding that context makes the next action easier to repeat in your own project.
Inspect data
Section titled “Inspect data”Learn how to inspect data in the Selection panels. Use this tour as a quick refresher.
Open Data
Section titled “Open Data”Inspecting data from a selected element works best when you understand the handoff between the page surface and the data tools. This how-to begins with that opening move, then shows how selection gives the Data Panel the context it needs for meaningful inspection.
Explore datasets
Section titled “Explore datasets”Browse datasets and values available for the selected element.
Verify scope
Section titled “Verify scope”Confirm you are inspecting the correct data for the current selection. This step matters because Verify scope is part of the Data panel, and understanding that context makes the next action easier to repeat in your own project.
Inspector Panel Overview
Section titled “Inspector Panel Overview”Explore HTML Editor Inspector Panel: key areas and how they work together.
Inspector tab
Section titled “Inspector tab”The inspector is where the currently selected element exposes its editable settings in a practical, property-driven layout. This overview explains why that matters, where the panel fits in the HTML Editor workflow, and how the focused how-to tours build on this same surface.
Inspector toolbar
Section titled “Inspector toolbar”Use the toolbar to filter properties, open help, and access panel options.
Inspector controls
Section titled “Inspector controls”Edit the selected element’s properties using the controls in the Inspector. This step matters because Inspector controls is part of the Properties panel, and understanding that context makes the next action easier to repeat in your own project.
How To’s
Section titled “How To’s”Goal-based how-to guides for the Inspector panel, including selection and editing common attributes.
Selection context
Section titled “Selection context”Use this menu when the inspector problem you have is specific and repeatable rather than broad and conceptual. It gathers the common inspector tasks in one place, so you can start from the job you need to complete and jump into the focused walkthrough that matches it.
Inspector How To’s
Section titled “Inspector How To’s”Choose a walkthrough.
Inspector Panel Reference
Section titled “Inspector Panel Reference”Find your way around HTML Editor Inspector Panel: where to find the main controls and what they do.
Selection context
Section titled “Selection context”This setup step selects the page body so the Inspector reference shows populated controls.
Inspector reference
Section titled “Inspector reference”Treat this reference tour as a map of the inspector before you rely on it for fast element edits. It highlights the groups and controls you revisit most often, explains what each part is responsible for, and helps you remember where to return when a property needs review.
Toolbar
Section titled “Toolbar”Use Filter to find controls, Help for guidance, and the menu for more options. This step matters because Toolbar is part of the Properties panel, and understanding that context makes the next action easier to repeat in your own project.
Context menu
Section titled “Context menu”Right-click controls or groups for additional actions. This step matters because Context menu is part of the Properties panel, and understanding that context makes the next action easier to repeat in your own project.
Inspector body
Section titled “Inspector body”Controls are grouped by category. Changes apply to the currently selected element. This step matters because Inspector body is part of the Properties panel, and understanding that context makes the next action easier to repeat in your own project.
Design Panel Overview
Section titled “Design Panel Overview”Explore HTML Editor Design Panel: key areas and how they work together.
Design tab
Section titled “Design tab”The Design Panel is where selected elements expose their editable visual properties in a structured way. This overview explains what the panel is for, how it supports everyday page editing, and why later how-to tours build on this surface instead of sending you straight into raw markup.
Design toolbar
Section titled “Design toolbar”Use the toolbar to filter, change modes, and access panel actions.
Design controls
Section titled “Design controls”Adjust layout and presets for the current selection. This step matters because Design controls is part of Selection Panels Design Toolbar, and understanding that context makes the next action easier to repeat in your own project.
How To’s
Section titled “How To’s”Goal-based how-to guides for the Design panel, from inserting elements to configuring properties.
Design How To’s
Section titled “Design How To’s”Choose a walkthrough.
Design Panel Reference
Section titled “Design Panel Reference”Find your way around HTML Editor Design Panel: where to find the main controls and what they do.
Design panel reference
Section titled “Design panel reference”Treat this reference tour as a map of the Design Panel before you rely on it for fast edits. It points out the areas and controls you revisit most often, explains what each part is responsible for, and helps you remember where to return when a property change is needed.
Toolbar
Section titled “Toolbar”The toolbar provides filtering, options, and access to help/tours. This step matters because Toolbar is part of Selection Panels Design Toolbar, and understanding that context makes the next action easier to repeat in your own project.
Context menu
Section titled “Context menu”Right-click controls for additional actions. This step matters because Context menu is part of Selection Panels Design Toolbar, and understanding that context makes the next action easier to repeat in your own project.
Panel body
Section titled “Panel body”Controls may change depending on what you select in Design View. This step matters because Panel body is part of Selection Panels Design Toolbar, and understanding that context makes the next action easier to repeat in your own project.
Styles Panel Overview
Section titled “Styles Panel Overview”Explore HTML Editor Styles Panel: key areas and how they work together.
Styles tab
Section titled “Styles tab”The Styles panel is where visual decisions become traceable CSS rules instead of vague design changes. This overview explains what the panel is for, how it supports everyday styling work, and why the focused how-to tours build on it for search, cloning, source jumps, and rule creation.
Styles toolbar
Section titled “Styles toolbar”Search rules, toggle overloaded styles, add new rules, and refresh.
Rules and values
Section titled “Rules and values”Browse rules affecting the selection and tweak values.
How To’s
Section titled “How To’s”Goal-based how-to guides for the Styles panel, including inspection, rules, and jumping to source.
Styles How To’s
Section titled “Styles How To’s”Choose a walkthrough.
HTML Editor: Styles Panel Reference
Section titled “HTML Editor: Styles Panel Reference”Reference tour for the Styles panel: panel layout, styling controls organization, CSS rules inspection, and how to apply and debug styles.
Styles panel reference
Section titled “Styles panel reference”Treat this reference tour as a map of the Styles panel before you depend on it for faster CSS work. It highlights the areas and controls you revisit most often, explains what each one is responsible for, and helps you remember where to return when styling needs inspection or change.
Toolbar
Section titled “Toolbar”Search, toggle overloaded styles, add rules, refresh, and open help/tours.
Rule menus
Section titled “Rule menus”Rule menus let you clone, remove, or jump to source. This step matters because Rule menus is part of the Styles panel, and understanding that context makes the next action easier to repeat in your own project.
Rule values
Section titled “Rule values”Edit values to update the selected element’s styling. This step matters because Rule values is part of the Styles panel, and understanding that context makes the next action easier to repeat in your own project.
Data Panel Overview
Section titled “Data Panel Overview”Explore HTML Editor Data Panel: key areas and how they work together.
Data tab
Section titled “Data tab”The Data Panel shows the live values flowing through your page while you preview and test it. This overview explains why that matters for understanding bindings, where the panel fits in the HTML Editor, and how it supports the deeper inspection tasks covered in the focused how-to tours.
Data toolbar
Section titled “Data toolbar”Refresh the view and access help/tours.
Datasets
Section titled “Datasets”Inspect datasets and values that are available for the current selection.
How To’s
Section titled “How To’s”Goal-based how-to guides for the Data panel, including sources, bindings, and pickers.
Data How To’s
Section titled “Data How To’s”Choose a walkthrough.
Data Panel Reference
Section titled “Data Panel Reference”Find your way around HTML Editor Data Panel: where to find the main controls and what they do.
Data panel reference
Section titled “Data panel reference”Use this reference tour as a map of the Data Panel before you depend on it for debugging. It highlights the areas you revisit while inspecting live values, explains what each part is responsible for, and helps you remember where to return when a binding behaves unexpectedly.
Toolbar
Section titled “Toolbar”Refresh updates the view; Help provides guidance and tours.
Context menu
Section titled “Context menu”Right-click items for additional actions like copy. This step matters because Context menu is part of the Data panel, and understanding that context makes the next action easier to repeat in your own project.
Tree and values
Section titled “Tree and values”Expand items to inspect nested structures and values. This step matters because Tree and values is part of the Data panel, and understanding that context makes the next action easier to repeat in your own project.
How To: Select elements
Section titled “How To: Select elements”Learn how to select elements in Design View. Use this tour as a quick refresher.
Click to select
Section titled “Click to select”Selection is the basic action that makes every later panel change meaningful. This how-to begins with the click target in Design View, then explains how choosing the right element anchors the rest of the editing workflow and prevents you from changing the wrong part of the page.
Selection tools
Section titled “Selection tools”Use the Design toolbar to help with selection and editing.
How To: Insert component
Section titled “How To: Insert component”Learn how to insert component in Design View. Use this tour as a quick refresher.
Orient yourself in Structure panel
Section titled “Orient yourself in Structure panel”Start with the wider context in the Structure panel so the next control makes sense in the full workflow. In the next step, you will focus on Insertion target and see how it fits into this area.
Insertion target
Section titled “Insertion target”We’ll select the element you want to insert into (for example body) in the App Structure. This step matters because Insertion target is part of Page Panels Structure Body, and understanding that context makes the next action easier to repeat in your own project.
Context menu
Section titled “Context menu”We’ll open the Structure context menu for the selected element. This step matters because Context menu is part of Page Panels Structure Body, and understanding that context makes the next action easier to repeat in your own project.
Insert picker
Section titled “Insert picker”We’ll use Insert Child to open the Components picker. This step matters because Insert picker is part of Page Panels Structure Body, and understanding that context makes the next action easier to repeat in your own project.
Search and insert
Section titled “Search and insert”Search for a component and insert it. This step matters because Search and insert is part of Components Popup Anchor Right, and understanding that context makes the next action easier to repeat in your own project.
How To: Use Split view
Section titled “How To: Use Split view”Learn how to use Split view in Design View. Use this tour as a quick refresher.
Switch to Split
Section titled “Switch to Split”Using Split from Design View is about keeping visual feedback and source context connected while you work. This how-to begins with the switch control itself, then explains how the combined layout helps you verify selections, inspect markup, and move faster between intent and implementation.
Edit and verify
Section titled “Edit and verify”Edit in Code and verify the result in Design.
How To: Toggle App Connect
Section titled “How To: Toggle App Connect”Learn how to toggle App Connect in Design View. Use this tour as a quick refresher.
Toggle App Connect
Section titled “Toggle App Connect”Toggling the App Connect overlay is useful when you need to change how much reactive information is visible on the canvas. This how-to starts from the toolbar switch, then shows why the toggle helps you move between cleaner visual editing and deeper reactive inspection.
Check overlays
Section titled “Check overlays”When enabled, App Connect overlays can help visualize bindings.
How To: Reload
Section titled “How To: Reload”Learn how to reload in Design View. Use this tour as a quick refresher.
Reload
Section titled “Reload”Reloading Design View is useful when the rendered canvas no longer matches the current page state or recent change. This how-to starts from the toolbar control, then explains when a refresh is the right move and how it helps you confirm that the canvas is showing current output.
Verify
Section titled “Verify”After reload, verify your canvas and selection.
How To: Find
Section titled “How To: Find”Learn how to find in Code View. Use this tour as a quick refresher.
Open Find
Section titled “Open Find”Finding text is one of the quickest ways to orient yourself in a large page before making a change. This how-to starts by locating the Find control in Code View, then shows why it matters for navigation, review, and fast corrections inside the HTML Editor.
Navigate results
Section titled “Navigate results”Step through matches to reach the section you want.
How To: Replace
Section titled “How To: Replace”Learn how to replace in Code View. Use this tour as a quick refresher.
Open Replace
Section titled “Open Replace”Replace becomes powerful when you understand where it lives and when to trust it. This how-to starts from the Code View control itself, then frames the workflow you use for safe repeated edits, quick naming cleanup, and small refactors that should stay inside the current file.
Replace carefully and verify the result.
How To: Go to line
Section titled “How To: Go to line”Learn how to go to line in Code View. Use this tour as a quick refresher.
Go to line
Section titled “Go to line”Go to Line is the quickest bridge between a known location and the exact code you need to inspect. This short how-to places the command in context, then shows why it is useful when an error message, copied reference, or teammate points you to a specific part of the file.
Confirm
Section titled “Confirm”Confirm to move the cursor and focus the editor at that position.
How To: Format code
Section titled “How To: Format code”Learn how to format code in Code View. Use this tour as a quick refresher.
Format
Section titled “Format”Formatting code is not just about aesthetics; it is what makes structure readable before you debug or refactor. This how-to shows where the formatting command lives in Code View and why using it early helps you read hierarchy, attributes, and nested markup more confidently.
Verify
Section titled “Verify”Review the changes before saving.
How To: Use Split view
Section titled “How To: Use Split view”Learn how to use Split view in Code View. Use this tour as a quick refresher.
Switch to Split
Section titled “Switch to Split”Split view matters when you need code context and visual feedback at the same time. This how-to shows where to switch into the mixed layout, why it helps you verify edits faster, and how it fits into the normal back-and-forth rhythm of building pages in Wappler.
Edit and verify
Section titled “Edit and verify”Make edits in Code and verify them in Design.
How To: Find an element
Section titled “How To: Find an element”Learn how to find an element in the App Structure panel. Use this tour as a quick refresher.
Goal: Find an element
Section titled “Goal: Find an element”Finding something in Structure matters because fast navigation keeps larger pages manageable. This how-to starts with that goal in mind, then explains how the tree helps you jump to the right element before you inspect it, move it, or change related properties elsewhere in the editor.
Search the tree
Section titled “Search the tree”Type into the search box to filter the element tree. This step matters because Search the tree is part of the Structure panel, and understanding that context makes the next action easier to repeat in your own project.
Select the result
Section titled “Select the result”Pick the element you want from the filtered tree. This step matters because Select the result is part of the Structure panel, and understanding that context makes the next action easier to repeat in your own project.
You can repeat this anytime to quickly locate elements. This step matters because Done is part of the Structure panel, and understanding that context makes the next action easier to repeat in your own project.
How To: Insert an element
Section titled “How To: Insert an element”Learn how to insert an element in the App Structure panel. Use this tour as a quick refresher.
Goal: Insert an element
Section titled “Goal: Insert an element”Insertion from Structure works best when you first understand the tree as a map of valid placement points. This how-to starts from that idea, then explains how choosing the correct node keeps new content organized and reduces cleanup after the component is added.
Open the context menu
Section titled “Open the context menu”Right-click an element to access Insert options. This step matters because Open the context menu is part of the Structure panel, and understanding that context makes the next action easier to repeat in your own project.
Choose an Insert action
Section titled “Choose an Insert action”Pick Insert Before, Insert After, or Insert Child depending on where you want the new element.
Use Insert Child when you want to nest the new element.
How To: Duplicate an element
Section titled “How To: Duplicate an element”Learn how to duplicate an element in the App Structure panel.
Goal: Duplicate an element
Section titled “Goal: Duplicate an element”Duplicating from Structure is easiest when you think of the tree as a safe way to act on the exact node you need. This how-to frames that goal first, then shows how duplication fits into normal editing when you want to preserve existing setup and repeat a similar element.
Duplicate from the tree
Section titled “Duplicate from the tree”Use the context menu Duplicate action on the selected element. This step matters because Duplicate from the tree is part of the Structure panel, and understanding that context makes the next action easier to repeat in your own project.
Verify the copy
Section titled “Verify the copy”Look for the new element in the tree, then rename or adjust it as needed.
If you duplicated the wrong element, use Undo and try again.
How To: Move content to a separate file
Section titled “How To: Move content to a separate file”Learn how to move content to a separate file in the App Structure panel.
Goal: Move content to a separate file
Section titled “Goal: Move content to a separate file”Moving content to a file is easier when you first see the structure tree as the place where reuse decisions begin. This how-to frames the goal in context, then shows why the correct source node matters before you turn a piece of page structure into a reusable file.
Move to Separate File
Section titled “Move to Separate File”Right-click the element and use Move to Separate File. This step matters because Move to Separate File is part of the Structure panel, and understanding that context makes the next action easier to repeat in your own project.
Confirm the new file
Section titled “Confirm the new file”Follow the prompt to name the file and confirm the action.
This is useful for shared sections like headers, footers, or repeated blocks.
How To: Manage frameworks & visibility
Section titled “How To: Manage frameworks & visibility”Learn how to manage frameworks & visibility in the App Structure panel.
Goal: Manage frameworks & visibility
Section titled “Goal: Manage frameworks & visibility”Framework-related structure choices are easier to understand when you first see how the page tree reflects the components Wappler manages for you. This how-to frames that connection, then shows why recognizing framework-aware nodes helps you edit with more confidence.
Show all elements
Section titled “Show all elements”Use Show All to display elements that might be hidden or filtered by framework rules. This step matters because Show all elements is part of the Structure panel, and understanding that context makes the next action easier to repeat in your own project.
Manage frameworks
Section titled “Manage frameworks”Use Manage frameworks to enable/disable framework-specific features and element sets. This step matters because Manage frameworks is part of the Structure panel, and understanding that context makes the next action easier to repeat in your own project.
If the tree looks incomplete, try Show All first. This step matters because Done is part of the Structure panel, and understanding that context makes the next action easier to repeat in your own project.
How To: Filter properties
Section titled “How To: Filter properties”Learn how to filter properties in the Inspector panel. Use this tour as a quick refresher.
Filter
Section titled “Filter”Filtering the inspector is useful when the available fields are broader than the change you have in mind. This how-to begins with the filter control itself, then explains how narrowing the visible options helps you reach the right setting faster and with less guesswork.
Clear filter
Section titled “Clear filter”Clear the filter to return to the full list of controls.
How To: Edit a property
Section titled “How To: Edit a property”Learn how to edit a property in the Inspector panel. Use this tour as a quick refresher.
Select a control
Section titled “Select a control”Editing through the inspector is easier once you see it as the direct-property side of element selection. This how-to starts from the selected element context, then shows how the inspector helps you make precise adjustments without losing track of what part of the page you are changing.
Apply the change
Section titled “Apply the change”Update the value. Wappler applies it to the current selection.
How To: Navigate the inspector
Section titled “How To: Navigate the inspector”Learn how to navigate the inspector in the Inspector panel. Use this tour as a quick refresher.
Expand groups
Section titled “Expand groups”Inspector navigation matters because the panel is only useful if you can quickly reach the right group of settings. This how-to starts with the grouping model itself, then shows how moving between sections helps you understand where each kind of property belongs.
Scroll
Section titled “Scroll”Scroll to find controls. Combine with Filter for faster navigation.
How To: Refresh the inspector
Section titled “How To: Refresh the inspector”Learn how to refresh the inspector in the Inspector panel. Use this tour as a quick refresher.
Refresh
Section titled “Refresh”Refreshing the inspector is helpful when the current fields no longer match the selected element or recent change. This how-to begins at the refresh action itself and shows why reloading the panel is the fastest way to restore trust in what the inspector is displaying.
How To: Open Inspector tours
Section titled “How To: Open Inspector tours”Learn how to open Inspector tours in the Inspector panel. Use this tour as a quick refresher.
Inspector tours
Section titled “Inspector tours”Knowing how to reopen tours from the inspector keeps help close to the workflow instead of forcing you to break context. This how-to starts with the tours entry point, then explains why using in-place guidance is often faster than hunting through menus when you need a reminder.
How To: Filter properties
Section titled “How To: Filter properties”Learn how to filter properties in the Design panel. Use this tour as a quick refresher.
Filter
Section titled “Filter”Filtering the Design Panel matters once the available controls become too noisy to scan by eye. This how-to starts with the filter field itself, then explains how narrowing the list helps you reach the right property faster when you already know the kind of change you want.
Filtered results
Section titled “Filtered results”Only matching controls remain visible in the panel. This step matters because Filtered results is part of Selection Panels Design Toolbar, and understanding that context makes the next action easier to repeat in your own project.
How To: Use a pseudo-state
Section titled “How To: Use a pseudo-state”Learn how to use a pseudo-state in the Design panel. Use this tour as a quick refresher.
Choose a state
Section titled “Choose a state”State controls matter because many design changes only make sense in a specific interaction or responsive condition. This how-to starts by locating the state control in context, then shows why changing state is the key to previewing hover, active, or alternate visual conditions safely.
Edit within the state
Section titled “Edit within the state”Changes apply to the selected state and help you fine-tune interactions. This step matters because Edit within the state is part of Selection Panels Design Toolbar, and understanding that context makes the next action easier to repeat in your own project.
How To: Switch the selector
Section titled “How To: Switch the selector”Learn how to switch the selector in the Design panel. Use this tour as a quick refresher.
Choose a selector
Section titled “Choose a selector”The selector helper becomes valuable when you need to understand exactly which rule or target you are editing. This how-to begins in the Design Panel context, then explains how choosing the correct selector changes the scope of your edits and avoids unintended styling drift.
Edit the chosen selector
Section titled “Edit the chosen selector”Update values and verify the results in Design View. This step matters because Edit the chosen selector is part of Selection Panels Design Toolbar, and understanding that context makes the next action easier to repeat in your own project.
How To: Edit a property
Section titled “How To: Edit a property”Learn how to edit a property in the Design panel. Use this tour as a quick refresher.
Select an element
Section titled “Select an element”Editing a property is easier when you first recognize the panel as the place where visual choices become structured settings. This how-to begins by locating the Design Panel in context, then shows how a single property edit influences the selected element in the page workflow.
Change a value
Section titled “Change a value”Edit a property in the Design panel and verify the result.
How To: Refresh the panel
Section titled “How To: Refresh the panel”Learn how to refresh the panel in the Design panel. Use this tour as a quick refresher.
Refresh
Section titled “Refresh”Refreshing the Design Panel is useful when the current property list no longer matches the element or state you expect. This how-to shows where the refresh action lives and why it helps you re-synchronize the panel before you keep editing the selected element.
Verify
Section titled “Verify”The panel re-evaluates its controls for the current selection. This step matters because Verify is part of Selection Panels Design Toolbar, and understanding that context makes the next action easier to repeat in your own project.
How To: Search styles
Section titled “How To: Search styles”Learn how to search styles in the Styles panel. Use this tour as a quick refresher.
Search
Section titled “Search”Searching styles is the quickest way to narrow a large stylesheet down to the rule or selector you care about. This how-to frames that goal first, then shows how the search control helps you move from broad visual intent to a specific rule faster.
Results
Section titled “Results”Only matching rules remain visible.
How To: Toggle overloaded styles
Section titled “How To: Toggle overloaded styles”Learn how to toggle overloaded styles in the Styles panel. Use this tour as a quick refresher.
Overloaded styles
Section titled “Overloaded styles”Overloaded styles only make sense once you understand that more than one rule can compete to style the same element. This how-to starts from the panel control in context, then explains why toggling that view helps you debug cascade conflicts and inheritance more confidently.
Verify
Section titled “Verify”The list updates to hide or show overloaded entries.
How To: Insert a new rule
Section titled “How To: Insert a new rule”Learn how to insert a new rule in the Styles panel. Use this tour as a quick refresher.
Add rule
Section titled “Add rule”Adding a new rule is easier when you first understand where the Styles panel expects structural changes to begin. This how-to starts from that insertion point, then explains how creating a rule in the right place keeps the stylesheet easier to scan and maintain later.
Select an element
Section titled “Select an element”Select an element in Design View to apply the rule to the intended target.
How To: Jump to CSS source
Section titled “How To: Jump to CSS source”Learn how to jump to CSS source in the Styles panel. Use this tour as a quick refresher.
Locate source
Section titled “Locate source”Jumping to source matters when a visual style decision needs direct code inspection or a broader stylesheet change. This how-to begins with the panel control itself, then shows why tracing a rule back to its source is the fastest way to understand where the styling really lives.
Edit source
Section titled “Edit source”Editing the CSS directly gives you precise control. We’ll open the source so you can make targeted changes.
How To: Clone a rule
Section titled “How To: Clone a rule”Learn how to clone a rule in the Styles panel. Use this tour as a quick refresher.
Clone rule
Section titled “Clone rule”Cloning a style rule is useful when you want to reuse a working pattern without rebuilding it from scratch. This how-to starts with the menu entry in context, then explains why copying a rule is often safer than editing the original when you need a nearby variation.
Verify
Section titled “Verify”A new rule appears that you can customize without changing the original.
How To: Refresh data
Section titled “How To: Refresh data”Learn how to refresh data in the Data panel. Use this tour as a quick refresher.
Refresh
Section titled “Refresh”Refreshing the Data Panel is useful when the current values no longer match what you expect after an interaction. This short how-to shows where the refresh action lives and why it is the fastest way to confirm whether the data source changed or the panel is showing stale state.
Verify
Section titled “Verify”The Data panel updates to reflect the latest state.
How To: Select an element to inspect data
Section titled “How To: Select an element to inspect data”Learn how to select an element to inspect data in the Data panel.
Select an element
Section titled “Select an element”Selecting the right element or node is what turns the Data Panel from a broad overview into a precise inspection tool. This how-to places that action in context and shows how it helps you connect a specific part of the page to the data it is currently using.
Inspect
Section titled “Inspect”Open the Data panel to see datasets for the new selection.
How To: Expand datasets
Section titled “How To: Expand datasets”Learn how to expand datasets in the Data panel. Use this tour as a quick refresher.
Expand
Section titled “Expand”Expanding the data tree is the first step to understanding what values are actually available during preview. This how-to shows where that interaction starts in the Data Panel and why opening the right branch is what makes deeper debugging and inspection possible.
Inspect deeper
Section titled “Inspect deeper”Keep expanding until you reach the values you need.
How To: Explore large arrays
Section titled “How To: Explore large arrays”Learn how to explore large arrays in the Data panel. Use this tour as a quick refresher.
Large arrays
Section titled “Large arrays”Large arrays can feel unreadable until you know how the Data Panel exposes them in manageable pieces. This how-to explains where to start, what to expect when a result set is big, and how chunked inspection helps you debug data without getting lost in volume.
Limit and filter
Section titled “Limit and filter”If possible, filter at the source (queries/formatters) to keep results manageable.
How To: Inspect values
Section titled “How To: Inspect values”Learn how to inspect values in the Data panel. Use this tour as a quick refresher.
Expand to a value
Section titled “Expand to a value”Inspecting values is how the Data Panel becomes a debugging tool instead of a tree of labels. This how-to begins with the right place to expand data, then frames how to confirm current values, understand scope, and spot problems in bindings while the page is running.
Use the value
Section titled “Use the value”Copy values or use them for bindings/conditions.
