# @haxtheweb/d-d-d > design, develop, destroy the competition Latest version **26.8.0** (published 2026-08-14) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @haxtheweb/d-d-d pnpm add @haxtheweb/d-d-d yarn add @haxtheweb/d-d-d bun add @haxtheweb/d-d-d ``` ## Health **Score 60/100 (C)** — status: active. Positive: esm support; no vulnerabilities; recently updated; high maintenance score. Warnings: low downloads; no types. ## Facts | | | |---|---| | Version | 26.8.0 | | Published | 2026-08-14 | | First published | 2024-05-23 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 5 | | Unpacked size | 423.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 274 | | Author | haxtheweb | | Maintainers | btopro | | Keywords | webcomponents, html, haxtheweb, lit | ## Links - npm: https://www.npmjs.com/package/@haxtheweb/d-d-d - Repository: https://github.com/haxtheweb/webcomponents - Homepage: https://github.com/haxtheweb/webcomponents#readme - Issues: https://github.com/haxtheweb/webcomponents/issues - npm.io page: https://npm.io/package/@haxtheweb/d-d-d ## Dependencies (5) - [lit](https://npm.io/package/lit.md) 3.3.3 - [@haxtheweb/hax-iconset](https://npm.io/package/@haxtheweb/hax-iconset.md) ^26.8.0 - [@haxtheweb/simple-icon](https://npm.io/package/@haxtheweb/simple-icon.md) ^26.8.0 - [@haxtheweb/i18n-manager](https://npm.io/package/@haxtheweb/i18n-manager.md) ^26.8.0 - [@haxtheweb/simple-colors](https://npm.io/package/@haxtheweb/simple-colors.md) ^26.8.0 ## Alternatives - [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads - [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads - [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads - [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads - [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads ## Recent versions - 26.8.0 (latest) — 2026-08-14 - 26.0.0 — 2026-05-12 - 25.0.0 — 2026-01-09 - 11.0.5 — 2025-06-18 - 11.0.0 — 2025-06-06 - 10.0.2 — 2025-01-31 - 10.0.1 — 2024-12-23 - 10.0.0 — 2024-12-20 - 9.0.27 — 2024-12-11 - 9.0.26 — 2024-12-09 - 9.0.25 — 2024-12-09 - 9.0.24 — 2024-12-09 - 9.0.23 — 2024-12-06 - 9.0.22 — 2024-12-05 - 9.0.21 — 2024-11-26 - … 16 more at https://npm.io/package/@haxtheweb/d-d-d/versions ## README [![Project Status: Active – The project has reached a stable, usable state and is being actively developed.](https://www.repostatus.org/badges/latest/active.svg)](https://www.repostatus.org/#active) [![OpenSSF Scorecard](https://api.securityscorecards.dev/projects/github.com/haxtheweb/webcomponents/badge)](https://securityscorecards.dev/viewer/?uri=github.com/haxtheweb/webcomponents) [![Community Support](https://badgen.net/badge/support/community/cyan?icon=awesome)](/SUPPORT.md) [![License: Apache 2.0](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](/CODE_OF_CONDUCT.md) [![Discord](https://badgen.net/badge/icon/discord?icon=discord&label)](https://discord.gg/EKYJAjqGhf) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![Lit](https://img.shields.io/badge/-Lit-324fff?style=flat&logo=data:image/svg%2bxml;base64,PHN2ZyBmaWxsPSIjZmZmIiB2aWV3Qm94PSIwIDAgMTYwIDIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMTYwIDgwdjgwbC00MC00MHptLTQwIDQwdjgwbDQwLTQwem0wLTgwdjgwbC00MC00MHptLTQwIDQwdjgwbDQwLTQwem0tNDAtNDB2ODBsNDAtNDB6bTQwLTQwdjgwbC00MC00MHptLTQwIDEyMHY4MGwtNDAtNDB6bS00MC00MHY4MGw0MC00MHoiLz48L3N2Zz4%3D)](https://lit.dev/) [![#HAXTheWeb](https://img.shields.io/badge/-HAXTheWeb-999999FF?style=flat&logo=data:image/svg%2bxml;base64,PHN2ZyBpZD0iZmVhMTExZTAtMjEwZC00Y2QwLWJhMWQtZGZmOTQyODc0Njg1IiBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE4NC40IDEzNS45NyI+PGRlZnM+PHN0eWxlPi5lMWJjMjAyNS0xODAwLTRkYzItODc4NS1jNDZlZDEwM2Y0OTJ7ZmlsbDojMjMxZjIwO308L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iZTFiYzIwMjUtMTgwMC00ZGMyLTg3ODUtYzQ2ZWQxMDNmNDkyIiBkPSJNNzguMDcsODMuNDVWNTVIODYuMnY4LjEzaDE2LjI2djQuMDdoNC4wN1Y4My40NUg5OC40VjY3LjE5SDg2LjJWODMuNDVaIi8+PHBvbHlnb24gcG9pbnRzPSIxNTMuMTMgNjMuNyAxNTMuMTMgNTEuMzkgMTQwLjU0IDUxLjM5IDE0MC41NCAzOS4wOSAxMjcuOTUgMzkuMDkgMTI3Ljk1IDI2Ljc5IDEwMi43OCAyNi43OSAxMDIuNzggMzkuMDkgMTE1LjM2IDM5LjA5IDExNS4zNiA1MS4zOSAxMjcuOTUgNTEuMzkgMTI3Ljk1IDYzLjcgMTQwLjU0IDYzLjcgMTQwLjU0IDc2IDEyNy4zNiA3NiAxMjcuMzYgODguMyAxMTQuNzggODguMyAxMTQuNzggMTAwLjYxIDEwMi4xOSAxMDAuNjEgMTAyLjE5IDExMi45MSAxMjcuMzYgMTEyLjkxIDEyNy4zNiAxMDAuNjEgMTM5Ljk1IDEwMC42MSAxMzkuOTUgODguMyAxNTIuNTQgODguMyAxNTIuNTQgNzYgMTY1LjcyIDc2IDE2NS43MiA2My43IDE1My4xMyA2My43Ii8+PHBvbHlnb24gcG9pbnRzPSIzMy4xMyA2My43IDMzLjEzIDUxLjM5IDQ1LjcyIDUxLjM5IDQ1LjcyIDM5LjA5IDU4LjMxIDM5LjA5IDU4LjMxIDI2Ljc5IDgzLjQ4IDI2Ljc5IDgzLjQ4IDM5LjA5IDcwLjg5IDM5LjA5IDcwLjg5IDUxLjM5IDU4LjMxIDUxLjM5IDU4LjMxIDYzLjcgNDUuNzIgNjMuNyA0NS43MiA3NiA1OC44OSA3NiA1OC44OSA4OC4zIDcxLjQ4IDg4LjMgNzEuNDggMTAwLjYxIDg0LjA3IDEwMC42MSA4NC4wNyAxMTIuOTEgNTguODkgMTEyLjkxIDU4Ljg5IDEwMC42MSA0Ni4zMSAxMDAuNjEgNDYuMzEgODguMyAzMy43MiA4OC4zIDMzLjcyIDc2IDIwLjU0IDc2IDIwLjU0IDYzLjcgMzMuMTMgNjMuNyIvPjwvc3ZnPg==)](https://haxtheweb.org/) [![Published on npm](https://img.shields.io/npm/v/@haxtheweb/h-a-x?style=flat)](https://www.npmjs.com/search?q=@haxtheweb) [![build](https://github.com/haxtheweb/webcomponents/workflows/build/badge.svg?branch=master)](https://github.com/haxtheweb/webcomponents/actions?query=branch%3Amaster) [![X](https://img.shields.io/twitter/follow/haxtheweb.svg?style=social&label=Follow)](https://twitter.com/intent/follow?screen_name=haxtheweb) # Welcome to the HaxTheWeb project! Web components that can work in just about anything, are very small (Vanila or Lit based) and have full on authoring solutions if you dig deeper; Enjoy! ## Onboarding New to the HAX ecosystem? **[Start here](https://github.com/haxtheweb/issues/blob/master/CONTRIBUTING.md)** — the single onboarding guide covers prerequisites, cloning the core repos, installing, and running each project locally. ## Getting Started ### Quick install: Dev Containers (as a core dev, forks preferrable) HAXTheWeb is dedicated to making contribution an accessible and simple experience. Follow the step-by-step guide below to explore our curated development environment: ### Prerequisites * On **Windows**: Update **WSL 2** * There are two methods available: * Open **WSL 2** in the [Microsoft Store](https://aka.ms/wslstorepage), select **Install/Update** * Open **PowerShell**, run the command: `wsl --update` * Why: Certain Windows editions are bundled with an outdated **WSL 2** version. * On macOS or Linux: None --- ### Guide 1. Install **Docker Desktop** * [Windows](https://docs.docker.com/desktop/setup/install/windows-install/) * Select the **WSL 2 Backend** option * **Restart** after installing * [macOS](https://docs.docker.com/desktop/setup/install/mac-install/) * [Linux](https://docs.docker.com/desktop/setup/install/linux/) * **Docker Desktop** must remain open for **VS Code** to connect with it. 2. Install [GitHub Desktop](https://desktop.github.com/download/) (optional) 3. Clone the repository with **Git** * Using **GitHub Desktop**: select **Clone Repository**, then select the **URL** option. * Enter the link to your repository: `https://github.com/haxtheweb/webcomponents` 4. Open the repository in **VS Code** * Using **GitHub Desktop**: simply select **Open in VS Code** 5. Some alerts with pop up in the **bottom right** corner of **VS Code**: * Select **Install Recommended Extensions** * Select **Reopen in Container** Wait a few minutes for your **Dev Container** to be built, then you're ready to go! Try the following command to open a demo HAXsite: ```bash yarn run haxsite ``` ### Alternative installs If you're interested in other installation methods, visit our [Contributing Docs](CONTRIBUTING.md#getting-started)! We provide native Bash and PowerShell scripts, in addition to manual instructions. ----------------------------------------------- ## What is HAX The authoring experience of HAX and the ability to make fast, static file backed websites rapidly. Get all the details you want on [HAX docs](https://haxtheweb.org/)! HAX seeks to be the smallest possible back-end CMS to make HAX work and be able to build websites with it. Leveraging JSON Outline Schema, HAX is able to author multiple pages, which it then writes onto the file system. This way a slim server layer is just for basic authentication, knowing how to save files, and placing them in version control. Watch and Learn more about HAX here: - Try Hax: https://hax.cloud - HAXCellence https://haxtheweb.org/what-is-hax - Youtube channel - https://www.youtube.com/@haxtheweb ### Issues / Support / Community - Discord Channel - https://discord.gg/EKYJAjqGhf - Unified issue queue - https://github.com/haxtheweb/issues/issues - Using Merlin directly in any HAX spaces and type "Issue" to jump start a report! ### Related links and tech - [HAXcms (NodeJS)](https://github.com/haxtheweb/haxcms-nodejs) - [HAXcms (PHP)](https://github.com/haxtheweb/haxcms-php) - [Storybook docs](https://open-apis.hax.cloud/) - [HAX [dot] PSU](https://hax.psu.edu) - [HAX doc site](https://haxtheweb.org/) - [HAX + 11ty](https://github.com/haxtheweb/hax11ty) ## To work on any element in our repo ```bash cd elements/ELEMENTNAME yarn start ``` Edit files in `lib/`, `src/`, `locales/` and `demo/` in order to modify the element to contribute back to us via PR. ## Scripts - `hax webcomponent my-element --y` - Run HAX CLI to create a new web component - `yarn test` - Run tests on ALL webcomponents. - `yarn run build` - Run build on ALL webcomponents. - `yarn run gallery` - Run component gallery (replaces storybook) - `yarn run build-gallery` - Build component gallery for deployment ## Web Component development Because this is a monorepo, each web component will need to be independently built in order to actively work on and preview the changes. Every web component has its own Gulp file and Yarn/NPM script. While still running `yarn start` in one terminal window (which runs the local server), you will need to open another terminal window, drill into the directory of the web component you'd like to work on, and execute the `yarn run dev` command. This command will use gulp tasks to watch the files within that web component directory and will automatically re-run the build command and refresh the browser when you make changes to the web component. ### Working on elements (new-element) Run `hax webcomponent` to make a new element. Go to the new element following the directions generated at the end of the element's creation. To work on the new-element run `yarn start` from it's directory. If you are pulling in another element to use, run `yarn add projectname --save` or edit the `package.json` file local to the element you are working on. **ALWAYS INSTALL FROM THE REPO ROOT, NOT THE ELEMENT YOU ARE WORKING ON** ### Example development on a web component ```bash cd /Sites/webcomponents yarn start # SHIFT + CTRL + T to open a new tab in Terminal cd elements your-card # or any other web component yarn run dev ``` Make a change to the web component and save. The gulpfile will handle transpiling the element down to ES5 and will bring in the HTML and Sass into the template in the web component. ## Test To test all webcomponents, run `yarn test` from the root of the repo. If you only want to test the web component you're working on: ```bash cd elements/your-card yarn test ``` Also, if your tests are failing and you want access to a live browser to investigate why, the following flag will keep the browser open. ```bash yarn test -- -p ``` Then open the URL that will be printed in the terminal. It looks something like this: `http://localhost:8081/components/@@haxtheweb/haxtheweb/generated-index.html?cli_browser_id=0`. ## Component Gallery We've replaced [Storybook](https://storybook.js.org/) with our own **Component Gallery** to preview and document our web components. The Component Gallery provides a better integrated experience with HAX design system and build tools. To run the component gallery locally ```bash yarn run gallery ``` This will build the gallery and start a web server. Navigate to the URL shown in the terminal to see the Component Gallery in action. The gallery will automatically rebuild when components change. To build the component gallery for deployment ```bash yarn run build-gallery ``` This generates the component gallery as a single HTML file: `component-gallery.html`. ### Component Gallery Features - **HAX Integration**: Built-in support for HAX-enabled components - **DDD Design System**: Uses our Design, Develop, Destroy design tokens - **Live Demos**: Interactive component demonstrations - **CodePen Export**: Direct export to CodePen for experimentation - **Search & Filter**: Easy component discovery - **Mobile Responsive**: Works on all device sizes ## Tech Stack **Client:** JavaScript, LitElement, Lit(https://lit.dev/) **Server:** Node.js ## Contributing Contributions are always welcome! ## Active contributors - [@btopro](https://www.github.com/btopro) ## Additional contributions Past contributors, student and larger community, can be found here: https://github.com/haxtheweb/webcomponents/graphs/contributors ![HAX Traveler: World Changer](https://raw.githubusercontent.com/haxtheweb/art/refs/heads/main/haxtheweb/hax-traveler-world-changer.jpg) --- _Source: https://npm.io/package/@haxtheweb/d-d-d · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._