Hi!

I'm currently building a web browser from scratch in Flutter. It means I create the web engine and it could be reused by someone to build its own browser or a web scraping tool.

First, let me explain the process of a web engine. When a browser loads a page, it goes through 5 steps :

• DOM -> parse the HTML and transform it into a tree to make the insertion and deletion easier (not only)
• CSSOM -> parse the CSS and build the CSSOM (CSS Object Model). More or less like the DOM but for CSS
• Render Tree -> We can't directly render a page with the DOM and CSSOM. We have to apply the CSS to each element and we must apply the style by cascade. It's not trivial so a web engine needs a render tree. The tree will contains nodes of type RenderText, RenderInputField, RenderTable etc...
• Layout -> Compute the position and geometry for each object. For example, if we have a row of 3 elements, the steps will determinate the position of each element in the viewport
• Render -> Render all the render tree in the view port.

Now I can explain why I use Flutter!

• it's a rendering framework. It already has the Layout and Render step ready and tested!
• it's multiplatform. One basecode -> Android, iOS, MacOS, Windows, Linux and Web. We could run my browser in Firefox.
• C/Rust interop. Flutter is a framework we manipulate with Dart and Dart has good interop in C and Rust. So if one day, the browser needs better performance, C code could be use to replace critical paths.

I was working on it for a little while so right now, I have those things ready :

• browser UI : all the things like history, bookmarks, settings, tabs and navigation are more or less done. It works but it can be better
• it can render some HTML and CSS pages. The 5 steps I have described earlier are done but there's more to do! It needs to support more CSS properties and HTML tags. Actually, it doesn't render forms or table for example
• file:// scheme supported. So my browser can be use as a file explorer. It can open text files, images, songs and has a JSON visualizer.
• I've got a network developer tool!

The goal of this project is not to build a browser that will destroy Chrome or Firefox. It's more like an educational project where we can learn one of the most complex piece of software we use everyday.
I know some people will say that it's an impossible project, that Google has hundred of top-tier engineer working on their browsers, that there's a huge amount of API to integrate in a browser (websocket, WebGL, WASM, notification, payments, camera, audio, recording etc...). I agree!. Forget about that! It doesn't have deadlines and it's programming! It's just fun to build softwares and to find the most efficient way to solve a problem and there's a ton of problem to solve with a browser.

Feel free to join this project! Flutter and Dart are very easy to pick up! Also, there's a tons various things you can do :

• UI -> you can help to only build interfaces and make something pretty, new and user-friendly
• rendering -> you could pick up a render node that is not done yet and implemented! It could be : table, input, textarea, iframe, checkbox, etc..
• CSS -> you could also implement CSS properties. It would be the easiest thing to do in this project right now!
• performance -> the current code doesn't care about performance. There's a lot of memory duplication and bad algorithms. It could be better
• algorithms -> how could the CSS be applied quickly? how could we remove a node of the DOM quickly?
• grammar -> if your thing is write parsers, you would like it! It needs a CSS parser and a JS interpreter.

See you soon!