{"id":17954855,"url":"https://github.com/dennisreimann/uiengine","last_synced_at":"2025-05-15T03:04:53.733Z","repository":{"id":44331547,"uuid":"73913845","full_name":"dennisreimann/uiengine","owner":"dennisreimann","description":"Workbench for UI-driven development","archived":false,"fork":false,"pushed_at":"2025-02-21T10:27:35.000Z","size":31730,"stargazers_count":370,"open_issues_count":4,"forks_count":25,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-05-15T03:04:21.625Z","etag":null,"topics":["brand-manual","components","design-system","frontend","frontend-components","modular-components","pattern-lab","pattern-library","styleguide","ui-design","uiengine","uiengineering","web-development"],"latest_commit_sha":null,"homepage":"https://dennisreimann.github.io/uiengine/","language":"JavaScript","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/dennisreimann.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","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},"funding":{"custom":["⚡️ Lightning Address: donate@d11n.net"]}},"created_at":"2016-11-16T11:31:17.000Z","updated_at":"2025-05-06T19:37:24.000Z","dependencies_parsed_at":"2025-02-28T18:09:26.722Z","dependency_job_id":"3bf93ec6-dcd3-491f-a796-346c7ecd6a7f","html_url":"https://github.com/dennisreimann/uiengine","commit_stats":{"total_commits":1238,"total_committers":7,"mean_commits":"176.85714285714286","dds":"0.016155088852988664","last_synced_commit":"db95a978a7fc3c22d69cb6dc4b3236b170094fd3"},"previous_names":["dennisreimann/hakuin"],"tags_count":182,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dennisreimann%2Fuiengine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dennisreimann%2Fuiengine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dennisreimann%2Fuiengine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dennisreimann%2Fuiengine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dennisreimann","download_url":"https://codeload.github.com/dennisreimann/uiengine/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254264765,"owners_count":22041793,"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":["brand-manual","components","design-system","frontend","frontend-components","modular-components","pattern-lab","pattern-library","styleguide","ui-design","uiengine","uiengineering","web-development"],"created_at":"2024-10-29T10:20:27.424Z","updated_at":"2025-05-15T03:04:53.687Z","avatar_url":"https://github.com/dennisreimann.png","language":"JavaScript","funding_links":["⚡️ Lightning Address: donate@d11n.net","https://github.com/sponsors/dennisreimann"],"categories":[],"sub_categories":[],"readme":"# UIengine\n\nWorkbench for UI-driven development:\nA tool for developers and designers to build and document web sites and apps.\n\nUseful if you want to …\n\n- Create a living pattern library\n- Document your design system\n- Prototype with your apps components and templates\n- Use code as a single source of truth\n\n![UIengine: Workbench for UI-driven development](./uiengine.png)\n\n## 🚀  What it enables\n\n- Establish a UI-driven workflow and structure your web UI into modular components.\n- Give your team and stakeholders a central spot to develop and discuss the UI.\n- Replace deliverables with usable, testable and production ready output/code.\n- Make documentation fun and easy by providing structure and nice looking pages.\n\n## 🏎 Quickstart\n\nTo explore the features yourself you can quickly initialize a project with some demo content:\n\n```bash\nmkdir uiengine-demo \u0026\u0026 cd uiengine-demo \u0026\u0026 npm init -y\nnpm install @uiengine/core @uiengine/adapter-html --save-dev\nnpx uiengine init --demo\nnpx uiengine build --serve --watch\n```\n\nSee the [getting started guide](https://dennisreimann.github.io/uiengine/basics/getting-started/)\nfor further details.\nThere are also some [introduction videos](https://www.youtube.com/watch?v=YBm_ye9da-Q\u0026list=PLBXz0hPvV2jNAFb9KxvV-2Op8cy3tA8E2):\n\n\u003cdiv class='ytEmbed'\u003e\u003ciframe title=\"UIengine Introduction Videos\" src=\"https://www.youtube-nocookie.com/embed/videoseries?list=PLBXz0hPvV2jNAFb9KxvV-2Op8cy3tA8E2\" frameborder=\"0\" allow=\"autoplay; encrypted-media; picture-in-picture\" allowfullscreen\u003e\u003c/iframe\u003e\u003c/div\u003e\n\n## 🖥 Examples and Screenshots\n\nTo get an idea of what a real-world project looks like, see the React sample project:\n\n- [Tasty BBQ Design System](https://dennisreimann.github.io/uiengine-sample-react/design-system/): The UIengine output for this sample project\n- [Tasty BBQ Website](https://dennisreimann.github.io/uiengine-sample-react/): The corresponding website, built with React and Next.js.\n- [Tasty BBQ Source Code](https://github.com/dennisreimann/uiengine-sample-react).\n\n## 📘 Documentation\n\nSee the [documentation](https://dennisreimann.github.io/uiengine/) site, which is also generated with the UIengine.\n\n## 🔩 Technical TL;DR\n\n[![npm](https://img.shields.io/npm/v/@uiengine/core.svg)](https://www.npmjs.com/package/@uiengine/core)\n[![Standard - JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)\n[![Build Status](https://github.com/dennisreimann/uiengine/actions/workflows/build.yml/badge.svg)](https://github.com/dennisreimann/uiengine/actions/workflows/build.yml)\n[![Test Status](https://github.com/dennisreimann/uiengine/actions/workflows/test.yml/badge.svg)](https://github.com/dennisreimann/uiengine/actions/workflows/test.yml)\n[![Known Vulnerabilities](https://snyk.io/test/github/dennisreimann/uiengine/badge.svg)](https://snyk.io/test/github/dennisreimann/uiengine)\n[![Coverage Status](https://coveralls.io/repos/github/dennisreimann/uiengine/badge.svg?branch=master)](https://coveralls.io/github/dennisreimann/uiengine?branch=master)\n[![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#-contributors)\n[![Maintained with lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)\n[![Support the project](https://badgen.net/badge/support/via%20donation/cyan)](https://github.com/sponsors/dennisreimann)\n\n### ⚒ How does it work?\n\nAt its core, the UIengine is a static site generator.\nIt can be used in standalone mode or integrated into your build process.\n\n➡️ Input: Your projects components, templates, pages and documentation\n\n⬅️ Output: A static site that can be used as a workbench for development and deployed documentation\n\nIt consumes the files and structure of your project and generates the documentation based on this.\nIn development mode the output is regenerated on file change and synced to the browser.\nThis provides you with a development environment for creating the components, prototyping and writing the docs.\n\n### 💯 Main features\n\n- **Templating agnostic**:\n  Various templating engines are integrated via adapters.\n  This gives you flexibility of choice and the option to integrate custom ones.\n  It works with whatever can be rendered via JavaScript, e.g. JSX, Vue, EJS, Pug/Jade, Handlebars.\n- **Prototyping environment**:\n  Build your UI without the need for an existing backend/API.\n  Render your templates and components with mock data.\n  Build various variants for pages by providing different data to your views.\n- **Best practice approach**:\n  The tool guides you towards best practices like\n  [the component folder pattern](https://medium.com/styled-components/component-folder-pattern-ee42df37ec68),\n  [the modlet workflow](https://css-tricks.com/key-building-large-javascript-apps-modlet-workflow/)\n  and by proposing a separation of data and template/component.\n- **In sync with the end product**:\n  The docs are generated from the code that is used in your application.\n  Hence you get a living pattern library – not a separate thing that needs to be looked after regularly.\n- **Flexible integrations**:\n  Templating engines can be configured so you can fit it to your needs.\n  Same goes for the markdown parsing/rendering which is configurable too.\n- **Covers green- and brownfield projects**:\n  Whether you start out with a pattern library or want to transition your process and refactor your existing UI into modular components, the UIengine has you covered.\n\nFor the evaluation process you might also want to have a look at the [alternatives](#-alternatives).\n\n### 🗜 Prerequisites\n\nUIengine requires at least Node.js 16.16 (tracking the latest active Node.js LTS version).\nThis guarantees a reasonable level of backwards compatibility.\n\n### 🖖 Alternatives\n\nOK, the UIengine looks really cool but it's not quite what you are looking for?\nOr you want to first compare a few solutions to see which one is the right fit?\nHere are some other projects that you might want to evaluate:\n\n- [Storybook](https://storybook.js.org/)\n- [Pattern Lab](http://patternlab.io/)\n- or have a look at [the ever growing list of similar tools](https://github.com/davidhund/styleguide-generators).\n\n## 🛠 Development\n\nYou like this project and are interested in participating?\nSee the [development docs](https://dennisreimann.github.io/uiengine/development/contributing/) for an introduction and workflows when hacking on the UIengine.\n\n## ✨ Contributors\n\nThanks goes to these wonderful people:\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.persiel.com\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/6762951?v=4\" width=\"100px;\" alt=\"Jan Persiel\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJan Persiel\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#design-janpersiel\" title=\"Design\"\u003e🎨\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://twitter.com/Cos_Anca\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/4587864?v=4\" width=\"100px;\" alt=\"Cos Anca\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eCos Anca\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#design-cosanca\" title=\"Design\"\u003e🎨\u003c/a\u003e \u003ca href=\"https://github.com/dennisreimann/uiengine/commits?author=CosAnca\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://geers.tv\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/152287?v=4\" width=\"100px;\" alt=\"Michael Geers\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMichael Geers\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/dennisreimann/uiengine/commits?author=naltatis\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://modo.md\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/858428?v=4\" width=\"100px;\" alt=\"Matteo Fogli\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMatteo Fogli\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/dennisreimann/uiengine/commits?author=therealpecus\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://jonas-havers.de\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/1322093?v=4\" width=\"100px;\" alt=\"Jonas Havers\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJonas Havers\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/dennisreimann/uiengine/commits?author=JonasHavers\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.lost-in-technology.com/blog/\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/17713179?v=4\" width=\"100px;\" alt=\"René Mäkeler\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRené Mäkeler\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#example-MrAvantiC\" title=\"Examples\"\u003e💡\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification.\nContributions of any kind welcome!\n\n- - - - -\n\n👨🏻‍💻 Brought to you by the nice people behind [UIengineering](https://uiengineering.de). 👨🏻‍💻\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdennisreimann%2Fuiengine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdennisreimann%2Fuiengine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdennisreimann%2Fuiengine/lists"}