Build an app

Building a website app

Already have a hosted web application? A website app wraps your URL in a managed VibeOS window so it shows up in the App Center and feels native — no rewrite required.

The manifest

A website app manifest is simpler than a .vibe app: instead of inline HTML, you point VibeOS at the url it should load.

json

{
  "name": "Acme Mail",
  "iconEmoji": "✉️",
  "iconBg": "linear-gradient(135deg,#6366f1,#0ea5e9)",
  "iconImage": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUg…",
  "description": "The full Acme Mail experience, running as a native window inside VibeOS.",
  "url": "https://mail.acme.com",
  "genre": "productivity",
  "width": 1024,
  "height": 720,
  "screenshots": [
    { "url": "https://acme.com/vibeos-shot.png", "caption": "Inbox" }
  ]
}

Field reference

Fields marked with * are required.

Field	Type	Description
name*	string	Display name, 2–60 characters.
iconEmoji*	string	An emoji used as the app icon.
iconBg*	string	CSS color or gradient shown behind the icon.
iconImage	string	App icon embedded as a base64 data URI (data:image/…). Overrides iconEmoji when present; external URLs are ignored. Use a small square PNG/WebP under ~3 MB encoded.
description*	string	What the app does, 10–2000 characters.
url*	string (URL)	The https URL VibeOS loads inside the window.
width	number	Initial window width in px (240–3840). Default 1024.
height	number	Initial window height in px (180–2160). Default 720.
genre	string	Category slug used to place the app in the catalog.
screenshots	{ url, caption? }[]	Up to 8 screenshots shown on the app listing.

Requirements

Your site must be served over https.
It must allow being embedded in a VibeOS window. Avoid restrictive X-Frame-Options: DENY or a frame-ancestors 'none' Content Security Policy that would block framing.
Design for the declared window size, but keep the layout responsive.

Embedding headers

If your app shows a blank window after install, the most common cause is a frame-ancestors or X-Frame-Options header blocking the embed. Allow the VibeOS origin (or remove the restriction) for the routes your app uses.

.vibe vs website app

Choose a website app when you already host the experience and want the fastest path into VibeOS.
Choose a .vibe app when you want a self-contained app with no external hosting and tighter VibeOS SDK integration.

Next steps

Paste your manifest into the submit form and choose Website app, then follow submission & review.