> For the complete documentation index, see [llms.txt](https://docs.heisenware.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.heisenware.com/app-builder/overview.md).
# Overview
The App Builder is a core component of the Heisenware platform: a visual development environment where you build, test, and deploy Apps. You open it straight from the App Manager, and it focuses on one App at a time.
## Main interfaces
The App Builder splits into four areas that cover the App lifecycle and development workflow.
* **Top Bar (top)**: Opens the [Theme Editor](/app-builder/build-frontend/theme-editor.md) and [PDF Template Editor](/app-builder/build-frontend/pdf-template-editor.md), and gives access to App Builder settings, language, and help. It also shows the current App version and holds the controls to [test and deploy](/app-builder/deploy-and-maintain.md).
* **Explorers (left)**: Switch between the [Function Explorer](/app-builder/build-backend/functions/function-explorer.md) for backend logic, the [Page Explorer](/app-builder/build-frontend/page-explorer.md) for frontend structure, and the [File Explorer](/app-builder/build-backend/file-explorer.md) for resources needed during app development.
* **Backend Builder (center)**: An infinite drawing area where you create the [business logic](/app-builder/build-backend.md) of your entire App by wiring up selected functions into automated flows.
* **Frontend Builder (right)**: A page-specific design canvas for composing user interfaces for all screen sizes. This is where you [build user interfaces (UI)](/app-builder/build-frontend.md) 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
In the [Backend Builder](/app-builder/build-backend.md) you create event-driven logic by dragging [functions](/app-builder/build-backend/functions.md) from the [Function Explorer](/app-builder/build-backend/functions/function-explorer.md) onto the canvas and wiring them into flows. Functions are the atomic building blocks of an App: standard utility blocks, industrial drivers, and custom Code Adapters written in Node.js, Python, or C++.
This logic runs in a global scope. It persists and runs independently of the active UI page, which makes the backend the central hub for continuous data processing or system monitoring. To reach machines and databases in isolated networks, you configure [Native Agents](/app-builder/build-backend/agents/native-agent.md) or [Docker Agents](/app-builder/build-backend/agents/docker-agent.md) that tunnel data from local systems directly into your App's logic.
### Build frontend
The [Frontend Builder](/app-builder/build-frontend.md) is a canvas on which you design your UI per page and across different screen sizes, similar to popular presentation tools such as Google Slides or PowerPoint. You use the [Page Explorer](/app-builder/build-frontend/page-explorer.md) to create, nest, and organize your pages, then switch to the page you want to edit.
You compose each page from widgets, functional components like gauges, charts, and input fields that you drag onto the canvas. To keep every page and widget visually consistent, the Theme Editor defines the styles and colors that apply across the whole App.
### Unified data binding
The App Builder's core strength is data binding: connect almost any element to any other and data flows between the App's interface and its logic in both directions.
* **Connect anything to everything**: Link a button to a function trigger, bind an input field to a function's input parameters, or feed a function's output into a widget to visualize data, toggle a button's state, or update a gauge's value.
* **Property and event binding**: A property is anything about a widget that can change, its value, scale, visibility, color, and more. Bind backend logic to any property, or to a widget's events, to drive the UI dynamically.
* **Reactive synchronization**: No manual glue code. Interface and logic stay in sync in real time as data flows through the App.
## App Builder settings
Customize how the App Builder behaves and how you control the canvas. To access these preferences, click the settings icon in the Top Bar.
### Viewport controls
Defines the navigation logic of the Backend Builder canvas. Choose between two modes:
* **Design-tool-like**: Mimics the behavior of tools like Figma or Miro.
* **Google-maps-tool**: Navigation behaves like an interactive map.
### Grid and snapping
* **Grid size**: Defines the size of the canvas grid.
* **Snap to grid**: When enabled, function blocks align to the grid for a cleaner layout. Setting the grid size to 0 disables snapping entirely.
### Navigation (WASD)
Fine-tune keyboard navigation on the canvas:
* **Invert WASD controls**: Switches the direction of the W, A, S, and D keys. By default, W is up and S is down.
* **Pan speed**: Controls how fast the camera moves across the canvas when using WASD.
* **Zoom speed**: Controls the sensitivity of the Q (zoom out) and E (zoom in) keys.
### Default modifier type
Every time you add a [modifier](/app-builder/build-backend/extension-nodes/modifier.md), Heisenware defaults to a specific type. Choose which one appears first:
* **JSONata**: Ideal for data transformation and querying.
* **JavaScript**: Use this if you prefer writing standard JS logic for your modifiers.
### Debug backend
Enables advanced backend debugging.
{% hint style="danger" %}
This setting should typically remain off. It is intended for support cases when working directly with the Heisenware technical team.
{% endhint %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.heisenware.com/app-builder/overview.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.