DEV Community: b4rtaz

Create Flow Builder with Multiple Triggers Using Sequential Workflow Designer

b4rtaz — Thu, 26 Jun 2025 14:59:57 +0000

Starting with version 0.30.0, Sequential Workflow Designer makes it easy to build flow builders that support multiple triggers to start a flow. This enables rapid development of visual programming applications, empowering users - without any coding skills - to define clear, deterministic logic, often enhanced by AI.

How to start? At the start you need to install the Sequential Workflow Designer using NPM:

npm install sequential-workflow-designer

Now you need to import the designer to your code:

import { Designer, Uid } from 'sequential-workflow-designer';

// css
import 'sequential-workflow-designer/css/designer.css';
import 'sequential-workflow-designer/css/designer-light.css';

Before we continue, we need to define the task types that our flow builder will support. In this article, I’ll introduce three example task types: “Save file”, “Send email”, and “Loop”. However, you’re free to define as many task types as your use case requires. For example, each integration with an external system could be represented as a separate task type.

Next, we want the flow builder to let users define when a flow should start. We refer to these starting points as triggers. Triggers are special blocks that users can drag and drop into the start section of the flow, then configure accordingly. In this article, we’ll define three example triggers that will be available in the designer: “On email received”, “On file created”, and “On file modified”.

The goal is to create a flow builder that enables users to build flows starting from an event and then define a predictable sequence of logic. This logic will eventually be executed by a state machine, although we won’t focus on that part in this article.

Now, I’ll create two functions: one to generate a task and one to generate a trigger.

function createSaveFileStep() {
  return {
    id: Uid.next(),
    componentType: 'task',
    type: 'save-file',
    name: 'Save file',
    properties: {}
  };
}

function createOnEmailReceivedStep() {
  return {
    id: Uid.next(),
    componentType: 'task',
    type: 'trigger-on-email-received',
    name: 'On email received',
    properties: {}
  };
}

These functions are needed to complete the toolbox configuration. Now we're ready to initialize the designer for the first time.

const emptyDefinition = {
  sequence: [],
  properties: {}
};

const configuration = {
  steps: {},
  toolbox: {
    groups: [
      {
        name: 'Triggers',
        steps: [ createOnEmailReceivedStep() ]
      },
      {
        name: 'Tasks',
        steps: [ createSaveFileStep() ]
      }
    ]
  },
  controlBar: true,
  editors: false,
  placeholder: {},
  validator: {},
  extensions: []
};

const designer = Designer.create(
  document.getElementById('placeholder'),
  emptyDefinition,
  configuration
);

At this point, you should see the designer with an empty flow - no tasks added yet. Now, I’ll focus on creating a special section at the beginning of the flow where users can drag and drop only trigger blocks. It's important that this section accepts only triggers, not tasks. Likewise, triggers should not be allowed outside of this section. We can enforce these restrictions through the designer configuration.

Before we start, we need to add a special sequential step at the beginning of the flow definition. This step will act as a container for triggers. I’ll use the launchPad step component type to render it. This launch pad step component displays all nested steps aligned vertically and visually connected to the end of the container, creating the impression that any of the steps can trigger the flow.

While this component type can also be used for other use cases, such as parallel sections, it was primarily designed to handle triggers.

const emptyDefinition = {
  sequence: [
    {
      id: 'launchPad',
      name: 'Launch Pad',
      componentType: 'launchPad',
      type: 'launchPad',
      properties: {},
      sequence: []
    }
  ],
  properties: {}
};

Now, when you refresh the page, you should see a flow with a small container inside. At this point, you can drag and drop any step from the toolbox into this section — but that's not what we want. We only want to allow triggers in this section. To achieve this, we need to implement a custom placeholder controller and pass it to the designer by extending the configuration.

placeholder: {
  canCreate(sequence, index) {
    const definition = designer.getDefinition();
    const isRoot = sequence === definition.sequence;
    if (isRoot) {
      return index !== 0;
    }
    return true;
  },
  canShow(sequence, _, __, draggingStepType) {
    const definition = designer.getDefinition();
    const isTriggerStep = draggingStepType.startsWith('trigger-');
    const isLaunchPadSequence = sequence === definition.sequence[0].sequence;
    return (isLaunchPadSequence && isTriggerStep) || (!isLaunchPadSequence && !isTriggerStep);
  }
},

