super-browser-window-kit/README.md

Super toolkit for enhanced Electron BrowserWindow with rounded corners and macOS liquid glass effects

[![en](https://img.shields.io/badge/lang-en-red.svg)](README.md)
[![ja](https://img.shields.io/badge/lang-ja-blue.svg)](README.ja.md)
[![ko](https://img.shields.io/badge/lang-ko-yellow.svg)](README.ko.md)
[![zh-cn](https://img.shields.io/badge/lang-zh--cn-green.svg)](README.zh.md)

# super-browser-window-kit

High-fidelity macOS Tahoe toolkit, designed for Electron BrowserWindow.

🏠 **Homepage**:
[https://bytemyth.com/super-browser-window-kit](https://bytemyth.com/super-browser-window-kit)

## Project Overview

Bring modern native macOS window visual effects to Electron applications.

## Screenshots

### Window Rounded Corners & Sidebar
Experience seamless native macOS aesthetics with beautifully rounded window corners and sidebar integration.

![Window Rounded Corners](https://raw.githubusercontent.com/gaodeng/super-browser-window-kit-example/main/docs/screenshot.png)

### Liquid Glass Effect
Harness the power of native `NSGlassEffectView` for authentic macOS liquid glass effects - no CSS hacks, just pure native performance.

![Liquid Glass Effect](https://raw.githubusercontent.com/gaodeng/super-browser-window-kit-example/main/docs/liquid-glass.gif)

## Installation

```bash
npm install super-browser-window-kit
```

## Quick Start

### Rounded Corners for BrowserWindow

Easily enable beautiful, native-style rounded corners for your Electron
BrowserWindow on macOS. This feature helps your app blend seamlessly with modern
macOS aesthetics, providing a polished and professional look. Simply call the
API after window creation to customize the corner radius as needed.

```js
const { app, BrowserWindow } = require("electron");
const path = require("node:path");
const {
  default: SuperBrowserWindowKit,
  AutoresizingMask,
  GlassMaterialVariant,
  SystemColor,
} = require("super-browser-window-kit");

/**
 * =====================[ LICENSE NOTICE ]=====================
 * This license code is valid only for com.github.Electron test builds.
 * It will NOT work in production environments.
 * For production use, please obtain a valid commercial license.
 *
 * Official website: https://bytemyth.com/super-browser-window-kit
 * Contact: hi@bytemyth.com
 * ===========================================================
 */
const LICENSE_CODE =
  "GCAYQ-ASCAG-Q76KA-ELXLU-HN8CV-3ZK8P-STALL-QLSVZ-9FFSX-3S2ZU-4QVSC-LLJ7U-KH6K7-G88HA-4TTDJ-58G9H-GZFY6-DDSDJ-L5ZB9-V7UMB-896CS-P9AVC-GULAB-EEAGQ-T77DP-DRBJN-G829M-ZZF9M-L2VEN-RZM8F-SQ4KW-3JLLB-MUVXP-TS3P8-7ZFZM-4L2P3-S4TTA-Z7EVY-Z5H9J-FYDUS-WQCYW-C92PZ-BB23J-QZEVP-QNQ";
app.whenReady().then(() => {
  const win = new BrowserWindow({
    width: 1000,
    height: 700,
    titleBarStyle: "hiddenInset",
    trafficLightPosition: { x: 20, y: 20 },
    show: false,
  });
  win.loadFile("index.html");
  SuperBrowserWindowKit.setLicense(LICENSE_CODE);
  SuperBrowserWindowKit.enableWindowCornerCustomization();
  SuperBrowserWindowKit.setWindowCornerRadius(win.getNativeWindowHandle(), 26);
  win.show();
});
```

## Main API

```ts
// Window corner
enableWindowCornerCustomization(): boolean;
setWindowCornerRadius(handle: Buffer, radius?: number): boolean;
disableWindowCornerCustomization(): boolean;

// Background view
addBackgroundView(handle: Buffer, options?: BackgroundOptions): number;
setBackgroundCornerRadius(handle: Buffer, id: number, cornerRadius: number): void;
setBackgroundColor(handle: Buffer, id: number, color: string | SystemColor | { light: string | SystemColor; dark: string | SystemColor }): void;

// Glass view
addGlassEffectView(handle: Buffer, options?: EffectViewOptions): number;
getEffectViewType(handle: Buffer, id: number): EffectViewType | -1;
setGlassCornerRadius(handle: Buffer, id: number, cornerRadius: number, masksToBounds?: boolean): void;
setGlassColor(handle: Buffer, id: number, color: string | SystemColor | { light: string | SystemColor; dark: string | SystemColor }): void;
setGlassVariant(handle: Buffer, id: number, variant: GlassMaterialVariant): void;

// View common
removeView(handle: Buffer, id: number): boolean;
setViewAutoresizingMask(handle: Buffer, id: number, mask: AutoresizingMask | number): boolean;
getViewFrame(handle: Buffer, id: number): ViewFrame | null;
setViewFrame(handle: Buffer, id: number, options: { x?: number; y?: number; width?: number; height?: number }): boolean;

// Window background
setWindowBackgroundColor(handle: Buffer, color: string | SystemColor | { light: string | SystemColor; dark: string | SystemColor }): void;

// Fullscreen notification
setFullScreenNotificationListener(handle: Buffer, callback: FullScreenNotificationCallback): boolean;
removeFullScreenNotificationListener(handle: Buffer): boolean;

// License
setLicense(license: string): boolean;
getBundleId(): string;
```

## Example

For a complete working example, check out the demo repository:
[https://github.com/gaodeng/super-browser-window-kit-example](https://github.com/gaodeng/super-browser-window-kit-example)

Or try it in Electron Fiddle:
[https://gist.github.com/gaodeng/4ca07e70b32701b99fbe0063efb9cdb9](https://gist.github.com/gaodeng/4ca07e70b32701b99fbe0063efb9cdb9)

## Author

bytemyth team

## License

Copyright (c) 2025 bytemyth team. All rights reserved.

This is proprietary software. You can use it for evaluation and testing
purposes.

For commercial use in production environments, please visit
[https://bytemyth.com/super-browser-window-kit](https://bytemyth.com/super-browser-window-kit)
or contact hi@bytemyth.com with your company/team information to obtain a
commercial license.