# pchamoun/universal-editor-getting-started architecture

> Architecture diagram of the GitHub repository pchamoun/universal-editor-getting-started, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/pchamoun/universal-editor-getting-started
- Repository: https://github.com/pchamoun/universal-editor-getting-started

## Overview

This is an Adobe AEM Edge Delivery Services starter site: browser page loading decorates authored markup into sections and blocks, loads shared header/footer fragments, and supports editor-side content updates. The blocks provide reusable presentation features, including cards, navigation, fragments, and Dynamic Media image transformation. Model and component-definition files configure authoring; styles and Sidekick configuration support the site. The README is boilerplate-level and does not describe a specific content source or deployment workflow; unsampled block implementations are represented by their existing directories.

Main entry points: [`scripts/scripts.js`](https://github.com/pchamoun/universal-editor-getting-started/blob/main/scripts/scripts.js) (Page loader), [`scripts/aem.js`](https://github.com/pchamoun/universal-editor-getting-started/blob/main/scripts/aem.js) (DOM framework), [`blocks/fragment/fragment.js`](https://github.com/pchamoun/universal-editor-getting-started/blob/main/blocks/fragment/fragment.js) (Content fragments), [`scripts/editor-support.js`](https://github.com/pchamoun/universal-editor-getting-started/blob/main/scripts/editor-support.js) (Editor updates)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Page runtime"]
  node_page["Page loader<br/>[scripts.js]"]
  node_framework["DOM framework<br/>[aem.js]"]
end

subgraph group_blocks["Page blocks"]
  node_header["Header navigation<br/>[header.js]"]
  node_footer["Footer<br/>[footer.js]"]
  node_fragment["Content fragments<br/>[fragment.js]"]
  node_cards["Cards<br/>[cards.js]"]
  node_columns["Columns<br/>[columns.js]"]
  node_media["Dynamic Media image"]
  node_teaser["Teaser<br/>[teaser.js]"]
  node_heroquote["Hero and quote"]
end

subgraph group_authoring["Authoring support"]
  node_editor["Editor updates<br/>[editor-support.js]"]
  node_richtext["Rich text editing"]
  node_models["Content models"]
  node_definitions["Component definitions"]
  node_sidekick["Sidekick settings<br/>[config.json]"]
end

subgraph group_presentation["Presentation"]
  node_sitecss["Site styles"]
  node_blockcss["Block styles"]
end

node_browser(("Site visitor"))
node_image_service(("Dynamic Media delivery"))

node_browser -.->|"opens page"| node_page
node_page -->|"uses runtime"| node_framework
node_page -->|"loads header"| node_header
node_page -->|"loads footer"| node_footer
node_framework -->|"dispatches blocks"| node_fragment
node_header -->|"reads metadata"| node_framework
node_header -->|"loads fragment"| node_fragment
node_footer -->|"reads metadata"| node_framework
node_footer -->|"loads fragment"| node_fragment
node_fragment -->|"decorates content"| node_page
node_fragment -->|"loads sections"| node_framework
node_cards -->|"optimizes images"| node_framework
node_cards -->|"moves instrumentation"| node_page
node_editor -->|"updates DOM"| node_framework
node_editor -->|"decorates text"| node_richtext
node_editor -->|"redecorates content"| node_page
node_media -.->|"builds delivery URL"| node_image_service

click node_page "https://github.com/pchamoun/universal-editor-getting-started/blob/main/scripts/scripts.js"
click node_framework "https://github.com/pchamoun/universal-editor-getting-started/blob/main/scripts/aem.js"
click node_editor "https://github.com/pchamoun/universal-editor-getting-started/blob/main/scripts/editor-support.js"
click node_richtext "https://github.com/pchamoun/universal-editor-getting-started/blob/main/scripts/editor-support-rte.js"
click node_header "https://github.com/pchamoun/universal-editor-getting-started/blob/main/blocks/header/header.js"
click node_footer "https://github.com/pchamoun/universal-editor-getting-started/blob/main/blocks/footer/footer.js"
click node_fragment "https://github.com/pchamoun/universal-editor-getting-started/blob/main/blocks/fragment/fragment.js"
click node_cards "https://github.com/pchamoun/universal-editor-getting-started/blob/main/blocks/cards/cards.js"
click node_columns "https://github.com/pchamoun/universal-editor-getting-started/blob/main/blocks/columns/columns.js"
click node_media "https://github.com/pchamoun/universal-editor-getting-started/blob/main/blocks/dynamic-media-image/dynamic-media-image.js"
click node_teaser "https://github.com/pchamoun/universal-editor-getting-started/blob/main/blocks/teaser/teaser.js"
click node_heroquote "https://github.com/pchamoun/universal-editor-getting-started/tree/main/blocks"
click node_models "https://github.com/pchamoun/universal-editor-getting-started/tree/main/models"
click node_definitions "https://github.com/pchamoun/universal-editor-getting-started/blob/main/component-definition.json"
click node_sidekick "https://github.com/pchamoun/universal-editor-getting-started/blob/main/tools/sidekick/config.json"
click node_sitecss "https://github.com/pchamoun/universal-editor-getting-started/tree/main/styles"
click node_blockcss "https://github.com/pchamoun/universal-editor-getting-started/tree/main/blocks"

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_page,node_framework toneBlue
class node_header,node_footer,node_fragment,node_cards,node_columns,node_media,node_teaser,node_heroquote toneAmber
class node_editor,node_richtext,node_models,node_definitions,node_sidekick toneMint
class node_sitecss,node_blockcss toneRose
class node_browser,node_image_service toneIndigo
```

## Components

### Page runtime

- [Page loader](https://github.com/pchamoun/universal-editor-getting-started/blob/main/scripts/scripts.js): `scripts/scripts.js`
- [DOM framework](https://github.com/pchamoun/universal-editor-getting-started/blob/main/scripts/aem.js): `scripts/aem.js`

### Page blocks

- [Header navigation](https://github.com/pchamoun/universal-editor-getting-started/blob/main/blocks/header/header.js): `blocks/header/header.js`
- [Footer](https://github.com/pchamoun/universal-editor-getting-started/blob/main/blocks/footer/footer.js): `blocks/footer/footer.js`
- [Content fragments](https://github.com/pchamoun/universal-editor-getting-started/blob/main/blocks/fragment/fragment.js): `blocks/fragment/fragment.js`
- [Cards](https://github.com/pchamoun/universal-editor-getting-started/blob/main/blocks/cards/cards.js): `blocks/cards/cards.js`
- [Columns](https://github.com/pchamoun/universal-editor-getting-started/blob/main/blocks/columns/columns.js): `blocks/columns/columns.js`
- [Dynamic Media image](https://github.com/pchamoun/universal-editor-getting-started/blob/main/blocks/dynamic-media-image/dynamic-media-image.js): `blocks/dynamic-media-image/dynamic-media-image.js`
- [Teaser](https://github.com/pchamoun/universal-editor-getting-started/blob/main/blocks/teaser/teaser.js): `blocks/teaser/teaser.js`
- [Hero and quote](https://github.com/pchamoun/universal-editor-getting-started/tree/main/blocks): `blocks`

### Authoring support

- [Editor updates](https://github.com/pchamoun/universal-editor-getting-started/blob/main/scripts/editor-support.js): `scripts/editor-support.js`
- [Rich text editing](https://github.com/pchamoun/universal-editor-getting-started/blob/main/scripts/editor-support-rte.js): `scripts/editor-support-rte.js`
- [Content models](https://github.com/pchamoun/universal-editor-getting-started/tree/main/models): `models`
- [Component definitions](https://github.com/pchamoun/universal-editor-getting-started/blob/main/component-definition.json): `component-definition.json`
- [Sidekick settings](https://github.com/pchamoun/universal-editor-getting-started/blob/main/tools/sidekick/config.json): `tools/sidekick/config.json`

### Presentation

- [Site styles](https://github.com/pchamoun/universal-editor-getting-started/tree/main/styles): `styles`
- [Block styles](https://github.com/pchamoun/universal-editor-getting-started/tree/main/blocks): `blocks`

### Other components

- **Site visitor**
- **Dynamic Media delivery**

## Connections

- Site visitor → Page loader: opens page
- Page loader → DOM framework: uses runtime (evidence: `scripts/scripts.js`)
- Page loader → Header navigation: loads header (evidence: `scripts/scripts.js`)
- Page loader → Footer: loads footer (evidence: `scripts/scripts.js`)
- DOM framework → Content fragments: dispatches blocks (evidence: `scripts/aem.js`)
- Header navigation → DOM framework: reads metadata (evidence: `blocks/header/header.js`)
- Header navigation → Content fragments: loads fragment (evidence: `blocks/header/header.js`)
- Footer → DOM framework: reads metadata (evidence: `blocks/footer/footer.js`)
- Footer → Content fragments: loads fragment (evidence: `blocks/footer/footer.js`)
- Content fragments → Page loader: decorates content (evidence: `blocks/fragment/fragment.js`)
- Content fragments → DOM framework: loads sections (evidence: `blocks/fragment/fragment.js`)
- Cards → DOM framework: optimizes images (evidence: `blocks/cards/cards.js`)
- Cards → Page loader: moves instrumentation (evidence: `blocks/cards/cards.js`)
- Editor updates → DOM framework: updates DOM (evidence: `scripts/editor-support.js`)
- Editor updates → Rich text editing: decorates text (evidence: `scripts/editor-support.js`)
- Editor updates → Page loader: redecorates content (evidence: `scripts/editor-support.js`)
- Dynamic Media image → Dynamic Media delivery: builds delivery URL