diff --git a/FlipViewer/package.json b/FlipViewer/package.json
index 1b36250..b259bb6 100644
--- a/FlipViewer/package.json
+++ b/FlipViewer/package.json
@@ -4,7 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "npx webpack --mode production"
+    "build": "npx webpack --mode production",
+    "build-dev": "npx webpack --mode development"
   },
   "author": "Pascal Grittmann",
   "license": "MIT",
diff --git a/FlipViewer/src/FlipBook.tsx b/FlipViewer/src/FlipBook.tsx
index 18ee920..25a728e 100644
--- a/FlipViewer/src/FlipBook.tsx
+++ b/FlipViewer/src/FlipBook.tsx
@@ -2,7 +2,7 @@ import { createRoot } from 'react-dom/client';
 import styles from './styles.module.css';
 import React, { createRef } from 'react';
 import { renderImage } from "./Render";
-import { ImageContainer, OnClickHandler } from './ImageContainer';
+import { ImageContainer, OnClickHandler, OnWheelHandler, OnMouseOverHandler, ImageContainerState, OnKeyHandler, setKeyPressed } from './ImageContainer';
 import { ToneMapControls } from './ToneMapControls';
 import { MethodList } from './MethodList';
 import { Tools } from './Tools';
@@ -11,9 +11,36 @@ import { ToneMapSettings, ZoomLevel } from './flipviewer';
 
 const UPDATE_INTERVAL_MS = 100;
 
+// Registry to update flipbooks
+export type BookRef = React.RefObject<FlipBook>;
+const registry = new Map<string, Set<BookRef>>();
+
+export function getBooks(id: string): BookRef[] {
+    return Array.from(registry.get(id) ?? new Set());
+}
+
+export function registerBook(id: string, ref: BookRef) {
+    if (!id) return;
+    const set = registry.get(id) ?? new Set<BookRef>();
+    set.add(ref);
+    registry.set(id, set);
+}
+
+export function unregisterBook(id: string, ref: BookRef) {
+    const set = registry.get(id);
+    if (!set) return;
+    set.delete(ref);
+    if (set.size === 0) registry.delete(id);
+}
+
+// to get only key presses and not is down state
+// Idea is to only fire events if state of key changes
+const keyPressed = new Set<string>();
+
 export class ToneMappingImage {
     currentTMO: string;
     dirty: boolean;
+    isPixelUpdate: boolean;
     canvas: HTMLCanvasElement;
     pixels: Float32Array | ImageData;
 
@@ -25,9 +52,10 @@ export class ToneMappingImage {
 
         let hdrImg = this;
         setInterval(function() {
-            if (!hdrImg.dirty) return;
-            hdrImg.dirty = false;
+            if (!hdrImg.dirty || hdrImg.isPixelUpdate)
+                return;
             renderImage(hdrImg.canvas, hdrImg.pixels, hdrImg.currentTMO);
+            hdrImg.dirty = false;
             onAfterRender();
         }, UPDATE_INTERVAL_MS)
     }
@@ -35,16 +63,46 @@ export class ToneMappingImage {
         this.currentTMO = tmo;
         this.dirty = true;
     }
+    setPixels(p: Float32Array | ImageData) {
+        this.isPixelUpdate = true;
+        this.pixels = p;
+        this.dirty = false;
+        renderImage(this.canvas, this.pixels, this.currentTMO);
+        this.isPixelUpdate = false;
+    }
 }
 
+
 type SelectUpdateFn = (groupName: string, newIdx: number) => void;
 var selectUpdateListeners: SelectUpdateFn[] = [];
 
+
+type TMOUpdateFn = (groupName: string, newTMOSettings: ToneMapSettings) => void;
+var tmoUpdateListeners: TMOUpdateFn[] = [];
+
+type imageConStateUpdateFn = (groupName: string, newImgConState: ImageContainerState) => void;
+var imgConStateUpdateListeners: imageConStateUpdateFn[] = [];
+
 export function SetGroupIndex(groupName: string, newIdx: number) {
     for (let fn of selectUpdateListeners)
         fn(groupName, newIdx);
 }
 
