Developing a Web Browser with Haskell

June 11, 2013


Filed under: Uncategorized — gcarlos @ 3:35 pm

Here are some screenshots:























images for screenshots

October 5, 2010

CSS Selectors

Filed under: css — gcarlos @ 4:26 am

I’m a little late posting, but now I have to talk a little bit of what I’m working, this is the implementation of CSS selectors. First a little of theory, then how I am implementing, and finally the list of problems and errors I’m having.

You can see the code to test this project (, and I would be very happy to see suggestions and other things.

CSS Selectors

The selectors of CSS are a way, as his name, to select html elements to apply properties that are described in the same rule of CSS. We can also see a selector as a way to select nodes in rose tree.

Basically there are 2 types of selectors, a simple selector and a combined selector. A simple selector can be a typed selector that contain the name of the tag or node to select, or also can be an universal selector (it can be any tag o node and is represented as “*”). A combined selector can be a list simple selectors separated by an operator that determine the type of the operation.

The operator can be either a descendant operator (represented just as an space) , a child operator (represented as “>”), or a sibling operator (represented as “+”).  A descendant selector  (“s1 s2″) means that the left selector must be one of the parents (father, grandfather, …) of the right selector. A child selector (“s1 > s2″) means that the left selector must be the father  (just the father and not grandfather or grand grand father) of the right selector. And the sibling selector (“s1 + s2″) means that both selectors must have the same father.

I must also mention that in a list of selectors, the last selector is the object of selecting.

How I am implementing

As I mentioned, I develop a project to test this part. Here I’ll describe the important part of the project, applying the selectors to an html tree.

I am using attribute grammar to implement the way of applying the selectors to the tree.

After parsing the html tree, I apply the selectors to each node, if it is a simple selector, I just compare the name of the tag, or if it is an universal selector I just put true. The interesting part is when we try to combine a list of selectors. For that part, for each node I collect all the fathers of the node, and also I collect all of his sibling before the node, so if it is a descendant selector I just look if exist a node with the name of the left selector; If it is a child selector I just compare if the first father is the same of the left selector; and finally if it is a sibling selector I search the left selector name in the list of siblings.

How to test

Download the code, and then “make all”. To test with other css selectors, you must have to generate instances of the datatype Selector (selector/src/DataCss.hs) and insert it in the file (selector/src/ag/  (next to “default style sheet” comment), and then “make all” again.

In the graphic generated you will see if the selectors select any node, if yes, it is painted with yellow color and with the corresponding number of selector in the list that was applied.

Here an image painted with the project:


Problems and errors

Actually there are problems with selecting combine elements, especially long list of selectors. I didn’t test test very well the sibling part, because I am working on descendant and child selectors.

Updated: For more information:

April 5, 2010

Using wxHtmlWindow with wxHaskell

Filed under: hsbrowser — Tags: , — gcarlos @ 5:59 pm

Hello, today I will show you how to use the wxHtmlWindow of wxWidgets. You would notice that it’s easy to do!!!

WxWidgets has the option to use a render engine for html in his applications, it has a lot of functions to use, like any other html browser, not so rich, but it’s ok. See this documentation.

wxHtmlWindow is not available on Graphics.UI.WX of wxHaskell, it is available  on WXCore, and we can use them only importing Graphics.UI.WXCore. We can use it directly but it depent of you. I will use a function that create the object:

htmlWindow parent props = do
phtml <- htmlWindowCreate parent idAny rectNull 0 “”
set phtml props
return phtml
Until now, we can use all the functions that provides WXCore for this object, we will use an special function htmlWindowLoadPage phtmlwin url, this function permit us to load a web page as his name indicate.
So that’s all, now we will make an graphic interface to use this panel htmlWindows, something easy to demostrate his utility.
Basically we need an entry text and a button to load the web page that is written in the text entry.
inp <- entry  f   [text := ""]
go   <- button f [text := "Get", on command := showPage phtml inp]
I put a default page; the showPage function does what we were talking before.
showPage html inp = do
url  <- get inp text
htmlWindowLoadPage html url
return ()
And finally we I make a layout for this browser:
set f [layout := column 5 [ hfill $ row 5 [hfill $ widget inp , widget go ]
, fill  $ margin 5 $ widget phtml
That’s all for the interface, you can compile and use it. You can download the source code from here.

April 1, 2010

The beginning of develop

Filed under: hsbrowser — Tags: , , , — gcarlos @ 8:27 pm

Hello every one, this is the beginning of a series of blogs which i will write about the development of a web browser with Haskell.
There are a lot of haskellers around the world who can suggest improvements to my project, and why not get benefits from it. Probably, and I hope, there is another haskell programmer working on a pure functional web browser, and  we can approach the problem together.

Why I take this project if there are so good web browser walking around the world? Only for the reason of experiment, experiment what would result if i use Haskell as language of development. We know (as a haskelllers) that Haskell offers us a lot of benefits (the inverse is truth too), for example the readable code make a project easy to maintain for others and easy to understand, this could be interesting in a project that has changes like versions of html, css; adding to this, we can make good abstractions thanks to the hight level of programming in a functional language. And the best part i like is  (like others said) the amount of code, it is small for Haskell.

If we think in Java, they have his own web browser that programmers can use in his applications (even if it is webkit or other), we can see too that there are others languages that were used as a language of development of web browsers. This is another reason to develop with Haskell.

Ok, but don’t you know a web browser with Haskell? refering to browser with fudgets, yes, but I want to try with wxHaskell and give support for html 4 or xhtml with css.

Do you say wxHaskell? yes, I known that is possible to use the web browser of wxWidgets with Haskell and wxHaskell, but it doesn’t have css and is all written in C++, we are not getting all the benefits of Haskell. In another blog I will writte how to use this browser with wxHaskell.

Ok, What are you thinking to do? I thinking to give support for html 4 or xhtml, css, and for now only the basic events.
I am thinking to use the tools of Utrecht, uulib for parsing process and uuagc for process my datatypes and attributes, and wxHaskell as a base library of the engine html render. And of course, some library to get the html from the web. I review others libraries for the parsing process of xml, but I don’t know if i will use this.

Ok haskellers, that’s all for today.

The Shocking Blue Green Theme Blog at


Get every new post delivered to your Inbox.