diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index e8e6867..98bec34 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -42,6 +42,17 @@ Implements the UI and is hosted inside a webview in VS Code.
 Can be opened in a browser window.
 Uses websockets and JSON RPC to communicate with the extension.
 
+### visualization
+
+Contains React components that visualize various JSON documents.
+Also provides infrastructure for selecting the best visualization for a given JSON document.
+
+### visualization-playground
+
+A playground to test and play with the visualizations for the web.
+Is hosted at [https://hediet.github.io/vscode-debug-visualizer/](https://hediet.github.io/vscode-debug-visualizer/).
+Aims to have fast build times.
+
 ### extension
 
 Creates the webview in VS Code, hosts a webserver and a websocket server.
diff --git a/docs/exported/main/Main.png b/docs/exported/main/Main.png
index 51b000a..0350559 100644
Binary files a/docs/exported/main/Main.png and b/docs/exported/main/Main.png differ
diff --git a/docs/main.plantuml b/docs/main.plantuml
index 1d87b8a..dc90972 100644
--- a/docs/main.plantuml
+++ b/docs/main.plantuml
@@ -3,10 +3,16 @@
 [data-extraction] 
 [webview]
 [extension]
+[visualization]
+[visualization-playground]
 
 [webview] ..> [extension]: "Uses RPC contracts, connects using websockets"
 [extension] ..> [webview]: "Loads into a Webview in VS Code"
 
+[webview] ..> [visualization]: "Uses React Components"
+
+[visualization-playground] ..> [visualization]: "Uses React Components"
+
 [extension] ..> [data-extraction]: "Injects Runtime into JavaScript applications"
 
 [webview] ..> [data-extraction]: "Uses common types"