diff --git a/.github/workflows/ci-checks.yml b/.github/workflows/ci-checks.yml
new file mode 100644
index 00000000..71e38fdc
--- /dev/null
+++ b/.github/workflows/ci-checks.yml
@@ -0,0 +1,40 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [22.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v4
+    - name: Checkout @reactodia/workspace
+      uses: actions/checkout@v4
+      with:
+        repository: reactodia/reactodia-workspace
+        path: ./reactodia-workspace
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - name: Install dependencies
+      run: npm ci
+    - name: Install dependencies for library
+      run: cd ./reactodia-workspace && npm ci
+    - name: Typecheck
+      run: npm run typecheck
+    - name: Build
+      run: npm run build
diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-pages.yml
new file mode 100644
index 00000000..1e529e35
--- /dev/null
+++ b/.github/workflows/deploy-pages.yml
@@ -0,0 +1,47 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Deploy to GitHub pages
+
+on:
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 22.x
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run typecheck
+    - run: npm run build
+    - name: Archive build artifacts
+      uses: actions/upload-pages-artifact@v3
+      with:
+        path: build
+
+  deploy:
+    # Add a dependency to the build job
+    needs: build
+
+    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
+    permissions:
+      pages: write      # to deploy to Pages
+      id-token: write   # to verify the deployment originates from an appropriate source
+
+    # Deploy to the github-pages environment
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    # Specify runner + deployment step
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4 # or specific "vX.X.X" version tag for this action
diff --git a/docs/components/annotation-support.md b/docs/components/annotation-support.md
new file mode 100644
index 00000000..9f57a5f4
--- /dev/null
+++ b/docs/components/annotation-support.md
@@ -0,0 +1,79 @@
+---
+title: <AnnotationSupport />
+---
+
+# Annotation Support
+
+[`<AnnotationSupport />`](/docs/api/workspace/functions/AnnotationSupport.md) component is a [canvas widget](/docs/components/canvas.md#widgets) to provide UI for the [annotation](/docs/concepts/graph-model.md#annotations) elements and links.
+
+:::important
+`<AnnotationSupport />` widget must be provided to the canvas to in order to enable annotation UI features such as creating a new annotation with [`<SelectionActionAnnotate />`](/docs/components/selection.md#selecting-elements), linking annotation to an element with [`<SelectionActionEstablishLink />`](/docs/components/selection.md#selecting-elements) or [`<LinkActionMoveEndpoint />`](/docs/components/selection.md#selecting-links).
+:::
+
+The component observes [`AnnotationTopic`](/docs/api/workspace/variables/AnnotationTopic.md) [command bus topic](/docs/concepts/event-system.md#command-bus).
+
+### Example: annotation elements and links
+
+```tsx live noInline
+function Example() {
+  const {defaultLayout} = Reactodia.useWorker(Layouts);
+
+  const {onMount} = Reactodia.useLoadedWorkspace(async ({context, signal}) => {
+    const {model, view, performLayout} = context;
+    const entity = model.createElement('http://example.com/entity1');
+    const annotation1 = new Reactodia.AnnotationElement({
+      elementState: Reactodia.TemplateState.empty
+        .set(Reactodia.TemplateProperties.AnnotationContent, {
+          type: 'plaintext',
+          text: 'Double-click to edit\nnote about "entity1"',
+        }),
+    });
+    const annotation2 = new Reactodia.AnnotationElement({
+      elementState: Reactodia.TemplateState.empty
+        .set(Reactodia.TemplateProperties.AnnotationContent, {
+          type: 'plaintext',
+          text: 'Note about entity AND annotation',
+        })
+        .set(Reactodia.TemplateProperties.ColorVariant, 'primary'),
+    });
+    model.addElement(annotation1);
+    model.addElement(annotation2);
+    model.addLink(new Reactodia.AnnotationLink({
+      sourceId: annotation1.id,
+      targetId: entity.id,
+    }));
+    model.addLink(new Reactodia.AnnotationLink({
+      sourceId: annotation2.id,
+      targetId: entity.id,
+    }));
+    model.addLink(new Reactodia.AnnotationLink({
+      sourceId: annotation2.id,
+      targetId: annotation1.id,
+      linkState: Reactodia.TemplateState.empty
+        .set(
+          Reactodia.TemplateProperties.CustomLabel,
+          'note about another note'
+        ),
+    }));
+    await performLayout({signal});
+  }, []);
+
+  return (
+    <div className='reactodia-live-editor'>
+      <Reactodia.Workspace ref={onMount}
+        defaultLayout={defaultLayout}>
+        <Reactodia.WorkspaceRoot>
+          <Reactodia.Canvas>
+            <Reactodia.Halo />
+            <Reactodia.HaloLink />
+            <Reactodia.Selection />
+            <Reactodia.AnnotationSupport />
+          </Reactodia.Canvas>
+        </Reactodia.WorkspaceRoot>
+      </Reactodia.Workspace>
+    </div>
+  );
+}
+
+render(<Example />);
+```
diff --git a/docs/components/canvas.md b/docs/components/canvas.md
index ce1c07c4..b4cb3ea0 100644
--- a/docs/components/canvas.md
+++ b/docs/components/canvas.md
@@ -23,7 +23,9 @@ The library provides the following built-in templates:
 | [`StandardTemplate`](/docs/api/workspace/variables/StandardTemplate.md) | element | Default (fallback) template for an element; supports single entity elements and [entity groups](/docs/concepts/graph-model.md#data-graph).<br />Uses [`StandardEntity`](/docs/api/workspace/functions/StandardEntity.md) and [`StandardEntityGroup`](/docs/api/workspace/functions/StandardEntityGroup.md) components to render elements. |
 | [`ClassicTemplate`](/docs/api/workspace/variables/ClassicTemplate.md) | element | Element template component with classic "look and feel" which was used for elements before v0.8; does not support entity groups.<br />Uses [`ClassicEntity`](/docs/api/workspace/functions/ClassicEntity.md) component to render elements. |
 | [`RoundTemplate`](/docs/api/workspace/variables/RoundTemplate.md) | element | Basic element template with an round (elliptical) shape; does not support entity groups.<br />Uses [`RoundEntity`](/docs/api/workspace/functions/RoundEntity.md) component to render elements. |
-| [`DefaultLinkTemplate`](/docs/api/workspace/variables/DefaultLinkTemplate.md) | link | Default (fallback) template for a link; supports single relation links and [relation groups](/docs/concepts/graph-model.md#data-graph).<br />Uses [`DefaultLink`](/docs/api/workspace/functions/DefaultLink.md) component to render links which uses [`LinkPath`](/docs/api/workspace/functions/LinkPath.md), [`LinkLabel`](/docs/api/workspace/functions/LinkLabel.md) and [`LinkVertices`](/docs/api/workspace/functions/LinkVertices.md) components inside to display the link connection itself, the labels and vertices (to change link geometry). |
+| [`StandardLinkTemplate`](/docs/api/workspace/variables/StandardLinkTemplate.md) | link | Default (fallback) template for a link; supports single relation links and [relation groups](/docs/concepts/graph-model.md#data-graph).<br />Uses [`StandardRelation`](/docs/api/workspace/functions/StandardRelation.md) component to render links which uses [`LinkPath`](/docs/api/workspace/functions/LinkPath.md), [`LinkLabel`](/docs/api/workspace/functions/LinkLabel.md) and [`LinkVertices`](/docs/api/workspace/functions/LinkVertices.md) components inside to display the link connection itself, the labels and vertices (to change link geometry). |
+| [`NoteTemplate`](/docs/api/workspace/variables/NoteTemplate.md) | element | Default template for [annotation elements](/docs/concepts/graph-model.md#annotations).<br />Uses [`NoteAnnotation`](/docs/api/workspace/functions/NoteAnnotation.md) component to render a user-resizable note with editable text content and style. |
+| [`NoteLinkTemplate`](/docs/api/workspace/variables/NoteLinkTemplate.md) | link | Default template for [annotation links](/docs/concepts/graph-model.md#annotations).<br />Uses [`NoteLink`](/docs/api/workspace/functions/NoteLink.md) component to render a [basic link](/docs/api/workspace/functions/BasicLink.md) with an optional label if the link was [renamed](/docs/api/workspace/interfaces/RenameLinkProvider.md). |
 
 Additionally, it is possible to override how the link are routed (how default path geometry is computed) on the canvas by providing `linkRouter` ([`LinkRouter`](/docs/api/workspace/interfaces/LinkRouter.md)) prop to the `<Canvas />`. By default, the [`DefaultLinkRouter`](/docs/api/workspace/classes/DefaultLinkRouter.md) is used which moves apart multiple links between same elements and displays self-links (where target is equal to source) as loops.
 
@@ -81,25 +83,63 @@ function NonWidgetComponent {
 }
 ```
 
-## Canvas widgets
+## Widgets
 
-Canvas widget is an instance of any React component type which is marked by [defineCanvasWidget()](/docs/api/workspace/functions/defineCanvasWidget) function with metadata such as its attachment layer i.e. where the component should be displayed in relation to other canvas content.
+Canvas widget is any React component placed as a child to [`<Canvas />`](/docs/api/workspace/functions/Canvas).
 
 There are multiple canvas layers to place widgets on, from top one to the bottom:
 
-| Layer name     | [Coordinate type](/docs/concepts/canvas-coordinates.md) | Description |
-|----------------|-------------------|-------------|
-| `viewport`     | client (viewport) | Topmost layer, does not scale or scroll with the diagram. |
-| `overElements` | paper             | Displayed over both elements and links, scales and scrolls with the diagram. |
-| `overLinks`    | paper             | Displayed under elements but over links, scales and scrolls with the diagram. |
+| Layer name         | [Coordinate type](/docs/concepts/canvas-coordinates.md) | Is scaled | Is scrolled | Description |
+|--------------------|-------------------|---|---|-------------|
+| `viewport`         | client (viewport) | ❌ | ❌ | Top layer, placed over all diagram content and other layers. |
+| `overElements`     | scrollable pane   | ❌ | ✔ | Placed over both elements and links. |
+| `overLinks`        | scrollable pane   | ❌ | ✔ | Placed under elements but over links (including its geometry and labels). |
+| `overLinkGeometry` | scrollable pane   | ❌ | ✔ | Placed under link labels but over link geometry (paths). |
+| `underlay`         | scrollable pane   | ❌ | ✔ | Bottom layer, placed under all diagram content and other layers. |
 
-### Example: custom viewport widget
+By default, every child component (widget) is placed at `viewport` layer over canvas viewport. However, [`<CanvasPlaceAt />`](/docs/api/workspace/functions/CanvasPlaceAt.md) can be used to display its children at a different layer:
+
+```tsx
+function MyWidget() {
+  return (
+    <>
+      <div>
+        {/* This will be displayer over viewport */}
+      </div>
+      <Reactodia.CanvasPlaceAt layer='overLinkGeometry'>
+        {/* ... render additonal link decorations ... */}
+      </Reactodia.CanvasPlaceAt>
+      <Reactodia.CanvasPlaceAt layer='underlay'>
+        {/* ... render additional background content */}
+      </Reactodia.CanvasPlaceAt>
+    </>
+  );
+}
+
+...
+return (
+  <Reactodia.Workspace ref={onMount}
+    defaultLayout={defaultLayout}>
+    <Reactodia.WorkspaceRoot>
+      <Reactodia.Canvas>
+        <MyWidget />
+      </Reactodia.Canvas>
+    </Reactodia.WorkspaceRoot>
+  </Reactodia.Workspace>
+);
+```
+
+:::warning
+`<CanvasPlaceAt />` cannot be nested into itself, otherwise an error will be thrown.
+:::
+
+### Example: simple viewport widget
 
 ```tsx live noInline
-function CustomSelectAllWidget() {
+function SelectAllButton() {
   const {model} = Reactodia.useWorkspace();
   return (
-    <Reactodia.ViewportDock dock='ne'>
+    <Reactodia.ViewportDock dock='n'>
       <button type='button'
         className='reactodia-btn reactodia-btn-default'
         onClick={() => model.setSelection([...model.elements])}>
@@ -109,10 +149,109 @@ function CustomSelectAllWidget() {
   );
 }
 
-Reactodia.defineCanvasWidget(
-  CustomSelectAllWidget,
-  element => ({element, attachment: 'viewport'})
-);
+function Example() {
+  const {defaultLayout} = Reactodia.useWorker(Layouts);
+
+  const {onMount} = Reactodia.useLoadedWorkspace(async ({context, signal}) => {
+    const {model, view, performLayout} = context;
+    model.createElement('http://example.com/entity1');
+    model.createElement('http://example.com/entity2');
+    model.createLinks({
+      sourceId: 'http://example.com/entity1',
+      targetId: 'http://example.com/entity2',
+      linkTypeId: 'http://example.com/connectedTo',
+      properties: {},
+    });
+    await performLayout({signal});
+  }, []);
+
+  return (
+    <div className='reactodia-live-editor'>
+      <Reactodia.Workspace ref={onMount}
+        defaultLayout={defaultLayout}>
+        <Reactodia.WorkspaceRoot>
+          <Reactodia.Canvas>
+            <Reactodia.Halo />
+            <Reactodia.HaloLink />
+            <Reactodia.Selection />
+            <SelectAllButton />
+          </Reactodia.Canvas>
+        </Reactodia.WorkspaceRoot>
+      </Reactodia.Workspace>
+    </div>
+  );
+}
+
+render(<Example />);
+```
+
+### Example: placing components at [canvas coordinates](/docs/concepts/canvas-coordinates.md)
+
+When placing a component at non-`viewport` layer, it is usually neccessary to position it based on other [diagram cells](/docs/concepts/graph-model.md). In that cases the widget needs to subscribe to canvas content and transform changes (including canvas total size, scale and origin point).
+
+```tsx live noInline
+function OverlayAndUnderlay() {
+  const {canvas, model} = Reactodia.useCanvas();
+
+  // Update on canvas transform changes (change scale, size or origin)
+  Reactodia.useSyncStore(
+    Reactodia.useLayerDebouncedStore(
+      Reactodia.useEventStore(canvas.events, 'changeTransform'),
+      canvas.renderingState
+    ),
+    () => canvas.metrics.getTransform()
+  );
+
+  // Track average of element centers
+  const p = Reactodia.useSyncStoreWithComparator(
+    Reactodia.useLayerDebouncedStore(
+      useAllElementBoundsStore(),
+      canvas.renderingState
+    ),
+    () => Reactodia.calculateAveragePosition(
+      model.elements,
+      canvas.renderingState
+    ),
+    (a, b) => Reactodia.Vector.equals(a, b)
+  );
+
+  const {x, y} = canvas.metrics.paperToScrollablePaneCoords(p.x, p.y);
+
+  const style: React.CSSProperties = {
+    position: 'absolute',
+    left: x - 50,
+    top: y - 50,
+    width: 100,
+    height: 100,
+    pointerEvents: 'none',
+  };
+
+  return (
+    <>
+      <Reactodia.CanvasPlaceAt layer='underlay'>
+        <div style={{...style, background: 'cornflowerblue'}} />
+      </Reactodia.CanvasPlaceAt>
+      <Reactodia.CanvasPlaceAt layer='overElements'>
+        <div style={{...style, border: '2px dashed violet'}} />
+      </Reactodia.CanvasPlaceAt>
+    </>
+  );
+}
+
+function useAllElementBoundsStore(): Reactodia.SyncStore {
+  const {canvas, model} = Reactodia.useCanvas();
+  return React.useCallback<Reactodia.SyncStore>(onChange => {
+    const listener = new Reactodia.EventObserver();
+    listener.listen(model.events, 'changeCells', onChange);
+    listener.listen(model.events, 'elementEvent', ({data}) => {
+      if (data.changePosition) {
+        onChange();
+      }
+    });
+    listener.listen(canvas.renderingState.events, 'changeElementSize', onChange);
+    return () => listener.stopListening();
+  }, [model.events, canvas.renderingState.events]);
+}
 
 function Example() {
   const {defaultLayout} = Reactodia.useWorker(Layouts);
@@ -135,9 +274,9 @@ function Example() {
       <Reactodia.Workspace ref={onMount}
         defaultLayout={defaultLayout}>
         <Reactodia.DefaultWorkspace
-          search={null}
-          canvasWidgets={[<CustomSelectAllWidget key='select-all' />]}
-        />
+          search={null}>
+          <OverlayAndUnderlay />
+        </Reactodia.DefaultWorkspace>
       </Reactodia.Workspace>
     </div>
   );
diff --git a/docs/components/connections-menu.md b/docs/components/connections-menu.md
index b3037ee6..6dc4c492 100644
--- a/docs/components/connections-menu.md
+++ b/docs/components/connections-menu.md
@@ -4,7 +4,7 @@ title: <ConnectionsMenu />
 
 # Connections Menu
 
-[`<ConnectionsMenu />`](/docs/api/workspace/functions/ConnectionsMenu) component is a [canvas widget](/docs/components/canvas.md) to explore and navigate the graph by adding connected entities to the diagram.
+[`<ConnectionsMenu />`](/docs/api/workspace/functions/ConnectionsMenu) component is a [canvas widget](/docs/components/canvas.md#widgets) to explore and navigate the graph by adding connected entities to the diagram.
 
 The component observes [`ConnectionsMenuTopic`](/docs/api/workspace/variables/ConnectionsMenuTopic.md) [command bus topic](/docs/concepts/event-system.md#command-bus).
 
@@ -27,6 +27,7 @@ function Example() {
 
     const target = model.createElement('http://www.w3.org/ns/org#Organization');
     await model.requestElementData([target.iri]);
+    await performLayout({signal});
 
     model.setSelection([target]);
     getCommandBus(Reactodia.ConnectionsMenuTopic)
@@ -37,7 +38,10 @@ function Example() {
     <div className='reactodia-live-editor'>
       <Reactodia.Workspace ref={onMount}
         defaultLayout={defaultLayout}>
-        <Reactodia.DefaultWorkspace search={null} />
+        <Reactodia.DefaultWorkspace
+          search={null}
+          navigator={{expanded: false}}
+        />
       </Reactodia.Workspace>
     </div>
   );
diff --git a/docs/components/drop-on-canvas.md b/docs/components/drop-on-canvas.md
index e09ae21a..12fce6f4 100644
--- a/docs/components/drop-on-canvas.md
+++ b/docs/components/drop-on-canvas.md
@@ -4,4 +4,83 @@ title: <DropOnCanvas />
 
 # Drop on Canvas
 
-[`<DropOnCanvas />`](/docs/api/workspace/functions/DropOnCanvas) component is a [canvas widget](/docs/components/canvas.md) to allow creating entity elements on the diagram by dragging then dropping a [URL (IRI)](/docs/concepts/data-provider.md#iri-and-rdf) to the canvas.
+[`<DropOnCanvas />`](/docs/api/workspace/functions/DropOnCanvas) component is a [canvas widget](/docs/components/canvas.md#widgets) to allow creating entity elements on the diagram by dragging then dropping a [URL (IRI)](/docs/concepts/data-provider.md#iri-and-rdf) to the canvas.
+
+### Example: palette to drag annotations from
+
+```tsx live noInline
+function Palette() {
+  const {model} = Reactodia.useWorkspace();
+  const variants = ['default', 'primary', 'success', 'info', 'warning', 'danger'];
+  return (
+    <Reactodia.ViewportDock dock='n'>
+      <div style={{
+        display: 'flex',
+        gap: 5,
+        padding: 5,
+        background: 'var(--reactodia-background-color-surface)',
+      }}>
+        {variants.map(variant =>
+          <a key={variant}
+            href={`urn:my:annotation:${variant}`}
+            className={`reactodia-note-annotation--variant-${variant}`}
+            style={{
+              width: 16,
+              height: 16,
+              borderWidth: 8,
+              borderStyle: 'solid',
+            }}
+            onClick={e => { e.preventDefault(); }}
+          />
+        )}
+      </div>
+    </Reactodia.ViewportDock>
+  );
+}
+
+function Example() {
+  const {defaultLayout} = Reactodia.useWorker(Layouts);
+
+  const getDroppedItems = React.useCallback(
+    (e: Reactodia.CanvasDropEvent): Reactodia.DropOnCanvasItem[] => {
+      return Reactodia.defaultGetDroppedOnCanvasItems(e).map(item => {
+        if (
+          item.type === 'element' &&
+          item.element instanceof Reactodia.EntityElement
+        ) {
+          const match = /^urn:my:annotation:([a-z]+)$/.exec(item.element.iri);
+          if (match) {
+            const element = new Reactodia.AnnotationElement({
+              elementState: Reactodia.TemplateState.empty
+                .set(Reactodia.TemplateProperties.ColorVariant, match[1]),
+            });
+            return {...item, element};
+          }
+          return item;
+        }
+      });
+    }
+  );
+
+  return (
+    <div className='reactodia-live-editor'>
+      <Reactodia.Workspace defaultLayout={defaultLayout}>
+        <Reactodia.WorkspaceRoot>
+          <Reactodia.Canvas>
+            <Reactodia.AnnotationSupport />
+            <Reactodia.Halo />
+            <Reactodia.HaloLink />
+            <Reactodia.Selection />
+            <Reactodia.DropOnCanvas
+              getDroppedItems={getDroppedItems}
+            />
+            <Palette />
+          </Reactodia.Canvas>
+        </Reactodia.WorkspaceRoot>
+      </Reactodia.Workspace>
+    </div>
+  );
+}
+
+render(<Example />);
+```
diff --git a/docs/components/form-input.md b/docs/components/form-input.md
index 7e77ac0e..f535ef29 100644
--- a/docs/components/form-input.md
+++ b/docs/components/form-input.md
@@ -31,10 +31,9 @@ function Example() {
     dataProvider.addGraph(graphData);
     await model.createNewDiagram({dataProvider, signal});
     const element = model.createElement('http://www.w3.org/ns/org#Organization');
-    await Promise.all([
-        model.requestElementData([element.iri]),
-        model.requestLinks(),
-    ]);
+    await model.requestData();
+    await performLayout({signal});
+    model.setSelection([element]);
     editor.setAuthoringMode(true);
     getCommandBus(Reactodia.VisualAuthoringTopic)
         .trigger('editEntity', {target: element});
@@ -59,6 +58,7 @@ function Example() {
         defaultLayout={defaultLayout}>
           <Reactodia.DefaultWorkspace
             search={null}
+            navigator={{expanded: false}}
             visualAuthoring={{
               inputResolver: (property, inputProps) =>
                 property === RDF_COMMENT
diff --git a/docs/components/navigator.md b/docs/components/navigator.md
index 797abe10..edab133f 100644
--- a/docs/components/navigator.md
+++ b/docs/components/navigator.md
@@ -4,7 +4,7 @@ title: <Navigator />
 
 # Navigator
 
-[`<Navigator />`](/docs/api/workspace/functions/Navigator) component is a [canvas widget](/docs/components/canvas.md) to display a minimap of the diagram contents.
+[`<Navigator />`](/docs/api/workspace/functions/Navigator) component is a [canvas widget](/docs/components/canvas.md#widgets) to display a minimap of the diagram contents.
 
 ```tsx live
 function Example() {
diff --git a/docs/components/selection.md b/docs/components/selection.md
index 9112133a..2e4b2dc0 100644
--- a/docs/components/selection.md
+++ b/docs/components/selection.md
@@ -4,7 +4,7 @@ title: <Selection />, <Halo /> and <HaloLink />
 
 # Halo and Selection
 
-There are several [canvas widget](/docs/components/canvas.md) components which can be used to display actions on the selected diagram elements or links.
+There are several [canvas widget](/docs/components/canvas.md#widgets) components which can be used to display actions on the selected diagram elements or links.
 
 ## Selecting elements
 
@@ -24,8 +24,9 @@ There are several built-in element actions that can be used:
 | [`<SelectionActionAnchor />`](/docs/api/workspace/functions/SelectionActionAnchor.md) | Displays a link to the entity IRI. |
 | [`<SelectionActionConnections />`](/docs/api/workspace/functions/SelectionActionConnections.md) | Opens the [connections menu](/docs/components/connections-menu.md) for the selected entities. |
 | [`<SelectionActionAddToFilter />`](/docs/api/workspace/functions/SelectionActionAddToFilter.md) | Adds the selected entity to the [instances search](/docs/components/instances-search.md) filter. |
-| [`<SelectionActionGroup />`](/docs/api/workspace/functions/SelectionActionGroup.md) | [Groups or ungroups](/docs/api/workspace/classes/DataDiagramModel.md#group) selected elements. |
-| [`<SelectionActionEstablishLink />`](/docs/api/workspace/functions/SelectionActionEstablishLink.md) | Starts [creating a relation](/docs/concepts/graph-authoring.md) to an existing or a new entity by dragging it. |
+| [`<SelectionActionGroup />`](/docs/api/workspace/functions/SelectionActionGroup.md) | [Groups or ungroups](/docs/api/workspace/functions/groupEntities.md) selected elements. |
+| [`<SelectionActionEstablishLink />`](/docs/api/workspace/functions/SelectionActionEstablishLink.md) | Starts creating a [relation](/docs/concepts/graph-authoring.md) or [annotation link](/docs/concepts/graph-model.md#annotations) to an element by dragging it. |
+| [`<SelectionActionAnnotate />`](/docs/api/workspace/functions/SelectionActionAnnotate.md) | Creates a new [annotaion](/docs/api/workspace/classes/AnnotationElement.md) connected to the selected elements. |
 
 ## Selecting links
 
@@ -37,8 +38,8 @@ There are several built-in link actions that can be used:
 | [`<LinkAction />`](/docs/api/workspace/functions/LinkAction.md) | Base component to display an action on the selected link. <br/>[`useLinkActionContext()`](/docs/api/workspace/functions/useLinkActionContext.md) hook can be used to get additional context for the selected link, including path geometry. |
 | [`<LinkActionSpinner />`](/docs/api/workspace/functions/LinkActionSpinner.md) | Displays a loading spinner (useful as building block for other action components). |
 | [`<LinkActionEdit />`](/docs/api/workspace/functions/LinkActionEdit.md) | Starts [editing the relation](/docs/concepts/graph-authoring.md). |
-| [`<LinkActionDelete />`](/docs/api/workspace/functions/LinkActionDelete.md) | Deletes [the relation](/docs/concepts/graph-authoring.md). |
-| [`<LinkActionMoveEndpoint />`](/docs/api/workspace/functions/LinkActionMoveEndpoint.md) | Displays a handle which allows to [change the relation](/docs/concepts/graph-authoring.md) by moving its endpoint (source or target) to another entity. |
+| [`<LinkActionDelete />`](/docs/api/workspace/functions/LinkActionDelete.md) | Deletes the [relation](/docs/concepts/graph-authoring.md) or [annotation link](/docs/concepts/graph-model.md#annotations). |
+| [`<LinkActionMoveEndpoint />`](/docs/api/workspace/functions/LinkActionMoveEndpoint.md) | Displays a handle which allows to change the [relation](/docs/concepts/graph-authoring.md) or [annotation link](/docs/concepts/graph-model.md#annotations) by moving its endpoint (source or target) to another element. |
 | [`<LinkActionRename />`](/docs/api/workspace/functions/LinkActionRename.md) | Starts [renaming a link](/docs/api/workspace/interfaces/RenameLinkProvider.md) (change the label on the diagram only). |
 
 ## Styles
@@ -48,5 +49,8 @@ The component look can be customized using the following CSS properties (see [de
 | Property | Description |
 |----------|-------------|
 | `--reactodia-selection-icon-filter`  | [CSS filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) for the element selection action icons. |
+| `--reactodia-selection-link-color`   | Link path highlight color when a link is selected. |
 | `--reactodia-selection-multiple-box-shadow` | Box shadow for the selection rectangle with multiple elements. |
-| `--reactodia-selection-single-box-shadow`  | Box shadow for the selection rectangle with a single element. |
+| `--reactodia-selection-single-box-color` | Rectangle border color for selection with a single element. |
+| `--reactodia-selection-single-box-margin` | Margin from the element bounds for the selection rectange with a single element. |
+| `--reactodia-selection-single-box-shadow` | Box shadow for the selection rectangle with a single element. |
diff --git a/docs/components/toolbar.md b/docs/components/toolbar.md
index 6886e87a..ed5365dc 100644
--- a/docs/components/toolbar.md
+++ b/docs/components/toolbar.md
@@ -4,7 +4,7 @@ title: <Toolbar />
 
 # Toolbar and menu
 
-[`<Toolbar />`](/docs/api/workspace/functions/Toolbar) component is a [canvas widget](/docs/components/canvas.md) to display a simple toolbar with a an optional dropdown menu.
+[`<Toolbar />`](/docs/api/workspace/functions/Toolbar) component is a [canvas widget](/docs/components/canvas.md#widgets) to display a simple toolbar with a an optional dropdown menu.
 
 ## Toolbar actions
 
@@ -46,44 +46,39 @@ function Example() {
         defaultLayout={defaultLayout}>
         <Reactodia.DefaultWorkspace
           actions={null}
-          navigator={null}
-          canvasWidgets={[
-            <Reactodia.Toolbar key='bottom-left'
-              dock='sw'
-              menu={
-                <>
-                  <Reactodia.ToolbarActionClearAll />
-                  <Reactodia.ToolbarActionExport kind='print' />
-                </>
-              }>
-              <Reactodia.ToolbarActionUndo />
-              <Reactodia.ToolbarActionRedo />
-              <Reactodia.ToolbarActionLayout />
-            </Reactodia.Toolbar>,
-            <Reactodia.Toolbar key='top-right'
-              dock='ne'>
-              <Reactodia.ToolbarAction
-                onSelect={() => {
-                  const {overlay} = getContext();
-                  overlay.showDialog({content: <div>🎉</div>});
-                }}>
-                Show a dialog
-              </Reactodia.ToolbarAction>
-            </Reactodia.Toolbar>,
-            <Reactodia.Toolbar key='bottom-right'
-              dock='se'>
-              <Reactodia.ToolbarLanguageSelector
-                languages={[
-                  {code: 'de', label: 'Deutsch'},
-                  {code: 'en', label: 'english'},
-                  {code: 'es', label: 'español'},
-                  {code: 'ru', label: 'русский'},
-                  {code: 'zh', label: '汉语'},
-                ]}
-              />
-            </Reactodia.Toolbar>,
-          ]}
-        />
+          navigator={null}>
+          <Reactodia.Toolbar dock='sw'
+            menu={
+              <>
+                <Reactodia.ToolbarActionClearAll />
+                <Reactodia.ToolbarActionExport kind='print' />
+              </>
+            }>
+            <Reactodia.ToolbarActionUndo />
+            <Reactodia.ToolbarActionRedo />
+            <Reactodia.ToolbarActionLayout />
+          </Reactodia.Toolbar>
+          <Reactodia.Toolbar dock='ne'>
+            <Reactodia.ToolbarAction
+              onSelect={() => {
+                const {overlay} = getContext();
+                overlay.showDialog({content: <div>🎉</div>});
+              }}>
+              Show a dialog
+            </Reactodia.ToolbarAction>
+          </Reactodia.Toolbar>
+          <Reactodia.Toolbar dock='se'>
+            <Reactodia.ToolbarLanguageSelector
+              languages={[
+                {code: 'de', label: 'Deutsch'},
+                {code: 'en', label: 'english'},
+                {code: 'es', label: 'español'},
+                {code: 'ru', label: 'русский'},
+                {code: 'zh', label: '汉语'},
+              ]}
+            />
+          </Reactodia.Toolbar>
+        </Reactodia.DefaultWorkspace>
       </Reactodia.Workspace>
     </div>
   );
diff --git a/docs/components/unified-search.md b/docs/components/unified-search.md
index 61dbdba1..aae50cc9 100644
--- a/docs/components/unified-search.md
+++ b/docs/components/unified-search.md
@@ -104,6 +104,8 @@ function SearchWithNpm() {
     <div className='reactodia-live-editor'>
       <Reactodia.Workspace defaultLayout={defaultLayout}>
         <Reactodia.DefaultWorkspace
+          mainToolbar={{dock: 'n'}}
+          navigator={{expanded: false}}
           search={{sections}}
         />
       </Reactodia.Workspace>
diff --git a/docs/components/visual-authoring.md b/docs/components/visual-authoring.md
index 277ec436..3e88129e 100644
--- a/docs/components/visual-authoring.md
+++ b/docs/components/visual-authoring.md
@@ -4,7 +4,7 @@ title: <VisualAuthoring />
 
 # Visual Authoring
 
-[`<VisualAuthoring />`](/docs/api/workspace/functions/VisualAuthoring) component is a [canvas widget](/docs/components/canvas.md) to provide UI for the [visual graph authoring](/docs/concepts/graph-authoring.md).
+[`<VisualAuthoring />`](/docs/api/workspace/functions/VisualAuthoring) component is a [canvas widget](/docs/components/canvas.md#widgets) to provide UI for the [visual graph authoring](/docs/concepts/graph-authoring.md).
 
 :::important
 `<VisualAuthoring />` widget must be provided to the canvas to in order to display visual graph authoring UI.
diff --git a/docs/components/workspace.md b/docs/components/workspace.md
index 2be401e8..886335ea 100644
--- a/docs/components/workspace.md
+++ b/docs/components/workspace.md
@@ -16,9 +16,9 @@ title: <Workspace />
 
 The UI of the workspace is defined by the child components provided to the `<Workspace />`:
 
-Default built-in layout is provided as [`<DefaultWorkspace />`](/docs/api/workspace/functions/DefaultWorkspace) component which includes the [unified search](/docs/components/unified-search.md), main menu and action [toolbars](/docs/components/toolbar.md) and all built-in [canvas widgets](/docs/components/canvas.md).
+Default built-in layout is provided as [`<DefaultWorkspace />`](/docs/api/workspace/functions/DefaultWorkspace) component which includes the [unified search](/docs/components/unified-search.md), main menu and action [toolbars](/docs/components/toolbar.md) and all built-in [canvas widgets](/docs/components/canvas.md#widgets).
 
-Alternative (classic) built-in layout is provided as [`<ClassicWorkspace />`](/docs/api/workspace/functions/ClassicWorkspace) component which uses [layout panels](/docs/components/workspace-layout-panels.md) with [class tree](/docs/components/class-tree.md), [instances search](/docs/components/instances-search.md), [link types toolbox](/docs/components/link-types-toolbox.md), [`<ClassicToolbar />`](/docs/api/workspace/functions/ClassicToolbar) and all built-in [canvas widgets](/docs/components/canvas.md).
+Alternative (classic) built-in layout is provided as [`<ClassicWorkspace />`](/docs/api/workspace/functions/ClassicWorkspace) component which uses [layout panels](/docs/components/workspace-layout-panels.md) with [class tree](/docs/components/class-tree.md), [instances search](/docs/components/instances-search.md), [link types toolbox](/docs/components/link-types-toolbox.md), [`<ClassicToolbar />`](/docs/api/workspace/functions/ClassicToolbar) and all built-in [canvas widgets](/docs/components/canvas.md#widgets).
 
 When providing a custom workspace layout it is required to use [`<WorkspaceRoot />`](/docs/api/workspace/functions/WorkspaceRoot) as a top-level parent component to establish necessary style defaults, including styles for light or dark [color scheme](/docs/concepts/design-system.mdx).
 
diff --git a/docs/concepts/canvas-overlays.md b/docs/concepts/canvas-overlays.md
index 2fed7e07..8e37663f 100644
--- a/docs/concepts/canvas-overlays.md
+++ b/docs/concepts/canvas-overlays.md
@@ -67,6 +67,7 @@ The component look can be customized using the following CSS properties (see [de
 | `--reactodia-dialog-border-color`  | Border color for the dialog (uses the base border color if not set). |
 | `--reactodia-dialog-border-radius` | Border radius for the dialog (uses the base border radius if not set). |
 | `--reactodia-dialog-border-width`  | Border width for the dialog (uses the base border width if not set). |
+| `--reactodia-dialog-viewport-breakpoint-s` | Makes the dialog fill the viewport if the available width is less or equal to that value. |
 
 ## Overlay tasks
 
diff --git a/docs/concepts/command-history.md b/docs/concepts/command-history.md
index b4540dcf..92ca6251 100644
--- a/docs/concepts/command-history.md
+++ b/docs/concepts/command-history.md
@@ -74,7 +74,10 @@ function Component() {
       const element = model.createElement(iri);
 
       // In other cases the command needs to be executed explicitly
-      batch.history.execute(setElementState(element, {'my:custom:state': 42}));
+      batch.history.execute(setElementState(
+        element,
+        element.elementState.set(MyCustomProperty, 42)
+      ));
     }
 
     batch.store();
@@ -114,7 +117,9 @@ function exchangeElementPositions(
 function resetElementStateForAll(
   elements: readonly Reactodia.ElementElement[]
 ): Command {
-  const commands = elements.map(el => Reactodia.setElementState(el, undefined));
+  const commands = elements.map(el =>
+    Reactodia.setElementState(el, TemplateState.empty)
+  );
   return Command.compound('Reset state for elements', commands);
 }
 ```
diff --git a/docs/concepts/data-provider.md b/docs/concepts/data-provider.md
index a8310518..bc1bbb75 100644
--- a/docs/concepts/data-provider.md
+++ b/docs/concepts/data-provider.md
@@ -122,14 +122,10 @@ function ExampleRdfProviderProvisionFromJGF() {
     dataProvider.addGraph(triples);
 
     await model.createNewDiagram({dataProvider, signal});
-
-    const elementIris: Reactodia.ElementIri[] = [];
     for (const {element} of await dataProvider.lookup({elementTypeId: 'graph:type:Person'})) {
-      elementIris.push(model.createElement(element).iri);
+      model.createElement(element.id);
     }
-
-    await model.requestElementData(elementIris);
-    await model.requestLinks();
+    await model.requestData();
     await performLayout({signal});
   }, []);
 
diff --git a/docs/concepts/design-system.mdx b/docs/concepts/design-system.mdx
index 0383de10..7b47741c 100644
--- a/docs/concepts/design-system.mdx
+++ b/docs/concepts/design-system.mdx
@@ -282,6 +282,13 @@ function Spacing() {
 }
 ```
 
+## Z-index
+
+The following properties allow to override base `z-index` level for workspace components with a set `z-index` value:
+```css
+--reactodia-z-index-base
+```
+
 ## Controls
 
 ### Buttons
diff --git a/docs/concepts/event-system.md b/docs/concepts/event-system.md
index 2575a252..c290d8c6 100644
--- a/docs/concepts/event-system.md
+++ b/docs/concepts/event-system.md
@@ -82,6 +82,8 @@ function Component() {
 
 In the above example, [`Reactodia.useFrameDebouncedStore()`](/docs/api/workspace/functions/useFrameDebouncedStore.md) hook is used to debounce React component updates due to triggered events from the event store to only once each rendered frame based on [`requestAnimationFrame()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame).
 
+Alternatively, [`Reactodia.useLayerDebouncedStore()`](/docs/api/workspace/functions/useLayerDebouncedStore.md) can be used for debounce store updates until the next canvas layer update or explicit [`RenderingState.syncUpdate()`](/docs/api/workspace/interfaces/RenderingState.md#syncupdate) call to force all layers to be rendered in order (e.g. to read element sizes or other dependent rendering state).
+
 ## Making an observable
 
 To create an observable instance it would be enough to implement the [`Events`](/docs/api/workspace/interfaces/Events) interface. An easiest way to do it would be to use [`EventSource`](/docs/api/workspace/classes/EventSource):
diff --git a/docs/concepts/graph-model.md b/docs/concepts/graph-model.md
index a0c40bb5..ee98c2b0 100644
--- a/docs/concepts/graph-model.md
+++ b/docs/concepts/graph-model.md
@@ -14,10 +14,6 @@ Each **element** is identified by a [generated ID](/docs/api/workspace/classes/E
 
 Each **link** is identified by a [generated ID](/docs/api/workspace/classes/Link.md#generateid), has source and target element IDs, and a [link type IRI](/docs/api/workspace/type-aliases/LinkTypeIri.md). In its state it stores path geometry as a [collection of points](/docs/api/workspace/classes/Link.md#vertices) (in [paper coordinates](/docs/concepts/canvas-coordinates)) and an arbitrary persisted [link state](/docs/api/workspace/classes/Link.md#linkstate).
 
-:::note
-Currently there is only one concrete element type besides the data graph ones: [`VoidElement`](/docs/api/workspace/classes/VoidElement.md) which is displayed as nothing (empty point) but can be connected to with the links.
-:::
-
 ## Data graph
 
 While elements and links are considered to be diagram graph nodes and edges, some of them can represent entities and relations from (external) data graph defined by the [`DataProvider`](/docs/concepts/data-provider):
@@ -39,6 +35,25 @@ Basically, a sub-graph of a full external data graph composed of entities and re
 
 Using the [graph authoring](/docs/concepts/graph-authoring) feature it is possible to work on the changes to the data graph and apply it once ready.
 
+The library provides [default templates](/docs/components/canvas.md#customization) and UI support ([`<VisualAuthoring />`](/docs/components/visual-authoring.md)) for entity elements and relation links.
+
+## Annotations
+
+Additional elements and links can be added to the diagram content to annotate other graph elements:
+
+| Cell type | Description |
+|-----------|-------------|
+| [`AnnotationElement`](/docs/api/workspace/classes/AnnotationElement.md) | Diagram-only annotation element, [exported and imported](#import-and-export) with the diagram. |
+| [`AnnotationLink`](/docs/api/workspace/classes/AnnotationLink.md) | Diagram-only annotation link, [exported and imported](#import-and-export) with the diagram. |
+
+These elements and links behave as normal graph nodes and edges i.e. participate in [graph layout](/docs/concepts/graph-layout.md), can be [selected](/docs/components/selection.md), etc. At the same time, annotation elements and links do not have any data from [data graph](#data-graph), have user-editable content stored in the [`template state`](/docs/api/workspace/classes/Element.md#elementstate) and can be created, changed or deleted independently from the [graph authoring mode](/docs/concepts/graph-authoring.md).
+
+The library provides [default templates](/docs/components/canvas.md#customization) and UI support ([`<AnnotationSupport />`](/docs/components/annotation-support.md)) for annotations.
+
+:::note
+The library also defines utility element type [`VoidElement`](/docs/api/workspace/classes/VoidElement.md) which is displayed as nothing (empty point) but can be connected to with the links.
+:::
+
 ## Manipulating the diagram
 
 To access and manipulate the diagram one can use [diagram model](/docs/api/workspace/classes/DataDiagramModel.md) from [`WorkspaceContext`](/docs/concepts/workspace-context):
@@ -142,5 +157,7 @@ function WorkingWithImportExport() {
 ```
 
 :::note
-Currently only [data graph](#data-graph) elements and links (including groups) can be exported and imported.
+**Unstable**: Additional element and link cell types can be imported using `elementCellTypes` and `linkCellTypes` options for [`DataDiagramModel.importLayout()`](/docs/api/workspace/classes/DataDiagramModel.md#importlayout).
+
+See [`SerializableElementCell`](/docs/api/workspace/interfaces/SerializableElementCell.md) and [`SerializableLinkCell`](/docs/api/workspace/interfaces/SerializableLinkCell.md) contracts for diagram cell to be serializable.
 :::
diff --git a/docs/concepts/keyboard-hotkeys.md b/docs/concepts/keyboard-hotkeys.md
index 2890a6b9..4258bca8 100644
--- a/docs/concepts/keyboard-hotkeys.md
+++ b/docs/concepts/keyboard-hotkeys.md
@@ -29,7 +29,7 @@ Example hotkey strings: `Ctrl+Alt+K`, `Alt+Meta+Q`, `Ctrl+/`, `None+G`.
 
 ## How to define a hotkey
 
-At high level, various Reactodia components provide a prop for a hotkey string to perform a certain action, see [`<ToolbarAction />`](/docs/components/toolbar.md), [`<SelectionAction />`](/docs/components/selection.md):
+At high level, various Reactodia components provide a prop for a hotkey string to perform a certain action, see [`<ToolbarAction />`](/docs/components/toolbar.md), [`<SelectionAction />`](/docs/components/selection.md#selecting-elements) and [`<LinkAction />`](/docs/components/selection.md#selecting-links):
 
 ```tsx
 {/* Default hotkeys for the built-in components: */}
diff --git a/docs/concepts/workspace-context.md b/docs/concepts/workspace-context.md
index 08c4d1bf..e0d11deb 100644
--- a/docs/concepts/workspace-context.md
+++ b/docs/concepts/workspace-context.md
@@ -53,17 +53,15 @@ function MyWidget() {
   // Use workspace context
 }
 
-Reactodia.defineCanvasWidget(MyWidget, element => ({element, attachment: 'viewport'}));
-
 function Example() {
   const {defaultLayout} = Reactodia.useWorker(Layouts);
   return (
       <Reactodia.Workspace ref={onMount}
         defaultLayout={defaultLayout}>
         <Reactodia.DefaultWorkspace
-          search={null}
-          canvasWidgets={[<MyWidget key='my-widget' />]}
-        />
+          search={null}>
+          <MyWidget />
+        </Reactodia.DefaultWorkspace>
       </Reactodia.Workspace>
   );
 }
diff --git a/docs/examples/live.md b/docs/examples/live.md
index 9cb49394..6aa59f32 100644
--- a/docs/examples/live.md
+++ b/docs/examples/live.md
@@ -9,39 +9,37 @@ Workspace usage example via live editor block which updates on every change.
 
 ```tsx live
 function SimpleExample() {
-    const GRAPH_DATA =
-        'https://raw.githubusercontent.com/reactodia/reactodia-workspace/' +
-        'master/examples/resources/orgOntology.ttl';
-
-    const {defaultLayout} = Reactodia.useWorker(Layouts);
-
-    const {onMount} = Reactodia.useLoadedWorkspace(async ({context, signal}) => {
-        const {model, performLayout} = context;
-        // Fetch graph data to use as underlying data source
-        const response = await fetch(GRAPH_DATA, {signal});
-        const graphData = new N3.Parser().parse(await response.text());
-        const dataProvider = new Reactodia.RdfDataProvider({acceptBlankNodes: false});
-        dataProvider.addGraph(graphData);
-
-        // Create empty diagram and put owl:Class entities with links between them
-        await model.createNewDiagram({dataProvider, signal});
-        const elementTypeId = 'http://www.w3.org/2002/07/owl#Class';
-        for (const {element} of await dataProvider.lookup({elementTypeId})) {
-            model.createElement(element);
-        }
-        await model.requestLinksOfType();
-
-        // Layout elements on canvas
-        await performLayout({signal});
-    }, []);
-
-    return (
-        <div className='reactodia-live-editor'>
-            <Reactodia.Workspace ref={onMount}
-                defaultLayout={defaultLayout}>
-                <Reactodia.DefaultWorkspace />
-            </Reactodia.Workspace>
-        </div>
-    );
+  const GRAPH_DATA = 'https://reactodia.github.io/resources/orgOntology.ttl';
+
+  const {defaultLayout} = Reactodia.useWorker(Layouts);
+
+  const {onMount} = Reactodia.useLoadedWorkspace(async ({context, signal}) => {
+    const {model, performLayout} = context;
+    // Fetch graph data to use as underlying data source
+    const response = await fetch(GRAPH_DATA, {signal});
+    const graphData = new N3.Parser().parse(await response.text());
+    const dataProvider = new Reactodia.RdfDataProvider({acceptBlankNodes: false});
+    dataProvider.addGraph(graphData);
+
+    // Create empty diagram and put owl:Class entities with links between them
+    await model.createNewDiagram({dataProvider, signal});
+    const elementTypeId = 'http://www.w3.org/2002/07/owl#Class';
+    for (const {element} of await dataProvider.lookup({elementTypeId})) {
+      model.createElement(element.id);
+    }
+    await model.requestData();
+
+    // Layout elements on canvas
+    await performLayout({signal});
+  }, []);
+
+  return (
+    <div className='reactodia-live-editor'>
+      <Reactodia.Workspace ref={onMount}
+        defaultLayout={defaultLayout}>
+        <Reactodia.DefaultWorkspace />
+      </Reactodia.Workspace>
+    </div>
+  );
 }
 ```
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index c686d9d9..3ee438a2 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -2,6 +2,8 @@ import { themes as prismThemes } from 'prism-react-renderer';
 import type { Config } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 
+const libraryPathPrefix = process.env.CI ? `.` : '..';
+
 const config: Config = {
   title: 'Reactodia',
   tagline: 'Visual interaction with graph data in a form of a diagram.',
@@ -52,12 +54,12 @@ const config: Config = {
       'docusaurus-plugin-typedoc',
       {
         entryPoints: [
-          '../reactodia-workspace/src/workspace.ts',
-          '../reactodia-workspace/src/layout-sync.ts',
-          '../reactodia-workspace/src/layout.worker.ts',
-          '../reactodia-workspace/src/legacy-styles.tsx',
+          `${libraryPathPrefix}/reactodia-workspace/src/workspace.ts`,
+          `${libraryPathPrefix}/reactodia-workspace/src/layout-sync.ts`,
+          `${libraryPathPrefix}/reactodia-workspace/src/layout.worker.ts`,
+          `${libraryPathPrefix}/reactodia-workspace/src/legacy-styles.tsx`,
         ],
-        tsconfig: '../reactodia-workspace/tsconfig.typings.json',
+        tsconfig: `${libraryPathPrefix}/reactodia-workspace/tsconfig.typings.json`,
         readme: 'none',
         hideGroupHeadings: true,
         excludePrivate: true,
diff --git a/package-lock.json b/package-lock.json
index 275b6a42..77cb4f1a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,19 +1,20 @@
 {
   "name": "@reactodia/reactodia.github.io",
-  "version": "0.30.1",
+  "version": "0.31.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@reactodia/reactodia.github.io",
-      "version": "0.30.1",
+      "version": "0.31.0",
       "dependencies": {
         "@docusaurus/core": "3.8.1",
         "@docusaurus/preset-classic": "3.8.1",
         "@docusaurus/theme-live-codeblock": "^3.8.1",
         "@easyops-cn/docusaurus-search-local": "^0.51.0",
         "@mdx-js/react": "^3.1.0",
-        "@reactodia/workspace": "^0.30.1",
+        "@reactodia/hashmap": "^0.2.1",
+        "@reactodia/workspace": "^0.31.0",
         "clsx": "^2.1.1",
         "n3": "^1.17.2",
         "prism-react-renderer": "^2.4.1",
@@ -24,6 +25,8 @@
         "@docusaurus/module-type-aliases": "3.8.1",
         "@docusaurus/tsconfig": "3.8.1",
         "@docusaurus/types": "3.8.1",
+        "@rdfjs/types": "^1.1.2",
+        "@types/n3": "^1.26.1",
         "@vscode/codicons": "^0.0.36",
         "docusaurus-plugin-typedoc": "^1.4.0",
         "source-map-loader": "^5.0.0",
@@ -4725,10 +4728,20 @@
       "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
       "license": "MIT"
     },
+    "node_modules/@rdfjs/types": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@rdfjs/types/-/types-1.1.2.tgz",
+      "integrity": "sha512-wqpOJK1QCbmsGNtyzYnojPU8gRDPid2JO0Q0kMtb4j65xhCK880cnKAfEOwC+dX85VJcCByQx5zOwyyfCjDJsg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@reactodia/hashmap": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@reactodia/hashmap/-/hashmap-0.1.0.tgz",
-      "integrity": "sha512-hUbi0THBLDDjNe0hTmOeCnZJJbaFIZSAocbCxpyAUIM7O/KQMk302JrkEj+nbobHF9C664IgR6GT+/EkPnzyPg==",
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@reactodia/hashmap/-/hashmap-0.2.1.tgz",
+      "integrity": "sha512-SruXxvsqPQcszDlwYgPCM1SKZ0Ds6cTEpFzxpex51KYpLdCJ1bXjrqVyQq7kLEXNmLNBLIj+j6WtHCVy0D68+w==",
       "license": "MIT"
     },
     "node_modules/@reactodia/worker-proxy": {
@@ -4738,12 +4751,12 @@
       "license": "MIT"
     },
     "node_modules/@reactodia/workspace": {
-      "version": "0.30.1",
-      "resolved": "https://registry.npmjs.org/@reactodia/workspace/-/workspace-0.30.1.tgz",
-      "integrity": "sha512-aQ4hmIwGGa8Up++o3+IBlVodsP511HMNbcj0WMDAQlQ3b2mKZM+yHGzCT6vbrOVBC/joWrNy7LlXvoTY4wykMA==",
+      "version": "0.31.0",
+      "resolved": "https://registry.npmjs.org/@reactodia/workspace/-/workspace-0.31.0.tgz",
+      "integrity": "sha512-GC+r0Rnc9DYSzlKYDJqNW4ffCfbqvKemR/ONV1jo3SFm6nfA82lwHU7eoFTDiAkeQe5rS4WgBZHc/t3/Qs3lTA==",
       "license": "LGPL-2.1-or-later",
       "dependencies": {
-        "@reactodia/hashmap": "^0.1.0",
+        "@reactodia/hashmap": "^0.2.1",
         "@reactodia/worker-proxy": "^0.1.0",
         "clsx": "^2.1.1",
         "d3-color": "^3.1.0",
@@ -5365,6 +5378,17 @@
       "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
       "license": "MIT"
     },
+    "node_modules/@types/n3": {
+      "version": "1.26.1",
+      "resolved": "https://registry.npmjs.org/@types/n3/-/n3-1.26.1.tgz",
+      "integrity": "sha512-TilYHzpU6ecXVJAbV+6o17Z8ZkWLWx6ZJD3IluaU4RiGHxqjU2or9fopxFHS6iXS6qcl5Mg1K3wSx9L8xxJaJQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rdfjs/types": "*",
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "24.0.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.0.tgz",
diff --git a/package.json b/package.json
index 94d0cbfa..5002a8f2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reactodia/reactodia.github.io",
-  "version": "0.30.1",
+  "version": "0.31.0",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
@@ -20,7 +20,8 @@
     "@docusaurus/theme-live-codeblock": "^3.8.1",
     "@easyops-cn/docusaurus-search-local": "^0.51.0",
     "@mdx-js/react": "^3.1.0",
-    "@reactodia/workspace": "^0.30.1",
+    "@reactodia/hashmap": "^0.2.1",
+    "@reactodia/workspace": "^0.31.0",
     "clsx": "^2.1.1",
     "n3": "^1.17.2",
     "prism-react-renderer": "^2.4.1",
@@ -31,6 +32,8 @@
     "@docusaurus/module-type-aliases": "3.8.1",
     "@docusaurus/tsconfig": "3.8.1",
     "@docusaurus/types": "3.8.1",
+    "@rdfjs/types": "^1.1.2",
+    "@types/n3": "^1.26.1",
     "@vscode/codicons": "^0.0.36",
     "docusaurus-plugin-typedoc": "^1.4.0",
     "source-map-loader": "^5.0.0",
diff --git a/sidebars.ts b/sidebars.ts
index e547be8d..64caf9c4 100644
--- a/sidebars.ts
+++ b/sidebars.ts
@@ -49,6 +49,7 @@ const sidebars: SidebarsConfig = {
       link: {
         type: 'generated-index',
       },
+      collapsed: false,
       items: [{type: 'autogenerated', dirName: 'components'}],
     },
     {
diff --git a/src/examples/ExampleCommon.tsx b/src/examples/ExampleCommon.tsx
index 334ee223..4ed7f5a0 100644
--- a/src/examples/ExampleCommon.tsx
+++ b/src/examples/ExampleCommon.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { HashMap } from '@reactodia/hashmap';
 import * as Reactodia from '@reactodia/workspace';
 import { saveAs } from 'file-saver';
 
@@ -12,8 +13,18 @@ export function ExampleToolbarMenu() {
         onSelect={async file => {
           const preloadedElements = new Map<Reactodia.ElementIri, Reactodia.ElementModel>();
           for (const element of model.elements) {
-            for (const data of Reactodia.iterateEntitiesOf(element)) {
-              preloadedElements.set(data.id, data);
+            for (const entity of Reactodia.iterateEntitiesOf(element)) {
+              preloadedElements.set(entity.id, entity);
+            }
+          }
+
+          const preloadedLinks = new HashMap<Reactodia.LinkKey, Reactodia.LinkModel>(
+            Reactodia.hashLink,
+            Reactodia.equalLinks
+          );
+          for (const link of model.links) {
+            for (const relation of Reactodia.iterateRelationsOf(link)) {
+              preloadedLinks.set(relation, relation);
             }
           }
 
@@ -25,6 +36,7 @@ export function ExampleToolbarMenu() {
               dataProvider: model.dataProvider,
               diagram: diagramLayout,
               preloadedElements,
+              preloadedLinks,
               validateLinks: true,
             });
           } catch (err) {
diff --git a/src/examples/ExampleMetadata.ts b/src/examples/ExampleMetadata.ts
index 951908f1..ac162ebe 100644
--- a/src/examples/ExampleMetadata.ts
+++ b/src/examples/ExampleMetadata.ts
@@ -19,35 +19,53 @@ const rdfs = vocabulary('http://www.w3.org/2000/01/rdf-schema#', [
 const SIMULATED_DELAY: number = 50; /* ms */
 
 export class ExampleMetadataProvider extends Reactodia.BaseMetadataProvider {
-  private readonly propertyTypes = [owl.AnnotationProperty, owl.DatatypeProperty, owl.ObjectProperty];
+  private readonly propertyTypes = [
+    owl.AnnotationProperty,
+    owl.DatatypeProperty,
+    owl.ObjectProperty,
+  ];
   private readonly editableTypes = new Set([owl.Class, ...this.propertyTypes]);
-  private readonly editableRelations = new Set<Reactodia.LinkTypeIri>([rdfs.domain, rdfs.range]);
-  private readonly literalLanguages: ReadonlyArray<string> = ['de', 'en', 'es', 'ru', 'zh'];
+  private readonly editableRelations = new Set<Reactodia.LinkTypeIri>([
+    rdfs.domain,
+    rdfs.range,
+  ]);
+  private readonly literalLanguages: ReadonlyArray<string> =
+    ['de', 'en', 'es', 'ru', 'zh'];
 
   constructor() {
     super({
       getLiteralLanguages: () => this.literalLanguages,
       createEntity: async (type, {signal}) => {
         await Reactodia.delay(SIMULATED_DELAY, {signal});
-        const random32BitDigits = Math.floor((1 + Math.random()) * 0x100000000).toString(16).substring(1);
+        const random32BitDigits = Math.floor((1 + Math.random()) * 0x100000000)
+          .toString(16).substring(1);
         const typeLabel = Reactodia.Rdf.getLocalName(type) ?? 'Entity';
         return {
-          id: `${type}_${random32BitDigits}`,
-          types: [type],
-          properties: {
-            [Reactodia.rdfs.label]: [
-              Reactodia.Rdf.DefaultDataFactory.literal(`New ${typeLabel}`)
-            ]
+          data: {
+            id: `${type}_${random32BitDigits}`,
+            types: [type],
+            properties: {
+              [Reactodia.rdfs.label]: [
+                Reactodia.Rdf.DefaultDataFactory.literal(`New ${typeLabel}`)
+              ]
+            },
           },
+          elementState: type === owl.Class
+            ? Reactodia.TemplateState.empty.set(
+              Reactodia.TemplateProperties.Expanded, true
+            )
+            : undefined,
         };
       },
       createRelation: async (source, target, linkType, {signal}) => {
         await Reactodia.delay(SIMULATED_DELAY, {signal});
         return {
-          sourceId: source.id,
-          targetId: target.id,
-          linkTypeId: linkType,
-          properties: {},
+          data: {
+            sourceId: source.id,
+            targetId: target.id,
+            linkTypeId: linkType,
+            properties: {},
+          },
         };
       },
       canConnect: async (source, target, linkType, {signal}) => {
diff --git a/src/examples/PlaygroundBasic.tsx b/src/examples/PlaygroundBasic.tsx
index 224c8526..0a65dfbf 100644
--- a/src/examples/PlaygroundBasic.tsx
+++ b/src/examples/PlaygroundBasic.tsx
@@ -23,9 +23,9 @@ export function PlaygroundBasic() {
     await model.createNewDiagram({dataProvider, signal});
     const elementTypeId = 'http://www.w3.org/2002/07/owl#Class';
     for (const {element} of await dataProvider.lookup({elementTypeId})) {
-      model.createElement(element);
+      model.createElement(element.id);
     }
-    await model.requestLinks();
+    await model.requestData();
 
     // Layout elements on canvas
     await performLayout({signal});
diff --git a/src/examples/PlaygroundClassicWorkspace.tsx b/src/examples/PlaygroundClassicWorkspace.tsx
index 58c16966..ff92c17c 100644
--- a/src/examples/PlaygroundClassicWorkspace.tsx
+++ b/src/examples/PlaygroundClassicWorkspace.tsx
@@ -53,17 +53,17 @@ export function PlaygroundClassicWorkspace() {
       typeStyleResolver={SemanticTypeStyles}>
       <Reactodia.ClassicWorkspace
         canvas={{
-          elementTemplateResolver: types => {
+          elementTemplateResolver: (types, element) => {
             if (types.includes('http://www.w3.org/2002/07/owl#DatatypeProperty')) {
               return Reactodia.ClassicTemplate;
             }
             return undefined;
           },
-          linkTemplateResolver: type => {
-            if (type === 'http://www.w3.org/2000/01/rdf-schema#subClassOf') {
-              return Reactodia.DefaultLinkTemplate;
+          linkTemplateResolver: (linkType, link) => {
+            if (linkType === 'http://www.w3.org/2000/01/rdf-schema#subClassOf') {
+              return Reactodia.StandardLinkTemplate;
             }
-            return OntologyLinkTemplates(type);
+            return OntologyLinkTemplates(linkType);
           },
         }}
         toolbar={{
diff --git a/src/examples/PlaygroundGraphAuthoring.tsx b/src/examples/PlaygroundGraphAuthoring.tsx
index 504182f8..444273be 100644
--- a/src/examples/PlaygroundGraphAuthoring.tsx
+++ b/src/examples/PlaygroundGraphAuthoring.tsx
@@ -43,18 +43,18 @@ export function PlaygroundGraphAuthoring() {
     await model.importLayout({dataProvider, signal});
 
     if (dataSource.type === 'url') {
-      const elements = [
-        model.createElement('http://www.w3.org/ns/org#Organization'),
-        model.createElement('http://www.w3.org/ns/org#FormalOrganization'),
-        model.createElement('http://www.w3.org/ns/org#hasMember'),
-        model.createElement('http://www.w3.org/ns/org#hasSubOrganization'),
-        model.createElement('http://www.w3.org/ns/org#subOrganizationOf'),
-        model.createElement('http://www.w3.org/ns/org#unitOf'),
+      const entities = [
+        'http://www.w3.org/ns/org#Organization',
+        'http://www.w3.org/ns/org#FormalOrganization',
+        'http://www.w3.org/ns/org#hasMember',
+        'http://www.w3.org/ns/org#hasSubOrganization',
+        'http://www.w3.org/ns/org#subOrganizationOf',
+        'http://www.w3.org/ns/org#unitOf',
       ];
-      await Promise.all([
-        model.requestElementData(elements.map(el => el.iri)),
-        model.requestLinks(),
-      ]);
+      for (const entity of entities) {
+        model.createElement(entity);
+      }
+      await model.requestData();
       await performLayout({signal});
     } else {
       getCommandBus(Reactodia.UnifiedSearchTopic)
@@ -91,7 +91,10 @@ export function PlaygroundGraphAuthoring() {
 
 class RenameSubclassOfProvider extends Reactodia.RenameLinkToLinkStateProvider {
   override canRename(link: Reactodia.Link): boolean {
-      return link.typeId === 'http://www.w3.org/2000/01/rdf-schema#subClassOf';
+      return (
+        link instanceof Reactodia.AnnotationLink ||
+        link.typeId === 'http://www.w3.org/2000/01/rdf-schema#subClassOf'
+      );
   }
 }
 
diff --git a/src/examples/PlaygroundSparql.tsx b/src/examples/PlaygroundSparql.tsx
index caf456e7..417d0616 100644
--- a/src/examples/PlaygroundSparql.tsx
+++ b/src/examples/PlaygroundSparql.tsx
@@ -53,15 +53,6 @@ export function PlaygroundSparql() {
       defaultLayout={defaultLayout}>
       <Reactodia.DefaultWorkspace
         menu={<ExampleToolbarMenu />}
-        canvasWidgets={[
-          <Reactodia.Toolbar key='sparql-settings'
-            dock='sw'
-            dockOffsetY={40}>
-            <SparqlConnectionAction settings={connectionSettings}
-                applySettings={applyConnectionSettings}
-            />
-          </Reactodia.Toolbar>
-        ]}
         languages={[
           {code: 'de', label: 'Deutsch'},
           {code: 'en', label: 'English'},
@@ -73,8 +64,14 @@ export function PlaygroundSparql() {
           {code: 'pt', label: 'português'},
           {code: 'ru', label: 'Русский'},
           {code: 'zh', label: '汉语'},
-        ]}
-      />
+        ]}>
+        <Reactodia.Toolbar dock='sw'
+          dockOffsetY={40}>
+          <SparqlConnectionAction settings={connectionSettings}
+            applySettings={applyConnectionSettings}
+          />
+        </Reactodia.Toolbar>
+      </Reactodia.DefaultWorkspace>
     </Reactodia.Workspace>
   );
 }
diff --git a/src/examples/PlaygroundStressTest.tsx b/src/examples/PlaygroundStressTest.tsx
index 7a68c15c..8b40d506 100644
--- a/src/examples/PlaygroundStressTest.tsx
+++ b/src/examples/PlaygroundStressTest.tsx
@@ -44,10 +44,7 @@ export function PlaygroundStressTest(props: {
       }));
     }
     batch.store();
-    await Promise.all([
-      model.requestElementData(nodes),
-      model.requestLinks(),
-    ]);
+    await model.requestData();
     model.history.reset();
 
     const canvas = view.findAnyCanvas();
diff --git a/src/examples/PlaygroundStyleCustomization.tsx b/src/examples/PlaygroundStyleCustomization.tsx
index 4e10d1ec..b9ce755d 100644
--- a/src/examples/PlaygroundStyleCustomization.tsx
+++ b/src/examples/PlaygroundStyleCustomization.tsx
@@ -66,13 +66,16 @@ export function PlaygroundStyleCustomization() {
             }
             return undefined;
           },
-          linkTemplateResolver: type => DoubleArrowLinkTemplate,
+          linkTemplateResolver: (linkType, link) => {
+            if (linkType) {
+              return DoubleArrowLinkTemplate;
+            }
+            return undefined;
+          },
         }}
-        canvasWidgets={[
-          <BookDecorations key='book-decorations' />
-        ]}
-        menu={<ExampleToolbarMenu />}
-      />
+        menu={<ExampleToolbarMenu />}>
+        <BookDecorations />
+      </Reactodia.DefaultWorkspace>
     </Reactodia.Workspace>
   );
 }
@@ -114,14 +117,22 @@ function ElementLabelDecoration(props: { target: Reactodia.EntityElement }) {
 }
 
 function BookDecorations() {
-  const {model} = Reactodia.useCanvas();
+  const {canvas, model} = Reactodia.useCanvas();
+
+  // Update decorations when graph content changes
+  Reactodia.useSyncStore(
+    Reactodia.useLayerDebouncedStore(
+      Reactodia.useEventStore(model.events, 'changeCells'),
+      canvas.renderingState
+    ),
+    () => model.cellsVersion
+  );
+
   return model.elements
     .filter(element => element instanceof Reactodia.EntityElement)
     .map(element => <BookDecoration key={element.id} target={element} />);
 }
 
-Reactodia.defineCanvasWidget(BookDecorations, element => ({element, attachment: 'viewport'}));
-
 // External element decoration, i.e. rendered outside the element template
 function BookDecoration(props: { target: Reactodia.EntityElement }) {
   const {target} = props;
@@ -167,7 +178,7 @@ const DoubleArrowLinkTemplate: Reactodia.LinkTemplate = {
     height: 12,
   },
   renderLink: props => (
-    <Reactodia.DefaultLink {...props}
+    <Reactodia.StandardRelation {...props}
       pathProps={{stroke: '#747da8', strokeWidth: 2}}
       primaryLabelProps={{
         style: {color: '#747da8'},
diff --git a/tsconfig.json b/tsconfig.json
index 3ba9f73d..12a8aa2d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,5 +5,8 @@
     "target": "ES2022",
     "lib": ["DOM", "ES2022"],
     "baseUrl": "."
-  }
+  },
+  "exclude": [
+    "./reactodia-workspace"
+  ]
 }