Page Editor

The Page Editor is the visual editing environment for designing and customizing the content of Pages, Forms, and Page Slices in an ioLoop Project.

It provides the tools to build layouts, arrange Page Elements, configure their properties, and control how content is presented. The Page Editor also connects visual design with other parts of the application, including Page Flow, Data Design, Widgets, and page-specific settings.

To open the Page Editor, go to Pages & Forms and select Edit on an existing item, or create a new Page, Form, or Structured Page.

Understanding the Editing Environment

The Page Editor allows you to visually build and modify an interface without writing HTML or CSS for every element.

Rather than treating the page as a single block of content, the editor allows you to organize it into layout structures containing individual Page Elements.

For example, a dashboard could contain a header, a row of summary cards, a data display area, and navigation controls. Each part can be configured independently while remaining part of the same page.

Visual Structure and Element Configuration

Working in the Page Editor involves two closely related activities:

• Layout editing — Organizing the structure and arrangement of content, including containers, rows, columns, and the elements they contain.
• Element configuration — Editing the properties of individual elements, such as their content, appearance, dimensions, positioning, and supported interaction options.

Elements are organized within their containing layout structures. This relationship is important when designing an interface: changes to a parent container can affect the positioning and presentation of the elements inside it.

For example, changing the layout of a row may affect its columns and their content, while changing the styling of a single button generally applies to that button.

The properties available for editing depend on the selected element. A text element, image, container, and Widget each expose different configuration options.

For the available elements and their properties, see Page Elements.

Editing Different Types of Content

The Page Editor adapts to the type of item being edited.

Item	Editing experience
Page	Edit the page's visual layout and content directly.
Form	Edit the visual layout and input controls that make up the Form's user interface.
Structured Page	Manage the Page Slices used to compose the page, then open individual slices for content editing.
Page Slice	Edit the visual content of a section that belongs to one or more Structured Pages.

Pages and Forms are edited directly within the visual editor. A Structured Page opens into a composition view where its Page Slices can be managed.

When editing an individual Page Slice, the visual editing process is similar to editing a regular Page. However, changes to a shared Page Slice can affect every Structured Page that uses it.

See Editing Structured Pages for the composition and editing workflow.

Working with Page Content

A typical visual editing session involves adding content, configuring it, and refining its layout.

1. Open the item you want to edit from Pages & Forms.
2. Add or select Page Elements within the visual editing area.
3. Configure the elements, including their content, layout, appearance, and available properties.
4. Arrange the layout so the elements are organized and presented as intended.
5. Save and preview the changes to verify their appearance and behavior.

You can return to existing elements at any time to modify their properties or revise the layout.

Visual editing is not limited to static content. Elements may also display dynamic values, respond to application events, or work with data-driven components.

For detailed instructions on manipulating content within the editor, see Editing Page Content.

Connecting Visual Content with Application Behavior

The Page Editor defines the interface that users see and interact with. Other ioLoop capabilities can supply the behavior and data behind that interface.

For example, consider a page that displays a list of customer records with a Refresh button.

The implementation may involve:

1. Page Editor — Design the layout containing the Refresh button and the area where customer information will appear.
2. Data Design or Widgets — Configure how customer records should be displayed.
3. Page Flow — Define what happens when the Refresh button is clicked, retrieve permitted data, and update the displayed information.
4. Cloud Flow, when needed — Perform operations that require trusted server-side processing.

These components work together, but each has a distinct responsibility.

The visual editor manages the interface structure and presentation. Page Flow provides browser-side logic that interacts with supported Page Elements and Widgets. Backend operations are handled separately where required.

This separation makes it possible to revise an interface without necessarily rewriting its application logic, or to update its behavior while retaining the existing layout.

See Page Flow and Data Design for implementation details.

Page-Level Actions

The Page Editor provides an action bar for working with the current item.

• Flow — Opens the Page Flow editor to work on the item's browser-side behavior.
• Preview — Opens a development preview to test the interface.
• Settings — Opens the item's Page Settings.
• Save — Saves the current editing changes.
• Close — Returns to the Pages & Forms list.

These actions let you move between visual editing, behavior configuration, page settings, and testing while working on the same item.

Save retains changes in the Project's development state. It does not publish those changes to the live application.

Page Settings are managed separately from element-level properties. For example, changing the appearance of a button is an element-level edit, while configuring the page URL, access rules, or included JavaScript and CSS assets belongs in Page Settings.

Previewing and Validating Changes

The visual editing environment is intended for creating and configuring the interface. Use Preview to verify how the page behaves when executed as part of the application.

This is particularly important for interfaces that include responsive layouts, interactive elements, Widgets, Page Flow, or dynamic data.

During development, check that:

• The layout displays correctly at the intended screen sizes.
• Elements are positioned and styled as expected.
• Buttons, links, and other interactive elements behave correctly.
• Dynamic content is populated and displayed as intended.
• Forms and Widgets work within their intended application workflows.

Previewing allows you to identify problems before publishing. Because previews may execute application logic and data operations, consider the effects of any connected services or workflows.

For more information, see Previewing.

Editing with AI Wiz

You can also use AI Wiz to create or revise page content using natural-language instructions.

AI-assisted changes remain editable through the Page Editor. This allows you to combine AI-generated content with manual adjustments to layout, element properties, styling, and application behavior.

As with manually created content, review the results and use Preview to verify that the changes work as intended.

Where to Go Next

• Editing Page Content — Learn how to add, select, arrange, and configure visual content.
• Editing Structured Pages — Learn how to compose Structured Pages and edit their Page Slices.
• Page Elements — Explore the available visual components and their configuration options.