# alibaba/form-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-form-render).**

7,847 stars · 1,076 forks · TypeScript

## Links

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

## Description

form-render is a schema-driven UI framework that translates structured JSON definitions into functional administrative layouts, interactive web forms, and data visualizations. It serves as a system for rendering components and validation logic based on declarative schemas rather than manual imperative code.

The framework includes a JSON-based form generator and a data table component that transforms structured data into searchable and sortable interfaces. It also features a visualization engine that renders data charts from simplified configuration schemas and a visual editor for designing form layouts and field definitions.

The system covers broad capability areas including dynamic data table rendering, schema-based input validation, and the generation of visual data reports through JSON-to-chart mapping.

## Tags

### Part of an Awesome List

- [JSON Forms](https://awesome-repositories.com/f/awesome-lists/devtools/json-forms.md) — Generates interactive web forms and validation logic by converting structured JSON schemas into functional input fields.
- [Visual Page Builders](https://awesome-repositories.com/f/awesome-lists/devtools/visual-page-builders.md) — JSON Schema-based form generator for React applications.

### Software Engineering & Architecture

- [Form Validation Schemas](https://awesome-repositories.com/f/software-engineering-architecture/schema-based-state-validation/form-validation-schemas.md) — Enforces data constraints by linking validation rules defined in JSON schemas to form field states.

### User Interface & Experience

- [Declarative UI Configuration Systems](https://awesome-repositories.com/f/user-interface-experience/declarative-ui-configuration-systems.md) — Provides a framework for defining UI layouts and field behaviors through a centralized JSON configuration schema.
- [Dynamic Data Tables](https://awesome-repositories.com/f/user-interface-experience/dynamic-data-tables.md) — Renders searchable lists and data tables at runtime using a protocol-driven schema.
- [Schema-Driven Component Libraries](https://awesome-repositories.com/f/user-interface-experience/metadata-driven-component-libraries/schema-driven-component-libraries.md) — Translates JSON configuration objects into a tree of functional UI components and input fields at runtime.
- [Protocol-Based Table Generation](https://awesome-repositories.com/f/user-interface-experience/protocol-based-table-generation.md) — Automates cell rendering and sorting by mapping data arrays to tabular layouts via a column definition schema.
- [Data-Driven Table Views](https://awesome-repositories.com/f/user-interface-experience/tables/column-reorderers/table-sorting-logic/data-driven-table-views.md) — Transforms structured JSON data into searchable and sortable data tables for administrative interfaces.
- [JSON-to-Chart Mappings](https://awesome-repositories.com/f/user-interface-experience/json-to-chart-mappings.md) — Implements a visualization engine that converts simplified configuration objects into data charts.
- [Schema-Based Data Visualizations](https://awesome-repositories.com/f/user-interface-experience/schema-based-data-visualizations.md) — Generates visual data reports and charts by providing simplified configuration schemas to a drawing engine.
- [Visual Form Designers](https://awesome-repositories.com/f/user-interface-experience/visual-form-designers.md) — Provides a visual editor to design administrative layouts and define fields without writing manual code.

### Data & Databases

- [JSON-Driven Chart Renderers](https://awesome-repositories.com/f/data-databases/interactive-data-charting/json-driven-chart-renderers.md) — Ships a drawing engine that renders data charts and visualizations from simplified JSON configuration schemas. ([source](https://github.com/alibaba/form-render#readme))
- [JSON-to-Chart Visualization Engines](https://awesome-repositories.com/f/data-databases/interactive-data-charting/json-to-chart-visualization-engines.md) — Provides a specialized drawing engine that renders data charts from simplified configuration schemas.