diff --git a/README.md b/README.md
index b5da6fe..c63bc7f 100644
--- a/README.md
+++ b/README.md
@@ -5,12 +5,40 @@
 
 This repository contains the source for the website of Eclipse Sprotty:
 
-https://sprotty.org/
+[https://sprotty.org](https://sprotty.org)
 
 The main repository is found at [eclipse-sprotty/sprotty](https://github.com/eclipse-sprotty/sprotty).
 
 ## Repository Structure
 
- - `hugo` – [Hugo](https://gohugo.io) content including static web pages and documentation in Markdown format
- - `tailwind` – [Tailwind CSS](https://tailwindcss.com) configuration
- - `showcase` – Live examples of Sprotty diagrams
+- `hugo` – [Hugo](https://gohugo.io) content including static web pages and documentation in Markdown format
+- `tailwind` – [Tailwind CSS](https://tailwindcss.com) configuration
+- `showcase` – Live examples of Sprotty diagrams
+
+## How to generate reference documentation
+
+The reference documentation is generated using [TypeDoc](https://typedoc.org/) and requires manual steps in order to be integrated into the website structure.
+
+1. Install typedoc and typedoc-plugin-markdown globally
+
+    ```bash
+    npm i -g typedoc typedoc-plugin-markdown
+    ```
+
+2. Navigate to the package you want to create the reference for (ex: sprotty-protocol)
+
+3. Generate documentation
+
+    ```bash
+    npx typedoc src/index --skipErrorChecking --plugin typedoc-plugin-markdown --flattenOutputFiles
+    ```
+
+4. This should have generated a new docs folder with many markdown files in the root of the package
+
+5. Copy the content of this folder into the correct place in sprotty-website (hugo/content/docs/ref/[library]).
+
+6. In sprotty-website run the `process-docs` script. This is needed to adapt the generated links to what hugo is expecting
+
+    ```bash
+    npm run process-docs
+    ```
diff --git a/hugo/content/docs/ref/smodel.md b/hugo/content/docs/ref/smodel.md
index 4d60864..e356f59 100644
--- a/hugo/content/docs/ref/smodel.md
+++ b/hugo/content/docs/ref/smodel.md
@@ -190,11 +190,11 @@ These are the connectors for the diagram model. An edge has a source and a targe
 
 *Default features:*
 
-* [editFeature]({{<ref "/docs/ref/features" >}}#editfeature)
-* [deletableFeature]({{<ref "/docs/ref/features" >}}#deletablefeature)
-* [selectFeature]({{<ref "/docs/ref/features" >}}#selectfeature)
-* [fadeFeature]({{<ref "/docs/ref/features" >}}#fadefeature)
-* [hoverFeedbackFeature]({{<ref "/docs/ref/features" >}}#hoverfeedbackfeature)
+* [editFeature](../{{<ref "/docs/ref/features" >}}#editfeature)
+* [deletableFeature](../{{<ref "/docs/ref/features" >}}#deletablefeature)
+* [selectFeature](../{{<ref "/docs/ref/features" >}}#selectfeature)
+* [fadeFeature](../{{<ref "/docs/ref/features" >}}#fadefeature)
+* [hoverFeedbackFeature](../{{<ref "/docs/ref/features" >}}#hoverfeedbackfeature)
 
 ### SLabelImpl