Package web apps that run inside Studio and Player.

A Studio app is a versioned bundle with an HTML entry point, metadata, assets, optional configuration schema, and optional locale files. The app runs inside an iframe, receives window.APP_CONFIG, and adapts to the size of its Designer or Player container.

index.html
config.html
app.json
icon.svg
banner.png
banner.en.png
featured.png
featured.en.png
locales/de.json
locales/en.json

• index.html is the playback entry point
• app.json contains technical metadata and config schema
• locales/de.json is required once a locales folder exists
• banner.png is 1200x400, featured.png is 1920x1080
• localized image variants use banner.en.png and featured.en.png
• apps without locales stay in legacy mode

Keep display copy in locale files. Use app.json for stable technical fields: name, slug, category, content language, and configuration schema.

{
  "name": "Lobby Weather",
  "slug": "lobby-weather",
  "category": "utility",
  "version": "v1.0.0",
  "content_language": ["de", "en"],
  "config_schema": {
    "fields": [
      {
        "key": "locale",
        "type": "select",
        "default": "de",
        "options": [{ "value": "de" }, { "value": "en" }]
      },
      {
        "key": "location",
        "type": "text",
        "default": "Berlin"
      }
    ]
  }
}

Studio injects window.APP_CONFIG before your app logic runs. Keep a URL-parameter fallback for local testing, and read runtime translations from window.APP_CONFIG.locale.strings.

<script id="app-config"></script>
<script>
  let config

  if (window.APP_CONFIG) {
    config = window.APP_CONFIG
  } else {
    const params = new URLSearchParams(window.location.search)
    config = {
      location: params.get('location') || 'Berlin',
      transparentBackground: params.get('transparentBackground') === 'true'
    }
  }

  const runtime = config.locale?.strings || {}
  document.body.dataset.transparent = String(config.transparentBackground === true)
</script>

• Check window.APP_CONFIG before reading URL parameters
• Use transparentBackground to support overlays
• Use percentage sizing inside iframes, not full-page assumptions
• Design against a stable 1920x1080 base when using the app scaler