Web Engine Docs
Preparing documentation
Documentation0%
Use the search bar to quickly find any topic
Content
Search
Examples
Ready
Web Engine v0.1.0-alpha
Edit this page on GitHub
Last updated: 1/15/2026
Was this page helpful?
Preparing documentation
Use the search bar to quickly find any topic
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.
Customize engine name, logo, colors, and themes
Configure subdomains for studio, player, docs, and API
Publish under your own NPM scope
Unique localStorage keys to avoid conflicts
All branding configuration is centralized in packages/config/src/branding.ts:
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",// ...},// ...};
Customize the engine identity:
export const DEFAULT_BRANDING: BrandingConfig = {engine: {name: "MyEngine", // Display nameshortName: "ME", // AbbreviationfullName: "MyEngine Game Engine", // Full product nameversion: "1.0.0", // Version numberversionLabel: "v1.0.0", // Version with prefixcodename: "Horizon", // Release codenametagline: "Build games that matter", // Short taglinedescription: "Professional game engine", // Full descriptionlicense: "Commercial", // License typeauthor: "MyCompany", // Author/teamcopyright: "© 2025 MyCompany", // Copyright notice},// ...};
organization: {npmOrg: "@mycompany", // NPM scopedomain: "myengine.com", // Primary domainwebsite: "https://myengine.com", // Marketing sitedocsUrl: "https://docs.myengine.com", // DocumentationsupportUrl: "https://myengine.com/support", // Support portalsupportEmail: "support@myengine.com", // Support emailrepository: "https://github.com/mycompany/myengine",repositoryIssues: "https://github.com/mycompany/myengine/issues",}
Configure URLs for different applications:
subdomains: {landing: "https://myengine.com", // Landing/marketingstudio: "https://studio.myengine.com", // Editor applicationplayer: "https://play.myengine.com", // Player runtimedocs: "https://docs.myengine.com", // Documentation siteapi: "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",},});
Customize localStorage/sessionStorage keys to avoid conflicts with other applications:
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.
themeIds: {darkTheme: "myengine-dark", // Monaco editor dark themelightTheme: "myengine-light", // Monaco editor light theme}pwa: {themeColor: "#0a0a0a", // Browser chrome colorbackgroundColor: "#0a0a0a", // Splash screen backgrounddisplay: "standalone", // PWA display modecategories: ["games", "tools"], // App store categories}
Override the default theme with CSS variables:
: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:
apps/studio/public/logo.svg with your logoapps/studio/public/favicon.ico with your faviconapps/landing/public/logo.svg for the landing pageapps/docs/public/logo.svg for documentationAccess and modify branding at runtime:
import { branding, getBranding, setBranding } from "@web-engine-dev/config";// Get current brandingconsole.log(branding.engine.name); // "Web Engine"console.log(branding.organization.domain); // "web-engine.dev"// Get full branding objectconst config = getBranding();// Override specific valuessetBranding({engine: {name: "MyEngine",tagline: "Build incredible games",},organization: {domain: "myengine.com",},});// Reset to defaultsimport { resetBranding } from "@web-engine-dev/config";resetBranding();
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",}
{"name": "@mycompany/core","version": "1.0.0","description": "MyEngine core runtime","author": "MyCompany","license": "Commercial"}
export default defineConfig({define: {__ENGINE_NAME__: JSON.stringify(branding.engine.name),__ENGINE_VERSION__: JSON.stringify(branding.engine.version),},});
White-Label Deployment
packages/config/src/branding.tspublic/ directoriespackage.json name and organization