Skip to main content

App builder

Use the App builder to compose cells from your Hex project into a beautiful published App that you can share with anyone.

info

Add cells to your App​

The first time you navigate to the App builder in a project Hex auto-generates an app based on the contents of your Notebook view. You can add, remove, reposition, and resize elements to customize the layout of your app. Additionally, you can add multiple tabs to organize cells into different views.

If you prefer to start building from scratch, select the Remove all elements option from the Reset layout dropdown menu at the top of the Outline tab in the left sidebar.

tip

You can undo a change to the App builder at any time, including removing all elements or resetting to the default layout.

You can drag-and-drop elements from the left-hand Outline panel using the drag handle to its right. Alternatively, you can use the Add to app button on each element, from the Outline or Notebook view.

Arrange and format cells in your App​

Dragging​

You can drag cells from the Outline to add elements to existing rows or to new rows.

Resizing​

When elements are added to an existing row, Hex will split them proportionally until you've customized the size of an element in that row. At any time, you can adjust the size of elements by clicking and dragging form the left or right side of an element, where a double arrow appears.

Row-level actions​

You can perform actions on entire rows of elements to modify the layout of your application.

Equal distribution & size

  • If you've customized the width of elements in a row and wish to return to a more standardized layout, click the distribution icon that appears when hovering over a row. This will evenly distribute and resize the elements in a row.

Move row

  • You can move an entire row with all of its elements up and down in your application by clicking and dragging the move row button that appears when hovering over a row.

App tabs​

Separate your app into different views with App tabs. You can add multiple tabs to your published apps to break down your project into different sections for a more dashboard-like experience. Add and rename tabs from App Settings in the right sidebar.

You can drag and drop cells between tabs, and also add apps to specific tabs from the Outline, Notebook view, or App builder.

You can add a cell to as many tabs as you'd like. To do this, click on the App builder icon on a cell in the Outline or App builder, and select each tab you'd like to add this cell to.

tip

When a published app with tabs is run, the full project is still executed in the order of cells in the Notebook view.

Element display options​

When adding python or SQL cells to your app, there are 3 options in the cell menu to customize how the cell appears in the app.

  • Source: only show cell source code
  • Output: only show cell output
  • Source and output: show both cell source code and output

Reset layout​

At any time, you can return to the default autogenerated app layout, or remove all elements. From the Reset layout dropdown you can select the following options:

  • Remove all elements: Removes all elements from the app builder, allowing you to drag and drop onto a clean slate.
  • Use default layout: Resets your app to include the all default elements in linear order (Markdown, Text, Chart, Map, Single value, Table display, and Input cells).

Published app theme​

Set a theme—dark or light mode—for unauthenticated users visiting a published app that is shared to the web. Users with a Hex account will view the app in whichever theme is set in their Preferences.

On this page