Pages & Builder

Understanding Pages

Pages are the fundamental building blocks of your Webooto workspace. Every screen your visitors or team members interact with is a page. Each page is defined by a name, a URL slug, a status, and a type - and is composed of a tree of components that the visual builder renders on a drag-and-drop canvas.

Webooto distinguishes between two page types. A "website" page is publicly accessible and forms part of your external-facing site - your homepage, product catalog, blog, or contact form. An "app" page is an internal page that lives inside an Application and is only visible to authenticated users who have the appropriate role. Both types share the same builder interface, component library, and styling system, so the skills you learn building a marketing page transfer directly to internal dashboards.

Every page moves through a three-state lifecycle: draft, published, and archived. New pages start as drafts, which are invisible to visitors and serve as a safe space for experimentation. When you are satisfied with a page, you publish it to make it live. If a page is no longer needed but you want to keep its content for reference, you archive it. You can transition a page between these states at any time from the builder toolbar or the page list.

The Builder Interface

The page builder is a visual, WYSIWYG editor built around a central canvas. When you open a page for editing, the interface divides into four key areas: the Component Sidebar on the left, the Canvas in the center, the Properties Panel on the right, and the Toolbar at the top. Each area serves a distinct purpose, and together they provide a complete design environment without requiring you to write any code.

The Component Sidebar lists every available component organized into categories - Layout, Content, Forms, Navigation, and Special. You can drag a component from the sidebar and drop it onto the canvas, or click it to append it at the end of the page. The sidebar is collapsible to give you more canvas space when you need it. Below the component list, the Data Sources panel lets you connect entity datasets to your page so that components can display live data.

The Toolbar spans the top of the builder and houses the most frequently used controls: undo/redo, device preview toggles (Desktop, Tablet, Mobile), save, publish, and preview. It also provides access to the Structure View (a tree representation of your component hierarchy), the Version History modal, the Import/Export panel, and the AI Chat Assistant. The toolbar adapts to the current page type - for example, email template pages show an additional subject-line bar and an email preview button.

Component Reference

The builder ships with a curated set of components grouped into five categories. Layout components define the spatial structure of your page. Content components hold the text, images, and media your visitors see. Form components collect user input and submit it to your entities or workflows. Navigation components help users move around your site. Special components provide advanced interactive behavior.

Every component is configured through the Properties Panel when selected. Properties are divided into content-level settings (text, placeholder, data bindings) and style settings (colors, typography, spacing). All components share a common set of style and advanced properties - including background color, text color, font family, font size, border, border radius, margins, padding, position, z-index, and custom CSS classes - while each component type adds its own specific fields.

Styling & Responsive Design

Every component exposes two property groups in the Properties Panel: Style and Advanced. The Style group controls visual appearance - text color, background color, background image (with size, position, and repeat controls), font family, font size, font weight, text alignment, border, border radius, text shadow, and web stroke (WebKit text stroke). The Advanced group controls spatial layout - individual margins (top, right, bottom, left), individual padding (top, right, bottom, left), CSS position mode (static, relative, absolute, fixed, sticky), z-index, and a custom CSS class field for applying your own stylesheet rules.

Webooto provides three responsive breakpoints: Desktop, Tablet, and Mobile. Each breakpoint maintains its own independent overrides for both Style and Advanced properties. When you switch the device preview in the toolbar, the canvas resizes and the Properties Panel shows the values for that breakpoint. Any property you set at a specific breakpoint overrides the desktop default for that screen size. This means you can have different font sizes, padding values, column counts, or even background images for each device without duplicating components.

Interactive elements support hover states. The builder provides a normal/hover color system where you define the default color and the color that appears when the user hovers. This applies to text color, background color, and background opacity. Menu components extend this further with an active state for the currently selected page link. Hover-state colors are defined per breakpoint, so a button can have different hover effects on desktop versus mobile.

Data Binding & Dynamic Content

Pages become truly powerful when connected to your entity data. The Data Sources panel (accessible from the builder sidebar) lets you attach one or more entity datasets to a page. Each data source links to an entity and exposes its fields as draggable items - you can drag a field directly onto the canvas to create a pre-configured component bound to that data. The builder automatically maps entity field types to appropriate component types: a text field becomes a paragraph, a boolean becomes a checkbox, an image field becomes a media component, and so on.

Beyond data sources, the builder supports variable substitution using the {{ variable }} template syntax. Global variables are defined in variable sets and can be referenced anywhere text content appears. For example, {{ companyName }} might resolve to your business name across every page. The substitution engine supports transformation functions - {{ productTitle.capitalizeFirstLetter() }}, {{ slug.kebabCase() }}, {{ name.uppercase() }} - giving you control over how values are formatted without duplicating data.

Conditional rendering lets you show or hide components based on data context. Each page can define conditions using a rich set of operators: equals, not equals, greater than, less than, contains, starts with, ends with, is empty, is not empty, matches (regex), and more. Condition variables can come from URL parameters, page data context, or global variables. This is how you build pages that adapt their content to the current user, the current record, or any other runtime context.

Multi-Language Support

Webooto has built-in internationalization at the page level. Every page stores localized versions of four key metadata fields: title, slug, description, and keywords. When a visitor switches languages using the Language Dropdown component, the platform serves the localized slug and metadata for that locale. This means your French homepage can live at /accueil while your English homepage lives at /home, all managed from a single page record.

Inside the builder, the Language Switcher in the toolbar lets you toggle between configured languages while editing. When you select a different language, text components display their localized content so you can verify translations in context. The Multilingual Text Input component appears automatically for text-based properties, providing a tabbed interface where you type the translation for each language without leaving the properties panel.

The Language Dropdown component is a dedicated navigation widget that renders a locale selector for your visitors. It automatically detects the available languages configured for your workspace and hides itself when only one language is active. Combining localized slugs, localized metadata, and the Language Dropdown gives you a complete multilingual website experience out of the box.

Publishing & Management

The builder provides several tools for managing pages beyond basic editing. Version History tracks every saved snapshot of your page, letting you compare any historical version against the current state with a visual diff that highlights added, removed, and changed components. You can restore any previous version with a single click, which is invaluable when an edit goes wrong or when you need to revert a published page to an earlier design.

The Import/Export panel lets you serialize a page's component structure to JSON and re-import it elsewhere. This is useful for creating reusable page templates - design a layout once, export it, and import it into new pages or even different workspaces. The export includes the full component tree with all properties and data bindings, so imported pages retain their configuration without manual reconfiguration.

For document generation, Webooto includes a PDF Template Builder that reuses the same visual builder interface. You design a PDF layout with the same components and data bindings, then generate PDFs on demand from entity records. The email template builder similarly extends the page builder - you design email layouts visually, preview them with the Email Preview modal, and send them through workflows. The AI Chat Assistant is available in the builder toolbar to help you generate content, suggest layouts, and answer questions about component configuration.