Designing Flexible Property Panels: Concepts, Implementation, and Future Outlook

🙋🏻‍♀️ This article explains what a property panel is, the challenges of building them, how to design one, and future outlook.

What Is a Property Panel

Property Panel is an object that displays and allows manipulation of attributes. An attribute, as defined by Wikipedia, is an abstract description of an object's properties and characteristics.

Different fields implement this concept in concrete ways:

Power Switch

The electrical switch controls the opening and closing of power, acting as a property panel for the "on/off" attribute of electricity.

Car Dashboard

A car dashboard displays attributes such as speed, fuel level, water temperature, and system status, allowing drivers to understand the vehicle's state without deep technical knowledge.

Other examples include elevator buttons and keyboards.

In software, the classic front‑end visual tool Dreamweaver provides a property panel for editing module attributes, while design tools like Sketch and Figma use property panels to control canvas elements efficiently.

Dreamweaver Editor

Sketch Design Tool

Building Domain‑Specific Property Panels

In the Web Component design pattern, each page is assembled from components, each with defined attributes reflecting complex states. A property panel should make these attributes self‑describing and editable.

The panel must be documentation‑driven: developers should understand a component's attributes solely from the panel's labels, descriptions, and controls.

Problems to Solve

label : the attribute name, e.g., the type of a button.

description : detailed explanation when the label is insufficient.

content : the renderer (input, textarea, select, button group) that allows modification.

error : validation messages for illegal values.

The Essence of a Property Panel

The most suitable way to present these items is a form , where each attribute corresponds to a form item.

Traditional Form

Label explains the purpose of the form item.

Content renders the control for user interaction.

Error displays when the input does not meet the attribute requirements.

Thus, a property panel is essentially a form, and designing a good form is crucial.

Design and Implementation

Before implementation, we need a data structure to represent each attribute. JSON is a concise, readable format for data exchange, and JSON Schema describes and validates JSON structures.

{
  "title": "Product",
  "description": "A product in the catalog",
  "type": "number"
}

Matching Data to the Right Renderer

For label, description, and error the implementation is straightforward. The focus is on the content renderer.

Example of an enum‑like attribute:

/**
 * @title 选中项
 */
size: "small" | "middle" | "large";

Since size has three possible values, a dropdown selector is appropriate.

Dropdown Renderer

export const select = {
  renderType: 'select',
  Component: SelectRender,
  tester: (schema) => schema.enumOptions?.length > 2,
} as RenderRegisterCommand;

For numeric data, both inputNumber and slider are viable:

export const inputNumber = {
  renderType: 'number',
  Component: InputNumberRender,
  tester: (schema) => schema.type === 'number',
} as RenderRegisterCommand;

Slider Renderer

export const slider = {
  renderType: 'slider',
  Component: SliderRender,
  tester: (schema) => schema.type === 'number',
} as RenderRegisterCommand;

Each RenderRegisterCommand includes:

renderType : unique identifier of the renderer.

Component : the component used for rendering.

tester : a function that selects the renderer based on the schema.

JavaScript has seven primitive types; in low‑code platforms we typically handle five: number, string, boolean, object, and null. The most common renderers are:

number : inputNumber, slider string : input, textArea, color boolean : checkbox,

switch

Handling Hierarchical (Parent‑Child) Rendering

Objects can contain nested objects, requiring visual distinction of parent‑child relationships. Techniques include background colors, indentation, and collapsible sections.

Rendering Parent‑Child Hierarchy

For arrays of objects, drag‑and‑drop reordering, addition, and deletion are useful. A popover can display nested object properties.

Nested Renderer

Nullable (Closable) Properties

For null values, a checkbox before the label can indicate whether the property is enabled, allowing the entire attribute to be omitted when unchecked.

Nullable Property

Extensible Renderer Design

When default renderers are insufficient, developers can create custom renderers following the RenderRegisterCommand contract and register them via a factory.

export class Factory {
  private static renderMap: Record<string, RenderRegisterCommand> = {};
  static register(commands: RenderRegisterCommand[]) {
    commands.forEach((command) => {
      this.renderMap[command.renderType ?? command.type] = command;
    });
  }
}
Factory.register([inputNumber, slider]);

Data Validation

Using the JSON Schema defined earlier, validation can be performed with ajv to ensure data conforms to the schema.

try {
  const result = ajv.validate(schema, value);
  if (result) {
    return null;
  }
  return ajv.errors;
} catch (e) {
  console.error('[Ajv validator]:', e.message);
}

Error Information

Extensible Data Types

Custom data types can be added to the validation system, for example a moment type with its own validation logic.

Factory.registerDataType([
  {
    type: 'moment',
    validate: (value) => {
      if (!value.name?.includes('w')) {
        return { message: 'name 属性必须包含字母 w' };
      }
    },
  },
]);

Custom Action Points

Developers can register custom actions that receive the schema and value, returning a React node to be rendered in the UI.

Factory.registerAction({
  Component: ({ schema, value }) => {
    console.log('schema', schema, value);
    if (schema.type === 'array') {
      return <a style={{ fontSize: 12, position: 'absolute', top: 2, left: -80 }}>配置</a>;
    }
  },
});

Custom Action Area

Future Outlook

The core points to consider when designing a property panel include layout flexibility (horizontal vs. vertical), theming (dark vs. light), and density (compact vs. spacious). A well‑designed panel behaves like a themable form that can adapt to many scenarios.

Support for plug‑in ecosystems to allow users to extend functionality with minimal effort.

Continuous improvement of renderer usability through quantitative metrics.

Overall, a fully featured property panel can automatically select appropriate renderers, validate input data, and be extended with custom renderers and actions to meet diverse business needs.