https://nocode-js.com/assets/js/3ea2cc67.3d462dbf.js

1"use strict";(self.webpackChunknocode_js_com=self.webpackChunknocode_js_com||[]).push([[1230],{9425:(e,l,t)=>{t.r(l),t.d(l,{default:()=>s});var a=t(7294),n=t(7961),o=t(5742),r=t(9960),i=t(2525);const c=[{id:"javascript",label:"JavaScript",command:"npm install sequential-workflow-designer"},{id:"react",label:"React",command:"npm install sequential-workflow-designer sequential-workflow-designer-react"},{id:"angular",label:"Angular",command:"npm install sequential-workflow-designer sequential-workflow-designer-angular"},{id:"svelte",label:"Svelte",command:"npm install sequential-workflow-designer sequential-workflow-designer-svelte"}];function s(){const[e,l]=a.useState("javascript"),t=c.find((l=>l.id===e))??c[0];return a.createElement(a.Fragment,null,a.createElement(i.h,{data:{"@context":"https://schema.org","@type":"SoftwareApplication",name:"Sequential Workflow Designer",url:"https://nocode-js.com/javascript-workflow-builder",description:"Build visual workflow builders for web applications with open-source JavaScript components.",applicationCategory:"DeveloperApplication",operatingSystem:"Web",downloadUrl:"https://www.npmjs.com/package/sequential-workflow-designer",softwareHelp:"https://nocode-js.com/docs/category/sequential-workflow-designer",offers:{"@type":"Offer",price:"0",priceCurrency:"USD"},publisher:{"@type":"Organization",name:"NoCode JS",url:"https://nocode-js.com"}}}),a.createElement(n.Z,{description:"Build visual workflow builders for web applications with open-source JavaScript components. Explore Sequential Workflow Designer by NoCode JS."},a.createElement(o.Z,null,a.createElement("title",null,"JavaScript Workflow Builder | NoCode JS"),a.createElement("meta",{name:"description",content:"Build visual workflow builders for web applications with open-source JavaScript components. Explore Sequential Workflow Designer by NoCode JS."}),a.createElement("link",{rel:"canonical",href:"https://nocode-js.com/javascript-workflow-builder"}),a.createElement("meta",{property:"og:title",content:"JavaScript Workflow Builder | NoCode JS"}),a.createElement("meta",{property:"og:description",content:"Build visual workflow builders for web applications with open-source JavaScript components. Explore Sequential Workflow Designer by NoCode JS."}),a.createElement("meta",{property:"og:url",content:"https://nocode-js.com/javascript-workflow-builder"})),a.createElement("main",{className:"workflow-landing-page"},a.createElement("header",{className:"workflow-landing-hero"},a.createElement("div",{className:"container workflow-landing-hero-grid"},a.createElement("div",null,a.createElement("h1",null,"JavaScript Workflow Builder"),a.createElement("p",{className:"workflow-landing-subtitle"},"Build visual workflow editors for web applications using open-source JavaScript components."),a.createElement("p",{className:"workflow-landing-intro"},"Use NoCode JS to create workflow builders for automation tools, AI products, internal business applications and no-code platforms. The core building block is Sequential Workflow Designer - a framework-agnostic visual workflow component written in TypeScript, with JSON-based definitions and support for React, Angular and Svelte."),a.createElement("div",{className:"workflow-landing-hero-actions"},a.createElement(r.Z,{className:"button button--primary button--lg",to:"/sequential-workflow-designer"},"Explore Sequential Workflow Designer"),a.createElement(r.Z,{className:"button button--outline button--secondary button--lg",to:"/docs/category/sequential-workflow-designer"},"Read Docs")),a.createElement("div",{className:"workflow-landing-hero-link-row"},a.createElement(r.Z,{to:"/sequential-workflow-designer-examples"},"View Examples"))),a.createElement("div",{className:"workflow-landing-install"},a.createElement("p",{className:"workflow-landing-install-label"},"Quick Start"),a.createElement("div",{className:"workflow-landing-install-card"},a.createElement("div",{className:"workflow-landing-install-tabs",role:"tablist","aria-label":"Install by framework"},c.map((t=>a.createElement("button",{key:t.id,type:"button",role:"tab","aria-selected":t.id===e,className:"workflow-landing-install-tab"+(t.id===e?" workflow-landing-install-tab-active":""),onClick:()=>l(t.id)},t.label)))),a.createElement("div",{className:"workflow-landing-install-code-wrap"},a.createElement("pre",{className:"workflow-landing-install-code"},a.createElement("code",null,t.command))))))),a.createElement("section",{className:"workflow-landing-section"},a.createElement("div",{className:"container"},a.createElement("h2",null,"Why Build a Workflow Builder"),a.createElement("ul",{className:"workflow-landing-list"},a.createElement("li",null,"Automation tools need visual workflow UIs that non-developers can use."),a.createElement("li",null,"Internal tools need editable process flows that teams can maintain."),a.createElement("li",null,"AI products need orchestration builders to combine prompts, APIs and logic."),a.createElement("li",null,"Building a workflow builder UI from scratch is expensive and time-consuming.")))),a.createElement("section",{className:"workflow-landing-section"},a.createElement("div",{className:"container"},a.createElement("h2",null,"The Visual Layer"),a.createElement("p",null,"Sequential Workflow Designer is the main visual workflow builder component in the NoCode JS ecosystem."),a.createElement("ul",{className:"workflow-landing-list"},a.createElement("li",null,"visual canvas"),a.createElement("li",null,"drag-and-drop editing"),a.createElement("li",null,"JSON workflow definitions"),a.createElement("li",null,"no external dependencies"),a.createElement("li",null,"framework-agnostic architecture"),a.createElement("li",null,"supports React, Angular and Svelte")),a.createElement("div",{className:"workflow-landing-hero-link-row"},a.createElement(r.Z,{to:"/sequential-workflow-designer"},"Sequential Workflow Designer"),a.createElement(r.Z,{to:"/docs/category/sequential-workflow-designer"},"Designer Documentation"),a.createElement(r.Z,{to:"/sequential-workflow-designer-examples"},"Designer Examples")))),a.createElement("section",{className:"workflow-landing-section"},a.createElement("div",{className:"container"},a.createElement("h2",null,"Complete Workflow Stack"),a.createElement("p",null,"If you need more than a visual workflow builder, you can combine the Designer with the full workflow components stack."),a.createElement("div",{className:"workflow-landing-grid"},a.createElement("article",{className:"workflow-landing-card"},a.createElement("h3",null,"Workflow Editor"),a.createElement("p",null,"Generate step configuration editors and validation rules from a shared definition model."),a.createElement(r.Z,{className:"workflow-landing-card-link",to:"/workflow-editor-javascript"},"Explore Workflow Editor for JavaScript")),a.createElement("article",{className:"workflow-landing-card"},a.createElement("h3",null,"Workflow Machine"),a.createElement("p",null,"Run workflow definitions step by step in frontend and backend JavaScript applications."),a.createElement(r.Z,{className:"workflow-landing-card-link",to:"/javascript-workflow-engine"},"Explore JavaScript Workflow Engine"))))),a.createElement("section",{className:"workflow-landing-section"},a.createElement("div",{className:"container"},a.createElement("h2",null,"Works with Your Stack"),a.createElement("div",{className:"workflow-landing-stack-grid"},a.createElement("div",{className:"workflow-landing-stack-item"},"React"),a.createElement("div",{className:"workflow-landing-stack-item"},"Angular"),a.createElement("div",{className:"workflow-landing-stack-item"},"Svelte"),a.createElement("div",{className:"workflow-landing-stack-item"},"Vanilla JavaScript")))),a.createElement("section",{className:"workflow-landing-section"},a.createElement("div",{className:"container"},a.createElement("h2",null,"Related Components"),a.createElement("div",{className:"workflow-landing-grid workflow-landing-grid-3"},a.createElement("article",{className:"workflow-landing-card"},a.createElement("h3",null,"Sequential Workflow Editor"),a.createElement("p",null,"Declarative workflow editor generator and validation layer."),a.createElement(r.Z,{className:"workflow-landing-card-link",to:"/sequential-workflow-editor"},"Open Component")),a.createElement("article",{className:"workflow-landing-card"},a.createElement("h3",null,"Sequential Workflow Machine"),a.createElement("p",null,"Workflow execution engine for frontend and backend runtime."),a.createElement(r.Z,{className:"workflow-landing-card-link",to:"/sequential-workflow-machine"},"Open Component")),a.createElement("article",{className:"workflow-landing-card"},a.createElement("h3",null,"Workflow Components Overview"),a.createElement("p",null,"See the ecosystem architecture and how all workflow components fit together."),a.createElement(r.Z,{className:"workflow-landing-card-link",to:"/sequential-workflow-components"},"Open Overview"))),a.createElement("div",{className:"workflow-landing-related-pages"},a.createElement("h3",null,"Related workflow components"),a.createElement("ul",null,a.createElement("li",null,"Looking for a visual workflow UI? You are here: JavaScript Workflow Builder."),a.createElement("li",null,"Need step configuration editors? ",a.createElement(r.Z,{to:"/workflow-editor-javascript"},"Workflow Editor for JavaScript")),a.createElement("li",null,"Need execution runtime? ",a.

1createElement(r.Z,{to:"/javascript-workflow-engine"},"JavaScript Workflow Engine")))))),a.createElement("section",{className:"workflow-landing-section workflow-landing-final-cta"},a.createElement("div",{className:"container"},a.createElement("h2",null,"Start with Sequential Workflow Designer"),a.createElement("p",null,"Go deeper with docs, examples and GitHub resources."),a.createElement("div",{className:"workflow-landing-final-actions"},a.createElement(r.Z,{className:"button button--primary button--md",to:"/docs/category/sequential-workflow-designer"},"Docs"),a.createElement(r.Z,{className:"button button--outline button--secondary button--md",to:"/sequential-workflow-designer-examples"},"Examples"),a.createElement(r.Z,{className:"button button--outline button--secondary button--md",to:"https://github.com/nocode-js/sequential-workflow-designer"},"GitHub")))))))}}}]);