# App Builder Overview The App Builder is a core component of the Heisenware platform. It is a visual development environment used to build, test, and deploy applications. Accessed directly from the App Manager, it provides a focused environment for developing one application at a time. ## Interface architecture The interface is organized into four distinct spatial zones to manage the application lifecycle and development workflow. * **Top bar with global tools**: Manages application-wide configurations, editor modes, and the deployment pipeline. This is where you access [theme editing](https://docs.heisenware.com/app-builder/build-frontend/theme-editor), the [PDF template editor](https://docs.heisenware.com/app-builder/build-frontend/pdf-template-editor), and handle the [app lifecycle](https://docs.heisenware.com/app-builder/manage-app-lifecycle) (testing, versioning, and deployment). * **Left panel**: The structural repository for assets. It houses the [functions library](https://docs.heisenware.com/app-builder/build-backend/functions-library) for logic blocks, [page management](https://docs.heisenware.com/app-builder/build-frontend/pages-and-navigation) for UI structure, and the [internal file server](https://docs.heisenware.com/app-builder/build-backend/internal-file-server) for managing raw data and media. * **Flow Builder**: A global, application-wide canvas for designing backend logic. This is the heart of your [backend development](https://docs.heisenware.com/app-builder/build-backend), where functions are wired together to create automated flows. * **UI Builder**: A page-specific design canvas for composing user interfaces for all screen sizes. This is where you [build user interfaces (UI)](https://docs.heisenware.com/app-builder/build-frontend) using text, images, and interactive widgets.

## How it works Heisenware uses a highly integrated development process. Rather than working in isolated stages, you build logic, design interfaces, and configure data connections simultaneously within a single environment. ### Build backend logic The Flow Builder is the environment for [building your application backend.](https://docs.heisenware.com/app-builder/build-backend) You create event-driven sequences by dragging components from the library onto the canvas. * **Functions**: The atomic building blocks of an app. These include standard utility blocks, industrial drivers, and custom code adapters (Node.js, Python, or C++). * **Global scope**: Logic in the Flow Builder is persistent. It runs independently of the active UI page, making it the central hub for continuous data processing or system monitoring. * **Edge Agents**: Secure bridges for isolated networks. You configure Native or Docker Agents to tunnel data from local systems directly into your application logic. ### Build user interface (UI) The UI Builder is the environment for [building your application frontend](#user-interface-ui). This canvas is page-specific. Selecting a page in the left panel on the app's own menu updates the builder to show that specific screen layout. * **Widgets**: Functional components like gauges, charts, and input fields. You drag these onto the canvas to compose the interface. * **Theme editing**: A global editor accessed via the top bar. It defines the styles and colors that ensure visual consistency across all pages and widgets. * **Page hierarchy**: A management tool in the left panel used to create, nest, and organize the application structure. ### Unified data binding The core strength of the App Builder is the ability to connect virtually any element to any other via data binding. This creates a bidirectional flow between the app's interface and the logic. * **Connect anything to everything**: You can link a button to a function trigger, bind an input field to a function's input parameters, or use a function's output to visualize data, toggle a button's state, or update a gauge's value. * **Property and event binding**: Beyond just data values, you can bind to widget properties like scale, visibility, or color, allowing the backend logic to drive the UI's appearance dynamically. * **Reactive synchronization**: The system eliminates manual glue code. The interface and logic remain in sync in real time as data flows through the application.