Page Overview

Key Concepts

Page Creation Options

Open Pages and choose Create Page. The available starting points include:

1. Page starters: Search eight ready-made layouts for records, customers, operations and dashboards. Review sample data, then create one disabled, unpublished draft. See Page starters.

2. Table: Create a records table, then configure its fields and data source. See Page tables.

3. Form Page Generator: Facilitates the creation of forms linked to specific endpoints, allowing data submission to a designated table. Users can customize forms by incorporating both table fields and custom fields.

4. Authentication Page Generator: Enables the creation of login and sign-up pages by selecting the corresponding authentication endpoints. This feature requires the presence of an authentication table in the database.

5. Custom Page Creator: Allows users to design pages from scratch, providing options for naming, path setting, and integration of scripts for enhanced functionality. Users can also designate alternative pages like 404 error pages.

You can also ask Twidget Assistant to prepare native page drafts together with their backend resources. Discuss requirements first, then review the complete proposal before applying it. Applying only saves drafts; test the page and its connected workflows before publishing.

Import HTML and CSS

In the page editor, choose Import HTML. Paste an HTML fragment or document, or choose a local HTML file up to 1 MB. Embedded styles are read from the HTML; use Additional CSS & asset options → CSS for additional plain CSS rules, without wrapping them in another <style> tag. Do not paste the same rules into both places.

Choose Review conversion to inspect the editable element tree and conversion notes, then Import elements. This is a supported-style conversion, not a browser-perfect copy of an arbitrary website. Scripts are removed, HTML is not executed in the dialog, and forms need their Twidget actions connected after import. Assets are not fetched during conversion. Relative images can use an approved Asset base URL; explicitly review and approve external image URLs before they may load in the editor or Preview. Review spacing, responsive behaviour, form actions and data bindings after import.

Theme tokens

Choose Theme in the page editor to set shared colours, spacing, radius and typography. Element appearance values can reference tokens such as var(--twgt-color-primary) or var(--twgt-spacing). Choose Apply theme to save the draft theme. Only values linked to these tokens change with the theme; a hard-coded colour or padding does not become theme-linked automatically. Preview desktop and mobile layouts, then publish when ready.

Page Elements and Layouts

Each page consists of various elements, which can be added through a drag-and-drop interface. Elements are managed within a layered layout structure that visually represents the hierarchical relationship among components. Pages can utilize multiple layout types, including headers, sidebars, modals, and drawers, to organize content effectively.

Creation choices also support keyboard selection: focus a choice and press Enter or Space. In Elements, click a choice or focus it and press Enter or Space to add it inside the selected container, or the nearest containing layout. With nothing selected, it is added to the main page. Drag and drop remains available for choosing an exact position.

Select an element on the canvas or in Layers, then use the breadcrumbs above its settings to select a containing element. The path shows the last three elements, with an ellipsis when earlier parents are hidden. Properties, Appearance and Events group the controls, and keep your selected group as you move between elements. Empty settings sections are hidden. Existing Elements search, Layers search, responsive previews and reusable components remain available.

Variables and Dynamic Content

Pages possess their own set of variable objects—path parameters, query parameters, and page variables. These can be defined and used throughout the page to create dynamic behaviors and content, allowing for personalized interactions based on user input or navigation context.

Page Functions

The functions feature empowers users to define custom scripts triggered by events on elements, similar to API functions. These functions can handle actions such as form submissions and button clicks. Users can access a variety of command categories specially designed for page contexts, enhancing the interactivity of web pages created within Twidget.

History and Publishing

The history function tracks changes made to pages, allowing users to revert to previous versions if needed. Changes can be previewed dynamically before publishing. Upon publishing, the changes are finalized, and the history resets, ensuring a clean versioning system.

Preview and Accessibility

Users can view their pages in a live preview mode to test functionality before making it publicly available. A unique URL is generated for each published page, allowing easy access through an eye icon in the pages tab.

Conclusion

The pages feature within Twidget offers a flexible, no-code solution for creating interactive web content. By leveraging form and authentication generators alongside customizable page layouts and dynamic functions, developers can efficiently construct robust user interfaces embedded within their applications.