{"id":34667415,"url":"https://github.com/andreas-pihlstrom/electrolyx","last_synced_at":"2026-05-25T08:32:23.922Z","repository":{"id":325612333,"uuid":"1101824825","full_name":"andreas-pihlstrom/electrolyx","owner":"andreas-pihlstrom","description":"Make your Electron app match OSX Tahoe's corner radius and blur.","archived":false,"fork":false,"pushed_at":"2025-11-22T10:03:07.000Z","size":2289,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-22T11:27:06.629Z","etag":null,"topics":["corner","electron","radius"],"latest_commit_sha":null,"homepage":"","language":"Objective-C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andreas-pihlstrom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-22T10:03:04.000Z","updated_at":"2025-11-22T10:05:07.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/andreas-pihlstrom/electrolyx","commit_stats":null,"previous_names":["andreas-pihlstrom/electrolyx"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/andreas-pihlstrom/electrolyx","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreas-pihlstrom%2Felectrolyx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreas-pihlstrom%2Felectrolyx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreas-pihlstrom%2Felectrolyx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreas-pihlstrom%2Felectrolyx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andreas-pihlstrom","download_url":"https://codeload.github.com/andreas-pihlstrom/electrolyx/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreas-pihlstrom%2Felectrolyx/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28006574,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-24T02:00:07.193Z","response_time":83,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["corner","electron","radius"],"created_at":"2025-12-24T19:19:59.028Z","updated_at":"2025-12-24T19:20:04.466Z","avatar_url":"https://github.com/andreas-pihlstrom.png","language":"Objective-C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./Electrolyx.png\" alt=\"Electrolyx\"\u003e\n\u003c/p\u003e\n\n# Electrolyx\n\n**MIT-licensed Electron toolkit for native macOS visual effects**\n\nElectrolyx brings native macOS window customization and visual effects to Electron applications, including rounded corners and glass/vibrancy effects.\n\n## Features\n\n- **Custom Window Corners**: Apply native-style rounded corners to Electron windows\n- **Vibrancy/Glass Effects**: Create translucent UI elements with blur using native `NSVisualEffectView`\n- **Window Transparency**: Full control over window background transparency\n- **TypeScript Support**: Full type definitions included\n- **MIT Licensed**: Completely free for any project\n\n## Installation\n\n```bash\nnpm install electrolyx\n```\n\n### Requirements\n\n- macOS 10.13 (High Sierra) or later\n- Electron 20.0.0 or later\n- Node.js 16.0.0 or later\n- Xcode Command Line Tools (for building native module)\n\n## Quick Start\n\n```typescript\nimport { app, BrowserWindow } from 'electron';\nimport { setWindowCornerRadius, addVibrancyView, setWindowTransparent } from 'electrolyx';\n\nfunction createWindow() {\n  const window = new BrowserWindow({\n    width: 800,\n    height: 600,\n    transparent: true,\n    titleBarStyle: 'hiddenInset'\n  });\n\n  window.once('ready-to-show', () =\u003e {\n    // Set custom rounded corners\n    setWindowCornerRadius(window, 16);\n\n    // Make background transparent\n    setWindowTransparent(window);\n\n    // Add sidebar with vibrancy effect\n    addVibrancyView(window, {\n      x: 0,\n      y: 0,\n      width: 250,\n      material: 'sidebar',\n      cornerRadius: 16\n    });\n\n    window.show();\n  });\n}\n\napp.whenReady().then(createWindow);\n```\n\n## API Documentation\n\n### `setWindowCornerRadius(window, radius)`\n\nSet custom corner radius for a window.\n\n**Parameters:**\n- `window` (BrowserWindow) - Electron BrowserWindow instance\n- `radius` (number) - Corner radius in points\n\n**Returns:** `boolean` - true if successful\n\n**Note:** This uses private macOS APIs and may break in future macOS versions.\n\n```typescript\nsetWindowCornerRadius(mainWindow, 16);\n```\n\n---\n\n### `getWindowCornerRadius(window)`\n\nGet the current corner radius of a window.\n\n**Parameters:**\n- `window` (BrowserWindow) - Electron BrowserWindow instance\n\n**Returns:** `number` - Current corner radius in points\n\n```typescript\nconst radius = getWindowCornerRadius(mainWindow);\n```\n\n---\n\n### `addVibrancyView(window, options)`\n\nAdd a native vibrancy (blur/glass) effect view to a window.\n\n**Parameters:**\n- `window` (BrowserWindow) - Electron BrowserWindow instance\n- `options` (VibrancyViewOptions) - Configuration options\n\n**VibrancyViewOptions:**\n\n```typescript\ninterface VibrancyViewOptions {\n  x?: number;                    // Default: 0\n  y?: number;                    // Default: 0\n  width?: number;                // Default: 200\n  height?: number;               // Default: window height\n  material?: VibrancyMaterial;   // Default: 'sidebar'\n  blendingMode?: BlendingMode;   // Default: 'behindWindow'\n  state?: VibrancyState;         // Default: 'followsWindowActiveState'\n  cornerRadius?: number;         // Default: 0\n  autoresizingMask?: {\n    width?: boolean;\n    height?: boolean;\n    minX?: boolean;\n    maxX?: boolean;\n    minY?: boolean;\n    maxY?: boolean;\n  };\n}\n```\n\n**Material Types:**\n- `'titlebar'` - Title bar appearance\n- `'sidebar'` - Sidebar appearance (default)\n- `'menu'` - Menu appearance\n- `'popover'` - Popover appearance\n- `'hudWindow'` - HUD window appearance\n- `'sheet'` - Sheet appearance\n- `'tooltip'` - Tooltip appearance\n- `'underWindowBackground'` - Under window background\n\n**Example:**\n\n```typescript\naddVibrancyView(mainWindow, {\n  x: 0,\n  y: 0,\n  width: 250,\n  height: 700,\n  material: 'sidebar',\n  blendingMode: 'behindWindow',\n  cornerRadius: 16,\n  autoresizingMask: {\n    height: true  // Resize with window height\n  }\n});\n```\n\n---\n\n### `setWindowBackgroundColor(window, color)`\n\nSet the background color of a window.\n\n**Parameters:**\n- `window` (BrowserWindow) - Electron BrowserWindow instance\n- `color` (RGBColor) - Color object with r, g, b values (0-1)\n\n```typescript\nsetWindowBackgroundColor(mainWindow, {\n  r: 1.0,\n  g: 1.0,\n  b: 1.0,\n  a: 0.95\n});\n```\n\n---\n\n### `setWindowTransparent(window)`\n\nMake a window background completely transparent.\n\n**Parameters:**\n- `window` (BrowserWindow) - Electron BrowserWindow instance\n\n```typescript\nsetWindowTransparent(mainWindow);\n```\n\n## Examples\n\n### Rounded Corners + Transparent Background\n\n```typescript\nconst window = new BrowserWindow({\n  width: 800,\n  height: 600,\n  transparent: true,\n  frame: false\n});\n\nwindow.once('ready-to-show', () =\u003e {\n  setWindowCornerRadius(window, 20);\n  setWindowTransparent(window);\n  window.show();\n});\n```\n\n### Sidebar with Vibrancy\n\n```typescript\naddVibrancyView(mainWindow, {\n  x: 0,\n  y: 0,\n  width: 250,\n  material: 'sidebar',\n  cornerRadius: 16,\n  autoresizingMask: {\n    height: true  // Auto-resize with window\n  }\n});\n```\n\n### Complete Example\n\nSee the `example/` directory for a full working Electron app demonstrating all features.\n\nTo run the example:\n\n```bash\nnpm run build\ncd example\nnpm install\nnpm start\n```\n\n## Important Warnings\n\n### Private APIs\n\nThe `setWindowCornerRadius()` function uses **private macOS APIs** that are:\n- Not documented by Apple\n- Not guaranteed to work across macOS versions\n- May change or be removed in future updates\n- Could potentially be rejected in Mac App Store submissions\n\n**Use at your own risk** and always test thoroughly on target macOS versions.\n\n### Vibrancy Effects (Safe)\n\nThe vibrancy features use **public `NSVisualEffectView` APIs** that are:\n- Officially documented by Apple\n- Stable across macOS versions\n- Safe for Mac App Store submissions\n\n## Building from Source\n\n```bash\n# Install dependencies\nnpm install\n\n# Build native module and TypeScript\nnpm run build\n\n# Or build separately\nnpm run build:native\nnpm run build:ts\n```\n\n## Troubleshooting\n\n### Build Errors with Paths Containing Spaces\n\nIf you encounter build errors like `clang: error: no such file or directory` during `npm install`, this is likely due to node-gyp not properly handling paths with spaces (e.g., \"Personal Projects\", \"My Documents\").\n\n**Workaround:**\n\n1. Copy the project to a temporary location without spaces:\n   ```bash\n   cp -R /path/with spaces/electrolyx ~/electrolyx-temp\n   cd ~/electrolyx-temp\n   rm -rf build node_modules\n   npm install\n   ```\n\n2. Copy the compiled module back to your original location:\n   ```bash\n   cp ~/electrolyx-temp/build/Release/electrolyx.node /path/with spaces/electrolyx/build/Release/\n   cp -R ~/electrolyx-temp/node_modules /path/with spaces/electrolyx/\n   ```\n\n3. Install example dependencies without rebuilding:\n   ```bash\n   cd /path/with spaces/electrolyx/example\n   npm install --ignore-scripts\n   ```\n\n**Alternative:** Move your project to a path without spaces for easier development.\n\n## Platform Support\n\n- **macOS**: Full support (10.13+)\n- **Windows**: Not supported\n- **Linux**: Not supported\n\nThe library will gracefully fail on non-macOS platforms.\n\n## TypeScript\n\nFull TypeScript definitions are included. Import types as needed:\n\n```typescript\nimport { VibrancyViewOptions, VibrancyMaterial, BlendingMode } from 'electrolyx';\n```\n\n## Contributing\n\nContributions are welcome! Please feel free to submit issues and pull requests.\n\n## License\n\nMIT License - see LICENSE file for details\n\n## Disclaimer\n\nThis library uses undocumented macOS APIs for certain features. While we strive for compatibility:\n- Features may break with macOS updates\n- No warranties or guarantees provided\n- Use in production at your own risk\n- Always test on target macOS versions\n\nFor mission-critical applications, consider commercial alternatives with professional support.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreas-pihlstrom%2Felectrolyx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandreas-pihlstrom%2Felectrolyx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreas-pihlstrom%2Felectrolyx/lists"}