# lobehub/lobe-mygo architecture

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

- Interactive diagram: https://gitdiagram.com/lobehub/lobe-mygo
- Repository: https://github.com/lobehub/lobe-mygo

## Overview

Lobe MyGo is a pure-Go UI component kit for MyGo native applications, with design tokens, motion, and Lucide icons. An application view applies the theme and composes components; the UI framework renders them and returns interaction state to the view. The repository also provides a component catalog whose main program registers demos and presents a selected preview. The README documents broad component families and localization; several are represented by package-level nodes because their implementations were not sampled, so those links are omitted where call evidence is unavailable.

Main entry points: [`pkg/field`](https://github.com/lobehub/lobe-mygo/tree/main/pkg/field) (Fields), [`pkg/code`](https://github.com/lobehub/lobe-mygo/tree/main/pkg/code) (Code widgets), [`catalog/home`](https://github.com/lobehub/lobe-mygo/tree/main/catalog/home) (Catalog showcase), [`catalog`](https://github.com/lobehub/lobe-mygo/tree/main/catalog) (Component demos)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_components["UI Components"]
  node_action["Actions"]
  node_field["Fields"]
  node_choice["Choices"]
  node_display["Display"]
  node_navigation["Navigation"]
  node_layout["Layout"]
  node_code["Code widgets"]
  node_markdown["Markdown"]
end

subgraph group_overlays["Overlays and Feedback"]
  node_overlay["Overlay widgets"]
  node_feedback["Feedback"]
end

subgraph group_foundation["Design Foundation"]
  node_theme["Theme tokens"]
  node_motion["Motion"]
  node_icons["Lucide icons"]
  node_localization["Localization"]
end

subgraph group_catalog["Component Catalog"]
  node_catalogapp["Catalog app<br/>[main.go]"]
  node_registry["Demo registry<br/>[registry.go]"]
  node_catalogdemos["Component demos"]
  node_home["Catalog showcase"]
end

node_appdev(("Go app view"))
node_mygo["MyGo UI runtime"]

node_appdev -.->|"defines views"| node_mygo
node_appdev -.->|"applies theme"| node_theme
node_appdev -.->|"composes UI"| node_action
node_action -->|"reads tokens"| node_theme
node_field -->|"uses hotkey"| node_display
node_field -->|"gets text"| node_localization
node_field -->|"renders icons"| node_icons
node_choice -->|"uses input"| node_field
node_choice -->|"gets labels"| node_localization
node_code -->|"renders spinner"| node_feedback
node_code -->|"renders icons"| node_icons
node_code -->|"gets labels"| node_localization
node_markdown -->|"uses code widgets"| node_code
node_overlay -->|"renders content"| node_display
node_overlay -->|"uses transitions"| node_motion
node_feedback -->|"uses backdrop"| node_motion
node_navigation -->|"uses transitions"| node_motion
node_layout -->|"gets labels"| node_localization
node_layout -->|"renders icons"| node_icons
node_layout -.->|"uses animation"| node_motion
node_markdown -->|"reads tokens"| node_theme
node_catalogapp -->|"looks up demos"| node_registry
node_catalogapp -->|"registers demos"| node_catalogdemos
node_catalogapp -->|"applies theme"| node_theme
node_catalogdemos -->|"composes components"| node_action
node_catalogdemos -->|"demonstrates layout"| node_layout
node_catalogdemos -->|"demonstrates display"| node_display
node_home -->|"renders examples"| node_code
node_home -->|"renders examples"| node_field
node_home -->|"renders examples"| node_choice
node_home -->|"renders examples"| node_feedback

click node_action "https://github.com/lobehub/lobe-mygo/tree/main/pkg/action"
click node_field "https://github.com/lobehub/lobe-mygo/tree/main/pkg/field"
click node_choice "https://github.com/lobehub/lobe-mygo/tree/main/pkg/choice"
click node_display "https://github.com/lobehub/lobe-mygo/tree/main/pkg/display"
click node_navigation "https://github.com/lobehub/lobe-mygo/tree/main/pkg/nav"
click node_layout "https://github.com/lobehub/lobe-mygo/tree/main/pkg/layout"
click node_code "https://github.com/lobehub/lobe-mygo/tree/main/pkg/code"
click node_markdown "https://github.com/lobehub/lobe-mygo/tree/main/pkg/markdown"
click node_overlay "https://github.com/lobehub/lobe-mygo/tree/main/pkg/overlay"
click node_feedback "https://github.com/lobehub/lobe-mygo/tree/main/pkg/feedback"
click node_theme "https://github.com/lobehub/lobe-mygo/tree/main/pkg/theme"
click node_motion "https://github.com/lobehub/lobe-mygo/tree/main/pkg/motion"
click node_icons "https://github.com/lobehub/lobe-mygo/tree/main/pkg/lucide"
click node_localization "https://github.com/lobehub/lobe-mygo/tree/main/pkg/internal/l10n"
click node_catalogapp "https://github.com/lobehub/lobe-mygo/blob/main/catalog/main.go"
click node_registry "https://github.com/lobehub/lobe-mygo/blob/main/catalog/registry/registry.go"
click node_catalogdemos "https://github.com/lobehub/lobe-mygo/tree/main/catalog"
click node_home "https://github.com/lobehub/lobe-mygo/tree/main/catalog/home"

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_action,node_field,node_choice,node_display,node_navigation,node_layout,node_code,node_markdown,node_appdev,node_mygo toneBlue
class node_overlay,node_feedback toneAmber
class node_theme,node_motion,node_icons,node_localization toneMint
class node_catalogapp,node_registry,node_catalogdemos,node_home toneRose
```

## Components

### UI Components

- [Actions](https://github.com/lobehub/lobe-mygo/tree/main/pkg/action): `pkg/action`
- [Fields](https://github.com/lobehub/lobe-mygo/tree/main/pkg/field): `pkg/field`
- [Choices](https://github.com/lobehub/lobe-mygo/tree/main/pkg/choice): `pkg/choice`
- [Display](https://github.com/lobehub/lobe-mygo/tree/main/pkg/display): `pkg/display`
- [Navigation](https://github.com/lobehub/lobe-mygo/tree/main/pkg/nav): `pkg/nav`
- [Layout](https://github.com/lobehub/lobe-mygo/tree/main/pkg/layout): `pkg/layout`
- [Code widgets](https://github.com/lobehub/lobe-mygo/tree/main/pkg/code): `pkg/code`
- [Markdown](https://github.com/lobehub/lobe-mygo/tree/main/pkg/markdown): `pkg/markdown`

### Overlays and Feedback

- [Overlay widgets](https://github.com/lobehub/lobe-mygo/tree/main/pkg/overlay): `pkg/overlay`
- [Feedback](https://github.com/lobehub/lobe-mygo/tree/main/pkg/feedback): `pkg/feedback`

### Design Foundation

- [Theme tokens](https://github.com/lobehub/lobe-mygo/tree/main/pkg/theme): `pkg/theme`
- [Motion](https://github.com/lobehub/lobe-mygo/tree/main/pkg/motion): `pkg/motion`
- [Lucide icons](https://github.com/lobehub/lobe-mygo/tree/main/pkg/lucide): `pkg/lucide`
- [Localization](https://github.com/lobehub/lobe-mygo/tree/main/pkg/internal/l10n): `pkg/internal/l10n`

### Component Catalog

- [Catalog app](https://github.com/lobehub/lobe-mygo/blob/main/catalog/main.go): `catalog/main.go`
- [Demo registry](https://github.com/lobehub/lobe-mygo/blob/main/catalog/registry/registry.go): `catalog/registry/registry.go`
- [Component demos](https://github.com/lobehub/lobe-mygo/tree/main/catalog): `catalog`
- [Catalog showcase](https://github.com/lobehub/lobe-mygo/tree/main/catalog/home): `catalog/home`

### Other components

- **Go app view**
- **MyGo UI runtime**

## Connections

- Go app view → MyGo UI runtime: defines views
- Go app view → Theme tokens: applies theme
- Go app view → Actions: composes UI
- Actions → Theme tokens: reads tokens (evidence: `pkg/action/button.go`)
- Fields → Display: uses hotkey (evidence: `pkg/field/searchbar.go`)
- Fields → Localization: gets text (evidence: `pkg/field/searchbar.go`)
- Fields → Lucide icons: renders icons (evidence: `pkg/field/searchbar.go`)
- Choices → Fields: uses input (evidence: `pkg/choice/colorpanel.go`)
- Choices → Localization: gets labels (evidence: `pkg/choice/colorpanel.go`)
- Code widgets → Feedback: renders spinner (evidence: `pkg/code/qrcode.go`)
- Code widgets → Lucide icons: renders icons (evidence: `pkg/code/qrcode.go`)
- Code widgets → Localization: gets labels (evidence: `pkg/code/qrcode.go`)
- Markdown → Code widgets: uses code widgets (evidence: `pkg/markdown/markdown.go`)
- Overlay widgets → Display: renders content (evidence: `pkg/overlay/dropdown.go`)
- Overlay widgets → Motion: uses transitions (evidence: `pkg/overlay/dropdown.go`)
- Feedback → Motion: uses backdrop (evidence: `pkg/feedback/floatingpanel.go`)
- Navigation → Motion: uses transitions (evidence: `pkg/nav/pagination.go`)
- Layout → Localization: gets labels (evidence: `pkg/layout/draggablesidenav.go`)
- Layout → Lucide icons: renders icons (evidence: `pkg/layout/draggablesidenav.go`)
- Layout → Motion: uses animation (evidence: `pkg/layout/draggablesidenav.go`)
- Markdown → Theme tokens: reads tokens (evidence: `pkg/markdown/markdown.go`)
- Catalog app → Demo registry: looks up demos (evidence: `catalog/main.go`)
- Catalog app → Component demos: registers demos (evidence: `catalog/main.go`)
- Catalog app → Theme tokens: applies theme (evidence: `catalog/main.go`)
- Component demos → Actions: composes components (evidence: `catalog/draggable-side-nav/basic.go`)
- Component demos → Layout: demonstrates layout (evidence: `catalog/draggable-side-nav/basic.go`)
- Component demos → Display: demonstrates display (evidence: `catalog/draggable-side-nav/basic.go`)
- Catalog showcase → Code widgets: renders examples (evidence: `catalog/home/tiles.go`)
- Catalog showcase → Fields: renders examples (evidence: `catalog/home/tiles.go`)
- Catalog showcase → Choices: renders examples (evidence: `catalog/home/tiles.go`)
- Catalog showcase → Feedback: renders examples (evidence: `catalog/home/tiles.go`)