In the last essay: I wrote my vision is to build a meta-layer for all tools and content.

“A meta-layer app” is rather a vague idea, building one is a very specific job. I started with the question: what are the core features “A meta-layer app” should possess:

• Spatial: Humans are spatial creatures, we experience most of our lives in relation to space. It is only natural for us to arrange our digital belongings in a spatial workspace as well.

• Everything in one context: Today, we open so many windows and tabs to switch between webpages, apps, and files. Context switching is particularly destructive because it takes a lot of time and effort to pick up where you left off and get back in the zone; In this meta-layer app, one should be able to put contents and tools in one space to avoid context switching.

• Cross-App Collaboration: Right now, collaboration happens in individual apps. Every app has its own team management. Data are isolated on each app. Moving data from one another can be only done by copying and pasting (ex: copying feature requirements from Notion to Figma). If collaboration can happen naturally across apps, data can be shared in a frictionless way, joint work will be more efficient.

After laying out these points, the solution finally came to me: A canvas app with web browsing and note-taking. This meta-layer app is almost like a meta OS specifically designed for productivity. The core features of an OS are able to run other software and provide common services. Note-taking is the most common feature for productivity apps, and a web browser provides the capability to open any web-based software.

In this essay, I will explain why I decided to embed a browser into a canvas and some challenges during implementation.

Browser is acting like the portal internet and many tools today. Thirty years ago, the browser is only designed to open static HTML files like personal blogs; Today, we use browser to do everything: watch movies, check and reply to emails, editing online documents. The browser is the portal to almost everything.

The browser we have today is primitive. Its tab-based structure is problematic in today’s use cases. “Tab” was first introduced to modern browsers in 1998 by Pasadena software Adama Stiles in SimulBrowse. Before that, users were forced to open new windows when opening new web pages. The “Tab system” stuck new pages into a list of tabs on top of browsers (as it is in today’s Chrome). Tab structure was thought of as a smart way to hide windows with a list of buttons.

The problem with tab structure is: information is highly isolated across tabs. The only way to transport information is through copy & paste; Users often found themselves frequently copying from one app to another, for example: copying tasks from Gmail to Todo Apps, and copying links for analytic charts to Google Docs. People are easily distracted when switching contexts, especially with all these notifications from different apps.

Many apps and browser extensions are replacing tab structure with tree structure for browsers. Workana and Toby are two Chrome extensions. Their main function is to store a set of tabs in a group. You can then organize groups of tabs by naming, tagging, and even sharing. Vivaldi is one of the first browsers to implement a vertical tab in a tree structure. SigmaOS smartly integrated tab groups with a dual-window display.

All these apps share the same underlying structure for organizing tabs: tree. Tree structure is great for visualizing hierarchical relationships. The limitations of the trees are also obvious: Any leaf node can only have one parent. This means in products like SigmaOS or Vivaldi, any webpage cannot exist within two groups.

A Canvas is free for any type of “visual arrangements”. You can arrange nodes in pairs, grids, trees or any spatial forms you need. In practice, Canvas gives you the freedom to organize nodes gradually from scattered dots into a structured final output.

Humans are spatial creatures. We experience most of life in relation to space. Working on a canvas app is like working on a desk only without physical boundaries. It does not limit where you put your nodes, you can simply put it there and get them organized when you needed. Embed browser into a canvas means you can arrange webpages in a spatial relationship.

Putting browser tabs into a canvas app is not easy. It has two major challenges: performance and UX.

• Canvas app can be very memory-consuming (think about Figma or Miro)

• Putting multiple browser tabs into one page creates opportunities for 10X dom pieces.

• The amount of memory needed is proportional to the number of dom pieces in JSHeap.

• The amount of graphical computation needed when zooming is proportional to the number of dom pieces in JSHeap.

The solution is quite obvious, but not easy: implement a good lazy-load mechanism for loading webpages. Here are the general rules I have implemented so far:

• The webpages outside the viewport are not loaded when opening the canvas → Avoid loading many webpages at the same time when opening the app

• The webpages are hided when they are too small (width,height < 100px) during zoom in. → Avoid a large number of dom pieces in a small zoom level

• Any elements not in the viewport are hidden (CSS: display=none) when they are not in the viewport → Avoid unnecessary dom pieces.

In most web-based applications, the developers have full control of mouse events (hover, click, scroll). This is not my case. By default, the embed browser captures all mouse events. This means once your cursor hovers over any webpage, you cannot perform actions such as scroll or zooming the canvas.

Humans have spatial memories. This means you can easily remember where the browser tab is by remembering its position on canvas (say top-left corner). But sometimes, even with spatial memory, navigating on canvas can be actually harder than tabs. You have to scroll to the right position and zoom to the right zoom level to get the tab fully displayed in your viewport. Compared to a tab-structured browser, any tab is only one click away.

To make navigation on canvas easier, I implement a set of keys to help navigate easier.

• Enter Key for selecting elements on the canvas

• Direction keys for switching selecting cards and scroll canvas

• Cmd+Click to move and focus on elements

This is the first of a series of essays discussing my approach of building a meta-layer app. In my next essay, I will introduce how I integrate note-taking with the browser to make a more contextual workspace.

