Editing Page Content

The Page Editor provides a visual environment for creating, organizing, and modifying the content of Pages, Forms, and Page Slices in an ioLoop Project.

You can build layouts, add and configure Page Elements, edit text and media, customize styling, and connect interface elements to application behavior. Most content can be created and modified visually without writing HTML or CSS.

This guide covers the common content-editing operations. For details about the available element types and their individual settings, see Page Elements.

When working with a Structured Page, its content is edited through individual Page Slices. See Editing Structured Pages for more information.

Selecting and Editing Elements

Page content is made up of individual Page Elements organized within a hierarchy of parent and child elements.

To edit an existing element, select it in the visual editing area. The editor provides access to the selected element's settings and available actions.

The properties you can modify depend on the element type. For example, a text element provides text and typography settings, while an image provides media-related settings. Layout elements expose properties for organizing and positioning their contents.

Understanding Parent and Child Elements

Elements can be nested to create more complex layouts. For example, a section may contain a row with multiple columns, each containing text, images, or buttons.

This hierarchy determines how elements are organized and how certain changes affect their contents.

• Parent elements provide structure and can control the layout, spacing, and appearance of their children.
• Child elements contain individual pieces of content or additional nested structures.
• Sibling elements belong to the same parent and are arranged according to that parent's layout and styling.

For example, changing the alignment of a row may affect every column inside it, while changing the text color of a single heading generally affects only that heading.

When selecting nested elements, verify that the intended element is selected before modifying its settings or performing actions such as deletion.

Adding Page Elements

Page Elements are the building blocks of the interface. They range from simple text and images to layout containers, interactive controls, and configured Widgets.

To add content:

1. Select the existing element or container where you want the new content to be placed.
2. Use the editor's element-adding controls to choose the element you want to insert.
3. Add the element at the desired location in the page structure.
4. Select the newly added element to configure its content, properties, and appearance.
5. Save and preview the page to verify the result.

The available insertion options depend on the selected element and the types of content it can contain.

Choosing the Right Element

Common element categories include:

Category	Typical uses
Layout	Sections, containers, rows, and columns for organizing content
Text	Headings, paragraphs, labels, descriptions, and instructions
Navigation	Links, buttons, and menus
Media	Images, icons, and other supported media content
Data Display	Tables, cards, and other visual structures for presenting information
Forms	Inputs, selections, and other controls for collecting information
Widgets	Preconfigured components providing specialized functionality

Choose elements according to their purpose rather than appearance alone.

For example, a button is appropriate for triggering an action, while a link is generally appropriate for navigation. Use a Data Table Widget when you need its built-in data display functionality, or Data Design when you need a custom repeated layout populated from application data.

For more information, see Element Library.

Arranging and Organizing Content

The Page Editor allows you to organize content into logical sections and adjust its placement within the page.

Layout elements such as containers, rows, and columns define how content is grouped and arranged.

For example, a dashboard might use:

• A header containing the application name, navigation, and account controls.
• A row of columns displaying summary cards.
• A content section containing a Data Table Widget.
• An action area containing buttons for common operations.

By separating these parts into appropriate layout elements, you can modify their appearance and arrangement independently.

Working with Nested Layouts

You can build more complex layouts by placing layout elements inside other layout elements.

For example, a container may hold a row with two columns. One column could display an image, while the other contains a heading, descriptive text, and an action button.

When working with nested layouts:

• Select the appropriate parent before adding new child elements.
• Use the relevant element arrangement controls to adjust the order and placement of content.
• Configure parent layout properties when changes should apply to a group of elements.
• Configure individual child properties when changes should apply only to specific content.

Consider how the layout will behave at different screen sizes. A multi-column desktop layout may require different spacing, sizing, or arrangement on smaller screens.

For detailed layout properties, see Element Settings.

Importing HTML

The Page Editor supports importing existing HTML markup and converting it into editable Page Elements.

This is useful when migrating existing website content, reusing HTML produced by another tool, or starting with an existing block of markup rather than building every element manually.

Importing HTML into the Page

HTML can be imported into the Page itself or into a selected element.

To import HTML at the Page level:

1. Open the Page in the Page Editor.
2. Choose Import HTML to Page from the editor toolbar.
3. Paste the HTML markup into the import dialog.
4. Confirm the import.

