# Free OTT App Builder: Mock Up Your Streaming App

> Mock up your streaming app before you hire a developer. Set your logo, colors, sign-in and home rows, then preview it on phone, website, tablet and TV. Free.

Canonical URL: https://apexnova.in/tools/ott-app-builder

Mock up your streaming app before you spend on development. Add your logo and colors, choose the sign-in options and home rows, and check the result on a phone, a website, a tablet and a TV. It's free, there's no sign-up, and the share link works as a design brief for your developers.

This page is an interactive tool by Apexnova. In a browser it draws a themed streaming app and restyles it live. This Markdown version documents what the tool does: its controls and defaults, presets, previews, contrast checks and export format.

## Controls and defaults

| Control | Default | Options |
| --- | --- | --- |
| App name | YourApp | Up to 24 characters |
| Logo | None (shows a monogram and the app name) | PNG, SVG, JPG or WebP up to 5 MB, resized to 512px |
| Show app name next to logo | Off | On or off; for logos without the name in them |
| Splash screen | Background | Background, Accent, Gradient |
| Accent | #7c6cff | Any hex color |
| Buttons | #7c6cff | Any hex color; label turns black or white for contrast |
| Background | #0a0a12 | Any hex color |
| Cards | #181826 | Any hex color |
| Text | #f4f4fa | Any hex color |
| Titles | Modern | Modern, Editorial, Impact |
| Button corners | 12px | 0 to 28px (pill) |
| Card corners | 12px | 0 to 24px |
| Profile icon corners | 18% | 0 to 50% (circle) |
| Posters | Portrait 2:3 | Portrait 2:3, Landscape 16:9 |
| Spacing | Cozy | Compact, Cozy, Roomy |
| Hero | Cinematic | Cinematic, Spotlight card |
| Sign-in methods | Email, Google, Apple | Reorder, show or hide: Email, Phone number, Google, Apple, Facebook |
| Menu | Home, Movies, Series, Live TV, My List | Reorder, show or hide: Home, Live TV, Movies, Series, Sports, Kids, My List |
| Home rows | Continue watching, Trending now, Top 10 this week, Live now, New releases | Reorder, show or hide: Continue watching, Trending now, Live now, Top 10 this week, New releases |
| Sample catalog | Movies & series | Movies & series, Live sports, Kids & family, Documentary |

## Presets

Presets change colors, shapes, menu and home rows. The app name and logo are kept.

| Preset | Accent | Background | Titles | Corners (button / card) | Posters | Catalog |
| --- | --- | --- | --- | --- | --- | --- |
| Nightfall | #7c6cff | #0a0a12 | Modern | 12px / 12px | Portrait 2:3 | Movies & series |
| Marquee | #e8a33d | #100c08 | Editorial | 2px / 4px | Portrait 2:3 | Movies & series |
| Stadium | #2fe0a0 | #06121a | Impact | 6px / 8px | Landscape 16:9 | Live sports |
| Treehouse | #ff7ab6 | #14204a | Modern | 28px / 22px | Portrait 2:3 | Kids & family |
| Campus | #1f5fbf | #f3f5f9 | Editorial | 28px / 14px | Portrait 2:3 | Documentary |

## Previews

Every layout shows four screens: Home, Login, Profiles, Splash.

| Layout | Navigation | Covers |
| --- | --- | --- |
| Phone | Bottom tab bar (up to five items) | Native iOS and Android apps |
| Website | Top menu | Your streaming website, on desktop browsers |
| Tablet | Tab bar with category chips | iPad and Android tablet layouts |
| TV | Side menu with a focus ring for remotes | Android TV, Fire TV, Apple TV, Tizen and webOS |

## Contrast checks

WCAG 2 contrast ratio, `(lighter + 0.05) ÷ (darker + 0.05)` on relative luminance.

| Pair | Minimum | Default theme |
| --- | --- | --- |
| Text on background | 4.5:1 | 18.0:1 (pass) |
| Text on cards | 4.5:1 | 16.0:1 (pass) |
| Accent on background | 3:1 | 5.1:1 (pass) |
| Button on background | 3:1 | 5.1:1 (pass) |

## Export

Share creates a preview link (full-screen mockup, no editing) and an edit link (reopens the builder). The theme also exports as JSON design tokens. The default theme exports as:

```json
{
  "app": {
    "name": "YourApp",
    "showNameWithLogo": false
  },
  "colors": {
    "accent": "#7c6cff",
    "onAccent": "#0b0b10",
    "button": "#7c6cff",
    "onButton": "#0b0b10",
    "background": "#0a0a12",
    "surface": "#181826",
    "text": "#f4f4fa"
  },
  "typography": {
    "titleStyle": "modern"
  },
  "shape": {
    "buttonRadius": 12,
    "cardRadius": 12,
    "profileRadius": 18,
    "poster": "portrait",
    "density": "cozy"
  },
  "splash": "background",
  "home": {
    "hero": "cinematic",
    "rows": [
      "continue",
      "trending",
      "top10",
      "live",
      "new"
    ]
  },
  "navigation": [
    "home",
    "movies",
    "series",
    "live",
    "mylist"
  ],
  "login": [
    "email",
    "google",
    "apple"
  ]
}
```

