# mobifu/bootstrap5-editor architecture

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

- Interactive diagram: https://gitdiagram.com/mobifu/bootstrap5-editor
- Repository: https://github.com/mobifu/bootstrap5-editor

## Overview

Bootstrap 5 & 3 Low-Code Editor is an offline desktop app for visually assembling Bootstrap layouts and producing usable HTML. The main flow is user edits in the GUI → page model → version-specific HTML generation → live browser preview or clipboard/file export. The GUI also supports project save/load, encrypted project files, and Bootstrap 3 HTML conversion. README-documented component types and project features are represented, though their detailed GUI wiring was not fully sampled; the graph omits uncertain calls.

Main entry points: [`gui.py`](https://github.com/mobifu/bootstrap5-editor/blob/main/gui.py) (Editor GUI), [`generator.py`](https://github.com/mobifu/bootstrap5-editor/blob/main/generator.py) (HTML generation), [`models.py`](https://github.com/mobifu/bootstrap5-editor/blob/main/models.py) (Layout components), [`app.py`](https://github.com/mobifu/bootstrap5-editor/blob/main/app.py) (App launcher)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_desktop["Desktop interface"]
  node_app["App launcher<br/>[app.py]"]
  node_gui["Editor GUI<br/>[gui.py]"]
end

subgraph group_authoring["Layout authoring"]
  node_components["Layout components<br/>[models.py]"]
  node_sanitizing["Content sanitizing<br/>[models.py]"]
end

subgraph group_output["HTML output"]
  node_htmlgen["HTML generation<br/>[generator.py]"]
  node_htmlconvert["BS3 conversion<br/>[generator.py]"]
  node_preview["Preview browser"]
  node_clipboard["System clipboard"]
  node_bootstrap["Bootstrap CDN"]
end

subgraph group_projects["Project security"]
  node_projectfiles["Project files"]
  node_crypto["Project encryption<br/>[security.py]"]
end

node_user(("Editor user"))

node_user -->|"starts"| node_app
node_app -->|"starts"| node_gui
node_user -->|"edits layouts"| node_gui
node_gui -->|"builds page"| node_components
node_components -->|"sanitizes values"| node_sanitizing
node_gui -->|"generates HTML"| node_htmlgen
node_htmlgen -->|"renders page"| node_components
node_gui -->|"opens preview"| node_preview
node_gui -->|"copies HTML"| node_clipboard
node_gui -->|"reads and writes"| node_projectfiles
node_gui -->|"encrypts or decrypts"| node_crypto
node_gui -->|"converts imported HTML"| node_htmlconvert
node_preview -.->|"loads assets"| node_bootstrap
node_htmlgen -.->|"references assets"| node_bootstrap

click node_app "https://github.com/mobifu/bootstrap5-editor/blob/main/app.py"
click node_gui "https://github.com/mobifu/bootstrap5-editor/blob/main/gui.py"
click node_components "https://github.com/mobifu/bootstrap5-editor/blob/main/models.py"
click node_sanitizing "https://github.com/mobifu/bootstrap5-editor/blob/main/models.py"
click node_htmlgen "https://github.com/mobifu/bootstrap5-editor/blob/main/generator.py"
click node_htmlconvert "https://github.com/mobifu/bootstrap5-editor/blob/main/generator.py"
click node_crypto "https://github.com/mobifu/bootstrap5-editor/blob/main/security.py"

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_app,node_gui,node_user toneBlue
class node_components,node_sanitizing toneAmber
class node_htmlgen,node_htmlconvert,node_preview,node_clipboard,node_bootstrap toneMint
class node_projectfiles,node_crypto toneRose
```

## Components

### Desktop interface

- [App launcher](https://github.com/mobifu/bootstrap5-editor/blob/main/app.py): `app.py`
- [Editor GUI](https://github.com/mobifu/bootstrap5-editor/blob/main/gui.py): `gui.py`

### Layout authoring

- [Layout components](https://github.com/mobifu/bootstrap5-editor/blob/main/models.py): `models.py`
- [Content sanitizing](https://github.com/mobifu/bootstrap5-editor/blob/main/models.py): `models.py`

### HTML output

- [HTML generation](https://github.com/mobifu/bootstrap5-editor/blob/main/generator.py): `generator.py`
- [BS3 conversion](https://github.com/mobifu/bootstrap5-editor/blob/main/generator.py): `generator.py`
- **Preview browser**
- **System clipboard**
- **Bootstrap CDN**

### Project security

- **Project files**
- [Project encryption](https://github.com/mobifu/bootstrap5-editor/blob/main/security.py): `security.py`

### Other components

- **Editor user**

## Connections

- Editor user → App launcher: starts
- App launcher → Editor GUI: starts
- Editor user → Editor GUI: edits layouts
- Editor GUI → Layout components: builds page
- Layout components → Content sanitizing: sanitizes values
- Editor GUI → HTML generation: generates HTML
- HTML generation → Layout components: renders page
- Editor GUI → Preview browser: opens preview
- Editor GUI → System clipboard: copies HTML
- Editor GUI → Project files: reads and writes
- Editor GUI → Project encryption: encrypts or decrypts
- Editor GUI → BS3 conversion: converts imported HTML
- Preview browser → Bootstrap CDN: loads assets
- HTML generation → Bootstrap CDN: references assets