WP-Nexus

Appearance

UI Builder ​

The UI Builder is the visual editor where you design your app's frontend. It uses a drag-and-drop interface with a rich set of widgets, inline styling, and data binding through expressions.

Opening the Builder ​

Navigate to your app, click the Components tab, and either create a new component or click an existing one to open the builder.

Components Are Purely Visual ​

UI Components are purely visual building blocks. They define layout, widgets, styles, data sources, and event handlers -- but they have no opinion about where they are rendered.

Every component is always available via the [wp_nexus] shortcode:

[wp_nexus app="my-app" component="my-component"]

To render a component at a specific URL, in the WordPress admin sidebar, or as a reusable widget with pre-loaded context, create a Surface instead. Surfaces are separate entities that reference a component and add their own data source pipeline. See:

  • Pages -- render a component at a URL with route parameters
  • Admin Pages -- render a component as a WordPress admin menu page
  • Widgets -- reusable surfaces with pipeline context

The Three-Panel Layout ​

The builder is organized into three panels:

Left Panel -- Widget Catalog ​

A dark-themed sidebar listing all available widgets organized by category: Display, Layout, Data, Form, and Filter. Drag a widget from this panel onto the canvas to add it.

Center Panel -- Canvas ​

The main editing area where your component layout is displayed. You can:

  • Drag and drop widgets to reposition them
  • Click a widget to select it and open its properties
  • Nest widgets inside container widgets (Container, Card, Tabs, Accordion, Form, Repeater, Listing)
  • Delete widgets with the Delete key or the trash icon

Above the canvas, a viewport selector lets you preview your layout at different screen widths (desktop, tablet, mobile). Styles can be set per breakpoint for responsive design.

Right Panel -- Property Panel ​

When a widget is selected, the right panel shows three tabs:

Content Tab ​

Configure the widget's data properties -- text content, field names, options, data bindings, and other widget-specific settings. Every property field supports expressions using the { {expression}} syntax.

Design Tab ​

The full inline style editor with sections for:

  • Layout -- display, flex direction, alignment, gap, width, height
  • Typography -- font family, size, weight, color, line height, text alignment
  • Spacing -- margin and padding (top, right, bottom, left)
  • Borders -- width, color, radius (per corner)
  • Background -- color, image, gradient
  • Shadows -- box shadow configuration
  • Visibility -- show/hide based on expressions, viewport, or user role

Styles can be set independently for each viewport breakpoint and element state (default, hover, active, focus).

Events Tab ​

Attach actions to widget events. When available, a widget exposes events like onClick, onChange, onSubmit, onBlur, and onFocus. For each event, you can:

  • Run an inline action (define the pipeline directly)
  • Call a reusable action (select from your app's action library)

Automatic context in Repeaters and Listings: When a widget with a backend event is placed inside a Repeater or Listing Grid (grid/list mode), the current row's data is automatically forwarded as context to the backend action. You do not need to manually configure a "Get Context -> Set Context" data source pipeline -- the row data is available automatically. See Repeater: Automatic Context Forwarding for details.

Data Source Button ​

Each component (and each container/repeater within a component) can have a data source -- a pipeline that fetches data from your database tables, REST APIs, or other sources. Click the Data Source button in the canvas toolbar to open the Pipeline Builder, where you configure the node chain that produces the data for your component.

The resulting data is available in expressions as row.fieldName within that component's scope.

Working with Expressions ​

Almost every text property in the builder supports expressions. Use double curly braces to reference data:

`{ {row.title}}`
`{ {row.price | number_format(2)}}`
`{ {if(row.status == 'active', 'Active', 'Inactive')}}`
`{ {row.display_name}}`

See the Expression Language reference for the full list of available functions.

Tips ​

  • Use containers for layout -- wrap widgets in Container widgets and use flexbox (set via the Design tab) to control alignment and spacing.
  • Preview frequently -- use the viewport selector to check how your layout looks on different screen sizes.
  • Name your widgets -- give meaningful IDs to form fields so expressions and actions can reference them clearly.
  • Build incrementally -- start with the data source, then add display widgets, then add forms and actions.