---
title: "Grid widgets"
slug: "grid-widgets"
tags: ["App Editor (Route)", "Widget", "Widgets"]
status: "update"
updated: 2026-05-29T16:38:15Z
published: 2026-05-29T16:38:15Z
canonical: "support.tulip.co/grid-widgets"
---

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

# Grid widgets

*The Grid Widget allows you to design steps with clear labels and data values.*

When you are a designing a step in an app, you may want to use a visual grid to structure your data and include clear labels with data points.

Here's an example of a grid on a step:

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Add%20a%20Grid%20Widget%20to%20A%20Step_154782045.png)

This short guide will show you how to add a grid Widget to any step.

## Adding and Editing a Grid Widget

From the Toolbar, choose the "Embed" option and then "Grid"

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Add%20a%20Grid%20Widget%20to%20A%20Step_154782940.png)

You will then see a series of options in the Side Pane after selecting the grid:

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Add%20a%20Grid%20Widget%20to%20A%20Step_154783510.png)

**Grid Lines:** Choose the color and thickness of grid lines

**Layout:** Add a row, column, or merge and unmerge cells after selecting multiple

**Align:** Align text that is typed into an individual cell

**Cell Color:** add a background color to an individual cell

**Text:** Change the format of text in selected cells

**Style:** Change text style in selected cells

Deprecation Warning

As of r369 The Grid widget's right-click context menu has been removed. All operations previously available through this menu remain accessible via the Widget tab in the side pane.

You can also right click an individual cell and edit the row:

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Add%20a%20Grid%20Widget%20to%20A%20Step_154787945.png)

The options are...

- Add a row below
- Add a row above
- Evenly space rows
- Delete row

When you add new rows and columns, all other cells will shrink to accomodate the new row or column. You must expand the entire Grid widget if you would like to add space for a new row or column.

---

Did you find what you were looking for?

You can also head to [community.tulip.co](https://community.tulip.co/?utm_source=intercom&utm_medium=article-link&utm_campaign=all) to post your question or see if others have faced a similar question!

**Widget**

**Widgets**are the elements that make up a specific **App Step.**Widgets can display information to users, collect user input, or trigger app logic.

*Common widgets include: Interactive Tables, Number inputs, Machine attribute widgets, and more.*

**Widget Toolbar**

The **Widget Toolbar**Is the menu where widgets can be found and added to your application. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/toolbar.png)

**Side Pane** **(Context Pane)**

The**Side Pane**is the configuration pane on the right side of the **App Editor**where steps, apps, and widgets can be configured. **Triggers**can be added to adjust widget behavior.![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Context%20Pane.png)