In the last essay: I wrote my vision is to build a meta-layer for all tools and content.

“A meta-layer app” is rather a vague idea, building one is a very specific job. I started with the question: what are the core features “A meta-layer app” should possess:

• Spatial: Humans are spatial creatures, we experience most of our lives in relation to space. It is only natural for us to arrange our digital belongings in a spatial workspace as well.

• Everything in one context: Today, we open so many windows and tabs to switch between webpages, apps, and files. Context switching is particularly destructive because it takes a lot of time and effort to pick up where you left off and get back in the zone; In this meta-layer app, one should be able to put contents and tools in one space to avoid context switching.

• Cross-App Collaboration: Right now, collaboration happens in individual apps. Every app has its own team management. Data are isolated on each app. Moving data from one another can be only done by copying and pasting (ex: copying feature requirements from Notion to Figma). If collaboration can happen naturally across apps, data can be shared in a frictionless way, joint work will be more efficient.

After laying out these points, the solution finally came to me: A canvas app with web browsing and note-taking. This meta-layer app is almost like a meta OS specifically designed for productivity. The core features of an OS are able to run other software and provide common services. Note-taking is the most common feature for productivity apps, and a web browser provides the capability to open any web-based software.

In this essay, I will explain why I decided to embed a browser into a canvas and some challenges during implementation.

Browser is acting like the portal internet and many tools today. Thirty years ago, the browser is only designed to open static HTML files like personal blogs; Today, we use browser to do everything: watch movies, check and reply to emails, editing online documents. The browser is the portal to almost everything.

The browser we have today is primitive. Its tab-based structure is problematic in today’s use cases. “Tab” was first introduced to modern browsers in 1998 by Pasadena software Adama Stiles in SimulBrowse. Before that, users were forced to open new windows when opening new web pages. The “Tab system” stuck new pages into a list of tabs on top of browsers (as it is in today’s Chrome). Tab structure was thought of as a smart way to hide windows with a list of buttons.

The problem with tab structure is: information is highly isolated across tabs. The only way to transport information is through copy & paste; Users often found themselves frequently copying from one app to another, for example: copying tasks from Gmail to Todo Apps, and copying links for analytic charts to Google Docs. People are easily distracted when switching contexts, especially with all these notifications from different apps.

Many apps and browser extensions are replacing tab structure with tree structure for browsers. Workana and Toby are two Chrome extensions. Their main function is to store a set of tabs in a group. You can then organize groups of tabs by naming, tagging, and even sharing. Vivaldi is one of the first browsers to implement a vertical tab in a tree structure. SigmaOS smartly integrated tab groups with a dual-window display.

All these apps share the same underlying structure for organizing tabs: tree. Tree structure is great for visualizing hierarchical relationships. The limitations of the trees are also obvious: Any leaf node can only have one parent. This means in products like SigmaOS or Vivaldi, any webpage cannot exist within two groups.

A Canvas is free for any type of “visual arrangements”. You can arrange nodes in pairs, grids, trees or any spatial forms you need. In practice, Canvas gives you the freedom to organize nodes gradually from scattered dots into a structured final output.

Humans are spatial creatures. We experience most of life in relation to space. Working on a canvas app is like working on a desk only without physical boundaries. It does not limit where you put your nodes, you can simply put it there and get them organized when you needed. Embed browser into a canvas means you can arrange webpages in a spatial relationship.

Putting browser tabs into a canvas app is not easy. It has two major challenges: performance and UX.

• Canvas app can be very memory-consuming (think about Figma or Miro)

• Putting multiple browser tabs into one page creates opportunities for 10X dom pieces.

• The amount of memory needed is proportional to the number of dom pieces in JSHeap.

• The amount of graphical computation needed when zooming is proportional to the number of dom pieces in JSHeap.

The solution is quite obvious, but not easy: implement a good lazy-load mechanism for loading webpages. Here are the general rules I have implemented so far:

• The webpages outside the viewport are not loaded when opening the canvas → Avoid loading many webpages at the same time when opening the app

• The webpages are hided when they are too small (width,height < 100px) during zoom in. → Avoid a large number of dom pieces in a small zoom level

• Any elements not in the viewport are hidden (CSS: display=none) when they are not in the viewport → Avoid unnecessary dom pieces.

In most web-based applications, the developers have full control of mouse events (hover, click, scroll). This is not my case. By default, the embed browser captures all mouse events. This means once your cursor hovers over any webpage, you cannot perform actions such as scroll or zooming the canvas.

Humans have spatial memories. This means you can easily remember where the browser tab is by remembering its position on canvas (say top-left corner). But sometimes, even with spatial memory, navigating on canvas can be actually harder than tabs. You have to scroll to the right position and zoom to the right zoom level to get the tab fully displayed in your viewport. Compared to a tab-structured browser, any tab is only one click away.

To make navigation on canvas easier, I implement a set of keys to help navigate easier.

• Enter Key for selecting elements on the canvas

• Direction keys for switching selecting cards and scroll canvas

• Cmd+Click to move and focus on elements

This is the first of a series of essays discussing my approach of building a meta-layer app. In my next essay, I will introduce how I integrate note-taking with the browser to make a more contextual workspace.