Browse++
- 37 Devlogs
- 124 Total hours
A Pure C++ web engine from scratch to render websites, fast
Quality of life improvements, more comments, and finally fixed the crashes
If you want to check out or support this project, you can click the GitHub link! https://github.com/k754a/C-Plus-Plus-Web-Engine
Ok, so first off, the huge crash I was getting was because of using a global variable for holding the link and not a local variable, and when 2 threads attempted to use it at the same time, my app would freeze and crash, so now it runs great!
Some of the QofL improvements are adding keyboard shortcuts and the ability to close tabs by pressing the middle button down, like a real browser!
Then there were a lot more comments that I am so close to being done!
Overall a decent 2 days; I’m definitely getting a bit bored of the comments, so my plan is to work on my other project for a bit and come back later! But yeah, a good day. :)
Local file loading, better comments, and crash fixing!
If you want to check out or support this project, you can click the GitHub link! https://github.com/k754a/C-Plus-Plus-Web-Engine
Today, I worked a TON; I got through all the comments for the start and collision events for all the buttons and things in GUIRENDER. I also added some new features and fixed some huge bugs!
The new feature is file loading! You can now load PNG, JPEG, HTML, TXT, and HTM files straight from the search bar!
The main fix, and what took most of my time, was the prerender. as i was working on slimming the new tab create button down, i found a lot of strange bugs, esspicaly with webpages with large amounts of images (like stardance), this lead me down a lot of changes, overall, it was a issue with how i checked to see if i wanted to load it from disk, but it was also a bunch of stuff to do with multithreading, and locking parts, but after a lot of work, i fixed it!
I still need to fix up and finish GUIRENDER, but once I’m done with that, it’s off to work on the settings page.
Thanks for reading!
Halfway done rewriting Gui.cpp—Lots of bug fixes and speed improvements!
If you want to check out or support this project, you can click the GitHub link! https://github.com/k754a/C-Plus-Plus-Web-Engine
Over the last 2 days, I’ve rewritten about half of GUI.cpp (up to the GUIRENDER function), with changes, bug fixes, and speedups that helped the engine a lot!
The main speedup came from changing the way I handled the font so that I loaded it once, not every loop. This allowed a lot less SSD usage and a gradual increase of performance, up to about 50% for large sites!
I worked a lot on organization and got it so that different functions are grouped together, even moving some to different scripts that fit better!
The final change was reworking how images and the home button worked, and it allowed me to drop a function, as well as have much faster image batch loading times!
Going through the code made me realize how many bugs and bad code I did. I fixed a lot of it, but I still got a bit to go!
Overall it was a good day. My plan for everything else is to finish the rest of GUI.cpp, start work on a settings page, and try to make the parser faster still!
Thanks for reading!
Lots of bug fixes, quality-of-life changes, and the start of a rewrite!
try it out! https://k754a.hackclub.app/
I’ve been still a bit busy, but over the last 2 days, I ended up fixing a lot of bugs with crashing, especially with dealing with multithreaded tab handling.
Some of the quality-of-life changes I did were creating a new tab handle that allows you to go back to the new tab in history and other small changes!
The biggest bug was where, if you searched something and, while it was loading, switched tabs, it would overwrite your tab to the one you switched to, not the original one you searched in. Now that is fully fixed!
Overall a good day! I’m going to fully rewrite and comment all 2500+ lines of the GUI and other functions, fix a LOT of bugs, and then add settings, history, and a few other things!
Thanks for reading!
Dark mode and bug fixes (with more bugs) and HTTP error codes
Today, I recorded most of my link and search handling to be better at handling URLs and links like /home. I also added a dark mode! (Super helpful on the eyes lol)
Unfortunately there is a big bug, some websites will just not work anymore (like hackclub), and also websites take super long to load, this is because the images it is processing are in a buffer, and this buffer needs to finish the images of one page before the other, i think i have an idea to fix it, so I hope I will be able too soon!
But overall, this update changed a lot of bugs, and I’m hoping it can be even better for the future!
Lots of optimization, better comments, and bug fixes!
Sorry for not posting for a few days; I was super busy and didn’t really have the time. However, I’m back at it!
Over the last week, I’ve been changing and updating lots of stuff. The first one was much better comments for the layout.cpp file! I still have a bit left to do, but I was getting pretty tired, so I moved onto making the engine a bit faster!
One of the main things I did was use threading, passing the text off to the GPU rather than going from CPU to GPU, as well as multithreading it. This allows about 2 seconds faster search time, and I have some more ideas for changes too!
The reason this took so long is the number of bugs I introduced. The Gui.cpp is huge (2000+ lines), so I want to really rewrite it, as there is SO much junk and bad coding practices lol.
Overall though, it was a good day, and I think I want to start tackling JavaScript after adding a lot of QofL and fixes to a ton of bugs!
Thanks for reading!
Performance analyzer and comments for our DOM!
Today, I created a performance analyzer that could tell me how many microseconds it takes to get through certain programs. This helped a lot with optimization and making things faster! I also finished and optimized the DOM code!
Today was a pretty basic day; I’m a bit busy over this coming week, so it’s going to be a bit more broken up, but overall a good day today!
Performance increases, and a rewrite of the parser!
Today was a nice easy day; I rewrote most of the parser, fixing a lot of bugs, and also learned how to use the performance analyzer in C++! The code is much more documented, with every line describing what it’s doing, making it super easy to follow along!
The main change was an increase in speed from about 5% CPU usage to 1% and a 50MB reduction in RAM usage, allowing for 10 tabs at once, with only 61MB overall, rather than the 1000MB of something like Chrome! as well as about a 6% faster parse and load time.
There is still a lot to optimize and work on, so I’ll keep doing that!
The first part is rewritten!
Today, I worked on rewriting my network code with better comments, names, and methods. This took a while, as I created so many bugs, but it does work!
The long part is still yet to come; however, the main things like the parser and the GUI are going to be a headache, but I should get it done!
Overall a good day; ~4 files have been changed, with 6 more to go!
Then after this, i want to add a history button, a settings page, and just improve performance, and formatting, then I’m done!
Updated the web version to the latest!
Ok, so the main thing i did today was update the web version, and got it to match the main version overall, with everything!
I also tried to get better formatting on the text, but i think my code is just so muddled its gonna be impossible, so my plan is to start rewriting it, with the things I’ve learned, and updating the comments (as i have a lot of them, in many wrong spaces)! that should take a bit, but hopefully will pay off in the future!
If you want to try the new version, its here:
https://k754a.hackclub.app/
Scroll bar support, bookmarks, and printing sites!
Today I got a lot done; the main things were getting scrollbars, bookmarks, and getting sites to print all working!
I ended up running into a lot of bugs (especially with the scroll bar), but now it works, so yeah!
Currently the browser portion is far behind, and I want to update it, so I’ll try doing that next! Overall today was a good day; I got a lot done and a lot working!
Anyways, thanks for reading!
Code / Project
You can check out the code here:
https://github.com/k754a/C-Plus-Plus-Web-Engine
And try a older version of it:
https://k754a.hackclub.app/
New icons and more buttons!
Today, I was able to get icons supported into the engine (kind of)!
The way I did it was by using a font modifier. I loaded the font I’ve been using and created some custom icons!
A lot of the challenge was fixing text, as the new icons had issues with scaling and position, especially the back and forth arrows!
Overall it was a great day. I’ll work on getting the printer button and the star button working; then it’s on to improving the engine!
(also added a home button!)
Got Flex and Absolute boxes working on the engine!
This took a while, just with fixing all the bugs and the weird reasons why some things would just not work at all lol! It was definitely a learning process for sure, and it should be easier to add more support for everything else in the future!
This has to be one of the most difficult projects I’ve ever worked on, but it’s coming along! I want to do something a bit more fun, so my plan is to start work on a UI overall, just to give myself a break from all the crazy stuff!
Anyways, thanks for reading!
(oh, websites look so much nicer, with the new stuff!)
Rebuild of the layout engine!
Today, I rebuilt a bunch of the layout engine to start support for flexboxes and divs! I mainly switched the code to do 2 passes, first to figure out spacing, size, and position, then to place the elements on it!
Overall, this was a kind of boring day; it works basically the exact same rn, so there’s really nothing to show, but I’ll send a screenshot or two of my code!
Anyways, the plan next is to get flexboxes working!
After that, I might rewrite my engine, as it’s getting a bit ugly and crowded, and I coded some stuff pretty badly the first time around; it probably would only take about 10 hours, working off my code, but I think it would save me time in the future, but I’ll see!
Anyways, thanks for reading!
Also, if you want to support the project, dropping a star on the GitHub would be awesome; no pressure, though. :)
Lots of bug fixing on the engine! & Making it to the news letter!
First of all, I want to thank everyone who has liked, reposted, and checked out my project. I made it to the Stardance newsletter, and it was so awesome :). Thank you so much!
Today, I fixed a crazy amount of bugs; the main one was I would have these empty boxes, and it took me a good hour and a half to figure it out, but now text renders so much nicer!
The next bug I fixed was clicking links. Up until this point, clicking links did not work at ALL, so now they work! (super happy about that)!
History now works for each tab, not just one pool!
I’m also starting work on making a YT video for this project. I’ve never made one before, so we will see how it turns out.
For tomorrow, I’m going to work on the formatting of the engine, as normal websites have text like how Stardance has the home, notifications, rate, missions, etc, on the side and the main text in the middle, so I’ll hopefully get that working!
Anyways, thanks for reading! You can check out my project below. :)
Code / Project
You can check out the code here:
https://github.com/k754a/C-Plus-Plus-Web-Engine
And try a older version of it:
https://k754a.hackclub.app/
Images Working for the Browser Engine!
I’m going to be honest with you, this has to be the top 10 worst things I’ve ever coded. 😭😭 But images now can load; there are a few bugs, most images don’t load, and the ones that do load in pairs of 2 have weird bounding boxes.
However, they do work, and that’s what I’m happy about!
I’m going to do a quick side project, just to have a bit of room so I don’t overdo it, but overall it was good.
Next I’ll just fix the bugs and start getting like the formatting of texts to start matching websites!
The vid below shows them in action.
Rebuilt part of the browser engine to handle tabs!
Today, I worked on getting tabs working! It wasn’t as bad as I thought; the worst part was making all the UI elements and handling the inputs for them!
I also found a bug; the engine easily uses my entire CPU’s dedicated GPU and causes issues with other apps lol, but I’ll fix it in a bit!
Overall it was just bug fixes, quality-of-life improvements, and tabs!
Hopefully tomorrow I’ll do images, then I’m taking a break for a bit and doing something else because I’m burnt out, and that’s a tip for all of you too: don’t overwork yourselves!
The vid below shows it in action. Thanks for reading!
Also, if you want to support the project, dropping a star on the GitHub would be awesome; no pressure, though. :)
Back and forth arrows, reloading, better formatting, and searching on the browser!
Today was huge; I was able to get better formatting for text, search for things, and get buttons like back and forth and reloading working!
My next task to tackle is images!
The vid below shows all of the changes in action!
Thanks for reading!
Links, and better rendering!
Today I got links, and rendering improved rendering! Words now render together, rather than making a new line each time. I also got links, and that allows you to browse something like Wikipedia (the video below) much easier!
For next time, I’m going to get the back and forward arrow and reload a working website! And may start work on getting the browser to have divs!
Thanks for reading!
Today, I got a bunch of colors working!
The browser engine can now render different colored backgrounds, texts, and highlights!
This actually wasn’t too bad, as the hardest part was just fixing all the bugs from CSS being such a bad language, but overall it turned out awesome!
Version 0.1.0 of the Browser Engine!
If you don’t know what I’m building, I’m creating a custom browser engine in C++ from scratch, something like Chromium, but a lot more bare bones.
Today, I did a bunch of things. I got my first CSS attributes to detect and work! Text now is not hardcoded and dynamically scales based on the CSS!
This really wasn’t too hard, so I moved on to the next thing, getting a working UI! The UI I’ve created is basic, but it allows you to search without using the terminal and search multiple things!
Overall this was an awesome day for today; my plan over the coming days is to support more CSS and work on fixing performance and overflow bugs!
Thanks for reading. :)
Code / Project
You can check out the code here:
https://github.com/k754a/C-Plus-Plus-Web-Engine
And try a older version of it:
https://k754a.hackclub.app/
The video shows the standalone app, and searching 2 different sites.
CSS Parsing!
I got CSS working! I was able to get my CSS parser working on the engine and parse properly. This wasn’t as easy as I thought, as my first attempt worked but was dreadfully slow (10+ seconds), so a lot of the time went into rewrites and optimizations, bringing it from 10+ to about 2 seconds for huge CSS (1000+ lines of CSS)!
Code / Project
You can check out the code here:
https://github.com/k754a/C-Plus-Plus-Web-Engine
And try a older version of it:
https://k754a.hackclub.app/
Video below shows it loading the hackclub website!
The browser now has a GUI!
This took a bit and a few tutorials, but now you’re able to browse the web with no styles, one font, and just things like headers, but for now this is super awesome!
I’ve been going pretty hard at it the last few days, and I lowkey need a break, or else I’m gonna get super burnt out, so I might just start a side project for the fun of it, something easy when I’m feeling a bit sluggish.
When I come back, I’ll work on adding a UI around the browser (to get fully away from the terminal), and then it’s just getting CSS parsed and working, which isn’t too bad at all.
You can check out the code and try the project below.
C++ Browser Engine
You can try it online! : https://k754a.hackclub.app/
Source code: https://github.com/k754a/C-Plus-Plus-Web-Engine
C++ Browser Engine
You can try it online! : https://k754a.hackclub.app/
Source code: https://github.com/k754a/C-Plus-Plus-Web-Engine
Got started work on the GUI using SDL3!
Today, I worked on getting a GUI up and running; for now it’s just a window, but I’ll get it working!
I also started work on a logo, as I felt a bit burnt out during today, but nothing really came of it, as all my designs I tried sucked; the best one I linked below. I also created the first readme!
.png)
C++ Browser Engine
You can try it online! : https://k754a.hackclub.app/
Source code: https://github.com/k754a/C-Plus-Plus-Web-Engine
Got the DOM tree working!
Ok, in this devlog, I fixed the DOM tree issues; it seemed to be a combo of issues with the parser (I fixed that) and some actually easy fixes from the DOM tree; it just took a rewrite!
I was also able to code a way to see the tree:
DOM TREE
├── [ROOT]
│ ├── [!DOCTYPE]
│ │ ├── [html]
│ │ │ ├── [body]
│ │ │ │ ├── [h1]
│ │ │ │ │ └──── " Heading test "
│ │ │ │ ├── [p]
│ │ │ │ │ └──── " Paragraph test "
│ │ │ │ ├── [p]
│ │ │ │ │ └──── " Multiple "
│ │ │ │ │ ├── [strong]
│ │ │ │ │ │ └──── " Char "
│ │ │ │ │ └──── " Test "
We are super close to getting our first text on the screen! (Maybe just a devlog or 2).
The vid below shows it in action! Thanks for reading :)
Today I Worked on the DOM tree, for my C++ Web Engine from scratch!
Code / Project
You can check out the code here:
https://github.com/k754a/C-Plus-Plus-Web-Engine
And try a older version of it:
https://k754a.hackclub.app/
Today was my first attempt at building a DOM tree and also learning structure types and building trees.
This first attempt, after learning a lot about how trees work, doesn’t really work fully; it seems to have issues when parsing tokens and just processing them overall, so the hope is that I can rebuild this for next time!
Overall this was a pretty boring day; hopefully I’ll get the DOM tree working, then it’s straight to rendering!
Fixed my parser!
Today’s update: I fixed my parser. The main issue was that it didn’t parse in order; it would do it like this:
Text that should be in
<a></a>
The problem was that I couldn’t use this for my DOM tree, and getting my DOM program to do this would be slow and inefficient.
Also, the cause of this was because I didn’t check for conditions that it was a start, middle, or end tag. I did it so I bunched the start and end together, and this was a huge problem because it ended up being put at the bottom, which wouldn’t work at all!
Fixing it took a hot minute, but tomorrow I should have DOM’s working. Ok, thanks for reading that! The before and after are in the images below.
Code / Project
You can check out the code here:
https://github.com/k754a/C-Plus-Plus-Web-Engine
And try a older version of it:
https://k754a.hackclub.app/
HTTPS Working
I was able to get HTTPS working on the C++ engine and get it to properly parse. Most websites work on it, but they were a bit slow, so I ended up rebuilding parts of the tokenizer to be faster, changing the speed overall from 3+ seconds to under 0.2 seconds. The main problem is Google websites don’t load at all, so I’ll fix that in the future.
Code / Project
You can check out the code here:
https://github.com/k754a/C-Plus-Plus-Web-Engine
And try a older version of it:
https://k754a.hackclub.app/
The video below shows it in action, loading the Hack Club web page super fast.
C++ Browser Engine
You can try it online! : https://k754a.hackclub.app/
Source code: https://github.com/k754a/C-Plus-Plus-Web-Engine
I built a custom tokenizer for HTTP to be able to load and render websites!
I’m building a super-fast, pure custom C++ browser engine from scratch, and the thing I built today was an HTML parser!
HTML parsers are super hard to code, thanks to HTML being a very loose markup language. There can be tons of stuff, like:
Missing divs
<div>Hello World!</p></div>
Missing end tags
<img src="image.png"
Even nested divs!
<div class="container"><span>Nested Elements</span></div>
So I needed to build a parser that could handle all of it.
Another challenge I’ve been trying is forcing myself to stop making variables for everything and trying to be minimal and fast! This new update also added local HTML loading; this lets me test much faster and test certain things, especially for the DOM and render tree!
Some struggles I ran into while building this project were just the amount of errors and debugging I had to do to figure out what went wrong, as well as working with large pieces of code with constant changes.
This part really taught me about data types, how to find and remove elements from multiple different classes and types, how to make loops efficient, and how to use vectors!
My plan for the next devlog will be building a DOM tree or getting HTTPS to work. After doing some research, I found that I can use:
#include <wininet.h>
to help get this thing working, so that’s my plan!
Okay, this was super long. Thanks for looking at it. The video linked below is a demo of it loading and tokenizing some text locally on a machine!
In this devlog I built the first half of my parser for the web engine; it can go through a website and match tokens!
There are a few issues; some things, like conditions (like <a href=> arnt supported), as well as I can’t pull text from things like headers and stuff.
I also made an animation so people can see how it works! The animations basically shows how my buffer system, and determining the order of tokens works, to prevent things like mismatches!
I was able to build a website demo for people to try out. To make this, I ran it on the Nest servers from Hack Club! However, I used a bit of AI, as I had never set up a server, as well as my project being only built for Windows. However, AI still hasn’t and will not be used in the main project. I did this as a bit of a time saver and to not have to commit 40+ times to test it lol. https://k754a.hackclub.app/
First version of the browser.
It is currently all through the terminal; there is no formatting, CSS, JavaScript, fonts, styles, or even structure to the text. However, any HTTP website can now be rendered into readable text, even if it’s a bit hard to see, lol!
The next version of this, I’m going to hook up a rendering pipeline (not sure to what yet, though). Then it will be allowing different fonts and structures, and then finally, support for some CSS.
What I have just described will probably take 200 hours!
I update the web browser engine to allow the download of full files from websites in HTTP. This will pave the way to let me parse the website for the next devlog!
Some more changes I made were a bit more error handling and also refining some of the output to make it cleaner and retiring some of the older debug logs.
The next difficult part will be some basic parsing and pulling out text
Then I’ll attempt to render text without position (this will take about ~4 hours), and then I’ll work on formatting.
I built the first version of my web client. It can now pull HTML data from HTTP sites, using a TCP socket.
If you don’t know what I’m working on, I’m building a pure C++ browser engine, to load and render websites like google without the use of AI and libraries.
Note that it does not work for https, as to build a handshake between the 2 is super difficult, even for a good programmer.
The next step will be to pull an entire webpage off and save it in RAM.
Thanks for reading, and I hope you follow my journey!
Using C++ and native windows libraries, i was able to connect to a website and pull some data off of it.
this was super difficult, but im super happy it worked, its able to connect to any IPV4, http site.
my next plan is to start pulling files, like html into ram from websites.
The overall of my essay, is just laying out how im going to be building a web engine
from scratch. its not going to run JavaScirpt or interface with HTTPS off the bat, as i
have to code all of that and it sucks.
https://github.com/k754a/C-Plus-Plus-Web-Engine/blob/main/README.md
(this is a link to it as i could not upload a pdf file.)
Overall, this will be one of the most complex projects I’ve ever tried/attempted to
take on, even over https://github.com/k754a/C-Custom-Code-Editor by a long shot.
This will 100% test my research, development, and C++ skills, but I believe that even
if I’m not able to pull this off, I will learn a lot about how browsers work and good
C++ practices. I hope you will follow my progress on GitHub and Stardance as I build
this!
