Solid Hello Worlds

This app got ignited by two motivators:

  • community feedback saying ‘More community led tutorials, example apps’ are needed


  • my need to learn the perspective of an app developer myself.

I noticed on the Solid forum a discussion with the title ‘Yet another Solid Hello World’ and thought to myself: this is the opportunity! I decided to collect the introductory Solid apps myself, at first in Excel. Then create a Solid App for it.

My application is meant only for listing intro, archetype like projects which use Solid. It is not meant to replace the list of available apps we have on but to complement that list. Also, the app list undergoes a Solid team process and needs to comply with some criteria to be kept there. This only means there is a dedicated group of people responsible for that list.

I was thinking we can try a different approach around the list of intro Solid applications: solutions from the community by the community. The code is obviously open source. Regarding the data, everyone is welcome to contribute and manage the list of example applications. We are going to have the list as up to date as we hold ourselves accountable to, as long as such a list is still useful. Meanwhile, we can continue to improve the solutions we have, automate more but not compromise on our values.

Continue reading if you want to know how the development of the app progressed.

Creating the model was the easiest task for me, while the frontend and the new libs were a learning curve (or a walk down memory lane). So I set out to create an MVP (minimal viable product) on top of which I added further features.

The goal of Subproject 1 was to have an interface where a user can browse the existing Solid projects.

The goal of Subproject 2 was to have an additional interface where a user can edit and add Solid projects.

For the entire project I wanted, from the get-go, to have as little writing code as possible. Using RDF for both the data and the interface was the perfect way to go. Also worth mentioning, the structure of the project is not of a typical app because I wanted to keep the end result pages separated code-wise as much as possible. Hence the result code of goal 1 is under facetedSearch and the result of goal 2 is under editPage.

Subproject 1 - search interface

Solid Hello Worlds Knowledge Graph

I started focusing on the data: the Solid Hello Worlds Knowledge Graph which contains the Solid Hello Worlds thesaurus and a dedicated ontology for further describing the thesaurus.

Solid Hello Worlds thesaurus

The thesaurus is SKOS based which means all introductory Solid applications are initially a SKOS concept. I used other SKOS properties to describe further the Solid apps. It was quite clear that I need SKOS concepts not just for the Solid apps but also for the code stack, used Semantic Web and Solid libraries and I also decided to highlight the technical use case one can learn from each app. The Solid Hello Worlds thesaurus looks like in Figure 1. The introductory Solid apps are all under the Examples SKOS concept scheme and all tech stack concepts are under Full code stack SKOS concept scheme.

Figure 1: Solid Hello Worlds SKOS thesaurus

One could theoretically use SKOS properties to model the fact that ‘Ramen’ uses ‘Vuejs’ and ‘Soukai-Solid’ but it would not be correct nor accurate enough for our use case. I wanted the end user to be able to distinguish the code stack Solid or Semantic Web related libs. This means we needed further support for the SKOS model, a dedicated ontology.

Solid Hello Worlds ontology

First I thought about the additional information I want to have available for each Solid application. In the thesaurus, I have different concepts for different categories of information: examples, code stack, use cases. Each such category is translated into an ontology Class.

At this point, one should consider reusing available ontologies that contain classes fitting one's use case. I made a conscious decision to create a new dedicated one. So the classes ended up being the ones listed in Figure 2.

Figure 2: Solid Hello Worlds ontology

Then we have further attributes such as: linkToRepo, linkToDemo, linkToTutorial and author which are only for the Example Application class. And lastly, we have relations. I designed all relations as symmetric and they link between classes. An example is the relation between Example Application and Solid Library as shown in Figure 3.

Figure 3: Symmetric relations between the Example Application and Solid Library classes

The end result can be seen on the Solid Hello Worlds GitHub repo.

The next step was to apply the ontology to the thesaurus and start filling in the information and the links. Since I started with 5 initial introductory Solid apps, I did all the modeling manually and the initial Solid Hello Worlds thesaurus can be seen complete on the Solid Hello Worlds GitHub repo.

Solid Hello World search interface

Ok, we have the data and the model now we need to display it.

Solid Hello World faceted search form

We created a form (UI defined in RDF) based on Jeff Zucker’s library. From some demo applications where the lib was used I decided I really like the accordion element and it would work perfectly for my frontend too. The data is filled in the form with the help of SPARQL queries. By default, Jeff’s library falls back to the rdflib lib SPARQL engine, I chose to replace it with the comunica lib for SPARQL. I make use of 2 SPARQL queries: one that fills the accordions (the menu on the left) and one for the results, the example Solid applications.

Check out how the form turned out on the GitHub repo.

Solid Hello World faceted search interface

The last step was to put everything together and give it a design. The main page is the index.html where we load the form with this line (best to use an absolute path):

Check out the last lines of the index.html page to know how to use Jeff’s library.

And the last step is to use a CSS style for our app. I did not write up my own but used the Simple CSS framework and made some small corrections in my own style.css.

The end result looks like in Figure 4 and can be used by navigating to Solid Hello Worlds.

Figure 4: Search frontend for Solid Hello Worlds

Subproject 2 - edit interface

For the edit interface, there was no need to make any changes to the Solid Hello Worlds Knowledge Graph. The focus was on the interface. Because Jeff’s library did not have the edit capability (when I made use of it) I had to use a second library - solid-ui. Solid-ui is part of the SolidOS stack and it does not have an automatic way to load a form and apply it to a dedicated resource (as was the case at the time of writing this post). This is one of the reasons why this part of the code needs some additional javascript files. Find this code all contained in a separate folder on the GitHub repo.

The form for the edit frontend looks different from the search one because we are using a different library (solid-ui). Maybe an interesting point to notice is that we do not use any SPARQL query even if we have drop-down select boxes filled with data. The solid-ui library does the heavy lifting for us in this case. To learn how to write such a form, visit the solid-ui GitHub repo about forms.

The missing part of the code is written up in the loadData.js, which together with the config.js, indicates where the form and the Knowledge Graph location are.

The rest of the subproject contains a HTML page where everything is loaded together - editPage.html, and a dedicated css file for the multi-select fields of the application.

The resulting frontend looks like in Figure 5 and can be tried out over at Solid Hello Worlds.

Figure 5: Edit frontend for Solid Hello Worlds

There are some additional files in the repository for some additional features: an admin page meant to manage the Knowledge Graph (not complete by the time of writing this blog), a snapshot mechanism for auto-saving the Knowledge Graph from time to time (a very basic replacement for a PR process), and a log in with Solid (which is also not fully integrated at the time of writing this blog).

The two-page HTML application is now deployed on my own Pod provisioned at But it can, as well, be deployed on your favorite hosting platform (see example on GitHub pages).

All the needed data is on my Pod but that is not mandatory. The Knowledge Graph and the form could be on any other Pod and shared publicly (the app needs to have access and for now it does not make use of any ACL or ACP process). I created a distributed deployment example for this over at Solid Hello Worlds distributed. Read more about my deployment experiments here. Visit the resulting demo application on my Pod over at Solid Hello Worlds.

I hope this post inspires you to go on this path and create your own Solid Apps.

Pod on!


  • Find the complete project, split up into different use cases, and using different prototype libraries, on my GitHub repository.
  • Also, visit the SolidOS team blogs over at the SolidOS project Pod where I share the latest prototypes and use cases.

Document Status