+
+export function SetGroupTMOSettings(groupName: string, newTMOSettings: ToneMapSettings)
+{
+    for (let fn of tmoUpdateListeners)
+        fn(groupName, newTMOSettings);
+}
+
+
+export function SetGroupImageContainerSettings(groupName: string, newImgConState: ImageContainerState)
+{
+    for (let fn of imgConStateUpdateListeners)
+        fn(groupName, newImgConState);
+}
+
+
 export interface FlipProps {
     names: string[];
     width: number;
@@ -57,11 +115,15 @@ export interface FlipProps {
     initialTMOOverrides: ToneMapSettings[];
     style?: React.CSSProperties;
     onClick?: OnClickHandler;
+    onWheel?: OnWheelHandler;
+    onMouseOver?: OnMouseOverHandler;
+    onKeyImageContainer?: OnKeyHandler;
     groupName?: string;
     hideTools: boolean;
+    idStr: string;
 }
 
-interface FlipState {
+export interface FlipState {
     selectedIdx: number;
     popupContent?: React.ReactNode;
     popupDurationMs?: number;
@@ -75,6 +137,7 @@ export class FlipBook extends React.Component<FlipProps, FlipState> {
 
     constructor(props : FlipProps) {
         super(props);
+
         this.state = {
             selectedIdx: 0,
             hideTools: props.hideTools
@@ -85,10 +148,35 @@ export class FlipBook extends React.Component<FlipProps, FlipState> {
         this.tools = createRef();
 
         this.onKeyDown = this.onKeyDown.bind(this);
+        this.onKeyUp = this.onKeyUp.bind(this);
         this.onSelectUpdate = this.onSelectUpdate.bind(this);
+        this.onTMOUpdate = this.onTMOUpdate.bind(this);
+    }
+
+    onKeyUp(evt: React.KeyboardEvent<HTMLDivElement>) {
+        // trigger callbacks
+        if(this.props.onKeyImageContainer && keyPressed.has(evt.key))
+        {
+            keyPressed.delete(evt.key);
+            evt.preventDefault();
+
+            if(keyPressed.size == 0)
+                setKeyPressed(false);
+
+            this.props.onKeyImageContainer(this.state.selectedIdx, this.props.idStr, evt.key, false);
+        }
     }
 
     onKeyDown(evt: React.KeyboardEvent<HTMLDivElement>) {
+        // trigger callbacks
+        if(this.props.onKeyImageContainer && !keyPressed.has(evt.key))
+        {
+            keyPressed.add(evt.key);
+            evt.preventDefault();
+            setKeyPressed(true);
+            this.props.onKeyImageContainer(this.state.selectedIdx, this.props.idStr, evt.key, true);
+        }
+
         let newIdx = this.state.selectedIdx;
         if (evt.key === "ArrowLeft" || evt.key === "ArrowDown") {
             newIdx = this.state.selectedIdx - 1;
@@ -138,7 +226,13 @@ export class FlipBook extends React.Component<FlipProps, FlipState> {
             evt.stopPropagation();
         }
 
-        if (evt.key === "r") {
+        if (evt.ctrlKey && evt.key === 'r') {
+            this.tmoCtrls.current.state.globalSettings.exposure = 0;
+            evt.stopPropagation();
+            evt.preventDefault();
+        }
+
+        if (!evt.ctrlKey && evt.key === "r") {
             this.reset();
             evt.stopPropagation();
         }
@@ -147,6 +241,9 @@ export class FlipBook extends React.Component<FlipProps, FlipState> {
             this.setState({hideTools: !this.state.hideTools});
             evt.stopPropagation();
         }
+
+
+        this.updateTMOSettings(this.tmoCtrls.current.state.globalSettings);
     }
 
     reset() {
@@ -236,6 +333,13 @@ export class FlipBook extends React.Component<FlipProps, FlipState> {
         else this.setState({selectedIdx: newIdx});
     }
 
+
+    updateTMOSettings(newTMOSettings: ToneMapSettings){
+        if (this.props.groupName) SetGroupTMOSettings(this.props.groupName, newTMOSettings);
+        else this.tmoCtrls.current.applySettings(newTMOSettings);
+
+    }
+
     render(): React.ReactNode {
         let popup = null;
         if (this.state.popupContent) {
@@ -249,7 +353,7 @@ export class FlipBook extends React.Component<FlipProps, FlipState> {
         }
 
         return (
-            <div className={styles['flipbook']} style={this.props.style} onKeyDown={this.onKeyDown}>
+            <div className={styles['flipbook']} style={this.props.style} onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp}>
                 <div style={{display: "contents"}}>
                     <MethodList
                         names={this.props.names}
@@ -265,6 +369,9 @@ export class FlipBook extends React.Component<FlipProps, FlipState> {
                         selectedIdx={this.state.selectedIdx}
                         onZoom={(zoom) => this.tools.current.onZoom(zoom)}
                         onClick={this.props.onClick}
+                        onWheel={this.props.onWheel}
+                        onMouseOver={this.props.onMouseOver}
+                        onStateChange={(st) => this.onImageContainerUpdate(st)}
                     >
                         {popup}
                         <button className={styles.toolsBtn}
@@ -302,16 +409,51 @@ export class FlipBook extends React.Component<FlipProps, FlipState> {
         }
     }
 
+
+    onTMOUpdate(groupName: string, newTMOSettings: ToneMapSettings) {
+        if (groupName == this.props.groupName) {
+            this.tmoCtrls.current.applySettings(newTMOSettings);
+        }
+    }
+
+
+    // is called when onStateIsChanged in ImageContainer is called
+    // everytime when the ImageContainerState changes (pos, zoom, etc.)
+    // calls onImageContainerGroupUpdate = ()
+    onImageContainerUpdate(newImageContainerState: ImageContainerState) {
+        if (this.props.groupName) {
+            SetGroupImageContainerSettings(this.props.groupName, newImageContainerState);
+        }
+    }
+
+
+    // is called when other flipbook's ImageContainerStates changes
+    onImageContainerGroupUpdate = (groupName: string, newImageContainerState: ImageContainerState) => {
+        if (groupName === this.props.groupName && this.imageContainer.current) {
+            this.imageContainer.current.setState(newImageContainerState);
+        }
+    }
+
     componentDidMount(): void {
         if (this.props.initialZoom)
             this.imageContainer.current.setZoom(this.props.initialZoom);
 
         selectUpdateListeners.push(this.onSelectUpdate);
+        tmoUpdateListeners.push(this.onTMOUpdate);
+        imgConStateUpdateListeners.push(this.onImageContainerGroupUpdate);
     }
 
     componentWillUnmount(): void {
         let idx = selectUpdateListeners.findIndex(v => v === this.onSelectUpdate);
         selectUpdateListeners.splice(idx, 1);
+
+
+        idx = tmoUpdateListeners.findIndex(v => v === this.onTMOUpdate);
+        tmoUpdateListeners.splice(idx, 1);
+
+
+        idx = imgConStateUpdateListeners.findIndex(v => v === this.onImageContainerGroupUpdate);
+        imgConStateUpdateListeners.splice(idx, 1);
     }
 
     connect(other: React.RefObject<FlipBook>) {
@@ -381,8 +523,14 @@ export type FlipBookParams = {
     initialTMO: ToneMapSettings,
     initialTMOOverrides: ToneMapSettings[],
     onClick?: OnClickHandler,
+    onWheel?: OnWheelHandler,
+    onMouseOver?: OnMouseOverHandler,
+    onKeyImageContainer?: OnKeyHandler,
+    // onKeyUpIC?: OnKeyUpHandler,
     colorTheme?: string,
     hideTools: boolean,
+    containerId: string,
+    id: string,
 }
 
 export function AddFlipBook(params: FlipBookParams, groupName?: string) {
@@ -415,8 +563,10 @@ export function AddFlipBook(params: FlipBookParams, groupName?: string) {
     let themeStyle = colorThemes[params.colorTheme ?? "dark"];
 
     const root = createRoot(params.parentElement);
+    const bookRef = createRef<FlipBook>();
     root.render(
         <FlipBook
+            ref={bookRef}
             names={params.names}
             width={params.width}
             height={params.height}
@@ -427,14 +577,22 @@ export function AddFlipBook(params: FlipBookParams, groupName?: string) {
             initialTMO={params.initialTMO}
             initialTMOOverrides={params.initialTMOOverrides}
             onClick={params.onClick}
+            onWheel={params.onWheel}
+            onMouseOver={params.onMouseOver}
+            onKeyImageContainer={params.onKeyImageContainer}
             style={themeStyle}
             groupName={groupName}
             hideTools={params.hideTools}
+            idStr={params.id}
         />
     );
 
+    if(params.id)
+        registerBook(params.id, bookRef);
+
     new MutationObserver(_ => {
         if (!document.body.contains(params.parentElement)) {
+            unregisterBook(params.id, bookRef);
             root.unmount();
         }
     }).observe(document.body, {childList: true, subtree: true});
diff --git a/FlipViewer/src/ImageContainer.tsx b/FlipViewer/src/ImageContainer.tsx
index bcb7503..7a1ca25 100644
--- a/FlipViewer/src/ImageContainer.tsx
+++ b/FlipViewer/src/ImageContainer.tsx
@@ -5,7 +5,20 @@ import { Magnifier, formatNumber } from './Magnifier';
 import { ZoomLevel } from './flipviewer';
 import { JSX } from 'react/jsx-runtime';
 
-export type OnClickHandler = (col: number, row: number, event: MouseEvent) => void
+export type OnClickHandler = (buttom: number) => void
+export type OnWheelHandler = (deltaY: number) => void
+export type OnMouseOverHandler = (col: number, row: number) => void
+export type OnKeyHandler = (selectedIdx: number, keyStr: string, keyPressed: string, isPressedDown: boolean) => void
+// export type OnKeyUpHandler = (selectedIdx: number, keyStr: string, keyReleased: string, isPressedDown: boolean) => void
+
+let magnifierResolution = 1;
+let flagXSwapped = false;
+let flagYSwapped = false;
+
+let isAnyKeyPressed = false;
+export function setKeyPressed(value: boolean): void {
+    isAnyKeyPressed = value;
+}
 
 export interface ImageContainerProps {
     width: number;
@@ -15,11 +28,14 @@ export interface ImageContainerProps {
     selectedIdx: number;
     onZoom: (zoom: number) => void;
     onClick?: OnClickHandler;
+    onWheel?: OnWheelHandler;
+    onMouseOver?: OnMouseOverHandler;
     children: React.ReactNode;
     means: number[];
+    onStateChange?: (state: ImageContainerState) => void;
 }
 
-interface ImageContainerState {
+export interface ImageContainerState { 
     posX: number;
     posY: number;
     scale: number;
@@ -29,6 +45,7 @@ interface ImageContainerState {
     magnifierVisible: boolean;
     magnifierRow?: number;
     magnifierCol?: number;
+    magnifierPixelCoordsBelow: boolean;
 
     cropX?: number;
     cropY?: number;
@@ -39,7 +56,7 @@ interface ImageContainerState {
     cropMeans?: number[];
 }
 
-const magnifierPadding = 10;
+const magnifierPadding = 15;
 
 export class ImageContainer extends React.Component<ImageContainerProps, ImageContainerState> {
     canvasRefs: React.RefObject<HTMLCanvasElement>[];
@@ -54,6 +71,7 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
             posY: 0,
             scale: 1,
             magnifierVisible: false,
+            magnifierPixelCoordsBelow: false,
             cropActive: false,
             cropDragging: false,
         };
@@ -71,22 +89,98 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
         this.onMouseOutOverImage = this.onMouseOutOverImage.bind(this);
         this.onWheel = this.onWheel.bind(this);
         this.onClick = this.onClick.bind(this);
+
+        this.props.onStateChange?.(this.state); 
     }
 
     shiftImage(dx: number, dy: number) {
         this.setState({
             posX: this.state.posX + dx,
             posY: this.state.posY + dy
+        }, () => { 
+            this.props.onStateChange?.(this.state); // callback
         });
     }
 
-    offset(event: React.MouseEvent) {
+    offset(event: React.MouseEvent | WheelEvent) {
         let bounds = this.imgPlacer.current.getBoundingClientRect();
         let x = event.clientX - bounds.left;
         let y = event.clientY - bounds.top;
         return { x: x, y: y };
     }
 
+    // computes offset of the magnifier (decides where to place magnifier around mouse)
+    offsetMagnifier(event: React.MouseEvent<HTMLDivElement>) {
+        let magnifierSizeX = parseInt(styles.magnifierWidth, 10) * (2 * magnifierResolution + 1);
+        let magnifierSizeY = parseInt(styles.magnifierHeight, 10) * (2 * magnifierResolution + 1);
+        let flipSizeX = this.container.current.clientWidth;
+        let flipSizeY = this.container.current.clientHeight - 20;
+        let paddingX = magnifierPadding;
+        let paddingY = magnifierPadding;
+
+        let posX = event.pageX - this.container.current.getBoundingClientRect().x;
+        let posY = event.pageY - this.container.current.getBoundingClientRect().y - window.scrollY;
+
+        let offsetX = 0;
+        let offsetY = 0;
+
+        if(!flagXSwapped)
+        {
+            offsetX = 0;
+            let tmpX = flipSizeX - posX;
+        
+            tmpX -= (paddingX + magnifierSizeX);
+            tmpX = Math.min(tmpX, 0);
+        
+            if(tmpX < 0)
+            {
+                offsetX = -(magnifierSizeX + 2 * paddingX);
+            
+                flagXSwapped = true;
+            }
+        }
+        else
+        {
+            offsetX = -(magnifierSizeX + 2 * paddingX);
+            let tmpX = posX - (paddingX + magnifierSizeX);
+            tmpX = Math.min(tmpX, 0);
+        
+            if(tmpX < 0)
+            {
+                offsetX = 0
+                flagXSwapped = false;
+            }
+        }
+        if(!flagYSwapped)
+        {
+            offsetY = 0;
+            let tmpY = flipSizeY - posY;
+        
+            tmpY -= (paddingY + magnifierSizeY);
+            tmpY = Math.min(tmpY, 0);
+        
+            if(tmpY < 0)
+            {
+                offsetY = -(magnifierSizeY + 2 * paddingY + 10);
+                flagYSwapped = true;
+            }
+        }
+        else
+        {
+            offsetY = -(magnifierSizeY + 2 * paddingY + 10);
+            let tmpY = posY - (paddingY + magnifierSizeY);
+            tmpY = Math.min(tmpY, 0);
+        
+            if(tmpY < 0)
+            {
+                offsetY = 0
+                flagYSwapped = false;
+            }
+        }
+
+        return { offsetX: offsetX, offsetY: offsetY };
+    }
+
     onMouseMoveOverImage(event: React.MouseEvent<HTMLDivElement>) {
         let xy = this.offset(event);
 
@@ -95,21 +189,33 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
 
         if ((event.buttons & 2) == 0)
         {
-            this.setState({magnifierVisible: false});
+            this.setState({magnifierVisible: false}, () => { 
+            this.props.onStateChange?.(this.state); // callback
+        });
             return;
         }
 
+        // computes offset of the magnifier (decides where to place magnifier)
+        let offset = this.offsetMagnifier(event);
+
         this.setState({
             magnifierVisible: true,
-            magnifierX: xy.x + magnifierPadding,
-            magnifierY: xy.y + magnifierPadding,
+            magnifierPixelCoordsBelow: flagYSwapped,
+            magnifierX: xy.x + magnifierPadding + offset.offsetX,
+            magnifierY: xy.y + magnifierPadding + offset.offsetY,
             magnifierCol: curPixelCol,
-            magnifierRow: curPixelRow
+            magnifierRow: curPixelRow,
+        }, () => { 
+            this.props.onStateChange?.(this.state); // callback
         });
     }
 
     onMouseOutOverImage(event: React.MouseEvent<HTMLDivElement>) {
-        this.setState({magnifierVisible: false});
+        this.setState({magnifierVisible: false}, 
+            () => { 
+                this.props.onStateChange?.(this.state); // callback
+            }
+        );
     }
 
     computeCropMeans() {
@@ -159,7 +265,9 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
             means.push(m);
         }
 
-        this.setState({cropMeans: means});
+        this.setState({cropMeans: means}, () => { 
+            this.props.onStateChange?.(this.state); // callback
+        });
     }
 
     onClick(event: React.MouseEvent<HTMLDivElement>) {
@@ -171,19 +279,23 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
 
         if (this.props.onClick)
         {
-            this.props.onClick(curPixelCol, curPixelRow, event.nativeEvent);
+            this.props.onClick(event.button);
         }
 
         // Confirm or remove the crop box
-        if (event.ctrlKey && this.state.cropActive) {
+        if (event.shiftKey && this.state.cropActive) {
             if (this.state.cropWidth === 0 || this.state.cropHeight === 0 || !this.state.cropDragging) {
                 this.setState({
                     cropActive: false,
                     cropDragging: false,
+                }, () => { 
+                    this.props.onStateChange?.(this.state); // callback
                 });
             } else {
                 this.setState({
                     cropDragging: false
+                }, () => { 
+                    this.props.onStateChange?.(this.state); // callback
                 });
                 this.computeCropMeans();
             }
@@ -191,9 +303,20 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
     }
 
     onMouseMove(event: React.MouseEvent<HTMLDivElement>) {
+        // Mouse event callback
+        let xy = this.offset(event);
+        let curPixelCol = Math.floor(xy.x / this.state.scale);
+        let curPixelRow = Math.floor(xy.y / this.state.scale);
+        curPixelCol = Math.min(Math.max(curPixelCol, 0), this.props.width - 1);
+        curPixelRow = Math.min(Math.max(curPixelRow, 0), this.props.height - 1);
+        if (this.props.onMouseOver)
+        {
+            this.props.onMouseOver(curPixelCol, curPixelRow);
+        }
+
         // If left mouse button down
         if ((event.buttons & 1) == 1) {
-            if (event.ctrlKey) {
+            if (event.shiftKey) {
                 let xy = this.offset(event);
                 let curPixelCol = Math.floor(xy.x / this.state.scale);
                 let curPixelRow = Math.floor(xy.y / this.state.scale);
@@ -204,6 +327,8 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
                     this.setState({
                         cropHeight: curPixelRow - this.state.cropY,
                         cropWidth: curPixelCol - this.state.cropX,
+                    }, () => { 
+                        this.props.onStateChange?.(this.state); // callback
                     });
                 } else {
                     this.setState({
@@ -213,6 +338,8 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
                         cropY: curPixelRow,
                         cropHeight: 0,
                         cropWidth: 0,
+                    }, () => { 
+                        this.props.onStateChange?.(this.state); // callback
                     });
                 }
             } else {
@@ -221,55 +348,75 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
         }
     }
 
-    onWheel(event: WheelEvent) {
-        if (event.altKey) return; // holding alt allows to scroll over the image
-
-        const ScrollSpeed = 0.25;
-        const MaxScale = 100;
-        const MinScale = 0.05;
-
-        const oldScale = this.state.scale;
-        const scale = oldScale * (1 - Math.sign(event.deltaY) * ScrollSpeed);
-        const factor = scale / oldScale;
-
-        if (scale > MaxScale || scale < MinScale) return;
-
-        // Adjust the position of the top left corner, so we get a scale pivot at the mouse cursor.
-        var relX = event.offsetX;
-        var relY = event.offsetY;
+    // Native Browser WheelEvent
+    // while wheeling over flipbook, website scroll is disabled
+    onWheelNative(event: WheelEvent)
+    {
+        if(event.ctrlKey || isAnyKeyPressed)
+            event.preventDefault();
+    }
 
-        if (event.target === this.container.current) {
-            // Map position outside the image to a hypothetical pixel position
-            relX -= this.state.posX;
-            relY -= this.state.posY;
-        } else if (event.target === this.cropMarker.current) {
-            // Map position wihtin the crop marker to the image position
-            relX += this.state.cropX * oldScale;
-            relY += this.state.cropY * oldScale;
+    onWheel(event: React.WheelEvent<HTMLDivElement>) {
+        if(event.ctrlKey)
+        {
+            const ScrollSpeed = 0.25;
+            const MaxScale = 100;
+            const MinScale = 0.05;
+            
+            const oldScale = this.state.scale;
+            const scale = oldScale * (1 - Math.sign(event.deltaY) * ScrollSpeed);
+            const factor = scale / oldScale;
+            
+            if (scale > MaxScale || scale < MinScale) return;
+            
+            // Adjust the position of the top left corner, so we get a scale pivot at the mouse cursor.
+            var relX = event.nativeEvent.offsetX;
+            var relY = event.nativeEvent.offsetY;
+            
+            if (event.target === this.container.current) {
+                // Map position outside the image to a hypothetical pixel position
+                relX -= this.state.posX;
+                relY -= this.state.posY;
+            } else if (event.target === this.cropMarker.current) {
+                // Map position wihtin the crop marker to the image position
+                relX += this.state.cropX * oldScale;
+                relY += this.state.cropY * oldScale;
+            }
+        
+            var deltaX = (1 - factor) * relX;
+            var deltaY = (1 - factor) * relY;
+        
+            let bounds = this.imgPlacer.current.getBoundingClientRect();
+            let x = event.clientX - bounds.left;
+            let y = event.clientY - bounds.top;
+
+            // computes offset of the magnifier (decides where to place magnifier)
+            let offset = this.offsetMagnifier(event);
+        
+            this.shiftImage(deltaX, deltaY);
+            this.setState({
+                scale: scale,
+                magnifierX: x + magnifierPadding - deltaX + offset.offsetX,
+                magnifierY: y + magnifierPadding - deltaY + offset.offsetY,
+            }, () => { 
+                this.props.onStateChange?.(this.state); // callback
+            });
+        
+            // event.stopPropagation();
+        
+            // keep the manual input in sync
+            this.props.onZoom(this.state.scale * window.devicePixelRatio);
+        }
+        else if (this.props.onWheel)
+        {
+            this.props.onWheel(event.deltaY);
         }
-
-        var deltaX = (1 - factor) * relX;
-        var deltaY = (1 - factor) * relY;
-
-        let bounds = this.imgPlacer.current.getBoundingClientRect();
-        let x = event.clientX - bounds.left;
-        let y = event.clientY - bounds.top;
-
-        this.shiftImage(deltaX, deltaY);
-        this.setState({
-            scale: scale,
-            magnifierX: x + magnifierPadding - deltaX,
-            magnifierY: y + magnifierPadding - deltaY,
-        });
-
-        event.preventDefault();
-
-        // keep the manual input in sync
-        this.props.onZoom(this.state.scale * window.devicePixelRatio);
     }
 
     centerView() {
-        this.setState({posX: 0, posY: 0});
+        this.setState({posX: 0, posY: 0}, () => { 
+            this.props.onStateChange?.(this.state); // callback
+        });
     }
 
     setZoom(zoom: ZoomLevel) {
@@ -285,7 +432,9 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
                 // number of _device_ pixels used as the image contains
                 scale = (zoom as number) / window.devicePixelRatio;
         }
-        this.setState({scale: scale});
+        this.setState({scale: scale}, () => { 
+            this.props.onStateChange?.(this.state); // callback
+        });
         this.centerView();
         this.props.onZoom(scale * window.devicePixelRatio);
     }
@@ -313,8 +462,9 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
                 row={this.state.magnifierRow}
                 x={this.state.magnifierX}
                 y={this.state.magnifierY}
-                resolution={2}
+                resolution={magnifierResolution}
                 image={this.props.toneMappers[this.props.selectedIdx]}
+                pixelCoordBelow={this.state.magnifierPixelCoordsBelow}
             />
         }
 
@@ -372,6 +522,7 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
                     onMouseOut={this.onMouseOutOverImage}
                     onMouseDown={this.onMouseMoveOverImage}
                     onClick={this.onClick}
+                    onWheel={this.onWheel}
                 >
                     {canvases}
                     {magnifier}
@@ -394,10 +545,10 @@ export class ImageContainer extends React.Component<ImageContainerProps, ImageCo
             this.props.toneMappers[i] = new ToneMappingImage(img, canvas, () => { });
         }
 
-        this.container.current.addEventListener('wheel', this.onWheel, { passive: false })
+        this.container.current.addEventListener('wheel', this.onWheelNative, { passive: false })
     }
 
     componentWillUnmount(): void {
-        this.container.current.removeEventListener('wheel', this.onWheel)
+        this.container.current.removeEventListener('wheel', this.onWheelNative)
     }
 }
diff --git a/FlipViewer/src/Magnifier.tsx b/FlipViewer/src/Magnifier.tsx
index a37b5a8..3104f5b 100644
--- a/FlipViewer/src/Magnifier.tsx
+++ b/FlipViewer/src/Magnifier.tsx
@@ -9,6 +9,7 @@ export interface MagnifierProps {
     y: number;
     resolution: number;
     image: ToneMappingImage;
+    pixelCoordBelow: boolean;
 }
 
 interface MagnifierState {
@@ -124,7 +125,22 @@ export class Magnifier extends React.Component<MagnifierProps, MagnifierState> {
             );
         }
 
-        return (
+        if(this.props.pixelCoordBelow)
+        {
+            return (
+            <div className={styles.magnifier} style={{ left: this.props.x, top: this.props.y }}>
+                <table className={styles.magnifier}>
+                    <tbody>
+                        {rows}
+                    </tbody>
+                </table>
+                <p className={styles.pixelCoords}>{this.props.col}, {this.props.row}</p>
+            </div>
+            );
+        }
+        else
+        {
+            return (
             <div className={styles.magnifier} style={{ left: this.props.x, top: this.props.y }}>
                 <p className={styles.pixelCoords}>{this.props.col}, {this.props.row}</p>
                 <table className={styles.magnifier}>
@@ -134,5 +150,6 @@ export class Magnifier extends React.Component<MagnifierProps, MagnifierState> {
                 </table>
             </div>
         );
+        }
     }
 }
\ No newline at end of file
diff --git a/FlipViewer/src/Popup.tsx b/FlipViewer/src/Popup.tsx
index 75eb439..8d53ea2 100644
--- a/FlipViewer/src/Popup.tsx
+++ b/FlipViewer/src/Popup.tsx
@@ -17,7 +17,7 @@ export class Popup extends React.Component<PopupProps, PopupState> {
 
     render(): React.ReactNode {
         return (
-            <div className={styles.popup} onClick={this.props.unmount}>
+            <div className={styles.popup} onClick={this.props.unmount} onWheel={this.props.unmount}>
                 {this.props.children}
             </div>
         );
diff --git a/FlipViewer/src/ToneMapControls.tsx b/FlipViewer/src/ToneMapControls.tsx
index a86a3d6..5acee2a 100644
--- a/FlipViewer/src/ToneMapControls.tsx
+++ b/FlipViewer/src/ToneMapControls.tsx
@@ -92,6 +92,10 @@ export class ToneMapControls extends React.Component<ToneMapControlsProps, ToneM
         }
     }
 
+    public applySettings(settings: ToneMapSettings) {
+        this.setState({ globalSettings: settings }, () => this.apply());
+    } 
+
     stepExposure(reduce: boolean) {
         let state = this.state.globalSettings;
         if (this.state.soloMode[this.props.selectedIdx])
diff --git a/FlipViewer/src/flipviewer.ts b/FlipViewer/src/flipviewer.ts
index 77f2912..47f01c7 100644
--- a/FlipViewer/src/flipviewer.ts
+++ b/FlipViewer/src/flipviewer.ts
@@ -1,5 +1,5 @@
-import { AddFlipBook, SetGroupIndex } from "./FlipBook";
-import { OnClickHandler } from "./ImageContainer";
+import { AddFlipBook, FlipBook, getBooks, SetGroupIndex } from "./FlipBook";
+import { OnClickHandler, OnKeyHandler, OnMouseOverHandler, OnWheelHandler } from "./ImageContainer";
 
 async function readRGBE(url: string) {
     const response = await fetch(url);
@@ -78,6 +78,7 @@ export type FlipData = {
     initialTMO: ToneMapSettings;
     initialTMOOverrides: ToneMapSettings[]
     containerId: string;
+    id: string;
     colorTheme?: string;
     groupName?: string;
     hideTools: boolean;
@@ -105,10 +106,7 @@ function AsFlipData(data: FlipData | string): FlipData {
         return data;
 }
 
-export async function MakeFlipBook(data: FlipData | string, onClick?: OnClickHandler) {
-    data = AsFlipData(data);
-
-    let work: Promise<Float32Array | HTMLImageElement>[] = [];
+async function CollectImages(data: FlipData, work: Promise<Float32Array | HTMLImageElement>[]) {
     for (let i = 0; i < data.dataUrls.length; ++i) {
         let loadFn;
         switch (data.types[i]) {
@@ -121,8 +119,15 @@ export async function MakeFlipBook(data: FlipData | string, onClick?: OnClickHan
         }
         work.push(loadFn(data.dataUrls[i]));
     }
+}
 
+export async function MakeFlipBook(data: FlipData | string, onClick?: OnClickHandler, onWheel?: OnWheelHandler, onMouseOver?: OnMouseOverHandler, onKey?: OnKeyHandler) {
+    data = AsFlipData(data);
+
+    let work: Promise<Float32Array | HTMLImageElement>[] = [];
+    CollectImages(data, work);
     let values = await Promise.all(work);
+
     return AddFlipBook({
         parentElement: document.getElementById(data.containerId),
         names: data.names,
@@ -133,11 +138,36 @@ export async function MakeFlipBook(data: FlipData | string, onClick?: OnClickHan
         initialTMO: data.initialTMO,
         initialTMOOverrides: data.initialTMOOverrides,
         onClick: onClick,
+        onWheel: onWheel,
+        onMouseOver: onMouseOver,
+        onKeyImageContainer: onKey,
         colorTheme: data.colorTheme,
         hideTools: data.hideTools,
+        containerId: data.containerId,
+        id: data.id,
     }, data.groupName);
 }
 
+export async function UpdateImage(data: FlipData | string) {
+    data = AsFlipData(data);
+
+    let work: Promise<Float32Array | HTMLImageElement>[] = [];
+    CollectImages(data, work);
+    let images = await Promise.all(work);
+
+    // iterate over all registered flipbooks
+    // update image of flipbooks with groupname data.groupname
+    for(const ref of getBooks(data.id)) {
+        const book = ref.current;
+
+        if(!book)
+            continue;
+
+        const tms = book.props.toneMappers;
+        tms[book.state.selectedIdx].setPixels(images[0] as (Float32Array<ArrayBufferLike>));
+    }
+}
+
 export function UpdateFlipGroupSelection(groupName: string, newIdx: number) {
     SetGroupIndex(groupName, newIdx);
-}
\ No newline at end of file
+}
diff --git a/FlipViewer/src/styles.module.css b/FlipViewer/src/styles.module.css
index 45f0d02..5f469a6 100644
--- a/FlipViewer/src/styles.module.css
+++ b/FlipViewer/src/styles.module.css
@@ -146,13 +146,24 @@ table.magnifier {
     border-spacing: 0;
 }
 
+:root {
+    --width: 70px;
+    --height: 70px;
+    --font-size: 14px;
+}
+
+:export {
+    magnifierWidth: 70px;
+    magnifierHeight: 70px;
+}
+
 td.magnifier {
-    width: 70px;
-    min-width: 70px;
-    max-width: 70px;
-    height: 70px;
-    min-height: 70px;
-    max-height: 70px;
+    width: var(--width);
+    min-width: var(--width);
+    max-width: var(--width);
+    height: var(--height);
+    min-height: var(--height);
+    max-height: var(--height);
     text-align: center;
     padding: 0;
     vertical-align: middle;
@@ -163,7 +174,7 @@ td.magnifier {
 
 p.magnifier {
     margin: 0;
-    font-size: 14px;
+    font-size: var(--font-size);
     font-weight: bold;
     font-family: monospace;
     color: black;
diff --git a/SimpleImageIO/FlipBook.cs b/SimpleImageIO/FlipBook.cs
index 426beeb..fa286bc 100644
--- a/SimpleImageIO/FlipBook.cs
+++ b/SimpleImageIO/FlipBook.cs
@@ -210,6 +210,21 @@ public static string HeaderScript
     string theme;
     string groupName;
     bool hideTools;
+    string containerId = null;
+
+    /// <summary>
+    /// Unique ID used to identify this flipbook in event handlers and to update images.
+    /// </summary>
+    public string ID { get; private set; } = Guid.NewGuid().ToString();
+
+    /// <summary>
+    /// Returns a image from the list images
+    /// </summary>
+    /// <param name="index"></param>
+    /// <returns></returns>
+    public Image GetImage(int index) {
+        return images[index].Image;
+    }
 
     /// <summary>
     /// Syntactic sugar to create a new object of this class. Makes the fluent API more readable.
@@ -281,6 +296,15 @@ public FlipBook SetToolVisibility(bool visible) {
         return this;
     }
 
+    /// <summary>
+    /// Replaces the default GUID <see cref="ID" /> by a user-defined value.
+    /// This must be unique across all FlipBooks in the same HTML page.
+    /// </summary>
+    public FlipBook SetID(string ID) {
+        this.ID = ID;
+        return this;
+    }
+
     /// <summary>
     /// Adds a new image to this flip book.
     /// </summary>
@@ -289,8 +313,7 @@ public FlipBook SetToolVisibility(bool visible) {
     /// <param name="targetType">Data type to use for this image's pixels</param>
     /// <param name="tmoOverride">If not null, this image will use its own tone mapping settings</param>
     /// <returns>This object (fluent API)</returns>
-    public FlipBook Add(string name, Image image, DataType targetType = DataType.RGBE, InitialTMO tmoOverride = null)
-    {
+    public FlipBook Add(string name, Image image, DataType targetType = DataType.RGBE, InitialTMO tmoOverride = null) {
         if (images.Count > 0 && (images[0].Image.Width != image.Width || images[0].Image.Height != image.Height))
             throw new ArgumentException("Image resolution does not match", nameof(image));
         images.Add((name, image, targetType, tmoOverride));
@@ -364,10 +387,7 @@ public override string ToString() {
         return code.Html + $"<script>{code.ScriptFn}({code.Data});</script>";
     }
 
-    /// <summary>
-    /// Generates the HTML and JS for the flip book and returns them separately.
-    /// </summary>
-    public GeneratedCode Generate() {
+    private GeneratedCode GenerateInternal(int? index) {
         if (images.Count == 0)
             throw new InvalidOperationException("No images in the flip book");
 
@@ -376,8 +396,13 @@ public GeneratedCode Generate() {
         List<string> nameStrs = new();
         int width = images[0].Image.Width;
         int height = images[0].Image.Height;
-        foreach (var img in images)
+        for (int i = 0; i < images.Count; i++)
         {
+            if(index.HasValue && index.Value != i)
+                continue;
+
+            var img = images[i];
+
             if (width != img.Image.Width || height != img.Image.Height)
                 throw new InvalidOperationException("Image resolutions differ");
 
@@ -404,8 +429,10 @@ public GeneratedCode Generate() {
             nameStrs.Add(img.Name);
         }
 
-        string id = "flipbook-" + Guid.NewGuid().ToString();
-        string html = $"<div id='{id}' style='width:{htmlWidth}px; height:{htmlHeight}px; resize: both; overflow: auto;'></div>";
+        if (String.IsNullOrEmpty(this.containerId))
+            this.containerId = "flipbook-" + Guid.NewGuid().ToString();
+
+        string html = $"<div id='{this.containerId}' style='width:{htmlWidth}px; height:{htmlHeight}px; resize: both; overflow: auto;'></div>";
 
         string initialTMOStr = "null";
         if (initialTMO != null) {
@@ -424,7 +451,8 @@ public GeneratedCode Generate() {
         {
             "width": {{width}},
             "height": {{height}},
-            "containerId": "{{id}}",
+            "containerId": "{{this.containerId}}",
+            "id": {{JsonSerializer.Serialize(ID)}},
             "initialZoom": {{initialZoom.ToString()}},
             "initialTMO": {{initialTMOStr}},
             "initialTMOOverrides": [
@@ -439,7 +467,27 @@ public GeneratedCode Generate() {
         }
         """;
 
-        return new(html, json, "flipbook.MakeFlipBook", id);
+        return new(html, json, "flipbook.MakeFlipBook", this.containerId);
+    }
+
+    /// <summary>
+    /// Generates the HTML and JS for the flip book and returns them separately.
+    /// The HTML code must not be added more than once to the same page. This is
+    /// the case even if this function is invoked multiple times
+    /// (because the HTML is always the same).
+    /// </summary>
+    public GeneratedCode Generate() => GenerateInternal(null);
+
+    /// <summary>
+    /// Replaces the image with the given index by a new one.
+    /// Assumes that <see cref="Generate()"/> was called before.
+    /// </summary>
+    /// <returns>JSON and JS code that must be output to the browser to change the image.
+    /// The HTML code is unchanged from the one returned by <see cref="Generate()"/> </returns>
+    public GeneratedCode ReplaceImage(Image newImage, int index)
+    {
+        images[index] = images[index] with { Image = newImage };
+        return GenerateInternal(index);
     }
 
     /// <summary>
@@ -477,4 +525,4 @@ public FlipBook AddAll(IEnumerable<(string, Image)> images,
         }
         return this;
     }
-}
+}
\ No newline at end of file
diff --git a/SimpleImageIO/Metrics.cs b/SimpleImageIO/Metrics.cs
index bc8bb28..fb83876 100644
--- a/SimpleImageIO/Metrics.cs
+++ b/SimpleImageIO/Metrics.cs
@@ -59,6 +59,11 @@ public static Image MSEImage(Image image, Image reference) {
         });
     }
 
+    /// <summary>
+    /// Computes the absolute error image between two images.
+    /// </summary>
+    public static Image AbsErrorImage(Image a, Image b) => Image.ApplyOp(a, b, (x, y) => Math.Abs(x - y));
+
     /// <summary>
     /// Computes the relative mean square error of two images. Ignores a small percentage of the
     /// brightest pixels. The result is less obscured by outliers this way.
diff --git a/justfile b/justfile
index 146811a..e1d0830 100644
--- a/justfile
+++ b/justfile
@@ -16,14 +16,19 @@ clean:
 clean:
   rm -rf ./prebuilt
 
-# builds flipbook.js via npm
 [working-directory: 'FlipViewer']
-frontend:
+_frontend mode:
   npm install
-  npm run build
+  npm run build{{mode}}
   echo "Copying .js to python package..."
   cp ./dist/flipbook.js ../PyWrapper/simpleimageio/flipbook.js
 
+# builds flipbook.js via npm
+frontend: (_frontend "")
+
+# builds flipbook.js via npm in development mode (source map and no minify)
+frontend-dev: (_frontend "-dev")
+
 [unix]
 _ensure_dirs:
   mkdir -p runtimes/linux-x64/native