blackboardsh / electrobun

Build ultra fast, tiny, and cross-platform desktop apps with Typescript.
https://www.electrobun.dev
MIT License
881 stars 12 forks source link

Is it possible to create an app with multiple tabs like Chrome? #21

Open janckerchen opened 3 weeks ago

janckerchen commented 3 weeks ago

Each Tab has its own independent burn process.

YoavCodes commented 3 weeks ago

Yes it's possible to create an app with multiple tabs. I created https://www.eggbun.sh/ with electrobun.

The main UI is a local html file and ts that electrobun bundles for you. you then use <electrobun-webview> and just set the src attribute to any website to embed isolated web content (ie: tabs) using electrobun's custom OOPIF implementation (like a super isolated secure iframe). Each one is a separate webview Process.

That all uses a single shared bun process though.

You certainly don't need to have more than one bun process to support multiple BrowserView processes, but since the bun runtime is bundled with your app you could use Bun.spawn or fork the process to create as many bun processes you want or execute any other binary you want.

https://www.electrobun.dev/docs/apis/browser/Electrobun%20Webview%20Tag

janckerchen commented 3 weeks ago

I love electrobun very much, It's really fast, agile, and awesome!

janckerchen commented 3 weeks ago

How to programmatically create BrowserView, add to BrowserWindow?

The documentation states While you can create a BrowserView directly in bun it will only render when you add it to a window., but does not give a code example of how to add it.

YoavCodes commented 3 weeks ago

You shouldn't create a BrowserView directly. That's for super advanced future functionality.

For your main UI you should create a BrowserWindow which will automatically create a BrowserView under the hood.

In the html of your main UI you should use <electrobun-webview> html tag for your tabs, which will create BrowserViews automatically under the hood.

Take a look at the Hello World guide (which is multiple pages) https://www.electrobun.dev/docs/guides/Getting%20Started/Hello%20World

on the second page it walks you through creating a simple web browser with BrowserWindow and <electrobun-webview> https://www.electrobun.dev/docs/guides/Getting%20Started/Creating%20UI