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!
New to the HAX ecosystem? Start here — the single onboarding guide covers prerequisites, cloning the core repos, installing, and running each project locally.
- Web component developers — build and maintain the 250+ LitElement components, themes, and the DDD design system.
- Site builders and course designers — the accessible, standards-based building blocks every HAX site and course page is authored from.
- Campus IT and adopters — published packages under the
@haxthewebnpm org, usable in any stack. - Accessibility contributors — the component library is the front line of WCAG alignment for the whole HAX ecosystem.
HAXTheWeb is dedicated to making contribution an accessible and simple experience. Follow the step-by-step guide below to explore our curated development environment:
-
On Windows: Update WSL 2
- There are two methods available:
- Open WSL 2 in the Microsoft Store, select Install/Update
- Open PowerShell, run the command:
wsl --update
- Why: Certain Windows editions are bundled with an outdated WSL 2 version.
- There are two methods available:
-
On macOS or Linux: None
- Install Docker Desktop
- Install GitHub Desktop (optional)
- 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
- Open the repository in VS Code
- Using GitHub Desktop: simply select Open in VS Code
- 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:
yarn run haxsiteIf you're interested in other installation methods, visit our Contributing Docs! We provide native Bash and PowerShell scripts, in addition to manual instructions.
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! 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
- Discord Channel - https://discord.gg/aCGxmRHEJP
- Unified issue queue - https://github.com/haxtheweb/issues/issues
- Using Merlin directly in any HAX spaces and type "Issue" to jump start a report!
cd elements/ELEMENTNAME
yarn startEdit files in lib/, src/, locales/ and demo/ in order to modify the element to contribute back to us via PR. In locales/, change only the English (*.en.json) files; other languages arrive in the rolling chore/nightly-translations PR (an optional AI-assisted scheduled task, not part of CI), and the locale-guard check warns on PRs that change them.
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
yarn run elements-readme- Regenerate elements/README.md (the index of every element) from each element's
package.jsondescription. Runs as part ofyarn run ubiquity; add--checkto fail when it's stale.
- Regenerate elements/README.md (the index of every element) from each element's
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.
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
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 devMake 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.
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:
cd elements/your-card
yarn testAlso, if your tests are failing and you want access to a live browser to investigate why, the following flag will keep the browser open.
yarn test -- -pThen 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.
Automated audits (axe) catch only part of what blocks keyboard users, so the core authoring and learning flows also have scripted keyboard tests. They live next to each element as test/*keyboard-flow.test.js, drive real key presses in Chromium (sendKeys from @web/test-runner-commands), and run as part of the normal, blocking suite (yarn test:all and each element's yarn test).
The invariant they protect: a keyboard-only user can complete the flow, and at every focus stop
- the focused control shows a visible focus indicator (a computed outline or box-shadow on it or on the host that draws its ring),
- focus never lands on something hidden, zero-size, off screen,
inertor insidearia-hidden, - no positive
tabindexchanges the tab order.
| Flow | Test file |
|---|---|
Shared HAX UI dialog (simple-modal): focus moves in, Tab/Shift+Tab trapped, Escape closes, focus returns to the opener |
elements/simple-modal/test/simple-modal-keyboard-flow.test.js |
HAXcms editor top bar + hax-tray panels (View source, Page outline, Add block, Configure block) and the shortcut registry (every binding has an action and description, no collisions, every Ctrl⇧ shortcut shown in the bar is registered) |
elements/haxcms-elements/test/haxcms-editor-keyboard-flow.test.js |
Merlin (super-daemon): open with its shortcut, type, arrow to a result, Enter runs it, Escape closes and restores focus |
elements/super-daemon/test/super-daemon-keyboard-flow.test.js |
outline-designer: arrow navigation, Alt+arrows move/indent/outdent, Delete marks and restores, row actions menu |
elements/outline-designer/test/outline-designer-keyboard-flow.test.js |
video-player / audio-player: play/pause, seek, captions, transcript cues, fullscreen, settings |
elements/{video,audio}-player/test/*-keyboard-flow.test.js (shared flow in scripts/test-setup/keyboard-flow-media.js) |
| Question types: select, submit, result announced, try again | elements/multiple-choice/test/question-keyboard-flow.test.js |
a11y-collapse accordion and a11y-tabs |
elements/a11y-collapse/test/, elements/a11y-tabs/test/ |
Run one locally from the element folder, e.g. cd elements/simple-modal && yarn test. Shared helpers (press, expectGoodFocusStop, expectFocusOn, positiveTabindexIn) are in scripts/test-setup/keyboard-flow.js.
When a flow finds a real keyboard bug that is not fixed in the same PR, keep the rest of the flow running and record the bug instead of loosening the check: add an it.skip("KNOWN BUG: ...") test that asserts the fixed behavior, with a comment naming the file and the cause, and, if other steps of the flow pass through the broken stop, a knownBugs entry ({ match(el), reason }) passed to expectGoodFocusStop. Fixing the bug means un-skipping that test and deleting the entry.
We've replaced Storybook 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
yarn run galleryThis 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
yarn run build-galleryThis generates the component gallery as a single HTML file: index.html, so it's served automatically at the root of any static host (e.g. a Vercel preview deployment).
- HAX Integration: Built-in support for HAX-enabled components
- DDD Design System: Uses our Design, Develop, Deliver 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
Client: JavaScript, LitElement, Lit(https://lit.dev/)
Server: Node.js
Contributions are always welcome!
Past contributors, student and larger community, can be found here: https://github.com/haxtheweb/webcomponents/graphs/contributors
