diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c0dd911fb..c9e184215 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -318,8 +318,8 @@ importers:
         specifier: ^5.2.0
         version: 5.3.3(react@17.0.2)
       zustand:
-        specifier: ^3.4.1
-        version: 3.7.2(react@17.0.2)
+        specifier: ^4.4.6
+        version: 4.4.6(@types/react@18.0.17)(react@17.0.2)
     devDependencies:
       '@vitejs/plugin-react':
         specifier: ^4.1.1
@@ -11277,6 +11277,14 @@ packages:
       prepend-http: 2.0.0
     dev: true
 
+  /use-sync-external-store@1.2.0(react@17.0.2):
+    resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 17.0.2
+    dev: false
+
   /use@3.1.1:
     resolution: {integrity: sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==}
     engines: {node: '>=0.10.0'}
@@ -11807,16 +11815,24 @@ packages:
     resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
     dev: false
 
-  /zustand@3.7.2(react@17.0.2):
-    resolution: {integrity: sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==}
+  /zustand@4.4.6(@types/react@18.0.17)(react@17.0.2):
+    resolution: {integrity: sha512-Rb16eW55gqL4W2XZpJh0fnrATxYEG3Apl2gfHTyDSE965x/zxslTikpNch0JgNjJA9zK6gEFW8Fl6d1rTZaqgg==}
     engines: {node: '>=12.7.0'}
     peerDependencies:
+      '@types/react': '>=16.8'
+      immer: '>=9.0'
       react: '>=16.8'
     peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
       react:
         optional: true
     dependencies:
+      '@types/react': 18.0.17
       react: 17.0.2
+      use-sync-external-store: 1.2.0(react@17.0.2)
     dev: false
 
   /zwitch@1.0.5:
diff --git a/sites/avivator/package.json b/sites/avivator/package.json
index c6c252668..3ce1e07c6 100644
--- a/sites/avivator/package.json
+++ b/sites/avivator/package.json
@@ -18,7 +18,7 @@
     "react-dom": "^16.8.0 || ^17.0.0",
     "react-dropzone": "^11.2.3",
     "react-router-dom": "^5.2.0",
-    "zustand": "^3.4.1"
+    "zustand": "^4.4.6"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.1.1",
diff --git a/sites/avivator/src/Avivator.jsx b/sites/avivator/src/Avivator.jsx
index d0ec462c1..3f8b21d09 100644
--- a/sites/avivator/src/Avivator.jsx
+++ b/sites/avivator/src/Avivator.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 
-import { useViewerStore } from './state';
+import { useViewerStore, useViewerStoreApi } from './state';
 import { useImage } from './hooks';
 import SnackBars from './components/Snackbars';
 import Viewer from './components/Viewer';
