wnayes / bond-wm

An X Window Manager built on web technologies.

An X Window Manager built on web technologies.

Read the docs to get started 🔗

Bond Window Manager is a X window manager gives web developers a familiar platform for total customization of their desktop appearance.

The goal is to thoughtfully apply front-end technologies to the desktop. Today this means:

• Node.js driving a window manager core, which creates desktop and frame windows using Electron and its underlying Chromium engine.
• Vite providing first class support for TypeScript, JSX, CSS modules, and more. Vite enables "hot module replacement" for rapid iteration on desktop styling.
• React as the primary supported UI library.

Screenshot

Development

This repository uses the pnpm package manager. Install pnpm for your operating system.

To do prerequisite build steps:

pnpm install
pnpm build
(Equivalent to `npm run build` if you prefer npm for running scripts.)

To start a test X server (requires Xephyr):

pnpm startx

To start the window manager:

pnpm start --config ./packages/react-config

Substitute your own config package with the default one above as desired.

License

MIT License

Individual packages within the repository sometimes have different licenses.

bond-wm's Issues

div over programs

In packages/react-config/desktop.tsx, how can I make my component or div stay on top of any open application?

Empty page for @bond-wm/init

So I tried to follow the tutorial in the docs. Although I wanted to run it inside a Xephyr window (I'm scared of destroying my computer).

All I get is an empty page and it doesn't get affected no matter how I change the html files. I know at least that Electron works because I can see the devtools with Ctrl + Shift + I.
I also tried to run npm run build but it doesn't have any effects.

I know this is very early and you might already be working on this issue but I'm reporting it just in case.
I really love this project and I wish it gets mature. You can reach me out on discord at sakyce.

Here is the list of the commands I used in order:

sudo npm install -g bond-wm    
npx @bond-wm/init 
cd /home/niko/.config/bond-wm-config
npm i
Xephyr -br -ac -noreset -screen 800x600 :1

# in another terminal
DISPLAY=:1 
bond-wm

Here is the output of the console:

~/.config/bond-wm-config> DISPLAY=:1 bond-wm
{
  _: [],
  'console-logging': false,
  consoleLogging: false,
  '$0': '/usr/lib/node_modules/bond-wm'
}
(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.
[28439:0601/120415.438730:ERROR:atom_cache.cc(229)] Add _NET_WM_WINDOW_TYPE_DESKTOP to kAtomsToCache
[28489:0601/120415.518503:ERROR:viz_main_impl.cc(198)] Exiting GPU process due to errors during initialization
[28530:0601/120415.602318:ERROR:command_buffer_proxy_impl.cc(131)] ContextResult::kTransientFailure: Failed to send GpuControl.CreateCommandBuffer.
[28439:0601/120421.604208:ERROR:CONSOLE(1)] "Request Autofill.enable failed. {"code":-32601,"message":"'Autofill.enable' wasn't found"}", source: devtools://devtools/bundled/core/protocol_client/protocol_client.js (1)

HELP ME

npm run start

[email protected] start
DISPLAY=:1 electron .

{ _: [], 'console-logging': false, consoleLogging: false, '$0': '.' }
(node:33551) UnhandledPromiseRejectionWarning: TypeError: Cannot read properties of undefined (reading 'client')
at /home/ozgur/Downloads/electron-wm-main/dist/wm/wm.js:141:25
at Socket. (/home/ozgur/Downloads/electron-wm-main/node_modules/x11/lib/xcore.js:659:17)
at Socket.emit (node:events:390:28)
at emitErrorNT (node:internal/streams/destroy:157:8)
at emitErrorCloseNT (node:internal/streams/destroy:122:3)
at processTicksAndRejections (node:internal/process/task_queues:83:21)
(Use electron --trace-warnings ... to show where the warning was created)
(node:33551) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)

Rounded corners in windows

First, congratulations on the project. You are a genius!
I would like to know if it is possible to leave the windows with rounded corners

Tray

System tray works?
Do you intend to make it work?

Desktop icons

Hello! How to add an installed program icon to the desktop?

Help on how to properly run it on Fedora

Hi! First of all, I'm a Linux newbie just really curious to know how this works. I've built and ran it successfully but with a few issues and questions:

I think it is "conflicting" with GNOME, somehow? I tried opening Firefox and it is rendering with the GNOME topbar. I guess the expected behavior was to it render with a topbar similar to that on the README screenshot, right?

Also, GNOME probably shouldn't even be running alongside electron-wm. Is there a way to disable it before opening electron-wm? Or maybe add electron-wm to the window manager selector on the login screen? I'm pretty sure I'm missing something here... 😅

With those questions answered I'll probably be able to guess how to properly run it in fullscreen.

Thanks in advance for your patience! This is a really neat project. ✨

Start Menu First attempt

I managed to create a Start Menu implementation that opens in the desired position, without displaying a title bar or appearing in the Taskbar. It overlays other open apps and closes when it loses focus. I'm not sure if it's the best way.

In my example, it's loading Google in an Electron window. But to really make it work, it's necessary to implement routes with React Router. This way, it will be possible to render the component with the Start Menu content instead of Google.

While it's in development, I'm opening the Start Menu from here:

Notification support?

Hello!
Do you intend to add notification support?

Tray icon has transparency issues

Hello! Firstly, congratulations on the incredible work!
I was investigating why the board is getting the primary color and I managed to come up with the following result, it's not a solution yet, but it could be a starting point for the solution: