Skip to main content

Overview

🧩 Dashes are web apps built with a drag-and-drop UI editor and Python code for back-end logic.

🚫 With Dashes you skip the need to use any GUI framework, HTML, CSS or JS.

🧡 Connect various Dashes to build multi-page apps or a navigation system.

Building a Dash involves 3 parts:

  • The Layout editor, to create and edit your app's UI and functionality.
  • Your Python script, a local Python file that will run at the start of every app session. It will set any variables, functions and other logic needed for your app's execution.
  • The Settings tab, to edit app settings.

Layout editor​

Canvas​

The canvas is where you'll create the look of your app by placing widgets.

It has a 12-column grid. Resize components and play around with custom placing.

Responsivity is automatic - widgets will stack vertically on mobile.

Shortcuts​

  • Duplicate: Alt/βŒ₯ + drag
  • Zoom:
    • Pinch in/out
    • Ctrl/⌘ + scroll
  • Pan:
    • Two-finger scroll
    • Mouse wheel (+shift for vertical)
    • Middle click + drag

Interact Toggle​

By default, your editor will open in edit mode. To test your app, switch to interact mode, where elements are clickable and simulate their behavior in production.

Widgets Toolbar​

The widgets toolbar is where all widgets from our library are available for use. You can add them to your app by dragging and dropping them onto the canvas.

Widget Inspector​

When you select a widget, you can change its behavior in the widget inspector. Widgets configurations can be set in two types:

Properties​

These are standard properties that alter the widget's behavior. Properties can be visual like an image URL (on images) and text label (on inputs), and they can also be functional like a DataFrame (on pandas tables)/max chars (on text inputs).

Each property config is a Python expression and must return a value according to its accepted property types.

Events​

Events are a special type of configuration. Each widget can handle multiple events, such as click (on buttons), row selection (on tables), etc.

For each widget, you can set what will happen for each event by filling out the events configs.

Each event config is a Python code snippet that will be executed with each event trigger.

Event Payloads​

Sometimes, events provide additional context such as the row you clicked, if you clicked with the left or right mouse button, etc.

These pieces of information are available to your code by using the variable __event__.

It is good practice to add print(__event__) to events when you're uncertain about event payloads.

tip

Each property and event config will be evaluated within the additional context of your main Python script. There, you can define functions and variables to use within these fields.

Python script​

In the Python script is where you define all the background logic you need for your app to function. It's a regular Python file - import and use any lib you already like to create powerful functionality for your app.

Examples: make calculations, API requests, plot graphs and charts, etc.

Here is where you also define variables and functions to access on your widgets.

Code it in any IDE you prefer and save to your project's folder.

You can link it to your Dash in the Settings tab.

Settings tab​

This is where you can edit other attributes of your dash not directly related to widgets.

Name​

This is the title of your app. It will be displayed to your users.

Path​

This is how your dash will be available to your users. Each app URL is https://[your domain].abstra.app/[path].

Code​

This is the code linked to your Dash. Every function and variable in this code will be accessible on your widgets properties/events.