Skip to main content

Overview

What is @keyx/builder?​

@keyx/builder is a powerful and flexible library designed for building dynamic user interfaces based on a tree structure of nodes. It provides the core components and utilities needed to define, manage, and render complex UI layouts programmatically.

What can you use it for?​

This library is ideal for scenarios where you need to:

  • Create drag-and-drop page builders or form builders: Easily define and manipulate the structure of your application's UI through a visual interface.
  • Render dynamic content: Display different UI elements based on data or user interactions without hardcoding layouts.
  • Build complex, nested components: Manage hierarchical relationships between UI elements effectively.
  • Implement custom widget systems: Define your own reusable UI components that can be integrated into the builder.
  • Serialize and deserialize UI structures: Save and load your builder layouts to and from a data format.

Key Features​

  • Node-based structure: Organize your UI as a tree of nodes, each representing a specific UI element or component.
  • Flexible rendering: Easily map node types to your own React components for rendering.
  • Extensible: Define custom widgets and logic to extend the builder's capabilities.
  • Data-driven: Manage the state and properties of your UI elements through the node data.

This documentation will guide you through the process of using @keyx/builder, from understanding the core concepts to building your own custom solutions.