Diffix-test NPM

Diffix - Web Component UI Library

Diffix is a modern, performant, customizable, open-source Web Component UI library based on a custom design system. Works with any JavaScript framework out-of-the-box. It's built with Lit, Vite, and TypeScript.

Build a modern, highly performant, and highly accessible web experience.
Integrate with popular frameworks like React, Vue, Angular, Svelte, etc.
Build a standards-based user interface following W3C Web Component standards.
Customize the design language for your project by modifying design tokens.
Use the components out-of-the-box in existing front-end projects.

Instalation

Make sure you have the latest Node.js installed on your machine. Use a package manager to install Diffix from npm:

npm install diffix-test

Import components

Import the target component from diffix-test/components/component-name. Import automatically registers the Web Component (causes a side effect).

import 'diffix-test/components/button';

Or you can import all components at once:

import 'diffix-test';

Import theme

To use the theme, import the CSS file. There are two ways to do this:

Using an application bundler (Webpack, Rollup, Vite, etc.):

import 'diffix-test/themes/default.css';

Using a <link> tag:

<link href="/node_modules/diffix-test/dist/themes/default.css" rel="stylesheet" />

Import font

To import the theme font, add the following lines to the <head> of your HTML document:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
/>

Usage

Diffix components are designed to be used as Web Components. This means you import the target component in the script and use it in the HTML.

<dfx-button theme="primary" variant="filled">Button</dfx-button>

Form controls should be automatically detectable inside the form element. To serialize data from the form, you can use the FormData. Client-side validation uses Constraint Validation API. You can activate it by using attributes such as required, minlength, maxlength, pattern, etc.

<form id="form" style="display: grid; gap: 1rem">
  <dfx-input label="Name" name="name" required></dfx-input>
  <dfx-button type="submit" variant="filled">Submit</dfx-button>
</form>

<script>
  document.querySelector('#form').addEventListener('submit', event => {
    event.preventDefault();
    const formData = new FormData(event.target);
    alert(JSON.stringify(Object.fromEntries(formData)));
  });
</script>

Components are published as ES modules, so they can be used in all modern browsers with no build step. That's good for prototyping, but for performance reasons, components in production should be bundled, tree-shaken, and optimized by individual applications using bundlers like Webpack, Rollup, or Vite.

There is a simple demo using Vite to showcase the usage of individual components.

Attribution

Special thanks to the following projects that help make this project possible:

Components are built with Lit, Vite, and TypeScript.
Component tests run on Web Test Runner and Playwright.
Documentation is built with Storybook and is hosted on Netlify.
Components are linted and formatted with ESLint and Prettier.
Component metadata is generated by the Custom Elements Manifest Analyzer.
Components are published to npm with Semantic Release and GitHub Actions.

Contribute

As an open-source project, all contributions are welcome! Feel free to report bugs and submit feature requests. If you want to contribute to the code, please read the Contributing Guide.

License

Diffix was created by Dominik Fryč. It's available under the MIT license. You can use it in any project, commercial or not, with or without attribution.