State memory

State memory properties

Overview

The State memory property is used to store a boolean value in the block's state. This is ideal for tracking user progress such as whether a user has completed a task in a checklist.

In a workflow, you can configure the state memory to track whether a user has exited a specific block. To configure the state memory, click on the field and select the block you want to track. The state memory will be set to true when the user exits the selected block.

Usage in a block template

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

Title: The title of the state memory shown in the block editor.
Description: The description of the state memory shown in the block editor (optional).
Type: Select state memory from the dropdown.
Key: The key of the boolean value stored in the block's state. This key is used to access the value in your application.

Example implementation

In this example, we'll create a simple checklist where each task is marked as completed when the user exits the specified block.

Create a block template

Create a block template with an array named tasks. Each item in the array includes a title and a completed property that is a State memory.

Block template

Create a UI component

Next, build a matching component in your application to render the checklist:

import { CheckCircle, Circle } from "lucide-react";
 
type Props = {
  items: {
    title: string;
    completed: boolean;
  }[];
};
 
export const Checklist = ({ items }: Props) => {
  return (
    <div className="mb-5 rounded-md border p-4">
      <p className="text-lg font-semibold">Onboarding checklist</p>
      {items.map((item, index) => (
        <div className="mt-3 flex items-center gap-1" key={index}>
          {item.completed ? (
            <CheckCircle className="text-green-600" />
          ) : (
            <Circle className="text-gray-300" />
          )}
          <p className="text-sm">{item.title}</p>
        </div>
      ))}
    </div>
  );
};

Here, Tailwind CSS classes style the list and Lucide provide icons. 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 Checklist component in a workflow. When the user enters the block, the Checklist component will render the list of tasks. Then when the user completes either the tour or the card task, the corresponding task will be marked as completed in the checklist.

Block template

Result

Now you have a block that renders a simple onboarding checklist and tracks the user progress. You can add as many tasks as you want and they will be rendered in the order you added them.

Rendered array