started with the demo descriptions.

src/frontend/blocks.tsx

@@ -0,0 +1,18 @@
+import {Blockquote, BlockquoteProps} from '@mantine/core';
+import * as React from 'react';
+
+export function Actionblock(props: BlockquoteProps) {
+    return (
+        <Blockquote icon={null} action="true"
+            {...props}
+        />
+    );
+}
+
+export function Resultblock(props: BlockquoteProps) {
+    return (
+        <Blockquote icon={null} result="true"
+                    {...props}
+        />
+    );
+}

src/frontend/demo_pd.tsx

@@ -6,14 +6,14 @@ import {PrimitiveRegistry} from "../onion/primitive_delta";
 import {mockUuid} from "../onion/test_helpers";
 
 export const demo_PD_description =
-    <Text>
+    <>
         <Title order={4}>
-            Welcome to our demonstrator!
+            Primitive deltas
         </Title>
         <Text>
-            First, we would like to show the basic possibilities of the graphical editor and then dive into the different aspects of our new collaboration framework approach step by step.
+            In this demo, we restrict the view to a - in this case directly manipulatable - state graph, history, and primitive deltas.
         </Text>
-    </Text>;
+    </>;
 
 
 import {

src/frontend/demo_start.tsx

@@ -9,91 +9,128 @@ import {newCorrespondence} from "./correspondence";
 import {newManualRenderer, ManualRendererProps} from "./manual_renderer";
 import {makeInfoHoverCardIcon} from "./help_icons";
 import {MdOutlineDraw} from "react-icons/md";
+import {Actionblock, Resultblock} from "./blocks";
 
 export const demo_Start_description =
-    <Text>
-      <Title order={4}>
-        Welcome to our demonstrator!
-      </Title>
-      <Text>
-        First, we would like to show the basic possibilities of the graphical editor and then dive into the different aspects of our new collaboration framework approach step by step.
-      </Text>
-      <Text>
-        Right to this text you can see three columns "Rountangle Editor", "Deltas", and "State Graph". In the Rountangle Editor, you can create Rountangles (by clicking on the grey area with the Alt-Key pressed, see also small info in the upper right corner).
-      </Text>
-      <Blockquote color="green" >
-        Create a Rountangle!
-      </Blockquote>
-
-    </Text>;
+    <>
+        <Title order={4}>
+            Welcome to our demonstrator!
+        </Title>
+        <Text>
+            First, we would like to show the basic possibilities of the graphical editor and then dive into the
+            different aspects of our new collaboration framework approach step by step.
+        </Text>
+        <Text>
+            Every block with an <Text span c='darkorange'>orange</Text> mark on the left side contains an action that
+            you should do. Each block with a <Text span c="royalblue">blue</Text> border describes what you can observe,
+            once the action has been executed.
+        </Text>
+        <Text>
+            Next to this text you can see three columns <strong>Rountangle Editor</strong>, <strong>Deltas</strong>,
+            and <strong>State Graph</strong>. In the Rountangle Editor, you can create (unnamed) rountangles by
+            left-clicking on the grey area with the alt-key pressed (see also the small info in the upper right corner
+            of each canvas).
+        </Text>
+        <Actionblock>
+            1. Create a rountangle!
+        </Actionblock>
+        <Resultblock>
+            In the second column, one composite delta "createRountangle" was created.
+        </Resultblock>
+        <Resultblock>
+            In the second tab "Deltas (L0)" of the second column you can see the primitive deltas a "createRountangle" consists of.
+        </Resultblock>
+        <Resultblock>
+            The result of an application of all primitive deltas to an empty initial state is shown in the third column "State Graph".
+        </Resultblock>
+        <Actionblock>
+            2. Move your created rountangle!
+        </Actionblock>
+        <Resultblock>
+            For each movement a new "moveRountangle" composite delta is created that depends on the previous one.
+        </Resultblock>
+        <Resultblock>
+            On the level of primitive deltas (L0), you can observe that only the "x" and "y" edges are updated (UPD).
+        </Resultblock>
+        <Resultblock>
+            On the State Graph, only the "x" and "y" edges are updated to point to other values.
+        </Resultblock>
+        <Actionblock>
+            3. Switch to the "History" tab in the "Deltas" column and trigger some "Undo" operations (below the Rountangle Editor)!
+        </Actionblock>
+        <Resultblock>
+            The currently active version has a bold border. All versions are kept.
+        </Resultblock>
+        <Resultblock>
+            In the "Delta (L1)" and "Delta (L0)" tabs, the deltas corresponding to the current version are also highlighted.
+        </Resultblock>
+        <Text>
+            That's it for now! Feel free to play around with the editor and watch the changes in the other views. If you want to know more details about how the deltas work, please continue with the next demo "Primitive Delta".
+        </Text>
+    </>;
 
 export function getDemoStart() {
-  const generateUUID = mockUuid();
-  const primitiveRegistry = new PrimitiveRegistry();
-
-  const commonStuff = {generateUUID, primitiveRegistry};
-
-  const as = newVersionedModel({readonly: false, ...commonStuff});
-  const cs = newVersionedModel({readonly: false, ...commonStuff});
-  const corr = newCorrespondence({cs, as, ...commonStuff});
-
-  const {getModalManualRenderer} = newManualRenderer(commonStuff);
-
-  // returns functional react component
-  return function() {
-    const [csState, setCsState] = React.useState<VersionedModelState>(cs.initialState);
-
-    const [autoParse, setAutoParse] = React.useState<boolean>(true);
-    const [autoRender, setAutoRender] = React.useState<boolean>(false);
-
-    const [manualRendererState, setManualRendererState] = React.useState<null | ManualRendererProps>(null);
-
-    const csReducer = cs.getReducer(setCsState);
-
-    const csComponents = cs.getReactComponents(csState, {
-      onUserEdit: (deltas, description) => {
-        const newVersion = csReducer.createAndGotoNewVersion(deltas, description);
-      },
-      onUndoClicked: csReducer.undo,
-      onRedoClicked: csReducer.redo,
-      onVersionClicked: csReducer.gotoVersion,
-    });
-
-    const deltaTabs = ["dependencyL1", "dependencyL0", "history"];
-
-    const undoButtonHelpText = "Use the Undo/Redo buttons or the History panel to navigate to any version.";
-
-    return (<div style={{minWidth:1300}}>
-      {getModalManualRenderer(manualRendererState)}
-
-      <SimpleGrid cols={3}>
-        <div>
-          <Group position="apart">
-            <Title order={4}>Rountangle Editor</Title>
-          </Group>
-          <Space h="48px" />
-          <Stack>
-            {csComponents.rountangleEditor}
-            <Center>
-              {csComponents.undoRedoButtons}
-              <Space w="sm"/>
-              {makeInfoHoverCardIcon(undoButtonHelpText)}
-            </Center>
-          </Stack>
-        </div>
-        <div>
-          <Group position="center">
-            <Title order={4}>Deltas</Title>
-          </Group>
-          <Space h="sm" />
-          {csComponents.makeTabs("dependencyL1", deltaTabs)}
-        </div>
-        <div>
-          <Title order={4}>State Graph</Title>
-          <Space h="48px" />
-            {csComponents.graphStateComponent}
-        </div>
-      </SimpleGrid>
-    </div>);
-  }
+    const generateUUID = mockUuid();
+    const primitiveRegistry = new PrimitiveRegistry();
+
+    const commonStuff = {generateUUID, primitiveRegistry};
+
+    const cs = newVersionedModel({readonly: true, ...commonStuff});
+
+    const {getModalManualRenderer} = newManualRenderer(commonStuff);
+
+    // returns functional react component
+    return function () {
+        const [csState, setCsState] = React.useState<VersionedModelState>(cs.initialState);
+
+        const [manualRendererState, setManualRendererState] = React.useState<null | ManualRendererProps>(null);
+
+        const csReducer = cs.getReducer(setCsState);
+
+        const csComponents = cs.getReactComponents(csState, {
+            onUserEdit: (deltas, description) => {
+                const newVersion = csReducer.createAndGotoNewVersion(deltas, description);
+            },
+            onUndoClicked: csReducer.undo,
+            onRedoClicked: csReducer.redo,
+            onVersionClicked: csReducer.gotoVersion,
+        });
+
+        const deltaTabs = ["dependencyL1", "dependencyL0", "history"];
+
+        const undoButtonHelpText = "Use the Undo/Redo buttons or the History panel to navigate to any version.";
+
+        return (<div style={{minWidth: 1300}}>
+            {getModalManualRenderer(manualRendererState)}
+
+            <SimpleGrid cols={3}>
+                <div>
+                    <Group position="apart">
+                        <Title order={4}>Rountangle Editor</Title>
+                    </Group>
+                    <Space h="48px"/>
+                    <Stack>
+                        {csComponents.rountangleEditor}
+                        <Center>
+                            {csComponents.undoRedoButtons}
+                            <Space w="sm"/>
+                            {makeInfoHoverCardIcon(undoButtonHelpText)}
+                        </Center>
+                    </Stack>
+                </div>
+                <div>
+                    <Group position="center">
+                        <Title order={4}>Deltas</Title>
+                    </Group>
+                    <Space h="sm"/>
+                    {csComponents.makeTabs("dependencyL1", deltaTabs)}
+                </div>
+                <div>
+                    <Title order={4}>State Graph</Title>
+                    <Space h="48px"/>
+                    {csComponents.graphStateComponent}
+                </div>
+            </SimpleGrid>
+        </div>);
+    }
 }

src/frontend/index.css

@@ -11,6 +11,11 @@ html,body, #root {
 #root {
     padding: 5px;
     height: calc(100vh - 10px);
+    font-size: 14px;
+}
+
+p:after {
+    margin-bottom: 10px;
 }
 
 .canvas {
@@ -26,8 +31,23 @@ html,body, #root {
   }
 }
 
+.mantine-Text-root + .mantine-Text-root {
+    margin-bottom: 10px;
+}
+
 .mantine-Blockquote-root {
     font-size: 14px;
-    border: 1px solid;
-    padding: 0px;
+    background-color: #eee;
+    padding: 4px;
+}
+
+[action] {
+    border-left: 4px solid darkorange;
+    margin-bottom: 2px;
+}
+
+[result] {
+    border-left: 4px solid royalblue;
+    margin-left: 4px;
+    margin-bottom: 2px;
 }