In the code above, I disabled the placeholder that appears before the launch pad step component, as I don’t want users to insert any steps before it. Then, in the canShow callback, I implemented a simple logic that hides placeholders if the dragged step type isn’t allowed in the target sequence.

After refreshing the page, you'll notice one issue: while drag-and-drop works as expected and the restrictions are in place, it's still possible to delete or move the launch pad step - which is not the intended behavior. To prevent this, I need to implement custom callbacks that restrict these actions.

steps: {
  isDuplicable(step) {
    return step.componentType !== 'launchPad';
  },
  isDeletable(step) {
    return step.componentType !== 'launchPad';
  },
  isDraggable(step) {
    return step.componentType !== 'launchPad';
  },
  isSelectable(step) {
    return step.componentType !== 'launchPad';
  }
},

Finally, everything is working as expected. We have created a flow designer that allows placing one or more triggers at the start of the flow, with various tasks arranged below.

To read the definition prepared by a user you need to call the getDefinition method on the designer instance. This will return a JSON object that represents the flow definition, including all steps and their properties.

const definition = designer.getDefinition();

Of course, this is just the beginning. Next, we need to implement editors for configuring all supported steps. Another important part is how to execute the designed flow, but that won’t be covered in this article. For more examples and detailed documentation, I recommend visiting the nocode-js.com website.

Check out the final online example 👉 here. You can also find the source code for this example and more on GitHub.

Links:

You Don't Need Your Own Backend to Call LLM from Front End

b4rtaz — Tue, 20 May 2025 20:06:15 +0000

Until now, creating any AI experience using large language models (LLMs) required building your own backend and integrating it with the frontend. Even for simple projects or proofs of concept, this approach was time-consuming and demanded a broad skill set. Why couldn’t you just call an LLM directly from the frontend?

Most LLM providers, like OpenAI or Anthropic, offer APIs designed to be accessed from backend servers, not directly from frontend applications. To expose any LLM functionality to the frontend, you typically have to build an entire backend yourself, implement all necessary endpoints, and ensure proper security. You don’t want just anyone overusing your AI endpoint, so you also need to implement custom rate limiting. That’s a lot of work.

Now, there's an alternative. You no longer need a backend or have to deal with backend-related challenges. You can simply make requests directly from your frontend code.

<!-- SDK -->
<script src="https://cdn.jsdelivr.net/npm/frontllm@0.1.2/dist/index.umd.js"></script>

// index.html
const gateway = frontLLM('<gateway_id>');
const response = await gateway.complete('Hello world!');
const content = response.choices[0].message.content;

// index.html
const gateway = frontLLM('<gateway_id>');
const response = await gateway.completeStreaming({
  model: 'gpt-4',
  messages: [{ role: 'user', content: 'Where is Europe?' }],
  temperature: 0.7
});

for (;;) {
  const { finished, chunks } = await response.read();
  for (const chunk of chunks) {
    console.log(chunk.choices[0].delta.content);
  }
  if (finished) {
    break;
  }
}

FrontLLM is a public LLM gateway that forwards requests from your frontend (via CORS), to your LLM provider, such as OpenAI, Anthropic, and others. It includes built-in security features that let you control costs and monitor usage in real time.

For example, you can:

Set a maximum number of requests from a unique IP per hour or per day.
Limit the total number of requests across the entire gateway.
Restrict the maximum number of tokens that your LLM provider can generate.
Define which models are allowed to be used.

And much more.

Note that you can use FrontLLM with any front-end framework, such as Angular, React, or Vue. You don't need a framework at all, vanilla JavaScript works just fine too.

How to Get Started

Create a new account at FrontLLM.com.
In the console, create a new gateway.
Choose your LLM provider (e.g., OpenAI) and enter your API key from the LLM Provider Developer Console.
Specify the allowed domains from which you want to call the gateway. To test it locally, add localhost.
Save the gateway.

On the right side, you'll see a code snippet showing how to call the LLM directly from the front end.

For more options and usage examples, check out the documentation.

For more information, visit the FrontLLM website. You'll find several demos showcasing what you can build by calling LLMs directly from the front end.

