Wappler documentation

HTML Editor

Browse HTML Editor tours: Quick Overview, Design + Code, and Page Panels.

This menu lists the HTML Editor tours and the front-end learning paths that are easiest to approach from inside the editor. Use it to start with Quick Overview, then branch into the dedicated HTML Editor front-end hub or the related Bootstrap, App Connect, and media families.

Getting started

HTML Editor: Quick OverviewGet a quick overview of Html Editor: Main Toolbar and Design Toolbar.View guide Design + CodeBrowse Design + Code tours: Overview, How To's, and Reference.Browse path

Panels

Page PanelsBrowse Page Panels tours: Overview, How To's, and Reference.Browse path Selection PanelsBrowse Selection Panels tours: Overview, How To's, and Reference.Browse path

Front-end from HTML Editor

HTML Editor: Front-End LearningHTML Editor front-end hub linking the editor tours with Bootstrap, App Connect, forms, themes, media, and page/layout paths.Browse path Front-End ComponentsStart here for UI building in Wappler: Bootstrap components, forms, themes, and the editor surfaces used to shape frontend behavior.Browse path Media, Galleries and EffectsA Wappler learning hub for media-heavy pages, covering focused component tours for lightbox, masonry, lazy loading, slideshow, Swiper, background video, and image parallax.Browse path

Related families

App ConnectYour guided index of App Connect tours: reactive model, data components, bindings, events/actions, and common workflows — explained visually in Wappler’s panels and pickers.Browse path BootstrapBuild Bootstrap pages in Wappler: add the framework, use the grid, drop components, and style with utilities and generators.Browse path

More topics

How To'sGoal-based how-to guides for the local AI panel in the HTML Editor, focused on common page-scoped workflows.Browse path Class and ID BasicsUse classes and ids in Wappler with a clear separation between reusable styling hooks and one-off element targeting.View guide Inserting Common HTML TagsIn order to insert common HTML Tags, such as div, span, article, aside etc. you need to switch to DOM Tree panel as App Structure panel is used to display only components. We will show you how add a sView guide Drag & Drop ElementsYou 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 are dragging cannot to be placed at specifView guide Applying Responsive ImagesAdding responsive images in your Bootstrap 4 layout is another easy thing to do with Wappler. First, select the element you want to insert image into, and click the add inside button (1): Click the BaView guide Working with ElementsA practical Wappler path for everyday page editing: insert tags, move elements, apply classes, control spacing, and keep responsive images sane.Browse path