NLnet Grant Milestone 2.e and 2.j – Refactor profile editor and address book

March 2026 marks the release of two milestones together: profile editor and address book. This is due to the fact that the profile editor, in the profile-pane, makes use of contacts-pane for rendering one's basic profile information. This milestone builds on top of our previous work and refactors usage of local RDF forms which drive parts of the SolidOS frontend. Let's dig in.

Milestone 2.e and 2.j Goals

• Clean local RDF forms
• Separate inline CSS styles in dedicated files
• Locally fix RDF forms style, move to solid-ui in a later milestone
• Add basic accessibility features
• Redesign UI

We tracked the work on several tickets, splitting the technical goals:

• Profile editor – GitHub issue #233
• Address book (contacts-pane) – GitHub issue #234 and GitHub issue #235

Both the profile-editor and contacts-pane have considerable UI changes. These are still preliminary designs before a final and complete design will be implemented in the next milestone package.

Profile-editor Changes

The profile editor, even though it uses RDF forms, is now presented in the same card style as the profile view itself.

We are now focusing the RDF forms on view function rather than having everything in a long profile editor RDF form.

The profileForm.ttl was split into resumeForm.ttl and otherPreferencesForm.ttl; we now have dedicated resume and other preferences UI cards. In addition to splitting the RDF forms, we have also updated labels, rearranged order and removed any duplicated or unused elements — both in the new RDF forms and in socialMedia.ttl. The types of elements and content itself was not changed.

In the code, we have an editProfilePane section where each card or view has a dedicated TypeScript file, similar to viewing the profile itself.

Since we reuse the same card view as in profile view, we did not need to add anything additionally from the accessibility perspective. Accessibility is handled in CSS, which is also mostly covered by the usage of the theme in place, reworked in the previous milestone.

Contacts-pane Changes

Since contacts-pane renders the Individual RDF forms part in profile-editor, we also updated the RDF form in use here.

From the RDF forms perspective, the individual UI information was contained in forms.ttl and the organizationForm.ttl contained only a ui:Classifier, a drop-down list. These two forms were consolidated into a new individualAndOrganizationForm.ttl file. This is because both the individual and organization UI views contain overlaps in the organization, address and such information. Initially, it was also in the same forms.ttl file but missing the drop-down ui:Classifier.

The contacts-pane also contains a local vcard.ttl. In the future this should be pulled in from online.

The contacts-pane contains besides the profile UI also the address book pane. The address book contains contacts, and to edit them we make use of the individualAndOrganizationForm.ttl RDF form.

The address book had a very old-looking UI which was not rendered from a RDF form. We updated it. It now has a more modern look and feel, better and intuitive functionality and flow, and uses the SolidOS theme. Again, this is a preliminary design very close to the final result.

Both new designs were reviewed and tested by the SolidOS team before the final release.

Functionality Changes

• Address book was set up to also display a Turtle file describing a type vcard:Group; now it is displayed as a regular Turtle file.
• One cannot create a new address book from inside an existing type index.
• Nickname and pronouns are now part of contacts-pane. They are still editable in profile-pane as well.

Use of Generative AI

In general, the SolidOS team is using Copilot integrated in Visual Studio Code. Predominantly the free models are in use. For this current milestone we mostly made use of Claude Opus 4.6 and Raptor mini models.

Tasks where Generative AI was used:

• Separating inline CSS into dedicated CSS style files
• Tweaking CSS styles
• Bulk replacing CSS variables with SolidOS theme styles
• Adding basic ARIA labels
• Adding axe-core Jest accessibility tests
• Chasing bugs in upstream SolidOS dependencies (for example, an RDF form label from solid-ui not being displayed in profile editor)
• The new address book design was initially created by stitch.withgoogle.com but implemented manually and adjusted to fit available address book features
• Refactoring proposals in contacts-pane for better code readability (not all suggestions were implemented)
• The only 100% generative AI code is in contacts-pane referring to pop-ups that replace basic alert and confirm pop-ups and according Jest tests. A comment was added in the code to mention this. The actual replacement of alert and confirm was done manually.

Conclusion

The profile editor and contacts-pane are now closer to being WCAG 2.1 fully compliant. They have separated CSS style files which make use of the SolidOS theme. RDF forms have been cleaned and their CSS style is updated locally.

Ideas for the Future

• RDF form CSS must be moved to solid-ui, where RDF form UI elements are created
• Analyse if VCARD ontology could be pulled from online
• Loading RDF forms functionalities common to more panes can be moved to solid-ui where the RDF forms are (example: rdfFormsHelper.js)

And finally…