ui-steps

UI Steps Guide for Motia

UI Steps provide a powerful way to create custom, visually appealing representations of your workflow steps in the Workbench flow visualization tool.

With UI Steps, you can enhance the user experience by designing intuitive, context-aware visual components that clearly communicate your flow's sequencing and events.

Overview

To create a custom UI for a step, create a .tsx or .jsx file next to your step file with the same base name:

steps/ 
└── myStep/ 
  ├── myStep.step.ts      # Step definition
  └── myStep.step.tsx     # Visual override

Basic Usage

Let's override an EventNode but keeping the same look. Like the image below. We're going to add an image on the side and show the description.

// myStep.step.tsx
 
import { EventNode, EventNodeProps } from 'motia/workbench'
import React from 'react'
 
export const Node: React.FC<EventNodeProps> = (props) => {
  return (
    <EventNode {...props}>
      <div className="flex flex-row items-start gap-2">
        <div className="text-sm text-gray-400 font-mono">{props.data.description}</div>
        <img
          style={{ width: '64px', height: '64px' }}
          src="https://www.motia.dev/icon.png"
        />
      </div>
    </EventNode>
  )
}

Components

Motia Workbench provides out of the box components that you can use to create custom UI steps, which apply to different types of steps.

Available Components

Component	Props Type	Description
EventNode	EventNodeProps	Base component for Event Steps, with built-in styling and connection points
ApiNode	ApiNodeProps	Component for API Steps, includes request/response visualization capabilities
CronNode	CronNodeProps	Base component for Cron Steps, displays timing information
NoopNode	NoopNodeProps	Base component for NoopNodes with a different color to comply workbench legend

Styling guidelines

• Use Tailwind's utility classes only: Stick to Tailwind CSS utilities for consistent styling
• Avoid arbitrary values: Use predefined scales from the design system
• Keep components responsive: Ensure UI elements adapt well to different screen sizes
• Follow Motia's design system: Maintain consistency with Motia's established design patterns