# rawfox-js/rawfox architecture

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

- Interactive diagram: https://gitdiagram.com/rawfox-js/rawfox
- Repository: https://github.com/rawfox-js/rawfox

## Overview

RawFox JS is a small declarative browser UI framework. User code creates element and text nodes, configures element attributes, styles, and events through chainable methods, then invokes the app returned by BuildApp to render those nodes into a selected DOM mount. The README also documents custom components and global, body, root, and HTML styling. The architecture follows the documented runtime flow; source excerpts do not include Text.ts or Div.ts implementations, so their internal details are not expanded.

Main entry points: [`src/core/app.ts`](https://github.com/rawfox-js/rawfox/blob/main/src/core/app.ts) (BuildApp), [`src/core/renderer.ts`](https://github.com/rawfox-js/rawfox/blob/main/src/core/renderer.ts) (render), [`src/main.ts`](https://github.com/rawfox-js/rawfox/blob/main/src/main.ts) (Exports), [`src/elements`](https://github.com/rawfox-js/rawfox/tree/main/src/elements) (Element helpers)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_api["Public API"]
  node_main["Exports<br/>[main.ts]"]
  node_buildapp["BuildApp<br/>[app.ts]"]
  node_app["App mount<br/>[app.ts]"]
  node_globalstyles["Global styles<br/>[app.ts]"]
end

subgraph group_nodes["Node Construction"]
  node_elements["Element helpers"]
  node_p["P<br/>[P.ts]"]
  node_br["Br<br/>[Br.ts]"]
  node_text["Text<br/>[Text.ts]"]
  node_div["Div<br/>[Div.ts]"]
  node_rnode["BuildRNode<br/>[rnode.ts]"]
  node_properties["Chainable properties<br/>[properties.ts]"]
  node_custom["Custom components<br/>[rnode.ts]"]
end

subgraph group_render["DOM Rendering"]
  node_renderer["render<br/>[renderer.ts]"]
  node_elementrender["Element renderer<br/>[renderer.ts]"]
  node_textcomment["Text/comment renderers<br/>[renderer.ts]"]
  node_tools["CSS name conversion<br/>[tools.ts]"]
end

node_user(("Application code"))
node_dom["Browser DOM"]

node_user -->|"imports"| node_main
node_main -->|"exports"| node_buildapp
node_main -->|"exports"| node_elements
node_user -->|"configures"| node_buildapp
node_buildapp -->|"injects styles"| node_globalstyles
node_buildapp -->|"creates"| node_app
node_buildapp -->|"selects mount"| node_dom
node_user -->|"creates nodes"| node_elements
node_elements -->|"builds nodes"| node_rnode
node_rnode -->|"injects methods"| node_properties
node_user -->|"defines components"| node_custom
node_custom -->|"builds nodes"| node_rnode
node_user -->|"supplies nodes"| node_app
node_app -->|"mounts via"| node_renderer
node_renderer -->|"dispatches"| node_textcomment
node_renderer -->|"dispatches"| node_elementrender
node_elementrender -->|"renders children"| node_renderer
node_elementrender -->|"converts CSS names"| node_tools
node_globalstyles -->|"converts CSS names"| node_tools
node_renderer -->|"creates DOM nodes"| node_dom
node_elementrender -->|"sets attributes and events"| node_dom
node_globalstyles -->|"injects CSS"| node_dom

click node_main "https://github.com/rawfox-js/rawfox/blob/main/src/main.ts"
click node_buildapp "https://github.com/rawfox-js/rawfox/blob/main/src/core/app.ts"
click node_app "https://github.com/rawfox-js/rawfox/blob/main/src/core/app.ts"
click node_globalstyles "https://github.com/rawfox-js/rawfox/blob/main/src/core/app.ts"
click node_elements "https://github.com/rawfox-js/rawfox/tree/main/src/elements"
click node_p "https://github.com/rawfox-js/rawfox/blob/main/src/elements/P.ts"
click node_br "https://github.com/rawfox-js/rawfox/blob/main/src/elements/Br.ts"
click node_text "https://github.com/rawfox-js/rawfox/blob/main/src/elements/Text.ts"
click node_div "https://github.com/rawfox-js/rawfox/blob/main/src/elements/Div.ts"
click node_rnode "https://github.com/rawfox-js/rawfox/blob/main/src/core/rnode.ts"
click node_properties "https://github.com/rawfox-js/rawfox/blob/main/src/module/properties.ts"
click node_custom "https://github.com/rawfox-js/rawfox/blob/main/src/core/rnode.ts"
click node_renderer "https://github.com/rawfox-js/rawfox/blob/main/src/core/renderer.ts"
click node_elementrender "https://github.com/rawfox-js/rawfox/blob/main/src/core/renderer.ts"
click node_textcomment "https://github.com/rawfox-js/rawfox/blob/main/src/core/renderer.ts"
click node_tools "https://github.com/rawfox-js/rawfox/blob/main/src/core/tools.ts"

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_main,node_buildapp,node_app,node_globalstyles,node_dom toneBlue
class node_elements,node_p,node_br,node_text,node_div,node_rnode,node_properties,node_custom toneAmber
class node_renderer,node_elementrender,node_textcomment,node_tools toneMint
class node_user toneIndigo
```

## Components

### Public API

- [Exports](https://github.com/rawfox-js/rawfox/blob/main/src/main.ts): `src/main.ts`
- [BuildApp](https://github.com/rawfox-js/rawfox/blob/main/src/core/app.ts): `src/core/app.ts`
- [App mount](https://github.com/rawfox-js/rawfox/blob/main/src/core/app.ts): `src/core/app.ts`
- [Global styles](https://github.com/rawfox-js/rawfox/blob/main/src/core/app.ts): `src/core/app.ts`

### Node Construction

- [Element helpers](https://github.com/rawfox-js/rawfox/tree/main/src/elements): `src/elements`
- [P](https://github.com/rawfox-js/rawfox/blob/main/src/elements/P.ts): `src/elements/P.ts`
- [Br](https://github.com/rawfox-js/rawfox/blob/main/src/elements/Br.ts): `src/elements/Br.ts`
- [Text](https://github.com/rawfox-js/rawfox/blob/main/src/elements/Text.ts): `src/elements/Text.ts`
- [Div](https://github.com/rawfox-js/rawfox/blob/main/src/elements/Div.ts): `src/elements/Div.ts`
- [BuildRNode](https://github.com/rawfox-js/rawfox/blob/main/src/core/rnode.ts): `src/core/rnode.ts`
- [Chainable properties](https://github.com/rawfox-js/rawfox/blob/main/src/module/properties.ts): `src/module/properties.ts`
- [Custom components](https://github.com/rawfox-js/rawfox/blob/main/src/core/rnode.ts): `src/core/rnode.ts`

### DOM Rendering

- [render](https://github.com/rawfox-js/rawfox/blob/main/src/core/renderer.ts): `src/core/renderer.ts`
- [Element renderer](https://github.com/rawfox-js/rawfox/blob/main/src/core/renderer.ts): `src/core/renderer.ts`
- [Text/comment renderers](https://github.com/rawfox-js/rawfox/blob/main/src/core/renderer.ts): `src/core/renderer.ts`
- [CSS name conversion](https://github.com/rawfox-js/rawfox/blob/main/src/core/tools.ts): `src/core/tools.ts`

### Other components

- **Application code**
- **Browser DOM**

## Connections

- Application code → Exports: imports
- Exports → BuildApp: exports
- Exports → Element helpers: exports
- Application code → BuildApp: configures
- BuildApp → Global styles: injects styles
- BuildApp → App mount: creates
- BuildApp → Browser DOM: selects mount
- Application code → Element helpers: creates nodes
- Element helpers → BuildRNode: builds nodes
- BuildRNode → Chainable properties: injects methods
- Application code → Custom components: defines components
- Custom components → BuildRNode: builds nodes
- Application code → App mount: supplies nodes
- App mount → render: mounts via
- render → Text/comment renderers: dispatches
- render → Element renderer: dispatches
- Element renderer → render: renders children
- Element renderer → CSS name conversion: converts CSS names
- Global styles → CSS name conversion: converts CSS names
- render → Browser DOM: creates DOM nodes
- Element renderer → Browser DOM: sets attributes and events
- Global styles → Browser DOM: injects CSS