Skip to content

Insert a component

Learn how to insert a component in the HTML Editor. Use this tour as a quick refresher.

Inserting a component is easier when you first understand where structure and insertion meet in the HTML Editor. This how-to begins in that shared context, then shows how Wappler guides you from selecting the right location to placing the new component where it belongs.

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.

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.

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.

Use search to quickly find the component you want to insert. This step matters because Search components is part of Components Popup Anchor Right, and understanding that context makes the next action easier to repeat in your own project.

Pick a component and confirm it appears on the page.