Customizing Styles

Learn how to customize the appearance of your embedded workflow builder to match your brand.

Embed Workflow provides powerful customization options to seamlessly integrate the workflow builder into your application's design system. You can customize colors, themes, and individual component styles.

Theme Color Templates

The easiest way to customize your workflow builder is through the Account Settings page in your dashboard.

Quick Theme Selection

  1. Navigate to Account Settings and scroll to the Theme color section
  2. Choose from our pre-configured color templates
  3. Click any color to generate the CSS for that theme
  4. The Stylesheet section will update with the generated CSS
  5. Copy the CSS from the Stylesheet section and paste it into your application
Important

Selecting a color template generates the CSS, but you still need to copy it from the Stylesheet section and add it to your application for the changes to take effect.

Manual Color Customization

For complete control over your color scheme, you can manually edit the CSS in the Stylesheet section or define custom CSS properties in your application's stylesheet.

CSS Custom Properties

Embed Workflow uses CSS custom properties (CSS variables) for theming. You can override these in your application's stylesheet:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
:root {
  /* Primary color shades (50-950) */
  --ewf-color-main-50: 239, 246, 255;
  --ewf-color-main-100: 219, 234, 254;
  --ewf-color-main-200: 191, 219, 254;
  --ewf-color-main-300: 147, 197, 253;
  --ewf-color-main-400: 96, 165, 250;
  --ewf-color-main-500: 59, 130, 246;
  --ewf-color-main-600: 37, 99, 235;
  --ewf-color-main-700: 29, 78, 216;
  --ewf-color-main-800: 30, 64, 175;
  --ewf-color-main-900: 30, 58, 138;
  --ewf-color-main-950: 23, 37, 84;

  /* Primary color reference (points to main-600 by default) */
  --ewf-color-primary: var(--ewf-color-main-600);
}
RGB Format

Color values are specified as RGB triplets without the rgb() wrapper. This format allows for easy opacity manipulation using rgba() when needed.

Color Shade System

The color system follows the Tailwind CSS convention:

  • 50-100: Lightest shades (backgrounds, hover states)
  • 200-400: Light shades (borders, disabled states)
  • 500-600: Primary shades (main brand color, buttons)
  • 700-800: Dark shades (text, active states)
  • 900-950: Darkest shades (headings, emphasis)

Component-Specific Styling

You can target individual workflow components using CSS class identifiers. This allows for granular customization of specific elements.

Which classes are safe to target

Every targetable element carries an ework__ class (double underscore) as its last class, for example ework__node-name. These are the stable styling hooks. Don't rely on the ework- (single underscore) utility classes, which are internal and can change. For colors, prefer the --ewf- variables shown above.

Node Core Components

Target the main node elements:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/* Main node wrapper element */
.ework__node {
  /* Your styles */
}

/* Node flex container that holds the node */
.ework__node-container {
  /* Your styles */
}