Build No-Code Platform with Next.js Template

b4rtaz — Mon, 26 Jun 2023 11:27:37 +0000

I am presenting a new template for Next.js that enables the creation of a no-code platform. This template is essentially a web application that empowers users to generate REST endpoints without the need for coding. You have the flexibility to customize and adapt this template according to your specific requirements. Liberating your business from relying on proprietary platforms, you can even add any missing features yourself.

The template utilizes MongoDB to store designed workflows and leverages Tailwindcss to simplify the process of creating the web app's interface.

⏩ To initiate your project, you can clone this repository: https://github.com/nocode-js/nocode-platform-boilerplate (Don't forget to add ⭐)

Even if you're not a developer, you can deploy the template on a cloud provider such as Vercel for testing purposes. Refer to the "Deployment" section in the readme file for instructions.

The template is made by NoCode JS.

The Simplest I18N JS Framework is here!

b4rtaz — Mon, 31 Oct 2022 13:59:15 +0000

The internationalization for web apps was a nightmare until now. Say hello to the Ultimate I18n JS!

🚀 Three Steps

First step. Add the Ultimate I18n JS to your <head> section as the first script on your page.

<script src="https://cdn.jsdelivr.net/npm/ultimate-i18n-js@0.0.1/lib/index.min.js"></script>

Second step. Set your default language code in the <html> tag.

<html lang="en">

Third step. Add translations by setting the i18n-[LANG_CODE]="" attribute to any element on your page.

<h1
  i18n-pl="Witaj świecie"
  i18n-es="Hola Mundo">
  Hello World <!-- Your default language (en) -->
</h1>

That's it! 🤯 Your page is multilingual now!

The library will automatically detect a user's language and display a right translation.

To manually change the language call the set method on the UltimateI18n object.

<button onclick="UltimateI18n.set('en');">EN</button>
<button onclick="UltimateI18n.set('es');">ES</button>
<button onclick="UltimateI18n.set('pl');">PL</button>

The library remembers that choice. After the page is reloaded a user still sees a chosen language.

⚒ Module Bundlers

You may use the Ultimate I18n JS with Webpack or a similar bundler. To install the package execute the below command.

npm install ultimate-i18n-js

Now you need to call the setup method before render your app.

import * as UltimateI18n from 'ultimate-i18n-js';

UltimateI18n.setup();

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('placeholder').innerHTML = `
    <span
      i18n-pl="Kocham czerwony"
      i18n-es="Amo el rojo">
      I love red
    </span>
  `;
});

That's it! 🤯

🤩 Demos

Check these online demos:

Create Simple No-Code App with Workflow Designer

b4rtaz — Tue, 23 Aug 2022 16:28:00 +0000

In this tutorial I'll show you how to create a simple No-Code app. We will try to create an app, where a user can design some business logic by a graphical user interface and try to run it.

🎯 What is No-Code?

No-Code apps allow non-technical users to create an app. How it is possible? No-Codes provide a simple user interface, much simpler then an interface of programming tools. No-Codes are often adjusted for some industry and are prepared to do some specific job.

Basically, in the No-Codes we can separate two layers:

Model - it contains a definition of a program, made by some graphical user interface. It's prepared mainly by a non technical user and it can be stored in a database or a hard drive.
Execution - this layer executes a model. The model can be processed into anything: a graphical interface, a command line app, a website, etc...

In this tutorial we will focus on workflows. The workflow is a wide concept, but in this case we want to use it to define our no-code application. We want to give a final user possibility to create some logical flow like "read some value", "do something if the value is equal 1" etc. We need a simple graphical user interface to define that kind flow. For that we will use the Sequential Workflow Designer package.

The package contains a generic designer. This generic designer allows us to create a designer for specific use-cases. The execution layer is not a part of this component.

Let's back to the workflow concept. The workflow contains a definition of flow. One thing here is important, the flow doesn't have to be linear. It could contain some conditional statements or loops. The smallest part here we called a step. The step represents a one instruction or one task to do. Of course conditions or loops are steps too.

Here we will prepare two simple steps and we will create a simple executor of the workflow.

readUserInput - read a user input to a buffer.
sendEmail - sends an email if the buffer equals some value.

