{"id":20458763,"url":"https://github.com/riccardoperra/pipelineui","last_synced_at":"2025-09-24T20:31:35.129Z","repository":{"id":260472646,"uuid":"865787319","full_name":"riccardoperra/pipelineui","owner":"riccardoperra","description":"Open source editor for visualizing, creating and managing GitHub Actions workflows. Built with SolidStart and Appwrite. https://hack.solidjs.com/submissions","archived":false,"fork":false,"pushed_at":"2024-11-11T21:54:24.000Z","size":4102,"stargazers_count":21,"open_issues_count":10,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-14T20:18:26.106Z","etag":null,"topics":["appwrite","codemirror","editor","solidjs","solidstart"],"latest_commit_sha":null,"homepage":"https://pipelineui.dev","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/riccardoperra.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2024-10-01T06:14:15.000Z","updated_at":"2025-01-09T08:37:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"84af97a2-0624-416f-81a3-52e7509c9f4f","html_url":"https://github.com/riccardoperra/pipelineui","commit_stats":null,"previous_names":["riccardoperra/pipelineui"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riccardoperra%2Fpipelineui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riccardoperra%2Fpipelineui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riccardoperra%2Fpipelineui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riccardoperra%2Fpipelineui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/riccardoperra","download_url":"https://codeload.github.com/riccardoperra/pipelineui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234122051,"owners_count":18783138,"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":["appwrite","codemirror","editor","solidjs","solidstart"],"created_at":"2024-11-15T12:13:49.880Z","updated_at":"2025-09-24T20:31:29.584Z","avatar_url":"https://github.com/riccardoperra.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"./docs/logo_for_github_white.svg\"\u003e\n  \u003cimg alt=\"PipelineUI logo\" src=\"./docs/logo_for_github_dark.svg\" width=\"250\"\u003e\n\u003c/picture\u003e\n\n---\n\nPipeline UI is a free, open-source visual editor for visualizing, creating and managing GitHub Actions workflows.\nBuilt with SolidStart, this tool simplifies the process of creating GitHub pipelines\nby allowing users to visualize, create and update existing CI/CD workflows.\n\n\u003e [!NOTE]\n\u003e\n\u003e This project has been built to partecipate in [SolidHack 2024](https://www.solidjs.com/blog/solidhack-2024-announcement)\n\u003e and [Appwrite’s Hacktoberfest 2024 Hackathon](https://appwrite.io/blog/post/appwrite-hacktoberfest-hackathon-2024).\n\u003e\n\u003e Although there are some alternative solutions that can help a lot writing workflow files\n\u003e directly from IDE, this project mainly is a MVP to discover new technologies\n\u003e\n\u003e The amount of time dedicated in this project is very limited, and the features needed for a complete project are numerous.\n\u003e\n\u003e Therefore, some features will **undoubtedly be missing** and may be implemented in the future.\n\n## Table of contents\n\n- [Features](#features)\n  - [Available editor features (External Link)](./packages/app/src/routes/about/supported-workflow-features.mdx)\n- [Technical info](#-technical-info)\n  - [UI](#ui)\n  - [GitHub API](#github-api)\n  - [State Management](#state-management)\n  - [YAML Editor](#yaml-editor)\n  - [Flow diagram](#flow-diagram)\n  - [Backend](#backend)\n  - [Other dependencies](#other)\n  - [Hosting](#hosting)\n- [Disclaimer for hackathon entry](#disclaimer-for-hackathon-entry)\n\n## Features\n\n### ✅ Built-in editor\n\nVisualize and/or modify your workflow file through a simple UI.\n\n- View your steps dependency graph through the main interactive canvas\n- Check your workflow validity through the YAML Viewer and it's linter, which immediately tell you if your file respect the [GitHub Workflow Syntax](https://docs.github.com/en/actions/writing-workflows/workflow-syntax-for-github-actions) thanks to the GitHub Language Service integration.\n- Modify your workflow file updating the Properties panel in the right side.\n\n\u003e [!NOTE]\n\u003e\n\u003e [Discover all available editor features](./packages/app/src/routes/about/supported-workflow-features.mdx)\n\n![Built-in editor](./docs/327shots_so.png)\n\n### ✅ Search for existing GitHub workflows\n\nIf you already have an existing workflow file pushed in your repository, yu can use the built-in search to retrieve all workflows and\n`fork` them.\n\n![Search for existing github workflows](./docs/262shots_so.png)\n\n### ✅ Create your own workflows files\n\nIf you haven't an existing workflow file, you can create it from scratch (only if you're authenticated)\n\nWorkflow files are persisted into [Appwrite Cloud](https://appwrite.io/) and **are publicly readable to everyone that now the shareable link**.\n\n![Create scratches](./docs/577shots_so.png)\n\n## 🤖 Technical info\n\nPipelineUI is entirely built with [Solid](https://github.com/solidjs/solid) and [SolidStart](https://github.com/solidjs/solid-start)\nwith enabled SSR.\n\nThe core technical points of this project can be summarized in those bullet items:\n\n- SolidStart SSR with mutations and server functions for session, workflow and scratches crud\n- MDX prerendered routes for /about pages\n  - [pipelineui.dev/about](https://pipelineui.dev/about)\n  - [pipelineui.dev/supported-workflow-features](https://pipelineui.dev/about/supported-workflow-features)\n- Language Service Protocol and linter integration with CodeMirror via web-worker\n- Editor local first state management with [statebuilder](https://github.com/riccardoperra/statebuilder) via plugins\n- Usage of [Lingui](https://lingui.dev) for i18n\n- Appwrite OAuth integration with SolidStart API routes\n- Appwrite Database integration with SolidStart server functions\n\n### User interface\n\nThe user interface has been built with:\n\n- [@kobalte/core](https://github.com/kobaltedev/kobalte): Accessible components for SolidJS\n- [@solid-primitives/\\*](https://github.com/solidjs-community/solid-primitives): SolidJS primitives library\n- [corvu](https://corvu.dev/): UI primitives for SolidJS\n- [vanilla-extract](https://vanilla-extract.style/): Zero-runtime CSS in typescript\n\n\u003e [!WARNING]\n\u003e\n\u003e The source code of [@vanilla-extract/vite-plugin](https://github.com/vanilla-extract-css/vanilla-extract/tree/master/packages/vite-plugin) has been patched\n\u003e in order to support solid start w/ vinxi for multi-environment ssr/csr build.\n\u003e\n\u003e [Patch file](./patches/@vanilla-extract__vite-plugin@4.0.17.patch)\n\u003e\n\u003e [Custom app config](./packages/app/app.config.ts)\n\n---\n\n### GitHub API\n\nThis project uses [ungh](https://github.com/unjs/ungh) from UnJS in order to call GitHub API.\n\n---\n\n### State Management\n\nThis project uses [statebuilder](https://github.com/riccardoperra/statebuilder) to handle local state.\n\nThe editor store uses a command-based approach which granularly update the yaml code imperatively via [yaml](https://www.npmjs.com/package/yaml) package. Currently autosave and local persistance (indexedb) is not implemented, but may be present in the future\n\nSee some implementations in `store` folder:\n\n- [packages/app/src/store/editor](packages/app/src/store/editor)\n\n---\n\n### YAML Editor\n\n- [CodeMirror6](https://codemirror.net/): used to display the YAML editor and merge view. The LSP integration is a revisited version of [codemirror-languageserver](https://github.com/FurqanSoftware/codemirror-languageserver), which was a\n  good starting point to integrate the GitHub workflow language server.\n  - [packages/yaml-editor/src/lsp](https://github.com/riccardoperra/pipelineui/tree/main/packages/yaml-editor/src/lsp)\n  - Portion of CodeMirror implementation is present in the [@pipelineui/yaml-editor](./packages/yaml-editor)\n- [actions/languageservices](https://github.com/actions/languageservices): The language service repo for GitHub\n  workflows and expressions. This was used to parse the workflow files and validate them, and enhance the editor code\n  through linting and hover-in code documentation.\n\n\u003e [!WARNING]\n\u003e\n\u003e The source code of @actions/workflow-parser has been patched and rebuilt in order to work on vite in node/browser environment without getting errors and to\n\u003e extend some functionalities needed to the workflow yaml parser and lsp that were not available before.\n\u003e\n\u003e Currently @actions/languageserver has been wrapped to ship only browser compatible packages with the built-in workflow-parser patch.\n\u003e\n\u003e Read more about this in the package [README](./packages/workflow-parser/README.md).\n\u003e\n\u003e [MIT License](https://github.com/actions/languageservices/blob/main/LICENSE)\n\u003e\n\u003e [My patch file](./patches/@actions__workflow-parser@0.3.13.patch)\n\n---\n\n### Flow diagram\n\nThe implemented Flow diagram is very basic and it has been built with solid taking advantage of some other dependencies:\n\n- [elkjs](https://github.com/kieler/elkjs): ELK layout algorithm, used to calculate the flow item positions\n- [panzoom](https://github.com/anvaka/panzoom): Cross-browser compatible pan and zoom library\n- [@xyflow/system](https://github.com/xyflow/xyflow): Core of xyflow, currently used to build the smooth edge curve\n  svg\n  - [smootstep-edge.ts](https://github.com/xyflow/xyflow/blob/97fdff59d40071aee0b3192f7b571c6bdd4d09fd/packages/system/src/utils/edges/smoothstep-edge.ts#L215)\n\n---\n\n### Backend\n\nBackend persistence and authentication has been done with [appwrite](https://appwrite.io/).\n\nUsed Appwrite features:\n\n- Auth\n- Database\n\nMost of the Appwrite code is available into\n\n- [packages/app/src/lib/server](packages/app/src/lib/server).\n- [packages/app/src/lib/scratchApi.ts](packages/app/src/lib/scratchApi.ts).\n- [packages/app/src/routes/api/oauth.ts](packages/app/src/routes/api/oauth.ts).\n\n---\n\n### Other dependencies\n\nHere's a list of my personal dependencies, which they have been used to be tested and improved during the development.\n\n- [@codeui/kit](https://github.com/riccardoperra/codeui): [CodeImage](https://github.com/riccardoperra/codeimage) design\n  system (Kobalte + VanillaExtract)\n- [statebuilder](https://github.com/riccardoperra/statebuilder): Pluggable state management\n- [solid-codemirror](https://github.com/riccardoperra/solid-codemirror): SolidJS adapter for CodeMirror\n\n---\n\n### Hosting\n\nThis application is hosted on Railway. Deploy are made via github action CI/CD\n\n- [Workflow file](./.github/workflows/deploy.yml)\n- [See the workflow file inside PipelineUI](https://pipelineui.dev/editor/riccardoperra/pipelineui/main/.github/workflows/deploy.yml)\n\n---\n\n## Disclaimer for hackathon entry\n\nThis project will be submitted for these two hackathons:\n\n- [SolidHack 2024](https://hack.solidjs.com/)\n- [AppWrite's Hacktoberfest 2024 Hackathon](https://appwrite.io/blog/post/appwrite-hacktoberfest-hackathon-2024)\n\nSince they have two different deadlines, development will be subdivided into two branches until the two hackathon ends:\n\n- [main](https://github.com/riccardoperra/pipelineui/tree/main): Source code to be submitted for SolidHack\n- [appwrite](https://github.com/riccardoperra/pipelineui/tree/appwrite): Source code to be submitted for Appwrite Hackathon\n\nThose two branches are linked in a multi-environment railway project which is currently visible to everyone: [Railway Deployment](https://railway.app/project/8e131c67-73c1-4ab6-9fa4-31dfa6c9000e).\n\nGitHub workflow for automated deploy: [deploy.yml](https://github.com/riccardoperra/pipelineui/blob/main/.github/workflows/deploy.yml)\n\nGithub environment deployments:\n\n- [Appwrite](https://github.com/riccardoperra/pipelineui/deployments/appwrite)\n- [Production (SolidHack)](https://github.com/riccardoperra/pipelineui/deployments/production)\n\n---\n\n## LICENSE\n\nMIT © [Riccardo Perra](https://github.com/riccardoperra)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friccardoperra%2Fpipelineui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Friccardoperra%2Fpipelineui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friccardoperra%2Fpipelineui/lists"}