/* The styled node box/card wrapper */
.ework__node-wrapper {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Inner content area of the node */
.ework__node-content {
  padding: 16px;
}

/* The node's name/title text element */
.ework__node-name {
  font-weight: 600;
  font-size: 14px;
}

/* Error message display within a node */
.ework__node-error {
  color: rgb(220, 38, 38);
  font-size: 12px;
}

/* Icon wrapper within a node */
.ework__node-icon {
  width: 24px;
  height: 24px;
}

Node Type Specific

Style different node types independently:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* Action-type nodes */
.ework__action-node {
  /* Custom styling for action nodes */
}

/* Trigger nodes */
.ework__trigger-node {
  /* Custom styling for trigger nodes */
}

/* Condition/decision nodes */
.ework__condition-node {
  /* Custom styling for condition nodes */
}

/* Inner wrapper specific to condition nodes */
.ework__condition-node-wrapper {
  /* Your styles */
}

Node Interactive Elements

Customize buttons and connectors:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* Button wrapper for adding child nodes */
.ework__add-child-button {
  background-color: rgb(var(--ewf-color-main-500));
  border-radius: 50%;
  transition: transform 0.2s;
}

.ework__add-child-button:hover {
  transform: scale(1.1);
}

/* Visual connector lines between nodes */
.ework__node-connector {
  stroke: rgb(var(--ewf-color-main-300));
  stroke-width: 2px;
}

Canvas/Editor

Style the main workflow canvas:

1
2
3
4
5
6
7
8
9
10
/* Main workflow canvas/editor container */
.ework__nodes-editor {
  background-color: #f9fafb;
  min-height: 600px;
}

/* Absolutely positioned node wrapper (handles x,y positioning) */
.ework__node-positioned {
  transition: transform 0.3s ease;
}

Complete Component Reference

Every targetable element carries one of these ework__ classes. The node and canvas classes are the most common; the rest cover the wider builder UI.

Workflow canvas and nodes

ClassTarget
ework__nodes-editorThe workflow canvas/editor container
ework__node-positionedA node's absolute-positioned wrapper
ework__nodeThe main node wrapper
ework__node-wrapperThe node's box/card
ework__node-containerThe node's flex container
ework__node-contentThe node's inner content area
ework__node-nameThe node's name/title text
ework__node-errorA node's error message
ework__node-iconA node's icon wrapper
ework__node-connectorThe connector lines between nodes
ework__add-child-buttonThe button to add a child node
ework__action-nodeAn action node
ework__trigger-nodeA trigger node
ework__condition-nodeA condition node
ework__condition-node-wrapperA condition node's inner wrapper

Entity cards and lists

ClassTarget
ework__entity-cardAn entity card (an action or trigger card)
ework__entity-card-iconAn entity card's icon
ework__entity-card-nameAn entity card's name
ework__entity-card-connectorAn entity card's connector label
ework__entity-card-listA list of entity cards
ework__empty-entity-card-listThe empty or error state of an entity-card list
ework__loading-entity-card-listThe loading state of an entity-card list

New-node side panel

ClassTarget
ework__actions-listThe actions list in the add-action panel
ework__triggers-listThe triggers list in the add-trigger panel

Page layout

ClassTarget
ework__pageThe page container
ework__page-wrapperThe page wrapper
ework__page-topbarThe page top bar
ework__page-sidebarThe page sidebar
ework__page-contentThe page content area
ework__simple-pageA minimal page layout
ework__headerThe header
ework__sidebar-menuThe sidebar menu
ework__sectionA content section

Side panels

ClassTarget
ework__side-panelA side panel
ework__side-panel-headerA side panel's header
ClassTarget
ework__side-menuA side menu
ework__side-menu-listA side menu's option list
ework__side-menu-optionA side menu option
ework__context-menuA context menu
ework__context-menu-optionA context menu option
ework__context-menu-destructive-optionA destructive context menu option (e.g. delete)
ework__button-dropdownA button's dropdown menu
ework__button-dropdown-arrowA button dropdown's arrow

Buttons

ClassTarget
ework__buttonA button
ework__new-workflow-buttonThe "new workflow" button
ework__browse-templates-buttonThe "browse templates" button

Form inputs

ClassTarget
ework__inputA text input
ework__textareaA textarea
ework__selectA select field
ework__segmented-buttonA segmented button group
ework__segmented-button-itemAn item in a segmented button group
ework__segmented-button-labelA segmented button item's label

Pickers

ClassTarget
ework__date-pickerThe date picker
ework__time-pickerThe time picker
ework__weekdays-pickerThe weekdays picker
ework__icon-pickerThe icon picker
ework__data-fields-pickerThe data fields picker

Editors and expressions

ClassTarget
ework__code-editorThe code editor
ework__code-editor-wrapperThe code editor's wrapper
ework__expression-builderThe expression builder
ework__data-pathA data path reference

Feedback and overlays

ClassTarget
ework__dialogA dialog or modal
ework__calloutA callout box
ework__tooltipA tooltip
ework__badgeA badge
ework__expandable-textExpandable or truncated text
ework__toast-messageA toast's message
ework__toast-iconA toast's icon
ework__toast-actionsA toast's actions area
ework__toast-closeA toast's close button

Tables and timelines

ClassTarget
ework__tableA table
ework__events-timelineThe events timeline
ework__eventAn event in the timeline

Example Customizations

Branded Color Scheme

1
2
3
4
5
6
:root {
  /* Use your brand's primary color */
  --ewf-color-main-500: 120, 53, 250; /* Your brand purple */
  --ewf-color-main-600: 107, 33, 232;
  --ewf-color-primary: var(--ewf-color-main-600);
}

Custom Node Styles

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* Make trigger nodes stand out */
.ework__trigger-node .ework__node-wrapper {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

/* Style action nodes with subtle shadow */
.ework__action-node .ework__node-wrapper {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
  border: 2px solid rgb(var(--ewf-color-main-200));
}

/* Highlight condition nodes */
.ework__condition-node .ework__node-wrapper {
  border-left: 4px solid rgb(var(--ewf-color-main-600));
}

Custom Canvas Background

1
2
3
4
5
6
7
.ework__nodes-editor {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px);
  background-size: 20px 20px;
  background-color: #ffffff;
}

Best Practices

Styling Tips
  • Use CSS custom properties for colors to maintain consistency and enable easy theme switching
  • Test in different contexts to ensure your styles work across all workflow states
  • Maintain accessibility by ensuring sufficient color contrast for text and interactive elements
  • Use the cascade wisely - more specific selectors override general ones
  • Preview changes in your account settings before deploying to production

Applying Your Styles

After generating or defining your custom styles, you need to include them in your application. There are two main approaches:

Option 1: External or Inline Stylesheet

Copy the CSS from your Account Settings Stylesheet section and add it to your application:

In Your External Stylesheet:

1
2
3
4
5
6
7
8
9
/* your-styles.css */
:root {
  --ewf-color-main-600: 37, 99, 235;
  --ewf-color-primary: var(--ewf-color-main-600);
}

.ework__node-wrapper {
  border-radius: 12px;
}

Then include it in your page. The loader automatically injects the CSS, so just add your custom styles:

1
2
<link rel="stylesheet" href="your-styles.css">
<script src="https://cdn.ewf.to/ewf-loader.js"></script>

Or Inline in Your Page:

1
2
3
4
5
6
7
8
9
10
<style>
  :root {
    --ewf-color-main-600: 37, 99, 235;
    --ewf-color-primary: var(--ewf-color-main-600);
  }

  .ework__node-wrapper {
    border-radius: 12px;
  }
</style>

Option 2: Account Settings Stylesheet (Generates CSS to Copy)

The Stylesheet section in your Account Settings serves two purposes:

  1. View Generated CSS: When you select a color template, the generated CSS appears here
  2. Edit Custom CSS: You can manually edit the CSS to customize further
Copy to Your App

The CSS in the Stylesheet section is not automatically applied. You must copy it and paste it into your application using Option 1 above.

Next Steps

←Quick start
Import Configuration→