Skip to main content

Customizing MiniApp UI with miniApp.json​

KOBIL’s SuperApp platform gives MiniApp developers enhanced control over key UI components such as the navigation bar, status bar, and overall theme. These customization options enable a seamless, mobile-like experience that aligns with your brand identity.

Apply Custom UI Settings​

To modify the header and visual elements of your MiniApp, you need to create a configuration file named miniApp.json. This file should be placed in the root directory of the defined MiniApp URL.

📄The file contains your MiniApp’s visual and layout preferences, such as enabling full-screen mode or changing bar colors.

The SuperApp searches for miniApp.json in a predefined order based on your MiniApp’s registered URL. Below are examples to guide you:

Example 1: Simple Root Deployment

  • MiniApp URL: https://myminiapp.com
  • Expected Config File Location: https://myminiapp.com/miniApp.json

Example 2: Subpath Deployment

  • MiniApp URL: https://myminiapps.com/fancy-miniapp?lang=en
  • SuperApp search order:
    1. https://myminiapps.com/fancy-miniapp/miniApp.json
    2. https://myminiapps.com/miniApp.json
⚠️
Ensure the file is publicly accessible from the browser to allow the SuperApp to retrieve and apply your custom configurations.
The file should be placed in your project’s public folder, which means it will be available at a direct URL after deployment.

Sample miniApp.json​

{
  "version": "2.0",
  "fullScreen": false, //'true' enalbes fullScreen, and statusBar is invisible
  "theme": "app-default",
  "statusBar": {
    "theme": {
      "light": {
        "backgroundColor": "#b5b02c"
      },
      "dark": {
        "backgroundColor": "#ae2929"
      }
    }
  },
  "navigationBar": {
    "visible": true, //'false' hides the navigationBar
    "theme": {
      "light": {
        "backgroundColor": "#5f9ea0"
      },
      "dark": {
        "backgroundColor": "#2e1a1a"
      }
    }
  }
}

Create your miniApp.json file​

Try It Out: See how the SuperApp dynamically adapts its UI based on the miniApp.json configuration and download your miniApp.json file. miniApp.json Generator

📌Note: If a MiniApp does not contain a valid miniApp.json file, the SuperApp will fall back to default rendering behavior. In this case, the MiniApp is displayed using the app-default theme, with both the status and navigation bars visible. These bars use default background colors: #F9FBFF for light mode and #232935 for dark mode.