Dynamic Panel Rendering Engine
A runtime rendering engine powering a no-code platform for one of Pakistan's leading banks — business teams compose full interfaces without writing code.
- Role
- Software Design Engineer — core engine development
- Timeline
- Jul 2024 – present, at Teresol Pvt. Ltd.
- Tech stack
- JavaScriptReactXStateIn-house component library
The problem
Enterprise fintech interfaces traditionally need a developer for every screen change. The bank's business stakeholders needed to build and reshape workflows themselves — without waiting on an engineering cycle for each use case.
How it works
A use case is defined as configuration rather than code: a collection of panels, each composed from shared library components.
The renderer package resolves that configuration at runtime, instantiating components and applying the selected layout mode (accordion, tabs, steps…).
State and workflow logic run on XState — the app framework was migrated to the latest XState version, resolving breaking changes along the way.
Key features
- Drag-and-drop composition: business users assemble panels from an in-house component library and structure layouts to match their requirements
- Use cases are collections of panels — the renderer package loads and renders them all at runtime from configuration
- Multiple render modes and settings present the same panels in different layout structures: accordions, tabs, steps, and more
- Reusable frontend architecture and shared component libraries adopted across multiple teams
Results
- Powers 30+ production fintech use cases at a leading Pakistani bank
- Non-technical stakeholders ship interface changes without engineering cycles
- Shared component architecture improved development velocity across multiple teams
Next project
AnoxStudio