FlexiRule Docs

UI Architecture

The design of the visual builder and component system.

Improve this page

UI Architecture#

The design of the visual builder and component system.

Overview: Technical stack and presentation layer.
Controls: Internal Vue component contracts.
Dynamic Forms: Schema-driven UI generation.
Component Registry: High-performance data visualization.
Action Config Panels: How nodes are configured.

Action Config Panels The Rule Builder uses a modular approach to action configuration. Instead of one massive form, it uses **Config Panels** that correspond to … Component Registry `FlexiGrid.vue` is one of the most sophisticated components in FlexiRule. It is a **recursive, schema-aware collection editor** that mimics … Controls This document details the smart and innovative Vue components used throughout the FlexiRule UI. These controls are designed for high … Dynamic Forms FlexiRule uses a **Schema-Driven Rendering** approach. The frontend does not "know" what an action's configuration looks like; it asks the … Frontend Technical The FlexiRule frontend is a Vue 3 application that synchronizes complex graph logic with Frappe's relational data model.