# alibaba/x-render

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/alibaba-x-render).**

7,846 stars · 1,077 forks · TypeScript

## Links

- GitHub: https://github.com/alibaba/x-render
- Homepage: https://xrender.fun
- awesome-repositories: https://awesome-repositories.com/repository/alibaba-x-render.md

## Topics

`ant` `ant-design` `chart` `form` `formrender` `javascript` `json-schema` `list` `react` `table` `typescript` `webpack` `widget`

## Description

x-render is a configuration-driven UI framework and low-code interface builder that transforms structured data definitions into functional user interface components. It operates as a JSON-driven UI generator, using a standardized configuration protocol to render data tables, input forms, and charts.

The system includes a visual form builder and interface design editor, allowing users to arrange layouts and configuration settings through a graphical interface to avoid writing manual structural code. This process is supported by a schema-based component library that maps configuration keys to a predefined set of UI components.

The framework covers several core capability areas, including dynamic form building, configurable data table management, and data visualization. These tools enable the generation of searchable lists and visual charts from simplified configuration files to represent complex datasets.

## Tags

### Development Tools & Productivity

- [Low-code](https://awesome-repositories.com/f/development-tools-productivity/platforms-runtimes-language-services/development-platforms/low-code-visual-builders/low-code.md) — Enables building complex tables and forms using abstracted JSON configurations instead of manual structural code.

### User Interface & Experience

- [JSON-Driven Dashboards](https://awesome-repositories.com/f/user-interface-experience/json-driven-dashboards.md) — Implements a system that renders user interfaces, including forms and tables, from external JSON configuration files.
- [Component Configuration Schemas](https://awesome-repositories.com/f/user-interface-experience/component-configuration-schemas.md) — Utilizes schemas to map configuration keys to a predefined library of UI components for consistent rendering.
- [Configurable Data Tables](https://awesome-repositories.com/f/user-interface-experience/configurable-data-tables.md) — Provides reusable UI components for building flexible and searchable data tables via protocol configuration.
- [Runtime Table Generators](https://awesome-repositories.com/f/user-interface-experience/data-table-generators/runtime-table-generators.md) — Renders searchable data tables dynamically at runtime based on configuration schemas. ([source](https://cdn.jsdelivr.net/gh/alibaba/x-render@master/README.md))
- [Dynamic Input Forms](https://awesome-repositories.com/f/user-interface-experience/dynamic-input-forms.md) — Builds structured input forms that adjust based on predefined configuration settings.
- [Configuration-Driven Rendering](https://awesome-repositories.com/f/user-interface-experience/dynamic-table-generators/configuration-driven-rendering.md) — Generates UI components dynamically by mapping structured JSON configurations to a library of UI elements.
- [Protocol-Driven Form Generators](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/ui-component-generation-apis/protocol-driven-form-generators.md) — Builds structured data entry interfaces using predefined configurations to accelerate development. ([source](https://cdn.jsdelivr.net/gh/alibaba/x-render@master/README.md))
- [Dynamic Form Generation](https://awesome-repositories.com/f/user-interface-experience/forms/dynamic-form-generation.md) — Implements patterns for rendering structured data entry forms based on predefined protocols.
- [Protocol-Based UI Generators](https://awesome-repositories.com/f/user-interface-experience/structured-ui-resource-generators/protocol-based-ui-generators.md) — Transforms standardized JSON configuration files into functional user interface components to eliminate manual coding.
- [Visual Form Designers](https://awesome-repositories.com/f/user-interface-experience/visual-form-designers.md) — Ships a drag-and-drop interface for visually constructing complex form layouts and settings. ([source](https://cdn.jsdelivr.net/gh/alibaba/x-render@master/README.md))
- [Visualization Frameworks](https://awesome-repositories.com/f/user-interface-experience/visualization-frameworks.md) — Provides a framework for generating visual charts and searchable tables based on configuration protocols.
- [Layout Engines](https://awesome-repositories.com/f/user-interface-experience/element-positioning/layout-engines.md) — Implements an engine that calculates the size and position of UI elements based on high-level descriptive protocols.
- [Low-Code UI Orchestrators](https://awesome-repositories.com/f/user-interface-experience/low-code-ui-orchestrators.md) — Orchestrates the assembly of UI components like tables and charts using high-level configuration protocols.
- [Visual Layout Editors](https://awesome-repositories.com/f/user-interface-experience/visual-layout-editors.md) — Provides a graphical interface for the direct manipulation of structural layouts and JSON configurations.

### Data & Databases

- [Data Visualization](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/data-visualization.md) — Provides tools to render complex datasets into visual charts and representations using configuration files.
- [Data Visualization Charts](https://awesome-repositories.com/f/data-databases/data-visualization-charts.md) — Generates graphical representations of complex data using simplified configuration files.
- [Visualization Engines](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/visualization-engines.md) — Functions as an engine that renders complex datasets into visual charts based on simplified configuration.

### Graphics & Multimedia

- [Chart Generators](https://awesome-repositories.com/f/graphics-multimedia/chart-generators.md) — Renders visual charts from structured text-based definitions and configuration settings. ([source](https://cdn.jsdelivr.net/gh/alibaba/x-render@master/README.md))

### Software Engineering & Architecture

- [Configuration-Driven Development](https://awesome-repositories.com/f/software-engineering-architecture/configuration-driven-development.md) — Transforms structured data definitions into functional user interface components for scalable data management.
- [Component Mappings](https://awesome-repositories.com/f/software-engineering-architecture/dynamic-schema-mapping/component-mappings.md) — Maps configuration keys to specific UI component implementations to ensure consistent visual rendering.

### Web Development

- [UI Configuration Frameworks](https://awesome-repositories.com/f/web-development/configuration-driven-frameworks/ui-configuration-frameworks.md) — Transforms structured data definitions into functional user interface components for data management.
- [Declarative Data Binding](https://awesome-repositories.com/f/web-development/declarative-data-binding.md) — Links data properties to form fields and table cells using predefined rules to automate interface updates.