1. Project Overview

XRender

An Out-of-the-Box Solution for Admin Dashboards: Forms / Tables / Charts / Workflow Orchestration

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

Advantages

• FormRender: Build Forms as Easily as Writing an Input Component
• TableRender: Schema Generation & Highly Flexible Search Lists
• ChartRender: An Easy-to-Use Chart Drawing Library
• FormGenerator: A Powerful Visual Form Builder for Admin Dashboards

FormRender

Build Forms as Easily as Writing an Input Component

TableRender

Schema Generation & Highly Flexible Search Lists

An Out-of-the-Box Solution for Admin Dashboard Lists, Commonly Used for Rapid Search List Generation

Introduction

• Plug and PlayGenerate a practical search list by simply configuring API requests and header fields.
• XRender Ecosystem: The search module integrates FormRender, enabling rapid search panel generation with minimal effort.
• Seamless Integration: The table module uses Ant Design Table, with seamless API integration to reduce the learning curve for users.
• Data Templates: Multiple built-in data display templates for table columns reduce the need for custom Render function configuration.
• Multiple Layouts: Supports search bars, toolbars, and table content, which can be flexibly combined into various layouts according to business requirements.

FormGenerator

A Powerful Visual Builder for Back-Office Forms

ChartRender

An easy-to-use and lightweight charting solution for back-office applications, commonly used to quickly build chart display pages.

Introduction

1. Truly Ready to Use
   : Simply configure API requests with the simplest possible API setup to generate a powerful search and chart interface.
2. XRender Ecosystem
   : Search and filtering capabilities are powered by FormRender, enabling rapid search panel generation with minimal effort.
3. Seamless and Familiar Experience
   : Charts are powered by Ant Design Charts, reducing the learning curve for users.

XFlow

Canvas-Based Workflow Orchestration Solution

Introduction

XFlow is a new-generation, ready-to-use workflow canvas plugin built on ReactFlow's core capabilities and Dify's interaction experience. It aims to provide a unified, efficient, and easy-to-use workflow canvas solution for back-office projects.

Features

• Outstanding Performance: Built on ReactFlow, providing high-performance graphical rendering and interaction capabilities.
• XRender Ecosystem: The configuration panel integrates FormRender, enabling rapid configuration panel generation with minimal effort.
• Quick start: Provides rich preset configurations and components, significantly reducing development workload.
• Flexible Customization: Supports custom nodes, configuration panels, and node components to meet various complex business requirements.
• Convenient Operations: Supports zooming, undo/redo, automatic layout, full-screen display, and other features.

FormRender Mobile

Introduction

FormRender Mobile is a ready-to-use form solution designed for mobile devices. It dynamically renders forms through the JsonSchema protocol and is built on FormRender 2.0 and Ant Design Mobile. Its API is largely consistent with FormRender 2.0. If you are familiar with FromRender 2.0, you already know how to use FormRender Mobile.

5. Tech Stack

FormRender

A Back-Office Form Solution That Renders Forms Through the JsonSchema Protocol

npm i form-render --save

TableRender

An Out-of-the-Box Solution for Admin Dashboard Lists, Commonly Used for Rapid Search List Generation

Installation

table-render depends on ant design. Remember to install it when using table-render independently.

npm i table-render --save

ChartRender

Installation

npm i chart-render --save

XFlow

Canvas-Based Workflow Orchestration Solution

Installation

npm install @xrenders/xflow

FormRender Mobile

A ready-to-use form solution designed for mobile devices that dynamically renders forms through the JsonSchema protocol.

Installation

FormRender Mobile depends on Ant Design Mobile. Remember to install antd-mobile as well when using it independently.

npm i form-render-mobile --save