@@ -22,9 +22,10 @@ export default function Avivator(props) {
   const isViewerLoading = useViewerStore(store => store.isViewerLoading);
   const source = useViewerStore(store => store.source);
   const useLinkedView = useViewerStore(store => store.useLinkedView);
+  const viewerStore = useViewerStoreApi();
 
   useEffect(() => {
-    useViewerStore.setState({
+    viewerStore.setState({
       source: initSource,
       isNoImageUrlSnackbarOn: isDemoImage
     });
diff --git a/sites/avivator/src/components/Controller/Controller.jsx b/sites/avivator/src/components/Controller/Controller.jsx
index 075f70771..5ae9a72fb 100644
--- a/sites/avivator/src/components/Controller/Controller.jsx
+++ b/sites/avivator/src/components/Controller/Controller.jsx
@@ -4,7 +4,7 @@ import Grid from '@material-ui/core/Grid';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import Divider from '@material-ui/core/Divider';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import ChannelController from './components/ChannelController';
 import Menu from './components/Menu';
@@ -25,7 +25,8 @@ import {
   useViewerStore,
   useImageSettingsStore,
   useLoader,
-  useMetadata
+  useMetadata,
+  useImageSettingsStoreApi
 } from '../../state';
 import { guessRgb, useWindowSize, getSingleSelectionStats } from '../../utils';
 import { GLOBAL_SLIDER_DIMENSION_FIELDS } from '../../constants';
@@ -108,6 +109,7 @@ const Controller = () => {
   const globalControlLabels = labels.filter(label =>
     GLOBAL_SLIDER_DIMENSION_FIELDS.includes(label)
   );
+  const imageSettingsStore = useImageSettingsStoreApi();
   const channelControllers = ids.map((id, i) => {
     const onSelectionChange = e => {
       const selection = {
@@ -132,9 +134,9 @@ const Controller = () => {
           newProps.colors = Channels[c].Color.slice(0, -1);
         }
         setPropertiesForChannel(i, newProps);
-        useImageSettingsStore.setState({
+        imageSettingsStore.setState({
           onViewportLoad: () => {
-            useImageSettingsStore.setState({ onViewportLoad: () => {} });
+            imageSettingsStore.setState({ onViewportLoad: () => {} });
             setIsChannelLoading(i, false);
           }
         });
diff --git a/sites/avivator/src/components/Controller/components/AddChannel.jsx b/sites/avivator/src/components/Controller/components/AddChannel.jsx
index 3c667f4f6..390b04c4d 100644
--- a/sites/avivator/src/components/Controller/components/AddChannel.jsx
+++ b/sites/avivator/src/components/Controller/components/AddChannel.jsx
@@ -1,13 +1,13 @@
 import React, { useCallback } from 'react';
 import Button from '@material-ui/core/Button';
 import AddIcon from '@material-ui/icons/Add';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import { MAX_CHANNELS, COLOR_PALLETE } from '../../../constants';
 import {
   useChannelsStore,
   useViewerStore,
-  useImageSettingsStore,
+  useImageSettingsStoreApi,
   useLoader,
   useMetadata
 } from '../../../state';
@@ -41,6 +41,7 @@ const AddChannel = () => {
   const loader = useLoader();
   const metadata = useMetadata();
   const { labels } = loader[0];
+  const imageSettingsStore = useImageSettingsStoreApi();
   const handleChannelAdd = useCallback(() => {
     let selection = Object.fromEntries(labels.map(l => [l, 0]));
     selection = { ...selection, ...globalSelection };
@@ -55,9 +56,9 @@ const AddChannel = () => {
         contrastLimits,
         channelsVisible: true
       });
-      useImageSettingsStore.setState({
+      imageSettingsStore.setState({
         onViewportLoad: () => {
-          useImageSettingsStore.setState({ onViewportLoad: () => {} });
+          imageSettingsStore.setState({ onViewportLoad: () => {} });
           setIsChannelLoading(numSelectionsBeforeAdd, false);
         }
       });
@@ -85,6 +86,7 @@ const AddChannel = () => {
     selections,
     setIsChannelLoading,
     setPropertiesForChannel,
+    imageSettingsStore,
     metadata
   ]);
   return (
diff --git a/sites/avivator/src/components/Controller/components/CameraOptions.jsx b/sites/avivator/src/components/Controller/components/CameraOptions.jsx
index 781afefc9..e22c303cf 100644
--- a/sites/avivator/src/components/Controller/components/CameraOptions.jsx
+++ b/sites/avivator/src/components/Controller/components/CameraOptions.jsx
@@ -4,13 +4,14 @@ import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles, createStyles } from '@material-ui/core/styles';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import { getDefaultInitialViewState } from '@hms-dbmi/viv';
 import {
   useImageSettingsStore,
   useViewerStore,
-  useLoader
+  useLoader,
+  useViewerStoreApi
 } from '../../../state';
 import { useWindowSize } from '../../../utils';
 
@@ -53,11 +54,12 @@ const CameraOptions = () => {
       </Grid>
     </Grid>
   );
+  const viewerStore = useViewerStoreApi();
   const reCenterButton = (
     <Grid item xs="auto" key="recenter">
       <Button
         onClick={() =>
-          useViewerStore.setState({
+          viewerStore.setState({
             viewState: {
               ...viewState,
               ...getDefaultInitialViewState(loader, { height, width }, 1, true),
diff --git a/sites/avivator/src/components/Controller/components/ChannelController.jsx b/sites/avivator/src/components/Controller/components/ChannelController.jsx
index c01e2b3e3..b8bf6ed19 100644
--- a/sites/avivator/src/components/Controller/components/ChannelController.jsx
+++ b/sites/avivator/src/components/Controller/components/ChannelController.jsx
@@ -7,7 +7,7 @@ import Select from '@material-ui/core/Select';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import HighlightOffIcon from '@material-ui/icons/HighlightOff';
 import IconButton from '@material-ui/core/IconButton';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 import { DTYPE_VALUES } from '@hms-dbmi/viv';
 
 import ChannelOptions from './ChannelOptions';
diff --git a/sites/avivator/src/components/Controller/components/ColormapSelect.jsx b/sites/avivator/src/components/Controller/components/ColormapSelect.jsx
index 1e177d31b..6e59b92ef 100644
--- a/sites/avivator/src/components/Controller/components/ColormapSelect.jsx
+++ b/sites/avivator/src/components/Controller/components/ColormapSelect.jsx
@@ -4,11 +4,16 @@ import InputLabel from '@material-ui/core/InputLabel';
 import Select from '@material-ui/core/Select';
 
 import { COLORMAP_OPTIONS } from '../../../constants';
-import { useImageSettingsStore, useViewerStore } from '../../../state';
+import {
+  useImageSettingsStoreApi,
+  useImageSettingsStore,
+  useViewerStore
+} from '../../../state';
 
 function ColormapSelect() {
   const colormap = useImageSettingsStore(store => store.colormap);
   const isViewerLoading = useViewerStore(store => store.isViewerLoading);
+  const imageSettingsStore = useImageSettingsStoreApi();
   return (
     <FormControl fullWidth>
       <InputLabel htmlFor="colormap-select">
@@ -17,7 +22,7 @@ function ColormapSelect() {
       <Select
         native
         onChange={e =>
-          useImageSettingsStore.setState({ colormap: e.target.value })
+          imageSettingsStore.setState({ colormap: e.target.value })
         }
         value={colormap}
         inputProps={{
diff --git a/sites/avivator/src/components/Controller/components/GlobalSelectionSlider.jsx b/sites/avivator/src/components/Controller/components/GlobalSelectionSlider.jsx
index 394473233..d32ac8175 100644
--- a/sites/avivator/src/components/Controller/components/GlobalSelectionSlider.jsx
+++ b/sites/avivator/src/components/Controller/components/GlobalSelectionSlider.jsx
@@ -4,14 +4,15 @@ import { unstable_batchedUpdates } from 'react-dom';
 import Grid from '@material-ui/core/Grid';
 import Slider from '@material-ui/core/Slider';
 import debounce from 'lodash/debounce';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import { range, getMultiSelectionStats } from '../../../utils';
 import {
   useChannelsStore,
   useViewerStore,
-  useImageSettingsStore,
-  useLoader
+  useLoader,
+  useViewerStoreApi,
+  useImageSettingsStoreApi
 } from '../../../state';
 
 export default function GlobalSelectionSlider(props) {
@@ -22,9 +23,11 @@ export default function GlobalSelectionSlider(props) {
   );
   const loader = useLoader();
   const globalSelection = useViewerStore(store => store.globalSelection);
+  const viewerStore = useViewerStoreApi();
+  const imageSettingsStore = useImageSettingsStoreApi();
   const changeSelection = debounce(
     (_event, newValue) => {
-      useViewerStore.setState({
+      viewerStore.setState({
         isChannelLoading: selections.map(() => true)
       });
       const newSelections = [...selections].map(sel => ({
@@ -45,12 +48,12 @@ export default function GlobalSelectionSlider(props) {
           );
         });
         unstable_batchedUpdates(() => {
-          useImageSettingsStore.setState({
+          imageSettingsStore.setState({
             onViewportLoad: () => {
-              useImageSettingsStore.setState({
+              imageSettingsStore.setState({
                 onViewportLoad: () => {}
               });
-              useViewerStore.setState({
+              viewerStore.setState({
                 isChannelLoading: selections.map(() => false)
               });
             }
@@ -81,7 +84,7 @@ export default function GlobalSelectionSlider(props) {
         <Slider
           value={globalSelection[label]}
           onChange={(event, newValue) => {
-            useViewerStore.setState({
+            viewerStore.setState({
               globalSelection: {
                 ...globalSelection,
                 [label]: newValue
diff --git a/sites/avivator/src/components/Controller/components/LensSelect.jsx b/sites/avivator/src/components/Controller/components/LensSelect.jsx
index 37ff9ff7a..1d0083726 100644
--- a/sites/avivator/src/components/Controller/components/LensSelect.jsx
+++ b/sites/avivator/src/components/Controller/components/LensSelect.jsx
@@ -3,11 +3,12 @@ import React from 'react';
 import Checkbox from '@material-ui/core/Checkbox';
 import Grid from '@material-ui/core/Grid';
 import Select from '@material-ui/core/Select';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import {
   useChannelsStore,
   useImageSettingsStore,
+  useImageSettingsStoreApi,
   useViewerStore
 } from '../../../state';
 
@@ -21,6 +22,7 @@ function LensSelect() {
   const currChannelIndices = selections.map(sel => sel.c);
 
   const checkboxColor = `rgb(${[255, 255, 255]})`;
+  const imageSettingsStore = useImageSettingsStoreApi();
   return (
     <Grid
       container
@@ -48,7 +50,7 @@ function LensSelect() {
           native
           value={lensSelection}
           onChange={e =>
-            useImageSettingsStore.setState({ lensSelection: e.target.value })
+            imageSettingsStore.setState({ lensSelection: e.target.value })
           }
         >
           {currChannelIndices.map((channelIndex, relativeIndex) => (
diff --git a/sites/avivator/src/components/Controller/components/Menu.jsx b/sites/avivator/src/components/Controller/components/Menu.jsx
index a00e69892..b86052c34 100644
--- a/sites/avivator/src/components/Controller/components/Menu.jsx
+++ b/sites/avivator/src/components/Controller/components/Menu.jsx
@@ -12,13 +12,18 @@ import Link from '@material-ui/core/Link';
 import Button from '@material-ui/core/Button';
 import SettingsIcon from '@material-ui/icons/Settings';
 import { makeStyles } from '@material-ui/core/styles';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 import { Select } from '@material-ui/core';
 
 import MenuTitle from './MenuTitle';
 import DropzoneButton from './DropzoneButton';
 import { isMobileOrTablet, getNameFromUrl } from '../../../utils';
-import { useChannelsStore, useViewerStore } from '../../../state';
+import {
+  useChannelsStore,
+  useChannelsStoreApi,
+  useViewerStore,
+  useViewerStoreApi
+} from '../../../state';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -57,6 +62,8 @@ function Header(props) {
     store.source,
     store.metadata
   ]);
+  const viewerStore = useViewerStoreApi();
+  const channelsStore = useChannelsStoreApi();
   const handleSubmitNewUrl = (event, newUrl) => {
     event.preventDefault();
     const newSource = {
@@ -64,10 +71,10 @@ function Header(props) {
       // Use the trailing part of the URL (file name, presumably) as the description.
       description: getNameFromUrl(newUrl)
     };
-    useViewerStore.setState({ source: newSource });
+    viewerStore.setState({ source: newSource });
   };
   const onImageSelectionChange = e =>
-    useChannelsStore.setState({
+    channelsStore.setState({
       image: e.target.value
     });
   const url = typeof source.urlOrFile === 'string' ? source.urlOrFile : '';
diff --git a/sites/avivator/src/components/Controller/components/PanLockToggle.jsx b/sites/avivator/src/components/Controller/components/PanLockToggle.jsx
index 2427d24ee..87eab8572 100644
--- a/sites/avivator/src/components/Controller/components/PanLockToggle.jsx
+++ b/sites/avivator/src/components/Controller/components/PanLockToggle.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '@material-ui/core/Button';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import { useImageSettingsStore, useViewerStore } from '../../../state';
 
diff --git a/sites/avivator/src/components/Controller/components/PictureInPictureToggle.jsx b/sites/avivator/src/components/Controller/components/PictureInPictureToggle.jsx
index a257b9eeb..fdb71d284 100644
--- a/sites/avivator/src/components/Controller/components/PictureInPictureToggle.jsx
+++ b/sites/avivator/src/components/Controller/components/PictureInPictureToggle.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '@material-ui/core/Button';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import { useImageSettingsStore, useViewerStore } from '../../../state';
 
diff --git a/sites/avivator/src/components/Controller/components/RenderingModeSelect.jsx b/sites/avivator/src/components/Controller/components/RenderingModeSelect.jsx
index c0acecf63..7d6249529 100644
--- a/sites/avivator/src/components/Controller/components/RenderingModeSelect.jsx
+++ b/sites/avivator/src/components/Controller/components/RenderingModeSelect.jsx
@@ -2,10 +2,14 @@ import React from 'react';
 import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
 import InputLabel from '@material-ui/core/InputLabel';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import { RENDERING_MODES } from '@hms-dbmi/viv';
-import { useImageSettingsStore, useViewerStore } from '../../../state';
+import {
+  useImageSettingsStore,
+  useImageSettingsStoreApi,
+  useViewerStore
+} from '../../../state';
 
 const renderingOptions = Object.values(RENDERING_MODES);
 
@@ -17,13 +21,14 @@ function RenderingModeSelect() {
   );
   // Empty option allows for displaying the title of the dropdown fully in the UI.
   const options = !use3d ? [...renderingOptions, ''] : renderingOptions;
+  const imageSettingsStore = useImageSettingsStoreApi();
   return (
     <FormControl fullWidth>
       <InputLabel htmlFor="rendering-mode-select">Rendering Mode</InputLabel>
       <Select
         native
         onChange={e =>
-          useImageSettingsStore.setState({ renderingMode: e.target.value })
+          imageSettingsStore.setState({ renderingMode: e.target.value })
         }
         value={use3d ? renderingMode : ''}
         inputProps={{
diff --git a/sites/avivator/src/components/Controller/components/SideBySideToggle.jsx b/sites/avivator/src/components/Controller/components/SideBySideToggle.jsx
index 0d77fc655..dc2956669 100644
--- a/sites/avivator/src/components/Controller/components/SideBySideToggle.jsx
+++ b/sites/avivator/src/components/Controller/components/SideBySideToggle.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '@material-ui/core/Button';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import { useImageSettingsStore, useViewerStore } from '../../../state';
 
diff --git a/sites/avivator/src/components/Controller/components/Slicer.jsx b/sites/avivator/src/components/Controller/components/Slicer.jsx
index bd8f1264d..df538167e 100644
--- a/sites/avivator/src/components/Controller/components/Slicer.jsx
+++ b/sites/avivator/src/components/Controller/components/Slicer.jsx
@@ -3,12 +3,13 @@ import Grid from '@material-ui/core/Grid';
 import Slider from '@material-ui/core/Slider';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles, createStyles } from '@material-ui/core';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import {
   useImageSettingsStore,
   useViewerStore,
-  useLoader
+  useLoader,
+  useImageSettingsStoreApi
 } from '../../../state';
 import { getBoundingCube, truncateDecimalNumber } from '../../../utils';
 
@@ -38,22 +39,23 @@ const Slicer = () => {
   const loader = useLoader();
   const use3d = useViewerStore(store => store.use3d);
   const [xSliceInit, ySliceInit, zSliceInit] = getBoundingCube(loader);
+  const imageSettingsStore = useImageSettingsStoreApi();
   const sliceValuesAndSetSliceFunctions = [
     [
       xSlice,
-      xSliceNew => useImageSettingsStore.setState({ xSlice: xSliceNew }),
+      xSliceNew => imageSettingsStore.setState({ xSlice: xSliceNew }),
       'x',
       xSliceInit
     ],
     [
       ySlice,
-      ySliceNew => useImageSettingsStore.setState({ ySlice: ySliceNew }),
+      ySliceNew => imageSettingsStore.setState({ ySlice: ySliceNew }),
       'y',
       ySliceInit
     ],
     [
       zSlice,
-      zSliceNew => useImageSettingsStore.setState({ zSlice: zSliceNew }),
+      zSliceNew => imageSettingsStore.setState({ zSlice: zSliceNew }),
       'z',
       zSliceInit
     ]
diff --git a/sites/avivator/src/components/Controller/components/VolumeButton.jsx b/sites/avivator/src/components/Controller/components/VolumeButton.jsx
index a829dfb58..70524b2a0 100644
--- a/sites/avivator/src/components/Controller/components/VolumeButton.jsx
+++ b/sites/avivator/src/components/Controller/components/VolumeButton.jsx
@@ -9,13 +9,14 @@ import MenuList from '@material-ui/core/MenuList';
 
 import { makeStyles } from '@material-ui/core/styles';
 
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import {
-  useImageSettingsStore,
   useViewerStore,
   useChannelsStore,
-  useLoader
+  useLoader,
+  useViewerStoreApi,
+  useImageSettingsStoreApi
 } from '../../../state';
 import { range, getMultiSelectionStats, getBoundingCube } from '../../../utils';
 
@@ -111,6 +112,8 @@ function VolumeButton() {
   const hasViewableResolutions = Array.from({
     length: loader.length
   }).filter((_, resolution) => canLoadResolution(loader, resolution)).length;
+  const viewerStore = useViewerStoreApi();
+  const imageSettingsStore = useImageSettingsStoreApi();
   return (
     <>
       <Button
@@ -127,7 +130,7 @@ function VolumeButton() {
           // eslint-disable-next-line no-unused-expressions
           if (use3d) {
             toggleUse3d();
-            useViewerStore.setState({
+            viewerStore.setState({
               isChannelLoading: Array(selections.length).fill(true)
             });
             getMultiSelectionStats({ loader, selections, use3d: !use3d }).then(
@@ -138,7 +141,7 @@ function VolumeButton() {
                     contrastLimits: contrastLimits[j]
                   })
                 );
-                useViewerStore.setState({
+                viewerStore.setState({
                   isChannelLoading: Array(selections.length).fill(false)
                 });
               }
@@ -166,14 +169,14 @@ function VolumeButton() {
                           dense
                           disableGutters
                           onClick={() => {
-                            useViewerStore.setState({
+                            viewerStore.setState({
                               isChannelLoading: Array(selections.length).fill(
                                 true
                               )
                             });
                             const [xSlice, ySlice, zSlice] =
                               getBoundingCube(loader);
-                            useImageSettingsStore.setState({
+                            imageSettingsStore.setState({
                               resolution,
                               xSlice,
                               ySlice,
@@ -191,12 +194,12 @@ function VolumeButton() {
                                   contrastLimits: contrastLimits[j]
                                 })
                               );
-                              useImageSettingsStore.setState({
+                              imageSettingsStore.setState({
                                 onViewportLoad: () => {
-                                  useImageSettingsStore.setState({
+                                  imageSettingsStore.setState({
                                     onViewportLoad: () => {}
                                   });
-                                  useViewerStore.setState({
+                                  viewerStore.setState({
                                     isChannelLoading: Array(
                                       selections.length
                                     ).fill(false)
diff --git a/sites/avivator/src/components/Controller/components/ZoomLockToggle.jsx b/sites/avivator/src/components/Controller/components/ZoomLockToggle.jsx
index 05b78e367..820a3dc4d 100644
--- a/sites/avivator/src/components/Controller/components/ZoomLockToggle.jsx
+++ b/sites/avivator/src/components/Controller/components/ZoomLockToggle.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '@material-ui/core/Button';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import { useImageSettingsStore, useViewerStore } from '../../../state';
 
diff --git a/sites/avivator/src/components/Footer.jsx b/sites/avivator/src/components/Footer.jsx
index 0462d17e5..57c85fd96 100644
--- a/sites/avivator/src/components/Footer.jsx
+++ b/sites/avivator/src/components/Footer.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
 import Paper from '@material-ui/core/Paper';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import { makeStyles } from '@material-ui/core/styles';
 
diff --git a/sites/avivator/src/components/Snackbars/Snackbars.jsx b/sites/avivator/src/components/Snackbars/Snackbars.jsx
index ffc6b863a..ff7f624ab 100644
--- a/sites/avivator/src/components/Snackbars/Snackbars.jsx
+++ b/sites/avivator/src/components/Snackbars/Snackbars.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Snackbar from '@material-ui/core/Snackbar';
 import Alert from '@material-ui/lab/Alert';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 
 import {
   LoaderError,
@@ -9,7 +9,7 @@ import {
   NoImageUrlInfo,
   VolumeRenderingWarning
 } from './SnackbarAlerts';
-import { useViewerStore } from '../../state';
+import { useViewerStore, useViewerStoreApi } from '../../state';
 
 const SnackBars = () => {
   const [
@@ -32,6 +32,7 @@ const SnackBars = () => {
     ],
     shallow
   );
+  const viewerStore = useViewerStoreApi();
   return (
     <>
       <Snackbar
@@ -52,7 +53,7 @@ const SnackBars = () => {
       >
         <Alert
           onClose={() =>
-            useViewerStore.setState({
+            viewerStore.setState({
               loaderErrorSnackbar: { on: false, message: null }
             })
           } // eslint-disable-line react/jsx-curly-newline
diff --git a/sites/avivator/src/components/Viewer.jsx b/sites/avivator/src/components/Viewer.jsx
index 92cd0d861..b3c79c1e9 100644
--- a/sites/avivator/src/components/Viewer.jsx
+++ b/sites/avivator/src/components/Viewer.jsx
@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 import React from 'react';
 import debounce from 'lodash/debounce';
 import {
@@ -13,7 +13,8 @@ import {
   useImageSettingsStore,
   useViewerStore,
   useChannelsStore,
-  useLoader
+  useLoader,
+  useViewerStoreApi
 } from '../state';
 import { useWindowSize, get3DExtension } from '../utils';
 import { DEFAULT_OVERVIEW } from '../constants';
@@ -67,10 +68,10 @@ const Viewer = () => {
     ],
     shallow
   );
-
+  const viewerStore = useViewerStoreApi();
   const onViewStateChange = ({ viewState: { zoom } }) => {
     const z = Math.min(Math.max(Math.round(-zoom), 0), loader.length - 1);
-    useViewerStore.setState({ pyramidResolution: z });
+    viewerStore.setState({ pyramidResolution: z });
   };
 
   return use3d ? (
@@ -93,7 +94,7 @@ const Viewer = () => {
       viewStates={[viewState]}
       onViewStateChange={debounce(
         ({ viewState: newViewState, viewId }) =>
-          useViewerStore.setState({
+          viewerStore.setState({
             viewState: { ...newViewState, id: viewId }
           }),
         250,
@@ -112,7 +113,7 @@ const Viewer = () => {
       zoomLock={zoomLock}
       panLock={panLock}
       hoverHooks={{
-        handleValue: v => useViewerStore.setState({ pixelValues: v })
+        handleValue: v => viewerStore.setState({ pixelValues: v })
       }}
       lensSelection={lensSelection}
       lensEnabled={lensEnabled}
@@ -135,7 +136,7 @@ const Viewer = () => {
       overview={DEFAULT_OVERVIEW}
       overviewOn={isOverviewOn}
       hoverHooks={{
-        handleValue: v => useViewerStore.setState({ pixelValues: v })
+        handleValue: v => viewerStore.setState({ pixelValues: v })
       }}
       lensSelection={lensSelection}
       lensEnabled={lensEnabled}
diff --git a/sites/avivator/src/hooks.js b/sites/avivator/src/hooks.js
index edd59172c..232f5fd0f 100644
--- a/sites/avivator/src/hooks.js
+++ b/sites/avivator/src/hooks.js
@@ -1,15 +1,17 @@
 import { useEffect } from 'react';
 import { useDropzone as useReactDropzone } from 'react-dropzone';
-import shallow from 'zustand/shallow';
+import { shallow } from 'zustand/shallow';
 // eslint-disable-next-line camelcase
 import { unstable_batchedUpdates } from 'react-dom';
 
 import {
-  useChannelsStore,
   useImageSettingsStore,
   useLoader,
   useMetadata,
-  useViewerStore
+  useViewerStore,
+  useViewerStoreApi,
+  useChannelsStoreApi,
+  useImageSettingsStoreApi
 } from './state';
 import {
   createLoader,
@@ -32,18 +34,21 @@ export const useImage = (source, history) => {
   );
   const loader = useLoader();
   const metadata = useMetadata();
+  const viewerStore = useViewerStoreApi();
+  const channelsStore = useChannelsStoreApi();
+  const imageSettingsStore = useImageSettingsStoreApi();
   useEffect(() => {
     async function changeLoader() {
       // Placeholder
-      useViewerStore.setState({ isChannelLoading: [true] });
-      useViewerStore.setState({ isViewerLoading: true });
+      viewerStore.setState({ isChannelLoading: [true] });
+      viewerStore.setState({ isViewerLoading: true });
       if (use3d) toggleUse3d();
       const { urlOrFile } = source;
       const newLoader = await createLoader(
         urlOrFile,
         toggleIsOffsetsSnackbarOn,
         message =>
-          useViewerStore.setState({
+          viewerStore.setState({
             loaderErrorSnackbar: { on: true, message }
           })
       );
@@ -67,8 +72,8 @@ export const useImage = (source, history) => {
           nextMeta
         );
         unstable_batchedUpdates(() => {
-          useChannelsStore.setState({ loader: nextLoader });
-          useViewerStore.setState({
+          channelsStore.setState({ loader: nextLoader });
+          viewerStore.setState({
             metadata: nextMeta
           });
         });
@@ -84,8 +89,8 @@ export const useImage = (source, history) => {
   useEffect(() => {
     const changeSettings = async () => {
       // Placeholder
-      useViewerStore.setState({ isChannelLoading: [true] });
-      useViewerStore.setState({ isViewerLoading: true });
+      viewerStore.setState({ isChannelLoading: [true] });
+      viewerStore.setState({ isViewerLoading: true });
       if (use3d) toggleUse3d();
       const newSelections = buildDefaultSelection(loader[0]);
       const { Channels } = metadata.Pixels;
@@ -121,7 +126,7 @@ export const useImage = (source, history) => {
         if (lensEnabled) {
           toggleLensEnabled();
         }
-        useViewerStore.setState({ useColormap: false, useLens: false });
+        viewerStore.setState({ useColormap: false, useLens: false });
       } else {
         const stats = await getMultiSelectionStats({
           loader,
@@ -139,12 +144,12 @@ export const useImage = (source, history) => {
                   (Channels[i]?.Color && Channels[i].Color.slice(0, -1)) ??
                   COLOR_PALLETE[i]
               );
-        useViewerStore.setState({
+        viewerStore.setState({
           useLens: channelOptions.length !== 1,
           useColormap: true
         });
       }
-      useChannelsStore.setState({
+      channelsStore.setState({
         ids: newDomains.map(() => String(Math.random())),
         selections: newSelections,
         domains: newDomains,
@@ -152,7 +157,7 @@ export const useImage = (source, history) => {
         colors: newColors,
         channelsVisible: newColors.map(() => true)
       });
-      useViewerStore.setState({
+      viewerStore.setState({
         isChannelLoading: newSelections.map(i => !i),
         isViewerLoading: false,
         pixelValues: new Array(newSelections.length).fill(FILL_PIXEL_VALUE),
@@ -161,7 +166,7 @@ export const useImage = (source, history) => {
         channelOptions
       });
       const [xSlice, ySlice, zSlice] = getBoundingCube(loader);
-      useImageSettingsStore.setState({
+      imageSettingsStore.setState({
         xSlice,
         ySlice,
         zSlice
@@ -172,6 +177,7 @@ export const useImage = (source, history) => {
 };
 
 export const useDropzone = () => {
+  const viewerStore = useViewerStoreApi();
   const handleSubmitFile = files => {
     let newSource;
     if (files.length === 1) {
@@ -186,7 +192,7 @@ export const useDropzone = () => {
         description: 'data.zarr'
       };
     }
-    useViewerStore.setState({ source: newSource });
+    viewerStore.setState({ source: newSource });
   };
   return useReactDropzone({
     onDrop: handleSubmitFile
diff --git a/sites/avivator/src/index.jsx b/sites/avivator/src/index.jsx
index ce151b408..7e600a236 100644
--- a/sites/avivator/src/index.jsx
+++ b/sites/avivator/src/index.jsx
@@ -12,6 +12,7 @@ import { grey } from '@material-ui/core/colors';
 import sources from './source-info';
 import Avivator from './Avivator';
 import { getNameFromUrl } from './utils';
+import { AvivatorProvider } from './state';
 
 const darkTheme = createTheme({
   palette: {
@@ -63,10 +64,12 @@ function RoutedAvivator(props) {
 ReactDOM.render(
   <Router>
     <Switch>
-      <Route
-        path="/"
-        render={routeProps => <RoutedAvivator routeProps={routeProps} />}
-      />
+      <AvivatorProvider>
+        <Route
+          path="/"
+          render={routeProps => <RoutedAvivator routeProps={routeProps} />}
+        />
+      </AvivatorProvider>
     </Switch>
   </Router>,
   document.getElementById('root')
diff --git a/sites/avivator/src/state.js b/sites/avivator/src/state.js
index e26a1a56b..77cf7cc49 100644
--- a/sites/avivator/src/state.js
+++ b/sites/avivator/src/state.js
@@ -1,6 +1,7 @@
-import create from 'zustand';
-
+import { createContext, useContext, useRef, createElement } from 'react';
 import { RENDERING_MODES } from '@hms-dbmi/viv';
+import { createStore } from 'zustand';
+import { useStoreWithEqualityFn } from 'zustand/traditional';
 
 const captialize = string => string.charAt(0).toUpperCase() + string.slice(1);
 
@@ -38,51 +39,52 @@ const DEFAUlT_CHANNEL_VALUES = {
   ids: ''
 };
 
-export const useChannelsStore = create(set => ({
-  ...DEFAUlT_CHANNEL_STATE,
-  ...generateToggles(DEFAUlT_CHANNEL_VALUES, set),
-  toggleIsOn: index =>
-    set(state => {
-      const channelsVisible = [...state.channelsVisible];
-      channelsVisible[index] = !channelsVisible[index];
-      return { ...state, channelsVisible };
-    }),
-  setPropertiesForChannel: (channel, newProperties) =>
-    set(state => {
-      const entries = Object.entries(newProperties);
-      const newState = {};
-      entries.forEach(([property, value]) => {
-        newState[property] = [...state[property]];
-        newState[property][channel] = value;
-      });
-      return { ...state, ...newState };
-    }),
-  removeChannel: channel =>
-    set(state => {
-      const newState = {};
-      const channelKeys = Object.keys(DEFAUlT_CHANNEL_VALUES);
-      Object.keys(state).forEach(key => {
-        if (channelKeys.includes(key)) {
-          newState[key] = state[key].filter((_, j) => j !== channel);
-        }
-      });
-      return { ...state, ...newState };
-    }),
-  addChannel: newProperties =>
-    set(state => {
-      const entries = Object.entries(newProperties);
-      const newState = { ...state };
-      entries.forEach(([property, value]) => {
-        newState[property] = [...state[property], value];
-      });
-      Object.entries(DEFAUlT_CHANNEL_VALUES).forEach(([k, v]) => {
-        if (newState[k].length < newState[entries[0][0]].length) {
-          newState[k] = [...state[k], v];
-        }
-      });
-      return newState;
-    })
-}));
+const createChannelsStore = () =>
+  createStore(set => ({
+    ...DEFAUlT_CHANNEL_STATE,
+    ...generateToggles(DEFAUlT_CHANNEL_VALUES, set),
+    toggleIsOn: index =>
+      set(state => {
+        const channelsVisible = [...state.channelsVisible];
+        channelsVisible[index] = !channelsVisible[index];
+        return { ...state, channelsVisible };
+      }),
+    setPropertiesForChannel: (channel, newProperties) =>
+      set(state => {
+        const entries = Object.entries(newProperties);
+        const newState = {};
+        entries.forEach(([property, value]) => {
+          newState[property] = [...state[property]];
+          newState[property][channel] = value;
+        });
+        return { ...state, ...newState };
+      }),
+    removeChannel: channel =>
+      set(state => {
+        const newState = {};
+        const channelKeys = Object.keys(DEFAUlT_CHANNEL_VALUES);
+        Object.keys(state).forEach(key => {
+          if (channelKeys.includes(key)) {
+            newState[key] = state[key].filter((_, j) => j !== channel);
+          }
+        });
+        return { ...state, ...newState };
+      }),
+    addChannel: newProperties =>
+      set(state => {
+        const entries = Object.entries(newProperties);
+        const newState = { ...state };
+        entries.forEach(([property, value]) => {
+          newState[property] = [...state[property], value];
+        });
+        Object.entries(DEFAUlT_CHANNEL_VALUES).forEach(([k, v]) => {
+          if (newState[k].length < newState[entries[0][0]].length) {
+            newState[k] = [...state[k], v];
+          }
+        });
+        return newState;
+      })
+  }));
 
 const DEFAULT_IMAGE_STATE = {
   lensSelection: 0,
@@ -100,10 +102,11 @@ const DEFAULT_IMAGE_STATE = {
   onViewportLoad: () => {}
 };
 
-export const useImageSettingsStore = create(set => ({
-  ...DEFAULT_IMAGE_STATE,
-  ...generateToggles(DEFAULT_IMAGE_STATE, set)
-}));
+const createImageSettingsStore = () =>
+  createStore(set => ({
+    ...DEFAULT_IMAGE_STATE,
+    ...generateToggles(DEFAULT_IMAGE_STATE, set)
+  }));
 
 const DEFAULT_VIEWER_STATE = {
   isChannelLoading: [],
@@ -129,27 +132,93 @@ const DEFAULT_VIEWER_STATE = {
   pyramidResolution: 0
 };
 
-export const useViewerStore = create(set => ({
-  ...DEFAULT_VIEWER_STATE,
-  ...generateToggles(DEFAULT_VIEWER_STATE, set),
-  setIsChannelLoading: (index, val) =>
-    set(state => {
-      const newIsChannelLoading = [...state.isChannelLoading];
-      newIsChannelLoading[index] = val;
-      return { ...state, isChannelLoading: newIsChannelLoading };
-    }),
-  addIsChannelLoading: val =>
-    set(state => {
-      const newIsChannelLoading = [...state.isChannelLoading, val];
-      return { ...state, isChannelLoading: newIsChannelLoading };
-    }),
-  removeIsChannelLoading: index =>
-    set(state => {
-      const newIsChannelLoading = [...state.isChannelLoading];
-      newIsChannelLoading.splice(index, 1);
-      return { ...state, isChannelLoading: newIsChannelLoading };
-    })
-}));
+const createViewerStore = () =>
+  createStore(set => ({
+    ...DEFAULT_VIEWER_STATE,
+    ...generateToggles(DEFAULT_VIEWER_STATE, set),
+    setIsChannelLoading: (index, val) =>
+      set(state => {
+        const newIsChannelLoading = [...state.isChannelLoading];
+        newIsChannelLoading[index] = val;
+        return { ...state, isChannelLoading: newIsChannelLoading };
+      }),
+    addIsChannelLoading: val =>
+      set(state => {
+        const newIsChannelLoading = [...state.isChannelLoading, val];
+        return { ...state, isChannelLoading: newIsChannelLoading };
+      }),
+    removeIsChannelLoading: index =>
+      set(state => {
+        const newIsChannelLoading = [...state.isChannelLoading];
+        newIsChannelLoading.splice(index, 1);
+        return { ...state, isChannelLoading: newIsChannelLoading };
+      })
+  }));
+
+const AvivatorContext = createContext(null);
+
+/**
+ * AvivatorProvider is used to provide `channels`, `imageSettings`, and `viewer` stores to the rest of the app.
+ * In the case of Avivator itself, there is one of these at the root, in `index.jsx`.
+ *
+ * You can have multiple independent viewers, using different images and/or other settings,
+ * by creating an AvivatorProvider for each viewer.
+ */
+export const AvivatorProvider = ({ children }) => {
+  const storesRef = useRef(null);
+  if (!storesRef.current) {
+    storesRef.current = {
+      channels: createChannelsStore(),
+      imageSettings: createImageSettingsStore(),
+      viewer: createViewerStore()
+    };
+  }
+  return createElement(
+    AvivatorContext.Provider,
+    { value: storesRef.current },
+    children
+  );
+};
+
+/**
+ * useStoreApi is a basic wrapper function used to get a specific store from the AvivatorProvider.
+ *
+ * The `use<X>Store` functions are used to get state from the store, with a selector and optional equality function.
+ * These are used in Avivator components primarily to get state from the store and subscribe to changes.
+ * They cannot be used outside of the React render cycle, or anywhere where there is not an active {@link AvivatorContext}.
+ * In these cases, it is necessary to use the `use<X>StoreApi` functions instead.
+ *
+ * The `use<X>StoreApi` functions are used to obtain a reference to the store object itself, which can be later used
+ * outside of the React render cycle - for example, with `setState()` in an event handler - where the {@link AvivatorContext}
+ * would otherwise be ambiguous.
+ */
+function useStoreApi(storeName) {
+  const store = useContext(AvivatorContext);
+  if (!store) throw 'useStore must be used within an AvivatorProvider';
+  return store[storeName];
+}
+export const useChannelsStoreApi = () => useStoreApi('channels');
+export const useImageSettingsStoreApi = () => useStoreApi('imageSettings');
+export const useViewerStoreApi = () => useStoreApi('viewer');
+/**
+ * For use of stores with `selector` and optional `equalityFn` within React rendering.
+ * Equivalent API to `use<X>Store` functions that were used before adding support for React Context,
+ * but only for invoking as a function, not `useXStore.setState(...)` etc.
+ *
+ * @param {'channels' | 'imageSettings' | 'viewer'} storeName
+ * @param {function} selector - selector function, see Zustand docs
+ * @param {function?} equalityFn - equality function, see Zustand docs
+ */
+function useAvivatorStore(storeName, selector, equalityFn) {
+  const store = useStoreApi(storeName);
+  return useStoreWithEqualityFn(store, selector, equalityFn);
+}
+export const useChannelsStore = (selector, equalityFn) =>
+  useAvivatorStore('channels', selector, equalityFn);
+export const useImageSettingsStore = (selector, equalityFn) =>
+  useAvivatorStore('imageSettings', selector, equalityFn);
+export const useViewerStore = (selector, equalityFn) =>
+  useAvivatorStore('viewer', selector, equalityFn);
 
 export const useLoader = () => {
   const [fullLoader, image] = useChannelsStore(store => [