Sequential Workflow Designer Pro 🤩

Pro extensions for Sequential Workflow Designer. Build your no-code app faster!

This package contains:

• Pro components:
  • Icon step component
  • Interrupting icon step component
  • Interrupting task step component
  • Folder step component
  • Large task step component
• Optional features:
  • Modern wheel mode
  • Minimal root component
  • Conditional placeholders
  • Clickable placeholders
  • Extra badges
  • External toolbox
  • External control bar
  • External editor
  • Dot or cross grid

👀 Examples

• 🤩 Pro Components
• 🍬 Custom Theme Flat
• 🌹 Custom Step Types
• 👈 Goto
• 📁 Folders
• ⭕ Wheel Mode
• 💠 Grid
• 🐭 Minimal Root Component
• 🦁 External UI Components
• 👋 Custom Dragged Component
• 🔰 Badges
• 🎩 Custom Viewport
• 🛎 Clickable Placeholder
• React Pro Demo
• Angular Pro Demo

🚀 Installation

Create a new auth token for your GitHub account with the read:packages permission. Next, create .npmrc file in the root folder of your project and pass there your auth token.

//npm.pkg.github.com/:_authToken=YOUR_AUTH_TOKEN

Install the following dependencies.

npm i sequential-workflow-designer
npm i @nocode-js/sequential-workflow-designer-pro

Add CSS files:

import 'sequential-workflow-designer/css/designer.css';
import 'sequential-workflow-designer/css/designer-light.css';
import 'sequential-workflow-designer/css/designer-dark.css';
import '@nocode-js/sequential-workflow-designer-pro/css/designer-pro.css';
import '@nocode-js/sequential-workflow-designer-pro/css/designer-pro-light.css';
import '@nocode-js/sequential-workflow-designer-pro/css/designer-pro-dark.css';

The pro package is modular. You can choose features what you want to activate.

import { Designer, DesignerConfiguration } from 'sequential-workflow-designer';
import { StepsProExtension, ModernWheelProExtension } from '@nocode-js/sequential-workflow-designer-pro';

const config: DesignerConfiguration = {
  // ...
  extensions: [
    StepsProExtension.create(),
    ModernWheelProExtension.create()
  ]
};
Designer.create(placeholder, definition, config);

That's it!

💡 License

There are two kinds of licences.

License	Details
🍰 Standard	1 application up to 2 developers 1 year updates
🎂 Enterprise	unlimited applications unlimited developers 1 year updates

Read more here. To purchase a license please 🛒 check this page.