diff --git a/README.md b/README.md
index 02d7f7e..ce3f754 100644
--- a/README.md
+++ b/README.md
@@ -1,76 +1,16 @@
 # Visualization Framework
 
-## Installation
+This repository contains two packages.
 
-You can use yarn to install the core library:
+## @hediet/visualization-core
 
-```
-yarn add @hediet/visualization-core
-```
+This package provides basic infrastructure for implementing visualizations.
+See its readme [here](./visualization-core/README.md).
 
-If you want to use the existing visualizations, add the bundle library:
+## @hediet/visualization-bundle
 
-```
-yarn add @hediet/visualization-bundle
-```
+This package bundles all the visualizations.
+See its readme [here](./visualization-bundle/README.md).
 
-## Usage
-
-Import `@hediet/visualization-bundle` to register all default visualizations:
-
-```tsx
-// This registers all visualizations
-import "@hediet/visualization-bundle";
-```
-
-Don't forget to import the styles in your scss file:
-
-```scss
-@import "~@hediet/visualization-bundle/style.scss";
-```
-
-Use `globalVisualizationFactory` to visualize some data:
-
-```tsx
-import { globalVisualizationFactory } from "@hediet/visualization-core";
-
-const data = {
-	kind: { graph: true as true },
-	nodes: [
-		{ id: "1", label: "1" },
-		{ id: "2", label: "2", color: "orange" },
-		{ id: "3", label: "3" },
-	],
-	edges: [
-		{ from: "1", to: "2", color: "red" },
-		{ from: "1", to: "3" },
-	],
-};
-
-const visualizations = globalVisualizationFactory.getVisualizations(
-	data,
-	/* preferred visualization id */ undefined
-);
-// `visualizations.bestVisualization` is the visualization that is best suited to visualize the data.
-// `visualiztaions.allVisualizations` contains all suitable visualizations.
-```
-
-If you use react, you can use the `VisualizationView` component to render a visualization:
-
-```tsx
-import { VisualizationView, Theme } from "@hediet/visualization-core";
-
-// const visualizations = ...
-
-function App() {
-	if (!visualizations.bestVisualization) {
-		return null;
-	}
-	return (
-		<VisualizationView
-			theme={Theme.light}
-			visualization={visualizations.bestVisualization}
-		/>
-	);
-}
-```
+If you want to add your own visualization to this project, visualization-bundle is the right place!
+The readme documents how to implement your own visualization.
diff --git a/playground/src/visualizations.ts b/playground/src/visualizations.ts
index fa65fbe..7e1c6fd 100644
--- a/playground/src/visualizations.ts
+++ b/playground/src/visualizations.ts
@@ -1,4 +1,5 @@
 //// Uncomment the visualization that you work on to increase webpack build speed!
+//// If you create a new visualization, add it here!
 
 // import "@hediet/visualization-bundle/dist/visualizers/ast-visualizer"; /*
 // import "@hediet/visualization-bundle/dist/visualizers/graph/dot-graphviz-visualizer" /*
@@ -7,6 +8,7 @@
 // import "@hediet/visualization-bundle/dist/visualizers/grid-visualizer" /*
 // import "@hediet/visualization-bundle/dist/visualizers/image-visualizer"; /*
 // import "@hediet/visualization-bundle/dist/visualizers/monaco-text-visualizer" /*
+// import "@hediet/visualization-bundle/dist/visualizers/monaco-text-diff-visualizer"; /*
 // import "@hediet/visualization-bundle/dist/visualizers/perspective-table-visualizer" /*
 // import "@hediet/visualization-bundle/dist/visualizers/plotly-visualizer" /*
 // import "@hediet/visualization-bundle/dist/visualizers/simple-text-visualizer"; /*
@@ -17,7 +19,9 @@
 // This bundles the monaco editor. Uncomment it to load monaco dynamically.
 // Dynamic loading increases webpack build speed significantly.
 if (typeof process === undefined) {
+	// We check for process so that we don't load monaco from nodejs.
 	require("monaco-editor");
 }
 
+// This import bundles *all* visualizations. This makes webpack super slow.
 import "@hediet/visualization-bundle"; // */
diff --git a/visualization-bundle/README.md b/visualization-bundle/README.md
index 3b9e5ca..7c7ea88 100644
--- a/visualization-bundle/README.md
+++ b/visualization-bundle/README.md
@@ -1,11 +1,17 @@
 # Visualization Bundle
 
+This package registers various visualizations. If you have an idea for a cool visualization, add it here!
+
+## Installation
+
 You can use yarn to install this library:
 
 ```
 yarn add @hediet/visualization-bundle
 ```
 
