> ## Documentation Index
> Fetch the complete documentation index at: https://social-b97141fb-auto-generate-llmstxt.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Dynamic UI

> Level 1: Minimal customization with real-time updates using configuration files

<Info>
  <strong>Key Benefit:</strong> Ship brand updates instantly. Dynamic UI lets non-engineering teams update theme tokens (colors today; typography & spacing roadmap) without app rebuilds.
</Info>

## Feature Overview

<CardGroup cols={2}>
  <Card title="Low code" icon="wand-magic-sparkles">
    Pure configuration-based customization, just need to trigger the sync function.
  </Card>

  <Card title="Near Real-time Updates" icon="bolt">
    Changes apply almost instantly without app updates
  </Card>

  <Card title="Team Friendly" icon="users">
    Non-technical team members can make changes
  </Card>

  <Card title="Brand Consistency" icon="palette">
    Maintain consistent styling across all platforms
  </Card>
</CardGroup>

## When to Choose Dynamic UI

Dynamic UI is ideal when you need:

✅ **Rapid brand implementation** – Ship palette changes fast without rebuilds\
✅ **Near real-time theme rollout** – Toggle or refine colors almost instantly (A/B ready)\
✅ **Non-engineering updates** – Design / product can adjust safely\
✅ **Cross-platform consistency** – One remote source drives all clients\
✅ **Low-risk experimentation** – Revert by re‑publishing a previous config

❌ **Structural layout changes** – Use Component Styling or Fork & Extend\
❌ **Per-component state styling depth** – Escalate to Component Styling\
❌ **Custom data flows / logic injection** – Fork & Extend\
❌ **Brand-new UI or primitives** – Fork & Extend

<Tip>
  Start here; you can layer Component Styling or Fork & Extend later without discarding work.
</Tip>

## How It Works

<Steps>
  <Step title="Edit in Console">Adjust tokens in Dynamic UI editor.</Step>
  <Step title="Preview">Device mock updates in real-time.</Step>
  <Step title="Publish">Commit changes server-side (versioned).</Step>
  <Step title="Client Sync">App calls <code>syncNetworkConfig()</code> to pull latest config.</Step>
</Steps>

<Note>
  Edits remain in preview until published. A publish atomically replaces prior values. Clients already running will pick it up on the next sync trigger.
</Note>

## Sync & Caching Behavior

<AccordionGroup>
  <Accordion title="Online Sync">
    Fetches JSON → validates → caches → applies tokens → triggers UI re-render where token consumers exist.
  </Accordion>

  <Accordion title="Offline Mode">
    Uses last cached config. If none, falls back to build defaults (no crash / safe visuals).
  </Accordion>

  <Accordion title="Partial Failure">
    If validation fails, client ignores new payload and keeps prior cache (defensive). Log a warning.
  </Accordion>

  <Accordion title="Security">
    Auth required; only roles with Console permission can publish new themes.
  </Accordion>
</AccordionGroup>

## Implementation

<Tabs>
  <Tab title="Sync Configuration">
    Call once at launch + on resume (and optionally a manual refresh action).

    <CodeGroup>
      ```swift iOS theme={null}
      import AmityUIKit

      @MainActor
      func syncTheme() async {
          do {
              try await AmityUIKit4Manager.syncNetworkConfig()
              print("Dynamic UI synced")
          } catch {
              print("Sync failed: \(error)")
          }
      }
      ```

      ```kotlin Android theme={null}
      fun syncTheme() {
        AmityUIKit4Manager.syncNetworkConfig()
          .subscribeOn(Schedulers.io())
          .doOnComplete { Log.d("DynamicUI", "Synced") }
          .doOnError { e -> Log.e("DynamicUI", "Failed", e) }
          .subscribe()
      }
      ```

      ```typescript React theme={null}
      import { AmityUIKitManager } from '@amityco/ui-kit';

      export async function syncTheme() {
        try {
          await AmityUIKitManager.syncNetworkConfig();
          console.log('Dynamic UI synced');
        } catch (e) {
          console.error('Sync failed', e);
        }
      }
      ```

      ```jsx React Native theme={null}
      import { AmityUIKitManager } from 'amity-react-native-social-ui-kit';

      const syncTheme = async () => {
        try {
          await AmityUIKitManager.syncNetworkConfig();
          console.log('Dynamic UI synced');
        } catch (e) {
          console.log('Sync failed', e);
        }
      };
      ```

      ```dart Flutter theme={null}
      import 'package:amity_uikit/amity_uikit.dart';

      Future<void> syncTheme() async {
        try {
          await AmityUIKit4Manager.syncNetworkConfig();
          print('Dynamic UI synced');
        } catch (e) {
          print('Sync failed: $e');
        }
      }
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Recommended Triggers">
    ```js theme={null}
    // Pseudocode lifecycle examples
    app.on('launch', syncTheme);
    app.on('resume', syncTheme);
    refreshButton.on('click', syncTheme);
    ```
  </Tab>
</Tabs>

## Next Steps

<CardGroup cols={3}>
  <Card title="Component Styling" href="/uikit/customization/component-styling" icon="code">Per-component overrides</Card>
  <Card title="Theming Basics" href="/uikit/customization/theming-basics" icon="book">Layering model & tokens</Card>
  <Card title="Advanced Customization" href="/uikit/customization/advanced-customization" icon="code-fork">Fork & extend</Card>
</CardGroup>

<Tip>
  Log a design token adoption plan early so future roadmap features (typography/spacing) slot in without refactors.
</Tip>