👓 Sequential Workflow Designer

To add the package to your project, you can add the below code to your <head> section.

<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.1.9/css/designer.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.1.9/css/designer-light.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.1.9/lib/designer.js"></script>

If you use npm in your project you can add the package by npm:

npm i sequential-workflow-designer

🐾 Steps

Steps in the designer are defined in JSON format. Why JSON? Because it is easy to store anywhere (a database, a file, etc.).

In this tutorial we will use only task steps. But the designer supports more types (container, switch). The task component displays as a single rectangle. It doesn't contain children. It has a name, some icon, one input and one output.

Look at the below JSON, this is a definition of the task step.

{
    "id": "unique_id",
    "componentType": "task",
    "type": "my_type",
    "name": "my_name",
    "properties": {
        "setting1": "value1",
        "setting2": "value2"
    }
}

id - a unique id of a step. This id refers to placed steps in the designer. If we have 2 steps placed, we have two unique ids.
type - a type of task, in this tutorial we have two types: readUserInput and sendEmail,
name - it displays on the rectangle,
properties - here we have all step settings, this list depends on the step type.

As I mentioned above, we want to create 2 simple steps.

The first one is the readUserInput step. We want to allow a user to change a message of a question. So we will define one property question.

{
    "componentType": "task",
    "type": "readUserInput",
    "name": "Read User Input",
    "properties": {
        "question": "Ask me"
    }
}

Next one is the sendEmail step. Here we want to allow a user to define an email and add a condition ifReqisterEquals, that enables an e-mail shipping if a user in the last readUserInput step entered specific value. Basically, I introduce a simple condition here.

{
    "componentType": "task",
    "type": "sendEmail",
    "name": "Send E-mail",
    "properties": {
        "ifReqisterEquals": "1",
        "email": "x@example.com"
    }
}

🔨 Toolbox

The toolbox is an element of the designer that allows drag-and-drop steps to the designing flow. Now we prepare a definition that the toolbox will use to render steps.

const toolboxConfig = {
    groups: [
        {
            name: 'Steps',
            steps: [
                {
                    componentType: 'task',
                    type: 'readUserInput',
                    name: 'Read User Input',
                    properties: {
                        question: 'Ask me'
                    }
                },
                {
                    componentType: 'task',
                    type: 'sendEmail',
                    name: 'Send E-mail',
                    properties: {
                        ifReqisterEquals: '1',
                        email: 'x@example.com'
                    }
                }
            ]
        }
    ]
};

The configuration is divided into groups. Each group contains steps. Steps have the same structure as I introduced above with one exception. Here we don't provide the id field. This field will be added with a unique ID after a drop.

🐝 Icons

We can configure an icon for specific componentType and type of a step. To do this we need to create a configuration.

const stepsConfig = {
    iconUrlProvider: (componentType, type) => {
        return `./assets/icon-task.svg`
    },

    validator: (step) => true
};

In this tutorial we use only one icon for all step types. But you can use a componentType and type arguments to provide specific icons.

What is a validator? It verifies that the step is configured correctly. In this tutorial we won't use this feature.

📇 Editors

As I mentioned above, each step contains unique settings. After we drop a step, we need an editor to edit those settings. The designer provides a configuration, that allows us to pass a generator of the editor.

const editorConfig = {
    globalEditorProvider: (definition) => {
        const editor = document.createElement('div');
        editor.innerText = 'Select a step.';
        return editor;
    },
    stepEditorProvider: (step) => {
        // create a step's editor here and return it
    }
}

The main problem here is that, we could have many step types (in this tutorial we have 2). So that means, each step requires own editor because each step contains different settings.

Here we have a basic editor of the readUserInput step.

function createEditorForReadUserInput(step) {
    const editor = document.createElement('div');
    const label = document.createElement('label');
    label.innerText = 'Question';
    const input = document.createElement('input');
    input.setAttribute('type', 'text');
    input.value = step.properties['question'];
    input.addEventListener('input', () => {
        step.properties['question'] = input.value;
    });

    editor.appendChild(label);
    editor.appendChild(input);
    return editor;
}

And here an editor of the sendEmail step.