ioLoop processes the supplied markup, converts supported HTML into editable Page Elements, and appends the resulting content to the Page.

To import HTML into a specific element or container:

1. Select the element or container where the imported content should be added.
2. Choose Import HTML from the element actions.
3. Paste the HTML markup into the import dialog.
4. Confirm the import.

ioLoop appends the converted content inside the selected element.

The imported elements become part of the page's editable structure and can be selected, configured, moved, styled, and visually edited using the Page Editor.

Supported Content and Import Restrictions

HTML import is intended for page content and layout structure, not for importing a complete web application's implementation.

During import, ioLoop filters unsupported and unsafe markup. Elements such as scripts, stylesheets, page header metadata, iframes, embedded media tags, SVG markup, and similar unsupported structures are not imported. Internal ioLoop attributes are also removed.

The conversion preserves supported content and structure where possible, but it does not guarantee an identical reproduction of the original HTML.

For example, custom styling, scripts, external dependencies, and behaviors associated with the original markup may not be reproduced.

After importing:

• Review the generated element structure.
• Verify that text, links, and images appear as intended.
• Adjust layout and styling where necessary.
• Replace unsupported content with appropriate native Page Elements or Widgets.
• Configure Page Flow separately for interactive behavior that requires application logic.

HTML import does not automatically recreate external JavaScript behavior, backend processing, or application workflows.

For a broader explanation of how imported HTML, custom code, Head Additions, and browser-standard frontend development work together, see Standards-Based Frontend.

Clipboard Export and Clipboard Import

Clipboard Export and Clipboard Import provide a separate mechanism for transferring Page Elements within ioLoop.

Use Clipboard Export to copy existing ioLoop Page Elements in a format that can be imported elsewhere in ioLoop. Clipboard Import reads that exported content and recreates the corresponding elements at the destination.

This is useful when reusing existing page content or moving a configured element structure between compatible editing contexts.

Unlike Import HTML, Clipboard Import expects content produced by ioLoop's Clipboard Export. It is not intended for importing arbitrary HTML copied from websites or external editors.

Use Import HTML for external HTML markup and Clipboard Export / Clipboard Import for transferring existing ioLoop Page Elements.

Editing Element Content and Properties

After selecting an element, you can modify the properties supported by that element type.

Content settings determine what an element displays. Presentation settings control how it appears, while interaction-related settings determine how it connects to supported application behavior.

Text Content

Text elements are used for headings, paragraphs, labels, instructions, descriptions, and other written content.

Select a text element to modify its content and available formatting properties.

Depending on the element, settings may include typography, alignment, colors, spacing, and other presentation options.

Use headings to establish a clear content hierarchy, and keep control labels descriptive so users understand their purpose.

If a value needs to change dynamically based on application data or user interaction, it may be more appropriate to use Data Design or update the element through Page Flow rather than maintaining a fixed value.

Images and Media

Media elements display images and other supported frontend media resources.

Media files are managed under Frontend → Media. Within the Page Editor, you can configure elements to display or reference the media required by the page.

When configuring an image or media element, review its source, dimensions, alignment, and available display settings.

Also verify how the media appears at different screen sizes, particularly when images are cropped, resized, or displayed inside constrained containers.

Media assets are intended for frontend-accessible content. Do not use them to store private or sensitive files that require restricted access.

For more information, see Media.

Links and Buttons

Links and buttons connect the page's visible interface to navigation and application actions.

A link typically directs the user to another page or external URL. Buttons can support navigation as well as actions such as opening a Form, submitting input, or triggering Page Flow behavior.

When editing a link or button, configure its visible label and the relevant destination or interaction settings.

For custom behavior, the visual element is configured in the Page Editor, while the application logic is generally defined in Page Flow.

For example, a Refresh button on a dashboard might trigger Page Flow to retrieve updated information and refresh a data display.

Changing a button's appearance does not automatically change its associated Page Flow behavior. Likewise, removing or replacing an element may require updating any Page Flow logic that references it.

Forms and Input Controls

When editing a Form, you use the same visual editing capabilities to design the interface through which users enter and submit information.

A Form may contain input controls, field labels, helper text, validation messages, action buttons, and supporting content.

Forms can be Table-Backed or Custom, depending on how their data handling and submission workflows are implemented.

