{"id":13581337,"url":"https://github.com/nocode-js/sequential-workflow-editor","last_synced_at":"2025-10-28T01:19:02.011Z","repository":{"id":169969921,"uuid":"646086402","full_name":"nocode-js/sequential-workflow-editor","owner":"nocode-js","description":"Powerful workflow editor builder for any workflow designer.","archived":false,"fork":false,"pushed_at":"2024-10-06T11:57:07.000Z","size":518,"stargazers_count":82,"open_issues_count":3,"forks_count":8,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-09T17:30:51.559Z","etag":null,"topics":["citizen-developers","workflow","workflow-builder","workflow-editor","workflow-model"],"latest_commit_sha":null,"homepage":"https://nocode-js.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nocode-js.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-27T08:35:36.000Z","updated_at":"2024-10-06T11:56:39.000Z","dependencies_parsed_at":"2023-09-26T00:00:16.212Z","dependency_job_id":"98bfcd12-9594-40c6-9a64-6fe60b0b5afb","html_url":"https://github.com/nocode-js/sequential-workflow-editor","commit_stats":{"total_commits":41,"total_committers":1,"mean_commits":41.0,"dds":0.0,"last_synced_commit":"8c1ed07d64644d2b165890fdf646cd08e458fb18"},"previous_names":["nocode-js/sequential-workflow-editor"],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nocode-js%2Fsequential-workflow-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nocode-js%2Fsequential-workflow-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nocode-js%2Fsequential-workflow-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nocode-js%2Fsequential-workflow-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nocode-js","download_url":"https://codeload.github.com/nocode-js/sequential-workflow-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247276164,"owners_count":20912288,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["citizen-developers","workflow","workflow-builder","workflow-editor","workflow-model"],"created_at":"2024-08-01T15:02:00.497Z","updated_at":"2025-10-28T01:18:56.969Z","avatar_url":"https://github.com/nocode-js.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"![Sequential Workflow Editor](.github/cover.png)\n\n# Sequential Workflow Editor\n\n[![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fnocode-js%2Fsequential-workflow-editor%2Fbadge%3Fref%3Dmain\u0026style=flat-square)](https://github.com/nocode-js/sequential-workflow-editor/actions) [![License: MIT](https://img.shields.io/badge/license-MIT-green?style=flat-square)](/LICENSE) [![View this project on NPM](https://img.shields.io/npm/v/sequential-workflow-editor.svg?style=flat-square)](https://npmjs.org/package/sequential-workflow-editor)\n\nPowerful workflow editor builder for sequential workflows. Written in TypeScript. Mainly designed to work with the [Sequential Workflow Designer](https://github.com/nocode-js/sequential-workflow-designer) component. To execute your model you may use the [Sequential Workflow Machine](https://github.com/nocode-js/sequential-workflow-machine) or any other workflow engine. It supports front-end and back-end strict validation of the model. 0 external dependencies.\n\n📝 Check the [documentation](https://nocode-js.com/docs/category/sequential-workflow-editor) for more details.\n\n🤩 Don't miss [the pro version](https://nocode-js.com/sequential-workflow-editor-pro/pricing).\n\n## 👀 Examples\n\n* [🛠 Playground](https://nocode-js.github.io/sequential-workflow-editor/webpack-app/public/playground.html)\n* [📖 Editors](https://nocode-js.github.io/sequential-workflow-editor/webpack-app/public/editors.html)\n* [🎯 Placement Restrictions](https://nocode-js.github.io/sequential-workflow-editor/webpack-app/public/placement-restrictions.html)\n* [🚩 Internationalization](https://nocode-js.github.io/sequential-workflow-editor/webpack-app/public/i18n.html)\n* [🚢  Vanilla JS](https://nocode-js.github.io/sequential-workflow-editor/vanilla-js-app/vanilla-js.html)\n\nPro:\n\n* [📖 Pro Editors](https://nocode-js.com/examples/sequential-workflow-editor-pro/webpack-pro-app/public/editors.html)\n* [📫 Template System](https://nocode-js.com/examples/sequential-workflow-editor-pro/webpack-pro-app/public/template-system.html)\n* [🎱 Dynamic Variables](https://nocode-js.com/examples/sequential-workflow-editor-pro/webpack-pro-app/public/dynamic-variables.html)\n\n## 🚀 Installation\n\nInstall the `sequential-workflow-editor-model` package in your front-end project or your common project for front-end and back-end (check [this article](https://nocode-js.com/docs/sequential-workflow-designer/sharing-types-between-frontend-and-backend)):\n\n```\nnpm i sequential-workflow-editor-model\n```\n\nInstall the `sequential-workflow-editor` package in your front-end project:\n\n```\nnpm i sequential-workflow-editor\n```\n\n## 🎬 Usage\n\nAt the beginning you need to create a model of your workflow for the editor. In this short tutorial let's consider the following workflow:\n\n```ts\nimport { Definition, Step } from 'sequential-workflow-model';\n\nexport interface MyDefinition extends Definition {\n  properties: {\n    inputs: VariableDefinitions;\n  };\n}\n\nexport interface LogStep extends Step {\n  type: 'log';\n  componentType: 'task';\n  properties: {\n    message: string;\n  };\n}\n```\n\nNow we can create a model for the step:\n\n```ts\nimport { createStepModel, createStringValueModel } from 'sequential-workflow-editor-model';\n\nexport const logStepModel = createStepModel\u003cLogStep\u003e('log', 'task', step =\u003e {\n  step.property('message')\n    .value(\n      createStringValueModel({\n        minLength: 1\n      })\n    )\n    .label('Message to log');\n});\n```\n\nIf your workflow contains global properties you can create a root model:\n\n```ts\nimport { createRootModel, createVariableDefinitionsValueModel } from 'sequential-workflow-editor-model';\n\nexport const rootModel = createRootModel\u003cMyDefinition\u003e(root =\u003e {\n  root.property('inputs')\n    .value(\n      createVariableDefinitionsValueModel({})\n    );\n);\n```\n\nNow we can create a definition model:\n\n```ts\nimport { createDefinitionModel } from 'sequential-workflow-editor-model';\n\nexport const definitionModel = createDefinitionModel\u003cMyDefinition\u003e(model =\u003e {\n  model.valueTypes(['string', 'number']);\n  model.root(rootModel);\n  model.steps([logStepModel]);\n});\n```\n\nTo create an editor provider you need to pass a definition model to the `EditorProvider.create` method. The provider requires a unique identifier generator. You can use the `Uid` class from the `sequential-workflow-designer` package.\n\n```ts\nimport { EditorProvider } from 'sequential-workflow-editor';\nimport { Uid } from 'sequential-workflow-designer';\n\nexport const editorProvider = EditorProvider.create(definitionModel, {\n  uidGenerator: Uid.next\n});\n```\n\nWe have everything to attach the editor provider to a designer. For the Sequential Workflow Designer you need to pass the following options:\n\n```ts\nimport { Designer } from 'sequential-workflow-designer';\n\nconst designer = Designer.create(placeholder, startDefinition, {\n  editors: {\n    rootEditorProvider: editorProvider.createRootEditorProvider(),\n    stepEditorProvider: editorProvider.createStepEditorProvider()\n  },\n  validator: {\n    step: editorProvider.createStepValidator(),\n    root: editorProvider.createRootValidator()\n  },\n  // ...\n});\n```\n\nThat's it! Check the source code of [our demo](./demos/webpack-app/) to see the final code.\n\n## 💡 License\n\nThis project is released under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnocode-js%2Fsequential-workflow-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnocode-js%2Fsequential-workflow-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnocode-js%2Fsequential-workflow-editor/lists"}