## Decide these five things before you brief a developer

Most streaming app projects lose their first weeks to design back-and-forth. Settle these early and the build starts on code instead of opinions:

- **Name and logo.** The logo has to read at app-icon size and on a splash screen. A simple mark with a transparent background holds up best.
- **One accent color.** Use it for the main button, the active menu item and progress bars, and nowhere else. If every element is highlighted, the eye has nowhere to go.
- **How people sign in.** Google and Apple sign-in cut sign-up friction on phones. A phone number suits markets where people rely on OTP. Lead with the method most of your viewers will use.
- **What the menu holds.** A phone tab bar has room for five items. If you have more sections, some belong inside a page, not in the bar.
- **What the home screen shows first.** Returning viewers want *Continue watching*. Live services should open on *Live now*. New services with a small catalog do better leading with a single hero title.

## Design for the phone first

Most viewers will find, try and pay for your service on a phone, so judge your theme there before anywhere else. Portrait posters fit more titles on a narrow screen. Pill-shaped buttons are easier for thumbs to hit. The splash screen is the first thing every viewer sees, and it should show your logo on your own colors, not a blank flash.

## Treat your website as the second storefront

Search traffic, social links and email campaigns land on the website, so it often turns visitors into subscribers before they ever install an app. It needs the same brand as the app, a top menu instead of a tab bar, and wide 16:9 artwork that fills a desktop screen. Switch the preview to *Website* to check it.

## Check readability before anything ships

Contrast is a ratio between the relative luminance of two colors: `(lighter + 0.05) ÷ (darker + 0.05)`. The builder scores your palette against the WCAG minimums, 4.5:1 for text and 3:1 for accents and buttons. Light themes fail more often than dark ones because mid-tone accents wash out on pale backgrounds.

## What turns a mockup into an app

The mockup covers how the app looks. The build is everything behind the screen: adaptive video playback, a content management system, subscriptions or rentals, analytics, and passing App Store and Google Play review. Our [OTT app development](https://apexnova.in/ott/ott-app-development) service covers that work, [OTT platform development cost](https://apexnova.in/ott/ott-platform-development-cost) breaks down the budget, and our [case studies](https://apexnova.in/case-studies) show apps we've launched.

## FAQ

### Is the OTT app builder free?

Yes. You don't need an account or an email address. Open the page, design, and share or download what you made.

### Does this builder create a working app I can publish?

No, and you should be wary of any tool that says it can. This is a design and planning tool. It shows you how your brand will look in a streaming app and gives you a precise brief. A publishable app also needs a video player, a content library, payments, accounts and store review, which is engineering work.

### Which screens and devices can I preview?

You can preview four screens (home, login, profile picker and splash) on four layouts: a phone app with a bottom tab bar, a streaming website with a top menu, a tablet app, and a TV app with a side menu built for remotes. One theme controls all of them.

### What happens to the logo I upload?

While you design, the logo stays in your browser. If you create a share link, a copy shrunk to at most 512 pixels is saved with the design so the link can show it. The JSON export never includes the logo.

### How do I show the design to my team or a client?

Click Share and you get two links. The preview link opens the design full-screen with no editing controls, and viewers can switch devices and screens. The edit link reopens the builder with every setting restored. You can also copy or download the theme as JSON.

### What is in the exported JSON?

Design tokens: the app name, every color plus the readable text color for each button and accent, title style, corner radii, poster shape, spacing, splash style, the order of the menu and home rows, and the enabled sign-in methods. Developers can map these straight onto an iOS, Android or web theme.

### Why does the builder show contrast scores?

Streaming apps get used in dark rooms, in bright sunlight and from across a living room. The builder checks your text, card, accent and button colors against the WCAG contrast minimums of 4.5:1 for text and 3:1 for accents, so you can spot an unreadable palette before anyone builds it.

### Can Apexnova build the real app from my design?

Yes. Apexnova builds custom native iOS and Android apps and streaming websites, and the code is yours. Bring your share link to a call and the team will use it as the starting design brief.

### Are the shows and movies in the preview real?

No. Every title and poster is made up. They're there so you can judge your colors against realistic artwork. Your app would show your own catalog.

## Contact

To turn a mockup into native iOS and Android apps and a streaming website, email [hello@apexnova.in](mailto:hello@apexnova.in) or use the [contact page](https://apexnova.in/contact).