An app is a collection of components. An app can be used to build a dashboard, a workflow, a form, a CRM, etc. An app is made of:

- **Components**: the components are the building blocks of an app. They can be used to display data, to perform actions, to create forms, etc. The components are displayed on a grid and can be nested in containers.

- **Runnables**: the runnables are the scripts or flows that are linked to components, or ran in the background. They are used to perform actions when a component is clicked, to fetch data, etc

Switch the canvas mode in `Mobile` or `Desktop` layout from the toolbar. You can manually set the position and size of the components in both modes.

- hash: the hash parameters of the URL

The app state is a client-side store that can be used to store data. The app state can be manipulated by frontend scripts.

<video

className="border-2 rounded-xl object-cover w-full h-full"

autoPlay

loop

controls

id="main-video"

src="/videos/app-connections.mp4"

/>

Here are the steps to connect an input to an output:

- Click on the component input you want to connect to an output

- Click the right arrow to open the connection menu

- You can now navigate you app, without running any scripts

- When you hover a component, the corresponding outputs are highlighted in orange

- If you click on a component, the output will be pinned and stays open

- You can now click on the output you want to connect to the input

- The input is now connected to the output

A component can have a **Runnable** attached to it. The runnable is a script or flow that is executed when the component is clicked or loaded. For example, a button can have a runnable linked to it. When the button is clicked, the runnable is executed. For a table, the runnable is executed when the table is loaded.

A component can be triggered by:

- **Click**: the runnable is executed when the component is clicked:

Three components can be triggered by a click event:

- [Buttons](./app_component_library#button)

- [Forms](./app_component_library#form)

- [Modal forms](./app_component_library#form-modal)

- **Start**: the runnable is executed when the component is loaded

- **Refresh**: the runnable is executed when the app is refreshed.

Other component can trigger a component to recompute. For example, a button can trigger a table to recompute. When the button is clicked, the table is reloaded.

See [Recompute Others](./app-runnable#recompute-others) for more information.

When a runnable has an input connected to an output of a component, the runnable is executed when the output value changes. See [Connections](./app-runnable#connections) for more information.

Background scripts are triggered upon global refresh or when their input changes. The result of a background script can be shared among many components. They are not linked to a specific component.

You can disable the automatic execution on app start and refresh by unchecking the `Run on start and app refresh` checkbox.

You may want to disable this so that the background script is only triggered by changes to other values or triggered by another computation on a button (See 'Recompute Others')

Background scripts executed on the server can also disable the automatic execution when an input value changes by checking the `do NOT recompute on input changes` checkbox.

Frontend scripts are backgroud script executed in the browser and can manipulate the app context directly.

See [Frontend scripts](./app-runnable#frontend-scripts) for more information.

:::info Frontend scripts

Dependencies for frontend scripts are not automatically detected. You need to manually add the dependencies in the `Trigger by` section.

<br/>

It is necessary to add the dependencies manually because the frontend scripts are not executed in the same context as the app. The frontend scripts are executed in the context of the browser, and the app is executed in the context of the server.

:::

`Button` and `Form` components can trigger other components to recompute. For example, a button can trigger a table to recompute. When the button is clicked, the table is reloaded.

A viewer of the app will execute the runnables of the app on behalf of the publisher avoiding the risk that a resource or script would not be available to the viewer. To guarantee tight security, a policy is computed at time of saving of the app which only allow the scripts/flows referred to in the app to be called on behalf of. Furthermore, static parameters are not overridable. Hence, users will only be able to use the app as intended by the publisher without risk for leaking resources not used in the app.