Custom skins

When the built-in templates aren't enough, a Custom Skin lets you bring your own Hub design, your exact layout, colors, fonts and footer, and DemoBites powers the search, the bite grid, category filtering and video playback inside it. It's the most flexible way to make a Hub look unmistakably yours. (Called the Proprietary Skin template in the Hub editor.)

What is a Custom Skin

Every standard Hub template is a layout we designed. A Custom Skin flips that around: you design the page, and DemoBites slots its live, interactive pieces into it. You keep full control of the hero, navigation, sections, brand voice and footer, DemoBites only takes over the three things that need real data: search, the grid of Bites, and category filters.

The result is a hub that looks like a bespoke page on your own site, but with a working video library, search and playback running inside it, no engineering required.

How it works

Going from a design to a live, working Hub is four steps:

1. Design

Create a single, self-contained HTML page for your hub, with three simple placeholders where DemoBites will inject the search box, the bite grid and the category chips.

2. Upload

In your Hub editor, open the Template tab, choose Proprietary Skin, and drop in your .html (or a .zip exported from your design tool).

3. Validate & secure

DemoBites checks your design against a strict contract, strips anything unsafe, and wires in the live search, grid and category runtime, all automatically, in seconds.

4. Publish

Hit Publish and your skin goes live on your Hub, complete with working search, category filtering and modal video playback.

The three live components

Your design owns the whole page. DemoBites fills exactly three regions you mark with empty placeholders, it never touches anything else:

Search

A live search box wired to your Bites. Visitors type and the grid filters instantly.

Bite grid

The responsive grid of bite cards. DemoBites injects the cards, handles the columns, gaps, thumbnails and click-to-play, your design just says where the grid goes.

Categories (optional)

Filter chips for your Hub's categories. Include the placeholder and they appear; leave it out and they don't.

Everything around them, hero, nav, footer, copy, colors and type, is entirely yours.

Designing your skin

The fastest way to build a skin is with an AI design tool like Claude Design. From your Hub's Template tab, open your personalized design brief, a ready-made prompt that tells the AI exactly what to build, including the three required components, so whatever it designs already works with DemoBites.

Describe your brand, or simply point it at your website, and you'll get an on-brand hub in a couple of clicks. Export the result and drop it into the uploader. Prefer to hand-code, or use a different tool? That works too, as long as the file meets the requirements below.

Card & layout settings

Even with your own design, you stay in control of the parts DemoBites powers. The Hub's Settings tab gives you simple controls for the injected cards and chips:

Card theme, light or dark bite cards, plus the corner radius.
Cards per row, auto, 3, or 4, with your choice of browsing: load more, pages, or infinite scroll.
Card details, play-button style, title position, and toggles for duration, description and a share icon.
Category chips, pill or rounded, in your accent color.
Search field, light, dark, or auto (it reads the background it sits on).

By default the cards inherit your skin's own typography, so they feel native to your design out of the box.

Requirements

To keep your Hub fast and safe, an uploaded skin must be:

Self-contained, all CSS inline; images as data: URIs or inline SVG. No external stylesheets, fonts or assets.
Script-free, DemoBites provides all interactivity, so your file contains no JavaScript.
Within limits, a single .html (or .zip) under 2 MB, containing the search and grid placeholders.

Links to your own pages (<a href>) are always fine. Every upload is sanitized, and anything that doesn't meet the contract is rejected with a clear, specific explanation of what to fix.

Good to know: while you design, the three components show labeled placeholders so you can see where they sit. Those design-time markers disappear automatically the moment your Hub goes live and the real search, grid and chips take their place.

Availability

Custom Skins are a Premiumfeature. If you ever downgrade to Free, you'll be asked to switch any Hub using a Custom Skin back to one of the standard templates first, your Bites, categories and order are always preserved.