Hydra Browser

A visual web browser that displays websites in draggable windows on a canvas, with visual wire connections showing your browsing trail. Built with Electron.

Features

• Visual Canvas Interface: Browse websites in floating windows on an infinite canvas
• Draggable Windows: Move browser windows freely around the canvas
• Wire Connections: Visual links between parent and child windows (future: click interception)
• CORS Bypass: Built-in proxy server to load any website
• Dark Theme: Modern, developer-friendly UI

Installation

1. Install dependencies:

npm install

Usage

1. Start the application:

npm start

2. Enter a URL in the input field (e.g., https://example.com)
3. Click "Go" or press Enter
4. The website will load in a new window on the canvas
5. Drag windows by their title bar
6. Close windows with the red close button

Keyboard Shortcuts

• Cmd/Ctrl + T: Focus URL input
• Cmd/Ctrl + W: Close active window
• ESC: Clear URL input

Architecture

Components

• Main Process (src/main/index.js): Electron app initialization and lifecycle
• Proxy Server (src/server/proxy.js): Express server to bypass CORS restrictions
• Renderer Process (src/renderer/): UI and application logic
  • index.html: Main UI structure
  • app.js: Application initialization and event handling
  • canvas-manager.js: Manages canvas, windows, and wire connections
  • window-manager.js: Individual browser window logic
  • styles.css: UI styling

How It Works

1. Proxy Server: Runs on localhost:3001 and fetches web content to bypass CORS
2. Electron Window: Displays the canvas interface
3. Browser Windows: Each website is loaded in an iframe within a draggable window
4. Wire Rendering: SVG paths connect parent and child windows

Development

Run in development mode with DevTools:

npm run dev

Project Structure

hydra/
├── package.json
├── README.md
└── src/
    ├── main/
    │   └── index.js          # Electron main process
    ├── server/
    │   └── proxy.js          # Proxy server
    └── renderer/
        ├── index.html        # Main UI
        ├── app.js            # Application logic
        ├── canvas-manager.js # Canvas management
        ├── window-manager.js # Window management
        └── styles.css        # Styling

Future Enhancements

• Link Interception: Automatically open clicked links in new connected windows
• Multiple Windows: Better support for managing many windows simultaneously
• Canvas Pan/Zoom: Navigate large browsing trails
• Session Persistence: Save and restore browsing sessions
• Window Minimize/Maximize: Full window management
• Bookmarks: Quick access to favorite sites
• History: Track browsing history
• Search: Find windows by URL or title

Troubleshooting

Port 3001 already in use

If the proxy server fails to start, another process may be using port 3001. Either:

• Stop the conflicting process
• Change the port in src/server/proxy.js and src/renderer/window-manager.js

Websites not loading

Some websites have strict security policies that prevent them from being embedded:

• Try the desktop version of the site
• Some sites block iframes entirely (banking sites, social media)
• Check the browser console for specific errors

Performance issues

• Limit the number of open windows (5-10 recommended)
• Close unused windows
• Some websites are resource-intensive

Console Debugging

Open DevTools (View > Toggle Developer Tools) and use these commands:

// Open a URL programmatically
app.openURL('https://example.com')

// Close active window
app.closeActiveWindow()

// Cascade all windows
app.cascadeAllWindows()

// Close all windows
app.closeAllWindows()

// Get canvas manager
app.getCanvasManager()

License

MIT

Credits

Built with Electron, Express, and modern web technologies.