White-Labeling & Branding

Advanced

Customize Web Engine with your own branding, themes, and domain configuration. Complete white-label support for commercial deployments.

Web Engine supports complete white-labeling out of the box. Customize the engine name, logo, themes, domains, and storage keys without touching core code. All branding configuration lives in the @web-engine-dev/config package.

Branding Configuration#

Visual Branding

Customize engine name, logo, colors, and themes

Domain Configuration

Configure subdomains for studio, player, docs, and API

NPM Organization

Publish under your own NPM scope

Storage Keys

Unique localStorage keys to avoid conflicts

Configuration Structure#

All branding configuration is centralized in packages/config/src/branding.ts:

packages/config/src/branding.ts
typescript
export interface BrandingConfig {
  engine: EngineBranding;
  organization: OrganizationConfig;
  subdomains: SubdomainUrls;
  social: SocialLinks;
  storageKeys: StorageKeys;
  themeIds: ThemeIds;
  pwa: PwaConfig;
}
 
export const DEFAULT_BRANDING: BrandingConfig = {
  engine: {
    name: "Web Engine",
    shortName: "WE",
    fullName: "Web Engine",
    version: "0.1.0",
    versionLabel: "v0.1.0-alpha",
    tagline: "High-performance web game engine",
    // ...
  },
  organization: {
    npmOrg: "@web-engine-dev",
    domain: "web-engine.dev",
    website: "https://web-engine.dev",
    // ...
  },
  // ...
};

Engine Branding#

Customize the engine identity:

EngineBranding.ts
typescript
export const DEFAULT_BRANDING: BrandingConfig = {
  engine: {
    name: "MyEngine",                          // Display name
    shortName: "ME",                           // Abbreviation
    fullName: "MyEngine Game Engine",          // Full product name
    version: "1.0.0",                          // Version number
    versionLabel: "v1.0.0",                    // Version with prefix
    codename: "Horizon",                       // Release codename
    tagline: "Build games that matter",        // Short tagline
    description: "Professional game engine",   // Full description
    license: "Commercial",                     // License type
    author: "MyCompany",                       // Author/team
    copyright: "© 2025 MyCompany",             // Copyright notice
  },
  // ...
};

Organization Configuration#

OrganizationConfig.ts
typescript
organization: {
  npmOrg: "@mycompany",                          // NPM scope
  domain: "myengine.com",                        // Primary domain
  website: "https://myengine.com",               // Marketing site
  docsUrl: "https://docs.myengine.com",          // Documentation
  supportUrl: "https://myengine.com/support",    // Support portal
  supportEmail: "support@myengine.com",          // Support email
  repository: "https://github.com/mycompany/myengine",
  repositoryIssues: "https://github.com/mycompany/myengine/issues",
}

Subdomain URLs#

Configure URLs for different applications:

SubdomainConfig.ts
typescript
subdomains: {
  landing: "https://myengine.com",              // Landing/marketing
  studio: "https://studio.myengine.com",        // Editor application
  player: "https://play.myengine.com",          // Player runtime
  docs: "https://docs.myengine.com",            // Documentation site
  api: "https://api.myengine.com",              // API server
}

Development vs Production

You can override subdomain URLs at runtime for local development:

import { setBranding } from "@web-engine-dev/config";
 
setBranding({
  subdomains: {
    studio: "http://localhost:3000",
    player: "http://localhost:5173",
    docs: "http://localhost:3001",
    api: "http://localhost:4000",
  },
});

Storage Keys#

Customize localStorage/sessionStorage keys to avoid conflicts with other applications:

StorageKeys.ts
typescript
storageKeys: {
  prefix: "myengine",
  studioStorage: "myengine-studio-storage",
  welcomeWizardCompleted: "myengine:welcome-wizard:completed",
  layoutPreferences: "myengine:layout",
  projectStore: "myengine-project-store",
  userPreferences: "myengine:preferences",
  recentFiles: "myengine:recent-files",
  // ... all other storage keys
}

