> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getoperate.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Apps Quickstart

> Welcome to the Apps Quickstart! This page will provide you with the necessary knowledge to build your first applications in a matter of minutes.

Although getOperate provides [auto-generated UIs to scripts and flows](#), you can build your own internal applications designed to your needs. Either with our integrated [app editor](/developer/manual/app), or by [importing your own React/Vue/Svelte apps](/developer/import/react).

<CardGroup cols={2}>
  <Card title="Auto-generated UIs" href="#">
    getOperate creates auto-generated user interfaces for scripts and flows
    based on their parameters.
  </Card>

  <Card title="App Editor" href="/developer/manual/app">
    Detailed section on getOperate's App Editor
  </Card>

  <Card title="Example: E-commerce CRM app" href="#">
    Tutorial on how to build a CRM with getOperate.
  </Card>
</CardGroup>

**getOperate applications are customized UIs to interact with datasources** (web, internal, data providers, etc). They are a great way to have non-technical users interact with custom-made workflows.

In short, what you need to remember about apps:

* They work on a what-you-see-is-what-you-get basis.
* You can connect apps and components to [datasources](#).
* Components can be empowered by getOperate [scripts](/developer/cli/scripts) and [flows](/developer/cli/flows).

<Tip>
  Follow our [detailed section](#) on the Flow Editor for more information.
</Tip>

To create your first app, you could pick one from our [Hub](#) and fork it. Here, we're going to build our own app from scratch, step by step.

From [getOperate](#), click on `+ App`, and let's get started!

### Toolbar

Before jumping in, you should decide if you want to build a **Desktop** or a **Mobile** app. Just click on the appropriated icon on top.

Switch from **Editor** to **Preview** mode to take a step back on what you're building.

<Card title="Toolbar" href="#">
  The app toolbar is located at the top of the app editor. It enables you to
  adjust app settings, toggle between desktop/mobile preview, and debug runs.
</Card>

### Components

The App editor works on a drag-and-drop basis. From the right-side menu, click on a component to **create** it on the [canvas](#), **move** it maintaining a click on it and **delete** it clicking on `Delete component` at the bottom of the `Settings` tab. You can resize your components by dragging the **resize** handler on the bottom-right corner.

If you have numerous components you might need to **Anchor** some of them to have them unmovable by other components.

Check out all of our components at [this page](#) or (better) directly from the app editor. Know that **we can quickly add components to the library**, just [reach out to us](#).

<Card title="Component Library" href="#">
  List of all available components.
</Card>

### Empower components with scripts

The beauty of getOperate App editor is the integrations of scripts & workflows to components.

On the bottom of the app editor, you can find the [Runnable editor](#). It allows you to create, edit or manage the scripts or flows linked to components (Runnables), and [background runnables](#).

From a component, click on `Create an inline script` or `Select a script or flow` (from workspace or hub) and you're good!

The **[Outputs](#)** of each component can be found on the left side menu. Each of them is associated with a component (see the component id).

[Inputs can be connected to any output](#): on a component click on `Connect` and associate inputs to outputs.

<Card title="Connecting Components" href="#">
  The strength of getOperate's app editor is the ability to connect everything
  together.
</Card>

At any time, have a look at your app's **Inputs** associated with each component on the dedicated `App inputs` tab found in the `⋮` menu of the toolbar.

<CardGroup cols={2}>
  <Card title="Runnable Editor" href="#">
    Run Scripts and Flows from your Apps.
  </Card>

  <Card title="Outputs Guide" href="#">
    Manage the outputs of your components.
  </Card>
</CardGroup>

### Tailor the look of your app

At the **[component level](#)**, on the `Settings` tab, configure the style of each component (color, size, label, etc.) either directly in the boxes or using Custom CSS (on the Component Settings - Styling tab).

At the **[app level](#)**, you can give a harmonized style to your app with CSS. On the `Global Styling` tab, give details in boxes or in JSON, for the whole app and per class of component.

<Card title="Styling" href="#">
  Customize the styling of your App according to your own graphical standards.
</Card>

### Time to test

While building your app, you can try each component clicking on refresh button.

You can do a refresh all for the whole app with the refresh button on top of the canvas, or schedule automatic refresh.

Most convenient solution to test your app might just be to [preview](#) it:

For possible bugs, there is a `Debug Runs` tab to review past runs with details for each component.

<Card title="Debugging" href="#">
  Manage bugs of your App.
</Card>

### Then what?

When you're done with the editing of your app, [Save Draft](#) or [Deploy](#) the current version to the relevant users/folders with a proper and explicit name. All additional changes can be seen and reversed in the [Diff Viewer](#).

Once it's saved, it's ready to use! You can also `Publish` it, or even `Publish to Hub` and export it in JSON or Hub compatible JSON from the `⋮` tab.

Follow our [detailed section](#) on the App Editor for more information.

<CardGroup cols={2}>
  <Card title="Draft and Deploy" href="#">
    Learn how to draft and deploy apps.
  </Card>

  <Card title="App Editor" href="/developer/manual/app">
    Detailed section on getOperate's App Editor
  </Card>

  <Card title="Example: E-commerce CRM app" href="#">
    Tutorial on how to build a CRM with getOperate.
  </Card>
</CardGroup>