So I started making a browser engine (for fun) a few days ago, it felt kind of inevitable after starting a JS engine, so here we are. Here’s a short rundown. Source code too!

Try it in your browser!

Screenshot of Shadow’s welcome page running inside Shadow (as of writing)

Screenshot of Shadow’s welcome page in shadow

What?

A browser(/web) engine essentially takes in a URL(/etc) and gives you it rendered into a window for you to view and interact with. Shadow does this too, almost entirely from scratch, made in JS. It runs in your browser! Node backend soon™ too? The host browser(/etc) is only used for networking (fetch) and renderer backend (<canvas>).

Components of Shadow

Component flowchart (red = external/not me)

Why make it?

It’s just for fun, no really. Learning too. It will probably never work with 90% of websites, and that’s okay. ~~Also it’s funny to see people react in many forms of “wtf?"~~

Screenshot of serenityos.org running inside Shadow (left) vs Firefox (right)

Pretty spot on! No list markers yet. Colors are different as UA/browser defined.

Name

As with all my recent projects, the name is because I thought it was kind of funny at the time. Shadow is named after the defunct <shadow> element. I mostly stole this idea from Blink (was it intentional to name it after a dead HTML element at the time?). Also it sounds spooky and mysterious so that’s a bonus I guess?

It supports JavaScript??!

Yes, kind of. This is quite complicated (as you can probably imagine), so I’ll do it in a separate future dedicated post if you’re interested (DM/reply me on twitter).

Why publish it?

Why not? If someone can learn something or just find what I make fun/interesting, that makes me happy :)

But making a new browser engine is impossible!

No. It. Isn’t! (Also I don’t really care how possible/feasible something is.)