The UIengine started out as a tool to build pattern libraries and documentation for design systems. My goal was to build something I could reuse in different projects, independent of the technologies used (e.g. templating languages).
Though the purpose is still the same, the tool has grown a lot and became more versatile during the last one and a half years. Now I am releasing the UIengine v1.0 to mark a public stable release and open it up for contributions.
A workbench for UI-driven development
When I started working on the UIengine there were already similar tools: Fractal and PatternLab being the well-known ones – in the meantime Storybook also became a popular solution for component-driven development. So why reinvent the wheel?
Most of the existing tools focussed on the component development, but lacked ways to also provide good documentation. Some were limited to using a specific templating language or framework, which was suboptimal for me: As a freelancer I am working on many projects and each one has its own set of constraints and requirements. I wanted to build a tool with an open source license, which I could use and extend with every project I work on.
The UI-driven workflow
As I am working in larger organisations with multiple teams and apps nowadays, we often had the same needs: Providing a consistent user interface throughout all the products touchpoints while keeping quality high and development fast. “Design systems” have become a popular term for a solution to this – and the UIengine supports our workflow of creating living design systems just fine.
We try to avoid creating deliverables (dead documents, e.g. graphic layouts or non-interaction wireframes) as much as possible. What are we doing instead? We try to bring most of the design and development workflow to the browser: The browser tooling has become pretty nice and here we have all the tools that also designers can benefit from: Layout via CSS grid and flexbox, variables via custom properties and animations done with CSS and JavaScript.
The UIengine is the central hub where most of the development takes place: The components and templates get implemented with the technology each team is using. We use the previews to display variants of the components and for prototyping on the template level.
When components and templates are done, we ship them as build artefacts (NPM packages) to the teams that consume the design system. There is also the html-sketchapp integration, which generates a Sketch library from the component code.
For the development there are a lot of useful features under the cover: One of my favorites being that the UIengine supports generating documentation for React PropTypes from the code automatically.
Besides that, features like scaffolding for components and documentation pages give you an extra productivity boost. Also when building a responsive website or app it is very handy to see multiple breakpoints or viewports at once (as shown in the Tasty BBQ sample project screenshot below). In addition to that the UIengine has support for creating design systems that require themeing, which can be used when working on white label sites.
Getting started and demos
I have spent a lot of time on trying to provide good documentation. As one of the projects main purposes is to make it fun and easy to write docs, it makes sense that the documentation site is generated with the UIengine itself.
There are a couple of resources that can get you started: The command for initializing a new project has the option to generate some demo content. Use this to try the UIengine yourself and get your hands dirty quickly:
# setup an empty project
mkdir uiengine-demo && cd uiengine-demo && npm init -y
# install the dependencies
npm install --save-dev @uiengine/core @uiengine/adapter-html
# initialize the demo project
npx uiengine init --demo
# build and start the dev server
npx uiengine build --serve --watch
In case you want to see a full-fledged example of a website featuring a design system, there is the Tasty BBQ sample project: The website is build with React/Next.js. It utilizes the UIengine to generate the corresponding design system documentation.
Please head on over to the UIengine repository on GitHub and star it if you like the project. I would also be very happy if you could help me spread the word about this release. Thanks and enjoy the project! 😀