Awesome Open Source
Awesome Open Source

Mosaic

Web browser that can display multiple web pages at the same time in one shared window. A tiling web browser.

Latest release: 0.0.3
Download · Changelog


Value proposition

The main value of using Mosaic over Chrome with builtin macOS tiling can be seen on this non-exhaustive list of tasks that often pop up when you want to use web in a tiling fashion:

  1. Task 1 – create a 1:2 splitscreen from a single fullscreen window containing two tabs
    • Chrome on macOS – video, 12 seconds
      1. turn-off fullscreen
      2. tear off one tab into a window
      3. hold cursor over green (maximise) window button
      4. select "Tile window to the left side"
      5. choose the second Chrome window to fill the rest of the screen (right side)
      6. resize via the splitter between the tiles
    • Mosaic on macOS – video, 6 seconds
      1. drag out a tab to the wanted place
        • 🤬 the animation is extremely choppy
      2. resize via the splitter between the tiles
  2. Task 2 – interact with unfocused tile and repeat
    • Chrome on macOS – video, 5 seconds
      1. move cursor over unfocused tile
      2. click on the unfocused tile to focus it
      3. click on the interactive element
      4. [repeat]
    • Mosaic on macOS – video, 2 seconds
      1. move cursor over unfocused tile
        • 🤬 tile did not change the appearance to communicate focus
      2. click on the interactive element
      3. [repeat]

Features

  • [x] Documented Design Decisions
  • [x] Blink rendering engine
  • [x] Written in Typescript using React
  • [x] Intuitive drag&drop tile managment
  • [x] Built-in DuckDuckGo search engine
    • auto suggest while typing
    • use !bang for advanced searches
      • e.g. "!g hello" to google for "hello"
  • [x] Minimalistic dark look
  • [x] Dock
    • drag out icon from dock to make a new tab
  • [x] Automatic zoom-to-fit of webpage
  • [x] Familiar shortcuts for tab managment (⌘T, ⌘W)
  • [ ] Built-in privacy
    • [ ] Adblock (uBlock Origin)
    • [ ] Blocking cookie consent non-sense
    • [x] No history
    • [ ] HTTPS everywhere
  • [ ] System keychain integration

Development

Requirements: Git, NodeJS, Yarn

Clone repository and install project dependencies:

$ git clone https://github.com/mlajtos/mosaic.git
$ cd mosaic
$ yarn

Live development

$ yarn dev

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
typescript (10,876) 
privacy (387) 
drag-and-drop (128) 
mosaic (20) 
tiling (18) 

Find Open Source By Browsing 7,000 Topics Across 59 Categories

Advertising 📦 10
All Projects
Application Programming Interfaces 📦 124
Applications 📦 192
Artificial Intelligence 📦 78
Blockchain 📦 73
Build Tools 📦 113
Cloud Computing 📦 80
Code Quality 📦 28
Collaboration 📦 32
Command Line Interface 📦 49
Community 📦 83
Companies 📦 60
Compilers 📦 63
Computer Science 📦 80
Configuration Management 📦 42
Content Management 📦 175
Control Flow 📦 213
Data Formats 📦 78
Data Processing 📦 276
Data Storage 📦 135
Economics 📦 64
Frameworks 📦 215
Games 📦 129
Graphics 📦 110
Hardware 📦 152
Integrated Development Environments 📦 49
Learning Resources 📦 166
Legal 📦 29
Libraries 📦 129
Lists Of Projects 📦 22
Machine Learning 📦 347
Mapping 📦 64
Marketing 📦 15
Mathematics 📦 55
Media 📦 239
Messaging 📦 98
Networking 📦 315
Operating Systems 📦 89
Operations 📦 121
Package Managers 📦 55
Programming Languages 📦 245
Runtime Environments 📦 100
Science 📦 42
Security 📦 396
Social Media 📦 27
Software Architecture 📦 72
Software Development 📦 72
Software Performance 📦 58
Software Quality 📦 133
Text Editors 📦 49
Text Processing 📦 136
User Interface 📦 330
User Interface Components 📦 514
Version Control 📦 30
Virtualization 📦 71
Web Browsers 📦 42
Web Servers 📦 26
Web User Interface 📦 210