This question has been bugging me for a while… finally got round to writing it down if only to get it off my chest!

Summary/TLDR

• Is there a tool that makes it easier to create/set up a “pattern library” to document and develop UI components in multiple frameworks (HTML, WebComponent, React, Vue, etc)?

Definition

I use the term “pattern library” to refer to a collection of UI components, which is a subclass of a design system, as described in the following articles.

• A comprehensive guide to design systems
• Design Systems vs. Pattern Libraries vs. Style Guides – What’s the Difference?

I use the term “framework” loosely for the sake of brevity, hence the inclusion of React (a UI library) and of course HTML. It refers to any way to render UI components.

Inspiration

IBM’s Carbon Design System has UI components in vanilla (HTML+SCSS+JS), React, Angular, and Vue! 🤯

Github’s Primer provides Primer CSS and React pattern library Primer Components. It also provides implementation of the components in pure HTML.

npm install @primer/react

yarn add @primer/react

Lastly, Salesforce’s Lightning Design System provides HTML+CSS and WebComponent usage.

Rationale & Problems

Having a UI pattern library at hand—combined with tools like Storybook—speeds up prototyping, design, development, and even documentation. However, tools like Storybook and Patternlab only allow you to work in one framework OR vanilla HTML. (Storybook does support numerous frameworks but you have to set up separate projects.)

Why not stick to one framework? You (ie. your organisation or your client) might have multiple products that require different stacks, or you might want to experiment with new stacks. If you are the sole front-end dev in a small product team or a freelance dev, you might not have the resources to work on multiple separate codebases just to document your components.

• How do we make it easier to develop in multiple frameworks—hence reducing excessive dependence on one particular library?
• HTML is the basic building block for the web, so UI components have to be available in plain HTML. On the other hand, some developers might find it easier/faster to prototype in, say, React. How do we encourage getting the best of both worlds without turning it into a “versus” thing?
• How do we streamline component development and documentation across frameworks? How do we make sure UI components are developed in a consistent manner across frameworks? (choice of elements, class names, attributes and props, etc)

(Vague) Ideas & Further Questions

Disclaimer: I’m a beginner and have not fully mastered the complexities of front-end tooling; just considering the possibilities as far as I could understand.

• Set up a yarn workspaces that contains multiple packages. One package exports branding/foundations design tokens. We write the components in one “primary” component package (in WebComponents because it’s closest to native web platform? or in vanilla JS because it’s easy to convert to other formats?); use bundler/compiler/transpiler(?) to export to multiple formats.
• Then from separate packages, import those components that you can further modify if you so choose. Each package would have similar folder structure and have Storybook setup for each framework. (Is there a “generator” of sorts that can automatically generate this?)
• Use SCSS/Sass as single source of truth. (To some extent I’m already doing this—I use the same CSS for a React Storybook pattern library and a Laravel web app.)
• Where do design tools that output code (Sketch, Figma, Zeplin) figure in this? Should they be the source of truth? (ie. Should they be developed to output code for multiple frameworks?)
  • Design-to-code tools seem to get much hype, and I guess it’s ideal for visual-oriented designers and developers (which unfortunately I’m not)—but it would mean you have to develop from those tools? 🤔

Would love to know if anyone has experience with or insights about this topic.