Skip to main content

Examples of Sequential Workflow Designer

This page provides you with a comprehensive understanding of how the Sequential Workflow Designer component can be used to automate and streamline complex processes. Whether you are a beginner or an experienced user, this page offers a variety of examples that showcase the full potential of our component. From simple workflows to more advanced use cases.

Sequential Workflow Designer

Online ExampleSource Code
⏩ Live Testing
Run your workflow in real time with smooth animations.
HTML, JS
💥 Triggers
Trigger usage in Sequential Workflow Designer.
HTML, JS
❎ Fullscreen
Sequential Workflow Designer in full-screen mode.
HTML, JS
🌅 Image Filter
Creating a simple image filter with Sequential Workflow Designer.
HTML, JS
🔴 Particles
Controlling particles with Sequential Workflow Designer.
HTML, JS
🌍 Internationalization
Internationalization (i18n) in Sequential Workflow Designer.
HTML, JS
⛅ Light Dark
Light and dark themes in Sequential Workflow Designer.
HTML, JS
🤖 Code Generator
How you can use Sequential Workflow Designer to generate code.
HTML, JS
🌻 Rendering Test
This example tests rendering edge cases in Sequential Workflow Designer.
HTML, JS
🚄 Stress Test
This example demonstrates the performance of Sequential Workflow Designer.
HTML, JS
🚪 Editing Restrictions
Editing control in Sequential Workflow Designer.
HTML, JS
📜 Scrollable Page
Attaching Sequential Workflow Designer to a scrollable page.
HTML, JS
🌵 Multi-Conditional Switch
Creating a multi-conditional switch with Sequential Workflow Designer.
HTML, JS
🌀 Auto-Select
Auto-select feature in Sequential Workflow Designer.
HTML, JS
Angular Demo
Sequential Workflow Designer used in an Angular application.
Angular App
React Demo
Sequential Workflow Designer used in a React application.
React App
Svelte Demo
Sequential Workflow Designer used in a Svelte application.
Svelte App

Sequential Workflow Designer Pro

Online ExampleSource Code
🤩 Pro Components
All available components in the Pro version
Available in Pro
🍬 Custom Theme Flat
Example of a custom theme named Flat.
Available in Pro
🌹 Custom Step Types
Example of custom steps.
Available in Pro
📺 Popup Editor
Example of using Sequential Workflow Designer Pro in popups.
Available in Pro
🔽 Collapsible Region
Example of collapsible regions.
Available in Pro
💼 Copy Paste
Example of the copy-paste feature.
Available in Pro
👈 Goto
Example of a goto step.
Available in Pro
📁 Folders
Folders in Sequential Workflow Designer Pro.
Available in Pro
⭕ Wheel Mode
Example of different wheel modes.
Available in Pro
💠 Grid
Different grid types in Sequential Workflow Designer Pro.
Available in Pro
🐭 Minimal Root Component
Example of a minimal root component.
Available in Pro
🦁 External UI Components
Example of creating UI components outside the designer canvas.
Available in Pro
👋 Custom Dragged Component
Customize the dragged component.
Available in Pro
🔰 Badges
Add badges to steps to notify users.
Available in Pro
🎩 Custom Viewport
Adjust the viewport to your UI.
Available in Pro
👊 Double Click
Handling double-click in Sequential Workflow Designer Pro.
Available in Pro
🛎 Clickable Placeholder
Replace placeholders with clickable versions to enhance the user experience.
Available in Pro
📮 Conditional Placeholders
Show placeholders depending on the dragged step.
Available in Pro
React Pro Demo
Sequential Workflow Designer Pro used in a React application.
Available in Pro
Angular Pro Demo
Sequential Workflow Designer Pro used in an Angular application.
Available in Pro

To access the private source repository, check the pricing of the Pro package.