The Page Editor controls the Form's visual content and layout. Form configuration and Page Flow define how input values are initialized, validated, processed, and handled after submission.

Forms can also be opened as modals from other Pages, allowing the same Form to be reused in multiple workflows.

For implementation details, see Forms and Opening Forms as Modals.

Widgets

Widgets are specialized Page Elements that provide configured functionality beyond basic content presentation.

Examples include Data Table, AI Agent, payment, and media Widgets.

When adding a Widget, configure its required settings and connect it to the appropriate data source, AI Agent, integration, or media resource, as applicable.

Some Widgets also support interactions through Page Flow.

A Widget's internal behavior is determined by its configuration and supported capabilities, rather than by its visual appearance alone.

See Widgets for configuration and usage details.

Styling Page Content

Page Elements provide styling properties for controlling their appearance and layout.

Depending on the element, these may include dimensions, spacing, colors, borders, typography, alignment, and other visual properties.

ioLoop supports several approaches to styling:

Styling approach	Recommended use
Element Settings	Styles and presentation properties belonging to an individual element
Page-level CSS	Custom styling specific to a Page or Form
CSS Assets	Reusable styling shared across multiple pages

Use the element's own settings for straightforward presentation changes. For more specialized requirements, you can use custom CSS.

Page-level CSS is configured through Page Settings, while reusable CSS assets are managed under Frontend → Code and included where needed.

When combining visual settings with custom CSS, review how the styles interact and verify the result in Preview.

Styling affects presentation, not security. Hiding an element through CSS does not prevent unauthorized access to data or backend operations. Use appropriate page access restrictions and server-side authorization where required.

For more information, see Page Settings and Code.

Deleting Page Elements

You can remove elements that are no longer needed from the page's content structure.

Before deleting an element, verify that the correct element is selected, particularly when working with nested containers.

Removing a parent layout element can also remove the content nested inside it, so review its children before proceeding.

Dependencies and References

Deleting a visible element may affect other parts of the application if that element is referenced by application logic or configuration.

Examples include:

• Page Flow actions that read or update the element.
• Buttons, navigation, or other interactions associated with the element.
• Data Design structures that use the element for rendering.
• Widget configurations or Form workflows that depend on the element.

Removing an element from the page does not necessarily remove or update all references to it elsewhere in the Project.

After deleting an element, review any associated dependencies, save the page, and use Preview to verify that the remaining interface behaves correctly.

Understanding the Scope of Changes

The effect of a content change depends on the type of item being edited and whether that content is reused elsewhere.

Content Type	Scope of Changes
Page	Changes affect the content of the selected Page.
Form	Changes affect the Form wherever it is used, including when opened as a modal.
Page Slice	Changes affect every Structured Page that uses the Page Slice.

A shared Page Slice is particularly important because a single edit can update multiple Structured Pages.

For example, changing the navigation within a shared Header Page Slice will affect every Structured Page using that Header after the changes are published.

Before modifying shared content, consider whether the change is intended for every location where that content appears.

If a section needs to behave or appear differently on a particular page, consider using a separate Page Slice instead of modifying a shared one.

For more information, see Editing Structured Pages.

Saving and Previewing Changes

After modifying page content, select Save from the Page Editor action bar to retain the changes in the Project's development state.

Saving does not automatically publish the changes to the live application.

Use Preview to test the updated interface and verify both its appearance and behavior.

In particular, check that:

• Elements are displayed and arranged correctly at the intended screen sizes.
• Text, images, links, and buttons appear as expected.
• Interactive elements trigger their intended actions.
• Forms, Widgets, and data-driven content operate correctly.
• Changes to nested layouts or shared Page Slices have not introduced unintended effects.

Preview can execute application behavior, including Page Flow and connected data operations. Be mindful of workflows that may modify data or invoke external services during testing.

When the changes are ready for the live application, use the Project's publishing workflow.

For more information, see Previewing.

Where to Go Next

• Page Editor — Understand the visual editing environment and its main actions.
• Element Library — Explore the available Page Elements.
• Element Settings — Learn how to configure individual elements.
• Editing Structured Pages — Manage and edit Page Slices.
• Data Design — Create data-driven visual content.
• Widgets — Configure specialized interface components.
• Page Flow — Implement browser-side application behavior.
• Page Settings — Configure page-level settings and advanced options.