# jonathanpeppers/spice architecture

> Architecture diagram of the GitHub repository jonathanpeppers/spice, 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/jonathanpeppers/spice
- Repository: https://github.com/jonathanpeppers/spice

## Overview

Spice is a minimal cross-platform UI framework for building native iOS and Android apps from C# view objects, with an optional Blazor hybrid web view. The main workflow is to create an Application, assign its Main view tree, and let the platform-specific partial implementations host native controls. Theme support follows system appearance changes. The Blazor branch hosts a Razor root component and bridges web content with native code. The README documents the broad control set; sampled source confirms application hosting, theming, and parts of the Blazor bridge, but not every control’s implementation wiring.

Main entry points: [`src/Spice/Core/Application.cs`](https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Core/Application.cs) (Application), [`src/Spice/Blazor/BlazorWebView.cs`](https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Blazor/BlazorWebView.cs) (BlazorWebView), [`src/Spice/Platforms/Android`](https://github.com/jonathanpeppers/spice/tree/main/src/Spice/Platforms/Android) (Android implementations), [`src/Spice/Platforms/iOS`](https://github.com/jonathanpeppers/spice/tree/main/src/Spice/Platforms/iOS) (iOS implementations)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and Theme"]
  node_application["Application<br/>[Application.cs]"]
  node_theme["Theme<br/>[Theme.cs]"]
  node_platformappearance["Platform appearance"]
end

subgraph group_ui["View Model"]
  node_view["View<br/>[View.cs]"]
  node_layouts["Layouts<br/>[StackLayout.cs]"]
  node_controls["Controls<br/>[Button.cs]"]
  node_navigation["Navigation and collections<br/>[NavigationView.cs]"]
  node_webview["WebView<br/>[WebView.cs]"]
end

subgraph group_native["Native Platforms"]
  node_android["Android implementations"]
  node_ios["iOS implementations"]
  node_iosappearance["iOS appearance monitor"]
end

subgraph group_blazor["Blazor Hybrid"]
  node_blazorview["BlazorWebView<br/>[BlazorWebView.cs]"]
  node_blazorservices["Blazor services"]
  node_androidmanager["Android web manager"]
  node_androidclient["Android web client"]
  node_androidfiles["Android asset provider"]
  node_iosmanager["iOS web manager"]
  node_iosfiles["iOS file provider<br/>[iOSFileProvider.cs]"]
end

node_developer(("App developer"))
node_appearance(("System appearance"))

node_developer -->|"creates"| node_application
node_application -->|"sets Main"| node_view
node_application -->|"applies"| node_theme
node_appearance -->|"notifies"| node_platformappearance
node_iosappearance -->|"detects changes"| node_platformappearance
node_platformappearance -->|"updates theme"| node_application
node_application -->|"hosts Main"| node_android
node_application -->|"hosts Main"| node_ios
node_view -->|"composes"| node_layouts
node_view -->|"composes"| node_controls
node_view -->|"composes"| node_navigation
node_layouts -->|"maps to native"| node_android
node_layouts -->|"maps to native"| node_ios
node_controls -->|"maps to native"| node_android
node_controls -->|"maps to native"| node_ios
node_developer -.->|"configures"| node_blazorview
node_application -->|"hosts Main"| node_blazorview
node_blazorview -->|"uses services"| node_blazorservices
node_blazorview -->|"renders with"| node_androidmanager
node_blazorview -->|"renders with"| node_iosmanager
node_androidclient -->|"loads content"| node_androidmanager
node_androidclient -->|"requests assets"| node_androidfiles
node_iosmanager -->|"requests assets"| node_iosfiles
node_androidmanager -->|"uses WebView"| node_android
node_iosmanager -->|"uses WebView"| node_ios
node_webview -->|"maps to native"| node_android
node_webview -->|"maps to native"| node_ios

click node_application "https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Core/Application.cs"
click node_theme "https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Core/Theme.cs"
click node_platformappearance "https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Core/PlatformAppearance.cs"
click node_view "https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Core/View.cs"
click node_layouts "https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Core/StackLayout.cs"
click node_controls "https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Core/Button.cs"
click node_navigation "https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Core/NavigationView.cs"
click node_webview "https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Core/WebView.cs"
click node_android "https://github.com/jonathanpeppers/spice/tree/main/src/Spice/Platforms/Android"
click node_ios "https://github.com/jonathanpeppers/spice/tree/main/src/Spice/Platforms/iOS"
click node_iosappearance "https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Platforms/iOS/SpiceViewController.cs"
click node_blazorview "https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Blazor/BlazorWebView.cs"
click node_blazorservices "https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Blazor/SpiceServiceProvider.cs"
click node_androidmanager "https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Platforms/Android/Blazor/AndroidWebViewManager.cs"
click node_androidclient "https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Platforms/Android/Blazor/SpiceBlazorWebViewClient.cs"
click node_androidfiles "https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Platforms/Android/Blazor/AndroidAssetFileProvider.cs"
click node_iosmanager "https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Platforms/iOS/Blazor/iOSWebViewManager.cs"
click node_iosfiles "https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Platforms/iOS/Blazor/iOSFileProvider.cs"

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_application,node_theme,node_platformappearance toneBlue
class node_view,node_layouts,node_controls,node_navigation,node_webview toneAmber
class node_android,node_ios,node_iosappearance toneMint
class node_blazorview,node_blazorservices,node_androidmanager,node_androidclient,node_androidfiles,node_iosmanager,node_iosfiles toneRose
class node_developer,node_appearance toneIndigo
```

## Components

### App and Theme

- [Application](https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Core/Application.cs): `src/Spice/Core/Application.cs`
- [Theme](https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Core/Theme.cs): `src/Spice/Core/Theme.cs`
- [Platform appearance](https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Core/PlatformAppearance.cs): `src/Spice/Core/PlatformAppearance.cs`

### View Model

- [View](https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Core/View.cs): `src/Spice/Core/View.cs`
- [Layouts](https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Core/StackLayout.cs): `src/Spice/Core/StackLayout.cs`
- [Controls](https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Core/Button.cs): `src/Spice/Core/Button.cs`
- [Navigation and collections](https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Core/NavigationView.cs): `src/Spice/Core/NavigationView.cs`
- [WebView](https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Core/WebView.cs): `src/Spice/Core/WebView.cs`

### Native Platforms

- [Android implementations](https://github.com/jonathanpeppers/spice/tree/main/src/Spice/Platforms/Android): `src/Spice/Platforms/Android`
- [iOS implementations](https://github.com/jonathanpeppers/spice/tree/main/src/Spice/Platforms/iOS): `src/Spice/Platforms/iOS`
- [iOS appearance monitor](https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Platforms/iOS/SpiceViewController.cs): `src/Spice/Platforms/iOS/SpiceViewController.cs`

### Blazor Hybrid

- [BlazorWebView](https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Blazor/BlazorWebView.cs): `src/Spice/Blazor/BlazorWebView.cs`
- [Blazor services](https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Blazor/SpiceServiceProvider.cs): `src/Spice/Blazor/SpiceServiceProvider.cs`
- [Android web manager](https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Platforms/Android/Blazor/AndroidWebViewManager.cs): `src/Spice/Platforms/Android/Blazor/AndroidWebViewManager.cs`
- [Android web client](https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Platforms/Android/Blazor/SpiceBlazorWebViewClient.cs): `src/Spice/Platforms/Android/Blazor/SpiceBlazorWebViewClient.cs`
- [Android asset provider](https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Platforms/Android/Blazor/AndroidAssetFileProvider.cs): `src/Spice/Platforms/Android/Blazor/AndroidAssetFileProvider.cs`
- [iOS web manager](https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Platforms/iOS/Blazor/iOSWebViewManager.cs): `src/Spice/Platforms/iOS/Blazor/iOSWebViewManager.cs`
- [iOS file provider](https://github.com/jonathanpeppers/spice/blob/main/src/Spice/Platforms/iOS/Blazor/iOSFileProvider.cs): `src/Spice/Platforms/iOS/Blazor/iOSFileProvider.cs`

### Other components

- **App developer**
- **System appearance**

## Connections

- App developer → Application: creates
- Application → View: sets Main
- Application → Theme: applies
- System appearance → Platform appearance: notifies
- iOS appearance monitor → Platform appearance: detects changes
- Platform appearance → Application: updates theme
- Application → Android implementations: hosts Main
- Application → iOS implementations: hosts Main
- View → Layouts: composes
- View → Controls: composes
- View → Navigation and collections: composes
- Layouts → Android implementations: maps to native
- Layouts → iOS implementations: maps to native
- Controls → Android implementations: maps to native
- Controls → iOS implementations: maps to native
- App developer → BlazorWebView: configures
- Application → BlazorWebView: hosts Main
- BlazorWebView → Blazor services: uses services
- BlazorWebView → Android web manager: renders with
- BlazorWebView → iOS web manager: renders with
- Android web client → Android web manager: loads content
- Android web client → Android asset provider: requests assets
- iOS web manager → iOS file provider: requests assets
- Android web manager → Android implementations: uses WebView
- iOS web manager → iOS implementations: uses WebView
- WebView → Android implementations: maps to native
- WebView → iOS implementations: maps to native