Module Builder: Visual Orchestration
The visual canvas where authored components, data, and APIs merge into production-ready applications.
The Orchestration Layer
The Module Builder is where the strict components you authored in the Library Builder come to life. It is a complete full-stack visual composer that seamlessly merges UI assembly, reactive state management, secure backend integrations, and custom logic within a real-time collaborative workspace.
The Canvas Command Center: Link strict React libraries, visually configure props, and bind your UI directly to your backend architecture.
Component Linking & Visual Editing
Build your interface without writing layout code. The left-hand repository index lets you dynamically link libraries (e.g., rudra-anim v1.0.3) and drag version-locked components directly onto the canvas. Once placed, use the Inspector panel to manipulate component props—like colors, sizes, and stroke widths—in real-time, instantly reflecting your design intent.
Real-Time Multiplayer Canvas
Design and engineering, together at last. The Module Builder supports full multi-user collaboration. Whether you are pair-programming a layout or a designer is adjusting components live while an engineer handles data binding, all changes are synced across every participant's screen instantly.
Reactive State & Data Binding
The Data Layer is the brain of your application. Rudra enables a centralized, reactive state management system that eliminates manual DOM updates and 'prop-drilling.' By defining variables in the Data Section, you create a 'Single Source of Truth' that any component can subscribe to—ensuring your UI is always in sync with your underlying data.
Centralized State
Define variables once and reuse them globally. Whether it's a simple `ButtonLabel` or complex user profile objects, state is managed in a centralized store, not trapped within individual component instances.
Auto-Reactivity
Components bound to data are fully reactive. Change a value in the Data Panel—or trigger an update via an API response—and the UI updates automatically across all bound instances on the canvas.
Secure Database Connections
Connect your UI directly to your data layer. Rudra allows you to securely save connection strings for databases like PostgreSQL and MongoDB, enabling you to inspect schemas and run queries without leaving the builder.
Execution Context matters: Database queries inherently require secure, server-side execution to protect your credentials.
- Web App Deployment: DB queries execute securely via Rudra's backend infrastructure.
- Static HTML Export: Direct DB queries are disabled for static exports to prevent exposing connection strings to the client browser.
- Workspace Queries: Save your SQL or NoSQL commands to the workspace to easily trigger them from UI events.
API Orchestration
Build powerful integrations without writing boilerplate fetch requests. The API manager supports REST, GraphQL, WebSockets, and WebRTC. You can configure endpoints, headers, auth tokens, and seamlessly pass dynamic data into your requests.
Dynamic Data Passing
Inject application state directly into your API calls. Pass dynamic variables from your UI into URL paths (e.g., '/users/{id}'), query parameters, or JSON bodies without writing custom parsing logic.
Secure vs. Public APIs
Public APIs can be executed directly from the client. However, if your API requires a secure `client_secret` or private key, Rudra routes the request through a secure backend proxy when deployed as a Web App (unavailable in static HTML exports).
Visual Function Builder
Functions are the orchestrators of your module. Instead of writing monolithic event handlers, Rudra allows you to visually define sequential 'Action Steps' to handle complex business logic, data manipulation, and service integrations.
Sequential Action Steps
Build robust workflows by chaining different actions. Within a single function, you can declare variables, safely execute Database Queries and API calls, run custom JavaScript snippets, and mutate global state.
Cross-Library Logic Reuse
The pure TypeScript utility functions you authored in the Library Builder are directly accessible here. Any published logic (like local storage handlers, formatting scripts, or data parsers) appears in your Library Functions sidebar, ready to be dropped into your visual execution flow.
Live Debugging
Use the integrated Test Runner to execute logic in isolation. The Execution Trace provides detailed, step-by-step logs for instant debugging.
Event Binding
Once your function is verified, bind it directly to component lifecycle events (like `onLoad`) or user interactions (like `onClick`) via the Inspector panel.
Global Stylesheet Editor
While individual components maintain strict, scoped styling from the Library Builder, enterprise applications require a unified design system. The Global Stylesheet is your command center for sitewide aesthetics and overrides.
Standard CSS Rules
Write standard CSS rules with full syntax highlighting. You can inject core brand variables, import custom fonts, or define reusable utility classes (like .custom-style) that cascade across your entire module.
Native Translations
Prepare your application for a global audience without the overhead of duplicating layouts. Our native i18n architecture will allow you to manage multiple languages seamlessly within a centralized builder interface.
Unified Dictionary Management
Instead of hardcoding static text into individual components, you will be able to define locale dictionaries and bind your UI text nodes directly to specific translation keys. When the application language context changes, the UI will update reactively.
Native Translations
YouTube Placeholder
Module Lifecycle & Deployment
Once your module is assembled, bound to data, and fully styled, it enters the deployment lifecycle. Rudra provides dedicated workspace modes to verify your work and secure pipelines to push it to production.
Workspace Verification
The active canvas where all drag-and-drop assembly, data binding, and prop configurations occur.
Locks the canvas and completely removes all editable UI overlays, providing a pure, read-only representation of the final user experience.
Create Reusable Blueprints
Captures the entire canvas state—including UI structure, global data variables, API configurations, and custom functions—as a reproducible block. This standardizes design patterns for future projects.
Push to Application Builder
Compiles the visual orchestration into an optimized, production-ready module.Requires Admin ApprovalTo ensure strict governance, published modules enter a "Pending" state. They become available to the broader Application Builder only after an administrator reviews and approves the deployment.
You've Mastered the Module Builder
From linking strict React libraries to visually orchestrating reactive state, APIs, and business logic, you now understand the core engine of Rudra. The next step is taking these published modules and orchestrating them into a complete software product.