Pages and Layouts

Wappler documentation

Pages and Layouts

Start here to learn how pages and layouts fit in your workflow, then move into Pages Manager, the HTML Editor, and concrete page patterns.

Open in Wappler

Use this hub when you are working with pages. Start with the quick overview for the manager-to-editor mental model, use Choose and Open a Page for the practical handoff, or open recipes and reference when you already know the job.

Start here

Pages: Quick OverviewGet a quick overview of Pages: where page management ends, where editing begins, and how the family fits together.View guide→Choose and Open a PageA practical Pages workflow for choosing the right page or layout, opening it, and handing off cleanly into the HTML Editor.View guide→Pages ManagerFocused walkthrough of the Pages Manager panel: folder tree, page listing, and the handoff into the HTML Editor.View guide→Starter PagesUse Pages Manager to create layout, content, partial, and full pages from the new Bootstrap 5 starter catalog.View guide→

Concrete page patterns

Reusable Partials and IncludesA guided Node.js workflow for reusable partial pages, shared shell sections, and the layouts that include them.View guide→Layout pages and shared shellsUse Demo Projects HQ to understand layout pages, shared shells, and the content slot that routed pages fill.View guide→Creating template based pages and layout in Wappler with NodeJSWhen creating a website usually you want to include common elements like header/menu and a footer on all you pages. This was possible until now using SSI (server side includes) but this technique requView guide→Route-aware content pagesUse Demo Projects HQ page tiles to see the list, detail, and form pages that routing targets.View guide→Auth layouts and login pagesUse Demo Projects HQ to see why login pages use a different layout from the main app shell.View guide→

Task guides and reference

Page and layout tasksChoose a page type, edit its content and reuse layouts.Browse path→Pages ReferenceReference tour for Pages: Pages Manager UI, the HTML Editor entry points, and how page-building flows connect to layout and design tools.View guide→

Continue building

Design + Code OverviewExplore HTML Editor Design Code: key areas and how they work together.View guide→Start hereBuild a Products page in one practice project. Follow the lessons in order; each ends with a visible result.Browse path→

Related families

BootstrapBuild Bootstrap pages in Wappler: add the framework, use the grid, drop components, and style with utilities and generators.Browse path→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→

More topics

Creating Single Page Apps (SPA)A single page application (SPA) is a website that re-renders its content in response to navigation actions like clicking a link, without reloading the whole page. It consists of main template and diffView guide→