+Install `@hediet/visualization-core` before!
+
 ## Usage
 
 Import `@hediet/visualization-bundle` to register all default visualizations to `globalVisualizationFactory` of `@hediet/visualization-core`:
@@ -50,7 +56,9 @@ See docs of `@hediet/visualization-core` for how to find and render visualizatio
 
 ## Supported Visualizations
 
-### Origin Visualizations
+You can find a playground that demonstrates all visualizations [here](https://hediet.github.io/visualization/).
+
+### Source Visualizations
 
 -   Tree Visualizer
 -   AST Visualizer (+ Monaco Source Code View)
@@ -59,7 +67,7 @@ See docs of `@hediet/visualization-core` for how to find and render visualizatio
 -   Image Visualizer
 -   Simple Text Visualizer
 
-### Integrated Visualizations
+### Integrated Visualization Libraries
 
 -   Plotly Visualizer
 -   Perspective JS Visualizer
@@ -69,6 +77,12 @@ See docs of `@hediet/visualization-core` for how to find and render visualizatio
 -   Vis.js Visualizer
 -   Monaco Editor Source Code Visualizer
 
-```
+## Setup Local Development Copy
 
-```
+-   Clone this repository.
+-   Run `yarn` in the root folder.
+-   Run `yarn dev` in the `visualization-bundle` folder to start tsc in watch mode.
+-   Edit [./playground/src/visualization.ts](../playground/src/visualizations.ts) to your needs to improve webpack performance.
+-   Run `yarn dev` in the `playground` folder to start the playground where you can debug your visualization.
+
+Please use the [`simple-text-visualizer`](./src/visualizers/simple-text-visualizer/index.tsx) as starting point!
diff --git a/visualization-bundle/src/visualizers/simple-text-visualizer/index.tsx b/visualization-bundle/src/visualizers/simple-text-visualizer/index.tsx
index 3fbe590..82620f8 100644
--- a/visualization-bundle/src/visualizers/simple-text-visualizer/index.tsx
+++ b/visualization-bundle/src/visualizers/simple-text-visualizer/index.tsx
@@ -8,27 +8,53 @@ import {
 import { visualizationNs } from "../../consts";
 
 export const simpleTextVisualizer = createVisualizer({
+	// The id must be unique
 	id: "simple-text",
+	// The name can be some display text
 	name: "Simple Text",
+	// Here you can define the schema for the data that this visualizer can handle.
+	// You must have a kind property of type object whose properties must be `true`.
 	serializer: sOpenObject({
 		kind: sOpenObject({
 			text: sLiteral(true),
 		}),
 		text: sString(),
-	}).defineAs(visualizationNs("SimpleTextVisualizationData")),
-	getVisualization: (data, self) =>
-		new ReactVisualization(self, { priority: 100 }, () => (
-			<pre
-				className="visualizer-simple-text"
-				style={{
-					margin: 0,
-					padding: 10,
-					color: "var(--visualizer-simple-text-color)",
-				}}
-			>
-				{data.text}
-			</pre>
-		)),
+	}).defineAs(
+		// This name is important for schema and code generation of the interface types.
+		// Make sure it is unique. It should end with "VisualizationData".
+		visualizationNs("SimpleTextVisualizationData")
+	),
+	getVisualization: (
+		/* The type of data is specified by the serializer above. */ data,
+		self
+	) =>
+		// If you want to use react, this is the way to go.
+		// Return your own implementation if you want to render directly to the DOM.
+		new ReactVisualization(
+			self,
+			{
+				// The priority is used for automatically selecting the best visualization
+				// if multiple visualizations can handle the data.
+				priority: 100,
+			},
+			() => (
+				<pre
+					className="visualizer-simple-text"
+					style={{
+						margin: 0,
+						padding: 10,
+						// Use css vars for theming.
+						// See ./style.scss.
+						color: "var(--visualizer-simple-text-color)",
+					}}
+				>
+					{data.text}
+				</pre>
+			)
+		),
 });
 
+// This registers the visualizer for automatic discovery.
+// Make sure to import this file in "../index.ts" so that it gets loaded when
+// someone imports "@hediet/visualization-bundle"!
 globalVisualizationFactory.addVisualizer(simpleTextVisualizer);
diff --git a/visualization-bundle/src/visualizers/simple-text-visualizer/style.scss b/visualization-bundle/src/visualizers/simple-text-visualizer/style.scss
index 23c9354..5dbeeda 100644
--- a/visualization-bundle/src/visualizers/simple-text-visualizer/style.scss
+++ b/visualization-bundle/src/visualizers/simple-text-visualizer/style.scss
@@ -1,3 +1,5 @@
+// Provide default colors for both the dark and light theme here!
+
 .theme-dark {
 	--visualizer-simple-text-color: white;
 }