Breaking Change

Changing storage keys will invalidate existing user data. Only modify these before your first release or implement a migration strategy.

Theme Configuration#

ThemeConfig.ts
typescript
themeIds: {
  darkTheme: "myengine-dark",      // Monaco editor dark theme
  lightTheme: "myengine-light",    // Monaco editor light theme
}
 
pwa: {
  themeColor: "#0a0a0a",           // Browser chrome color
  backgroundColor: "#0a0a0a",      // Splash screen background
  display: "standalone",           // PWA display mode
  categories: ["games", "tools"],  // App store categories
}

Custom CSS Themes#

Override the default theme with CSS variables:

app/globals.css
css
:root {
  /* Primary colors */
  --primary: 220 70% 50%;
  --primary-foreground: 0 0% 100%;
 
  /* Background colors */
  --background: 0 0% 5%;
  --foreground: 0 0% 95%;
 
  /* Card/surface colors */
  --card: 0 0% 8%;
  --card-foreground: 0 0% 95%;
 
  /* Border and input colors */
  --border: 0 0% 15%;
  --input: 0 0% 15%;
  --ring: 220 70% 50%;
 
  /* Accent colors */
  --accent: 220 70% 50%;
  --accent-foreground: 0 0% 100%;
 
  /* Status colors */
  --destructive: 0 70% 50%;
  --warning: 38 92% 50%;
  --success: 142 71% 45%;
}
 
.light {
  /* Light theme overrides */
  --background: 0 0% 100%;
  --foreground: 0 0% 10%;
  --card: 0 0% 98%;
  --border: 0 0% 90%;
  /* ... */
}

Replace the engine logo and favicon:

  • Replace apps/studio/public/logo.svg with your logo
  • Replace apps/studio/public/favicon.ico with your favicon
  • Update apps/landing/public/logo.svg for the landing page
  • Update apps/docs/public/logo.svg for documentation

Runtime Branding API#

Access and modify branding at runtime:

RuntimeBranding.ts
typescript
import { branding, getBranding, setBranding } from "@web-engine-dev/config";
 
// Get current branding
console.log(branding.engine.name);      // "Web Engine"
console.log(branding.organization.domain); // "web-engine.dev"
 
// Get full branding object
const config = getBranding();
 
// Override specific values
setBranding({
  engine: {
    name: "MyEngine",
    tagline: "Build incredible games",
  },
  organization: {
    domain: "myengine.com",
  },
});
 
// Reset to defaults
import { resetBranding } from "@web-engine-dev/config";
resetBranding();

Social Links#

SocialLinks.ts
typescript
social: {
  discord: "https://discord.gg/myengine",
  twitter: "https://twitter.com/myengine",
  youtube: "https://youtube.com/@myengine",
  github: "https://github.com/myengine",
  community: "https://community.myengine.com",
  docs: "https://docs.myengine.com",
  website: "https://myengine.com",
  support: "https://myengine.com/support",
}

Publishing Under Your Brand#

NPM Packages#

package.json
json
{
  "name": "@mycompany/core",
  "version": "1.0.0",
  "description": "MyEngine core runtime",
  "author": "MyCompany",
  "license": "Commercial"
}

Build Configuration#

vite.config.ts
typescript
export default defineConfig({
  define: {
    __ENGINE_NAME__: JSON.stringify(branding.engine.name),
    __ENGINE_VERSION__: JSON.stringify(branding.engine.version),
  },
});

Deployment Checklist#

White-Label Deployment

  • Update all branding values in packages/config/src/branding.ts
  • Replace logo files in public/ directories
  • Update package.json name and organization
  • Configure custom domains in DNS and hosting
  • Update social media links and community URLs
  • Customize CSS theme variables
  • Update documentation site content
  • Test all cross-app navigation links
PreviousPerformanceOptimization guideNextCustom SystemsCreate custom systems
Advanced | Web Engine Docs | Web Engine Docs