Docs

Block properties

Array

Create multiple items with the same structure but different values.

Array properties

Overview

The Array property is used to create multiple items with the same structure but different values. This is ideal for lists where every item follows a consistent format—such as checklists or collections of useful links.

Usage in a workflow

In a workflow, adding items to an array is as simple as clicking the + button next to the array title. Each added item conforms to the defined structure, and the order in which you add them determines their display order.

Usage in a block template

In a block template, you can define the array property like any other property. The properties to fill out are:

  • Title: The title of the array shown in the block editor.
  • Description: The description of the array shown in the block editor (optional).
  • Type: Select array from the dropdown.
  • Key: The key of the array of items. This key is used to access the array items in your application.
  • Items: The individual items in the array. Each item can be any type except for another array.

Example implementation

In this example, we’ll create a list where each link has a title and a URL.

Create a block template

Create a block template with an array named links. Each item in the array includes a title and a url.

Block template

Create a UI component

Next, build a matching component in your application to render the list of links:

type Props = {
  links: {
    title: string;
    url: string;
  }[];
};
 
export const LinksList = ({ links }: Props): JSX.Element => {
  return (
    <ul>
      <p className="font-semibold">Links:</p>
      {links.map((item) => (
        <li className="list-disc text-blue-500 underline" key={item.title}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
};

Here, Tailwind CSS classes style the list. You can customize the component to match your application’s design system as needed.

Use the component in a workflow

Now we can use the Links List component in a workflow. When the user enters the block, the LinksList component will render the list of links.

Block template

Result

Now you have a block that renders a list of usefull links. You can add as many links as you want and they will be rendered in the order you added them.

Rendered array

Edit on GitHub

Last updated on

On this page