function createEditorForSendEmail(step) {
    const editor = document.createElement('div');
    const propNames = ['ifReqisterEquals', 'email'];
    for (let propName of propNames) {
        const label = document.createElement('label');
        label.innerText = propName;
        const input = document.createElement('input');
        input.setAttribute('type', 'text');
        input.value = step.properties[propName];
        input.addEventListener('input', () => {
            step.properties[propName] = input.value;
        });

        editor.appendChild(label);
        editor.appendChild(input);
    }
    return editor;
}

As you can see, these editors update step.properties after a user's change.

We have two generators, but we need to put all together into the stepEditorProvider property.

stepEditorProvider: (step) => {
  if (step.type === 'readUserInput')
    return createEditorForReadUserInput(step);
  if (step.type === 'sendEmail')
    return createEditorForSendEmail(step);
  throw new Error('Not supported');
}

📐 Create Designer

Now we can create a designer.

const config = {
    toolbox: toolboxConfig,
    steps: stepsConfig,
    editors: editorConfig
};

We can provide a start definition of the workflow. But in this tutorial we won't do this.

const startDefinition = {
    properties: {},
    sequence: []
};

That's all. Let's create a designer.

const placeholder = document.getElementById('designer');
const designer = sequentialWorkflowDesigner.create(
    placeholder, 
    startDefinition, 
    config);

Now we should see the designer on the screen.

🚀 Execution

The last part is an execution. Here we want to execute a designed flow.

We need to prepare a code for the readUserInput step. This step is very simple. We ask a user and save a response. The question is defined in the question property.

let register = null;

if (step.type === 'readUserInput') {
   register = prompt(step.properties['question']);
}

The sendEmail step is little more complicated. Here we send an e-mail if a previously picked value from a user is equal some value. The value is defined in the ifReqisterEquals property.

if (step.type === 'sendEmail') {
  if (step.properties['ifReqisterEquals'] === register) {
     alert(`E-mail sent to ${step.properties['email']}`);
  }
}

But how we can read a definition of the workflow? It's easy.

const definition = designer.getDefinition();

You can check the final state here.

function runWorkflow() {
    const definition = designer.getDefinition();

    let register = null;

    for (let step of definition.sequence) {
        if (step.type === 'readUserInput') {
            register = prompt(step['question']);
        }
        else if (step.type === 'sendEmail') {
            if (step.properties['ifReqisterEquals'] === register) {
                alert(`E-mail sent to ${step.properties['email']}`);
            }
        }
    }
}

Now we need to call runWorkflow function.

📦 Examples

You can test the final project here.

By the way you can check the below online demos of the Sequential Workflow Designer component.

Programming by Voice for Visual Studio Code

b4rtaz — Wed, 26 May 2021 07:45:10 +0000

Hi guys! I've just released my new extension for Visual Studio Code: Voice Assistant. It allows you to put code snippets by voice into your code. You can prepare different snippets per each project. Also it supports multiple VSC windows. You may use it for any programing language!

(check this example with voice 🔉)

🚀 How to Run?

Install this extension from the marketplace.
Install & run a server. The server is necessary, because it does all speech recognition job. Currently we support only Windows. 💾 Download server for Windows (it requires .NET5)
Add voice-assistant.json file to root directory of your project and click "Reload definition". You may use this example file or click "Add example voice-assistant.json" button.
That's it! 🎤

Give me your feedback please. ✌

How to make a mobile app website using no-code tool

b4rtaz — Sat, 03 Apr 2021 17:53:44 +0000

T3MPL: https://t3mpl.n4no.com/

How I converted RSS to Instagram stories

b4rtaz — Mon, 29 Mar 2021 07:39:48 +0000

RSS is quite old technology, but still many people use it. I like RSS, but RSS apps are old fashioned and uncomfortable for me. There are much better designs to read a content than boring news list. The one of them are stories. You may know this from Instagram or Snapchat. So, I decided to create a converter.

<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
    ...
    <item>
        <title>Title</title>
        <link>link.html</link>
        <description>Description</description>
        <pubDate>Fri, 12 Mar 2021 12:00:00 GMT</pubDate>
        <!-- But, where is an image? 😣 -->
    </item>
    ...

