# haxtheweb/webcomponents architecture

> Architecture diagram of the GitHub repository haxtheweb/webcomponents, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/haxtheweb/webcomponents
- Repository: https://github.com/haxtheweb/webcomponents

## Overview

HAXTheWeb is a Lit-based web-component library with deeper HAX authoring and HAXCMS site-management layers. Its principal workflow is authoring pages with HAX, organizing them as a JSON outline, and saving static-site content through a lightweight backend for display with themes and components. The repository also provides standalone learning, media, accessibility, and design-system components. The graph preserves those major branches; source excerpts were sampled rather than comprehensive, so uncertain implementation links are omitted.

Main entry points: [`elements`](https://github.com/haxtheweb/webcomponents/tree/master/elements) (Element library), [`elements/haxcms-elements/lib/core/haxcms-site-editor.js`](https://github.com/haxtheweb/webcomponents/blob/master/elements/haxcms-elements/lib/core/haxcms-site-editor.js) (Site editor), [`elements/haxcms-elements/lib/core/haxcms-site-router.js`](https://github.com/haxtheweb/webcomponents/blob/master/elements/haxcms-elements/lib/core/haxcms-site-router.js) (Site router), [`elements/haxcms-elements/lib/core/backends`](https://github.com/haxtheweb/webcomponents/tree/master/elements/haxcms-elements/lib/core/backends) (CMS backends)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_authoring["HAX authoring"]
  node_hax["HAX editor<br/>[h-a-x.js]"]
  node_body["Editable content<br/>[hax-body.js]"]
  node_bodybehaviors["Editor behaviors"]
end

subgraph group_cms["Site management"]
  node_cmseditor["Site editor"]
  node_sitebuilder["Site builder"]
  node_router["Site router"]
  node_sitestore["Site state"]
  node_backend["CMS backends"]
  node_themes["Site themes"]
end

subgraph group_components["Web components"]
  node_elements["Element library"]
  node_learning["Learning widgets<br/>[course-design.js]"]
  node_media["Media players"]
  node_wikipedia["Wikipedia query<br/>[wikipedia-query.js]"]
end

subgraph group_shared["Shared capabilities"]
  node_designsystem["Design systems"]
  node_i18n["Localization<br/>[i18n-manager.js]"]
  node_a11y["Accessible UI<br/>[a11y-behaviors.js]"]
end

node_author(("Site author"))
node_filesystem[("Site files")]
node_visitor(("Site visitor"))

node_author -->|"authors in"| node_hax
node_hax -->|"edits content"| node_body
node_body -->|"uses behaviors"| node_bodybehaviors
node_author -->|"manages site"| node_cmseditor
node_cmseditor -->|"updates state"| node_sitestore
node_cmseditor -->|"saves site"| node_backend
node_backend -->|"writes files"| node_filesystem
node_sitebuilder -->|"builds site"| node_backend
node_visitor -->|"opens site"| node_router
node_router -->|"reads state"| node_sitestore
node_router -->|"selects theme"| node_themes
node_themes -->|"renders components"| node_elements
node_elements -->|"includes"| node_learning
node_elements -->|"includes"| node_media
node_designsystem -->|"provides styles"| node_themes
node_i18n -->|"localizes"| node_elements
node_a11y -->|"supports accessibility"| node_elements
node_elements -->|"includes"| node_wikipedia
node_wikipedia -->|"presents results"| node_visitor

click node_hax "https://github.com/haxtheweb/webcomponents/blob/master/elements/h-a-x/h-a-x.js"
click node_body "https://github.com/haxtheweb/webcomponents/blob/master/elements/hax-body/hax-body.js"
click node_bodybehaviors "https://github.com/haxtheweb/webcomponents/blob/master/elements/hax-body-behaviors/hax-body-behaviors.js"
click node_cmseditor "https://github.com/haxtheweb/webcomponents/blob/master/elements/haxcms-elements/lib/core/haxcms-site-editor.js"
click node_sitebuilder "https://github.com/haxtheweb/webcomponents/blob/master/elements/haxcms-elements/lib/core/haxcms-site-builder.js"
click node_router "https://github.com/haxtheweb/webcomponents/blob/master/elements/haxcms-elements/lib/core/haxcms-site-router.js"
click node_sitestore "https://github.com/haxtheweb/webcomponents/blob/master/elements/haxcms-elements/lib/core/haxcms-site-store.js"
click node_backend "https://github.com/haxtheweb/webcomponents/tree/master/elements/haxcms-elements/lib/core/backends"
click node_themes "https://github.com/haxtheweb/webcomponents/tree/master/elements/haxcms-elements/lib/core/themes"
click node_elements "https://github.com/haxtheweb/webcomponents/tree/master/elements"
click node_learning "https://github.com/haxtheweb/webcomponents/blob/master/elements/course-design/course-design.js"
click node_media "https://github.com/haxtheweb/webcomponents/blob/master/elements/a11y-media-player/a11y-media-player.js"
click node_designsystem "https://github.com/haxtheweb/webcomponents/blob/master/elements/d-d-d/lib/DesignSystemManager.js"
click node_i18n "https://github.com/haxtheweb/webcomponents/blob/master/elements/i18n-manager/i18n-manager.js"
click node_a11y "https://github.com/haxtheweb/webcomponents/blob/master/elements/a11y-behaviors/a11y-behaviors.js"
click node_wikipedia "https://github.com/haxtheweb/webcomponents/blob/master/elements/wikipedia-query/wikipedia-query.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_hax,node_body,node_bodybehaviors toneBlue
class node_cmseditor,node_sitebuilder,node_router,node_sitestore,node_backend,node_themes,node_filesystem toneAmber
class node_elements,node_learning,node_media,node_wikipedia toneMint
class node_designsystem,node_i18n,node_a11y toneRose
class node_author,node_visitor toneIndigo
```

## Components

### HAX authoring

- [HAX editor](https://github.com/haxtheweb/webcomponents/blob/master/elements/h-a-x/h-a-x.js): `elements/h-a-x/h-a-x.js`
- [Editable content](https://github.com/haxtheweb/webcomponents/blob/master/elements/hax-body/hax-body.js): `elements/hax-body/hax-body.js`
- [Editor behaviors](https://github.com/haxtheweb/webcomponents/blob/master/elements/hax-body-behaviors/hax-body-behaviors.js): `elements/hax-body-behaviors/hax-body-behaviors.js`

### Site management

- [Site editor](https://github.com/haxtheweb/webcomponents/blob/master/elements/haxcms-elements/lib/core/haxcms-site-editor.js): `elements/haxcms-elements/lib/core/haxcms-site-editor.js`
- [Site builder](https://github.com/haxtheweb/webcomponents/blob/master/elements/haxcms-elements/lib/core/haxcms-site-builder.js): `elements/haxcms-elements/lib/core/haxcms-site-builder.js`
- [Site router](https://github.com/haxtheweb/webcomponents/blob/master/elements/haxcms-elements/lib/core/haxcms-site-router.js): `elements/haxcms-elements/lib/core/haxcms-site-router.js`
- [Site state](https://github.com/haxtheweb/webcomponents/blob/master/elements/haxcms-elements/lib/core/haxcms-site-store.js): `elements/haxcms-elements/lib/core/haxcms-site-store.js`
- [CMS backends](https://github.com/haxtheweb/webcomponents/tree/master/elements/haxcms-elements/lib/core/backends): `elements/haxcms-elements/lib/core/backends`
- [Site themes](https://github.com/haxtheweb/webcomponents/tree/master/elements/haxcms-elements/lib/core/themes): `elements/haxcms-elements/lib/core/themes`

### Web components

- [Element library](https://github.com/haxtheweb/webcomponents/tree/master/elements): `elements`
- [Learning widgets](https://github.com/haxtheweb/webcomponents/blob/master/elements/course-design/course-design.js): `elements/course-design/course-design.js`
- [Media players](https://github.com/haxtheweb/webcomponents/blob/master/elements/a11y-media-player/a11y-media-player.js): `elements/a11y-media-player/a11y-media-player.js`
- [Wikipedia query](https://github.com/haxtheweb/webcomponents/blob/master/elements/wikipedia-query/wikipedia-query.js): `elements/wikipedia-query/wikipedia-query.js`

### Shared capabilities

- [Design systems](https://github.com/haxtheweb/webcomponents/blob/master/elements/d-d-d/lib/DesignSystemManager.js): `elements/d-d-d/lib/DesignSystemManager.js`
- [Localization](https://github.com/haxtheweb/webcomponents/blob/master/elements/i18n-manager/i18n-manager.js): `elements/i18n-manager/i18n-manager.js`
- [Accessible UI](https://github.com/haxtheweb/webcomponents/blob/master/elements/a11y-behaviors/a11y-behaviors.js): `elements/a11y-behaviors/a11y-behaviors.js`

### Other components

- **Site author**
- **Site files**
- **Site visitor**

## Connections

- Site author → HAX editor: authors in
- HAX editor → Editable content: edits content
- Editable content → Editor behaviors: uses behaviors
- Site author → Site editor: manages site
- Site editor → Site state: updates state
- Site editor → CMS backends: saves site
- CMS backends → Site files: writes files
- Site builder → CMS backends: builds site
- Site visitor → Site router: opens site
- Site router → Site state: reads state
- Site router → Site themes: selects theme
- Site themes → Element library: renders components
- Element library → Learning widgets: includes
- Element library → Media players: includes
- Design systems → Site themes: provides styles
- Localization → Element library: localizes
- Accessible UI → Element library: supports accessibility
- Element library → Wikipedia query: includes
- Wikipedia query → Site visitor: presents results