I wanted to put a title and a short description in each story. Almost all RSS channels deliver this data. But the main problem is with pictures of articles. Some channels delivers pictures, but most don't. I think, the most important in the stories are images. The picture passes quicker information than the text, and I think this is the heart of stories. So what do with feeds witch don't provide images?

<!DOCTYPE HTML>
<html>
    <head>
        ...
        <meta property="og:title" content="Title" />
        <meta property="og:image" content="image.jpg" />
        <!-- Ok, I see an image now! 😍 -->
        ...

We can find the cover image in... HTML social tags of the article. I noticed that, almost every news website has social tags. So I created RSS reader with scraping feature. The result is awesome. I have thousands RSS feeds with nice cover images now.

This is a short story how I created Stories Now. 🚀 Modern RSS Reader. It's available for Android and iOS for free. You may download it from:

💿 Google Play for Android, or
📀 App Store for iPhone, or
App Website.

Check my 🐦 Twitter.

Don't Write Admin Panel for Small Website, Generate it

b4rtaz — Thu, 19 Nov 2020 08:40:33 +0000

Creating admin panel for small website is an expensive thing. Each site has a different structure, and it needs different admin sections. This site has a news section, that doesn't. This site has a landing page with five texts, that site has only one image there. Familiar?

⏩ Read the rest of the article here...

How to Create Profile Card Webpage with T3MPL in 5 minutes

b4rtaz — Tue, 10 Nov 2020 08:26:39 +0000

I will show you how to create a simple profile card without a programming knowledge. For that I will use T3MPL - a simple static website generator. T3MPL needs only a browser to work, so you have everything you need. :)

T3MPL is an open source tool, so this is totally free.

⭐ Select Template

At the beginning I go to t3mpl.n4no.com. Now I must pick a template, I want to use the "Profile Card" template. So I click the "edit" button below the preview of the template.

💻 Editor

I see the editor with a picked template now. The editor has two major parts, the preview on the right - where I can see how my website looks now, and the sidebar on the left - where I can manipulate and change my site.

T3MPL provides a generic editor for each template. So each template has a little different editor. The author of a template configures that how the editor should look. The main division of configuration sections calls here "zones". Like I said before, each template has different zones. In this case the "Profile Card" template has three zones:

Card - configuration of the profile card,
Common - configuration of the website SEO, footer settings, etc.
Configuration - global configuration.

🔨 Personalize

I can personalize every content on the page for my purpose now. The editor gives me a possibility to change an every text, a link and an image on the page.

The editor supports collections. In this template I can control precisely how many links I need on the profile card. The same with my skills.

This template supports three different themes: light, dark and violet. I can pick each of them.

💾 Export/Import Changes

When I want to backup my changes, I can save my changes to a future editing. To do this I should click on the ☰ button and click Export data .t3data. The editor will generate a single .t3data file with my all modifications. In the future, I can load this file to revert my changes.

To load my all changes I should open my template in T3MPL editor, click on the ☰ button, and click Import data .t3data, then I should pick my .t3data file from my computer. That is simple.

🚀 Publish

When I finish my changes, I can generate a final website. To do this I should click on the "Publish" button and click Save webpage as .zip. The editor will generate final website files.

This files I should upload to my server or other place like GitHub Pages, etc. The editor generates simple HTML files, so your server doesn't need any special requirements like PHP, Nodejs, etc.

That's it. Please let me know if you achieved that in 5 minutes. :-)

🚩 At the end, check this demo website.

Emotion Tracker AI

b4rtaz — Tue, 06 Oct 2020 13:13:19 +0000

Hi! I've just created a simple Emotion Tracker. You can track your mood during the job. Get notifications when you are sad or unsatisfied. The app is something like your private assistant.

✨ Online demo + binaries: https://emotion-tracker.n4no.com/
⚙️ GitHub: https://github.com/b4rtaz/emotion-tracker

T3MPL - open source website generator

b4rtaz — Sun, 27 Sep 2020 10:17:22 +0000

T3MPL is a super simple static website generator. To generate a website you need just a browser. Choose a website template and edit it by T3MPL Editor. In 3 minutes you will get a final website zip file. You need only upload generated files to your server.

✨ Online editor, free templates: http://t3mpl.n4no.com/
⚙️ GitHub: https://github.com/b4rtaz/t3mpl-editor