diff --git a/package-lock.json b/package-lock.json
index 6448071f..defec8e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1953,6 +1953,11 @@
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
       "dev": true
     },
+    "jotai": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/jotai/-/jotai-1.0.0.tgz",
+      "integrity": "sha512-6hZGy3hqIlBlLSKppTrxDc1Vb7mi3I8eEQOIu7Kj6ceX1PSzjxdsEVC9TjAqaio8gZJEz+2ufNUf4afvbs0RXg=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2802,11 +2807,6 @@
         "util-deprecate": "^1.0.1"
       }
     },
-    "recoil": {
-      "version": "0.0.13",
-      "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.0.13.tgz",
-      "integrity": "sha512-2OToaQ8GR//KsdKdaEhMi04QKStLGRpk3qjC58iBpZpUtsByZ4dUy2UJtRcYuhnVlltGZ8HNwcEQRdFOS864SQ=="
-    },
     "reference-spec-reader": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/reference-spec-reader/-/reference-spec-reader-0.1.1.tgz",
diff --git a/package.json b/package.json
index f314f8fe..75f96604 100644
--- a/package.json
+++ b/package.json
@@ -7,10 +7,10 @@
     "@material-ui/icons": "^4.9.1",
     "deck.gl": "^8.4.3",
     "imjoy-rpc": "^0.2.23",
+    "jotai": "^1.0.0",
     "p-map": "^4.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "recoil": "0.0.13",
     "reference-spec-reader": "^0.1.1",
     "zarr": "^0.4.0"
   },
diff --git a/snowpack.config.js b/snowpack.config.js
index 8ae2528a..29b8cf3e 100644
--- a/snowpack.config.js
+++ b/snowpack.config.js
@@ -1,9 +1,9 @@
-/** @type {import("snowpack").SnowpackUserConfig } */
 const pkg = require('./package.json');
 
 // pkg version avaiable in app via import.meta.env.SNOWPACK_PUBLIC_PACKAGE_VERSION
 process.env.SNOWPACK_PUBLIC_PACKAGE_VERSION = pkg.version;
 
+/** @type {import("snowpack").SnowpackUserConfig } */
 module.exports = {
   mount: {
     public: '/',
diff --git a/src/components/LayerController/AcquisitionController.tsx b/src/components/LayerController/AcquisitionController.tsx
index ce11f282..ee7eb8a0 100644
--- a/src/components/LayerController/AcquisitionController.tsx
+++ b/src/components/LayerController/AcquisitionController.tsx
@@ -1,13 +1,12 @@
 import React from 'react';
 import { Grid, NativeSelect } from '@material-ui/core';
-import { useRecoilValue } from 'recoil';
+import { useAtomValue } from 'jotai/utils';
 import type { ChangeEvent } from 'react';
+import type { ControllerProps } from '../../state';
 
-import { sourceInfoState } from '../../state';
-
-function AcquisitionController({ layerId }: { layerId: string }): JSX.Element | null {
-  const sourceInfo = useRecoilValue(sourceInfoState);
-  const { acquisitionId, acquisitions } = sourceInfo[layerId];
+function AcquisitionController({ sourceAtom }: ControllerProps) {
+  const sourceData = useAtomValue(sourceAtom);
+  const { acquisitionId, acquisitions } = sourceData;
 
   if (!acquisitions) {
     return null;
diff --git a/src/components/LayerController/AddChannelButton.tsx b/src/components/LayerController/AddChannelButton.tsx
index 22502bf9..2d1018bb 100644
--- a/src/components/LayerController/AddChannelButton.tsx
+++ b/src/components/LayerController/AddChannelButton.tsx
@@ -1,17 +1,17 @@
 import React, { useState } from 'react';
 import type { MouseEvent, ChangeEvent } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useAtom } from 'jotai';
+import { useAtomValue } from 'jotai/utils';
 import { IconButton, Popover, Paper, Typography, Divider, NativeSelect } from '@material-ui/core';
 import { Add } from '@material-ui/icons';
 
-import { layerStateFamily, sourceInfoState } from '../../state';
 import { hexToRGB, MAX_CHANNELS } from '../../utils';
+import type { ControllerProps } from '../../state';
 
-function AddChannelButton({ layerId }: { layerId: string }): JSX.Element {
-  const sourceInfo = useRecoilValue(sourceInfoState);
-  const [layer, setLayer] = useRecoilState(layerStateFamily(layerId));
+function AddChannelButton({ sourceAtom, layerAtom }: ControllerProps) {
+  const sourceData = useAtomValue(sourceAtom);
+  const [layer, setLayer] = useAtom(layerAtom);
   const [anchorEl, setAnchorEl] = useState<null | Element>(null);
-  const layerInfo = sourceInfo[layerId];
 
   const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
@@ -27,7 +27,7 @@ function AddChannelButton({ layerId }: { layerId: string }): JSX.Element {
       channel_axis,
       colors,
       contrast_limits,
-    } = layerInfo;
+    } = sourceData;
     handleClose();
     const channelIndex = +event.target.value;
     const channelSelection = [...selection];
@@ -55,9 +55,9 @@ function AddChannelButton({ layerId }: { layerId: string }): JSX.Element {
     });
   };
 
-  const { names } = sourceInfo[layerId];
+  const { names } = sourceData;
   const open = Boolean(anchorEl);
-  const id = open ? `layer-${layerId}-add-channel` : undefined;
+  const id = open ? `layer-${sourceData.id}-add-channel` : undefined;
   return (
     <>
       <IconButton
@@ -93,7 +93,7 @@ function AddChannelButton({ layerId }: { layerId: string }): JSX.Element {
           <NativeSelect
             fullWidth
             style={{ fontSize: '0.7em' }}
-            id={`layer-${layerId}-channel-select`}
+            id={`layer-${sourceData.id}-channel-select`}
             onChange={handleChange}
           >
             <option aria-label="None" value="">
diff --git a/src/components/LayerController/AxisOptions.tsx b/src/components/LayerController/AxisOptions.tsx
index 0e28e6c7..86d3fd84 100644
--- a/src/components/LayerController/AxisOptions.tsx
+++ b/src/components/LayerController/AxisOptions.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import type { MouseEvent, ChangeEvent } from 'react';
-import { useRecoilState } from 'recoil';
+import { useAtom } from 'jotai';
+import { useAtomValue } from 'jotai/utils';
 import { IconButton, Popover, Paper, Typography, Divider, Input } from '@material-ui/core';
 import { withStyles } from '@material-ui/styles';
 import { MoreHoriz } from '@material-ui/icons';
-
-import { layerStateFamily } from '../../state';
+import type { ControllerProps } from '../../state';
 
 const DenseInput = withStyles({
   root: {
@@ -14,8 +14,14 @@ const DenseInput = withStyles({
   },
 })(Input);
 
-function AxisOptions({ layerId, axisIndex, max }: { layerId: string; axisIndex: number; max: number }): JSX.Element {
-  const [layer, setLayer] = useRecoilState(layerStateFamily(layerId));
+interface Props {
+  axisIndex: number;
+  max: number;
+}
+
+function AxisOptions({ sourceAtom, layerAtom, axisIndex, max }: ControllerProps<Props>) {
+  const sourceData = useAtomValue(sourceAtom);
+  const [layer, setLayer] = useAtom(layerAtom);
   const [anchorEl, setAnchorEl] = useState<null | Element>(null);
 
   const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
@@ -46,7 +52,7 @@ function AxisOptions({ layerId, axisIndex, max }: { layerId: string; axisIndex:
   };
 
   const open = Boolean(anchorEl);
-  const id = open ? `${axisIndex}-index-${layerId}-options` : undefined;
+  const id = open ? `${axisIndex}-index-${sourceData.id}-options` : undefined;
   const value = layer.layerProps.loaderSelection[0] ? layer.layerProps.loaderSelection[0][axisIndex] : 1;
 
   return (
diff --git a/src/components/LayerController/AxisSlider.tsx b/src/components/LayerController/AxisSlider.tsx
index 32993d55..9db29183 100644
--- a/src/components/LayerController/AxisSlider.tsx
+++ b/src/components/LayerController/AxisSlider.tsx
@@ -1,12 +1,12 @@
 import { Grid, Typography, Divider } from '@material-ui/core';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useAtom } from 'jotai';
+import { useAtomValue } from 'jotai/utils';
 import type { ChangeEvent } from 'react';
 import React, { useState, useEffect } from 'react';
 import { Slider } from '@material-ui/core';
 import { withStyles } from '@material-ui/styles';
 import DimensionOptions from './AxisOptions';
-
-import { layerStateFamily, sourceInfoState } from '../../state';
+import type { ControllerProps } from '../../state';
 
 const DenseSlider = withStyles({
   root: {
@@ -19,10 +19,15 @@ const DenseSlider = withStyles({
   },
 })(Slider);
 
-function AxisSlider({ layerId, axisIndex, max }: { layerId: string; axisIndex: number; max: number }): JSX.Element {
-  const [layer, setLayer] = useRecoilState(layerStateFamily(layerId));
-  const sourceInfo = useRecoilValue(sourceInfoState);
-  const { axis_labels } = sourceInfo[layerId];
+interface Props {
+  axisIndex: number;
+  max: number;
+}
+
+function AxisSlider({ sourceAtom, layerAtom, axisIndex, max }: ControllerProps<Props>) {
+  const [layer, setLayer] = useAtom(layerAtom);
+  const sourceData = useAtomValue(sourceAtom);
+  const { axis_labels } = sourceData;
   let axisLabel = axis_labels[axisIndex];
   if (axisLabel === 't' || axisLabel === 'z') {
     axisLabel = axisLabel.toUpperCase();
@@ -65,7 +70,7 @@ function AxisSlider({ layerId, axisIndex, max }: { layerId: string; axisIndex: n
             </div>
           </Grid>
           <Grid item xs={1}>
-            <DimensionOptions layerId={layerId} axisIndex={axisIndex} max={max} />
+            <DimensionOptions sourceAtom={sourceAtom} layerAtom={layerAtom} axisIndex={axisIndex} max={max} />
           </Grid>
         </Grid>
         <Grid container justify="space-between">
diff --git a/src/components/LayerController/AxisSliders.tsx b/src/components/LayerController/AxisSliders.tsx
index 19a4d529..d56e6b4c 100644
--- a/src/components/LayerController/AxisSliders.tsx
+++ b/src/components/LayerController/AxisSliders.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { Grid, Divider } from '@material-ui/core';
-import { useRecoilValue } from 'recoil';
+import { useAtomValue } from 'jotai/utils';
 import AxisSlider from './AxisSlider';
-import { sourceInfoState } from '../../state';
+import type { ControllerProps } from '../../state';
 
-function AxisSliders({ layerId }: { layerId: string }): JSX.Element | null {
-  const sourceInfo = useRecoilValue(sourceInfoState);
-  const { axis_labels, channel_axis, loader } = sourceInfo[layerId];
+function AxisSliders({ sourceAtom, layerAtom }: ControllerProps) {
+  const sourceData = useAtomValue(sourceAtom);
+  const { axis_labels, channel_axis, loader } = sourceData;
 
   const sliders = axis_labels
     .slice(0, -2) // ignore last two axes, [y,x]
@@ -16,7 +16,9 @@ function AxisSliders({ layerId }: { layerId: string }): JSX.Element | null {
       if (d[2] > 1) return true; // keep if size > 1
       return false; // otherwise ignore as well
     })
-    .map(([name, i, size]) => <AxisSlider key={name} layerId={layerId} axisIndex={i} max={size - 1} />);
+    .map(([name, i, size]) => (
+      <AxisSlider key={name} sourceAtom={sourceAtom} layerAtom={layerAtom} axisIndex={i} max={size - 1} />
+    ));
 
   if (sliders.length === 0) return null;
   return (
diff --git a/src/components/LayerController/ChannelController.tsx b/src/components/LayerController/ChannelController.tsx
index 1553f131..595ce243 100644
--- a/src/components/LayerController/ChannelController.tsx
+++ b/src/components/LayerController/ChannelController.tsx
@@ -1,20 +1,19 @@
 import React from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useAtom } from 'jotai';
+import { useAtomValue } from 'jotai/utils';
 import type { ChangeEvent } from 'react';
 import { Slider, Typography, Grid, IconButton } from '@material-ui/core';
 import { RadioButtonChecked, RadioButtonUnchecked } from '@material-ui/icons';
-
 import ChannelOptions from './ChannelOptions';
-import { layerStateFamily, sourceInfoState } from '../../state';
+import type { ControllerProps } from '../../state';
 
 interface ChannelConfig {
-  layerId: string;
   channelIndex: number;
 }
 
-function ChannelController({ layerId, channelIndex }: ChannelConfig): JSX.Element {
-  const sourceInfo = useRecoilValue(sourceInfoState);
-  const [layer, setLayer] = useRecoilState(layerStateFamily(layerId));
+function ChannelController({ sourceAtom, layerAtom, channelIndex }: ControllerProps<ChannelConfig>) {
+  const sourceData = useAtomValue(sourceAtom);
+  const [layer, setLayer] = useAtom(layerAtom);
 
   const handleContrastChange = (_: ChangeEvent<unknown>, v: number | number[]) => {
     setLayer((prev) => {
@@ -40,7 +39,7 @@ function ChannelController({ layerId, channelIndex }: ChannelConfig): JSX.Elemen
   const on = channelIsOn[channelIndex];
   const [min, max] = contrastLimits[channelIndex];
 
-  const { channel_axis, names } = sourceInfo[layerId];
+  const { channel_axis, names } = sourceData;
   const selection = loaderSelection[channelIndex];
   const nameIndex = Number.isInteger(channel_axis) ? selection[channel_axis as number] : 0;
   const label = names[nameIndex];
@@ -55,7 +54,7 @@ function ChannelController({ layerId, channelIndex }: ChannelConfig): JSX.Elemen
           </div>
         </Grid>
         <Grid item xs={1}>
-          <ChannelOptions layerId={layerId} channelIndex={channelIndex} />
+          <ChannelOptions sourceAtom={sourceAtom} layerAtom={layerAtom} channelIndex={channelIndex} />
         </Grid>
       </Grid>
       <Grid container justify="space-between">
diff --git a/src/components/LayerController/ChannelOptions.tsx b/src/components/LayerController/ChannelOptions.tsx
index 1a007b56..1e9719d2 100644
--- a/src/components/LayerController/ChannelOptions.tsx
+++ b/src/components/LayerController/ChannelOptions.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import type { MouseEvent, ChangeEvent } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useAtom } from 'jotai';
+import { useAtomValue } from 'jotai/utils';
 import { IconButton, Popover, Paper, Typography, Divider, Input, NativeSelect } from '@material-ui/core';
 import { withStyles } from '@material-ui/styles';
 import { MoreHoriz, Remove } from '@material-ui/icons';
-
-import { layerStateFamily, sourceInfoState } from '../../state';
+import type { ControllerProps } from '../../state';
 import ColorPalette from './ColorPalette';
 
 const DenseInput = withStyles({
@@ -15,11 +15,15 @@ const DenseInput = withStyles({
   },
 })(Input);
 
-function ChannelOptions({ layerId, channelIndex }: { layerId: string; channelIndex: number }): JSX.Element {
-  const sourceInfo = useRecoilValue(sourceInfoState);
-  const [layer, setLayer] = useRecoilState(layerStateFamily(layerId));
+interface Props {
+  channelIndex: number;
+}
+
+function ChannelOptions({ sourceAtom, layerAtom, channelIndex }: ControllerProps<Props>) {
+  const sourceData = useAtomValue(sourceAtom);
+  const [layer, setLayer] = useAtom(layerAtom);
   const [anchorEl, setAnchorEl] = useState<null | Element>(null);
-  const { channel_axis, names } = sourceInfo[layerId];
+  const { channel_axis, names } = sourceData;
 
   const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
@@ -109,7 +113,7 @@ function ChannelOptions({ layerId, channelIndex }: { layerId: string; channelInd
   };
 
   const open = Boolean(anchorEl);
-  const id = open ? `channel-${channelIndex}-${layerId}-options` : undefined;
+  const id = open ? `channel-${channelIndex}-${sourceData.name}-options` : undefined;
   const [min, max] = layer.layerProps.contrastLimits[channelIndex];
 
   return (
@@ -153,7 +157,7 @@ function ChannelOptions({ layerId, channelIndex }: { layerId: string; channelInd
           <NativeSelect
             fullWidth
             style={{ fontSize: '0.7em' }}
-            id={`layer-${layerId}-channel-select`}
+            id={`layer-${sourceData.name}-channel-select`}
             onChange={handleSelectionChange}
             value={layer.layerProps.loaderSelection[channelIndex][channel_axis as number]}
           >
diff --git a/src/components/LayerController/ColorPalette.tsx b/src/components/LayerController/ColorPalette.tsx
index 619680b6..f99e87d4 100644
--- a/src/components/LayerController/ColorPalette.tsx
+++ b/src/components/LayerController/ColorPalette.tsx
@@ -19,7 +19,7 @@ const useStyles = makeStyles(() => ({
 }));
 
 const RGB_COLORS: [string, number[]][] = Object.entries(COLORS).map(([name, hex]) => [name, hexToRGB(hex)]);
-function ColorPalette({ handleChange }: { handleChange: (c: number[]) => void }): JSX.Element {
+function ColorPalette({ handleChange }: { handleChange: (c: number[]) => void }) {
   const classes = useStyles();
   return (
     <div className={classes.container} aria-label="color-swatch">
diff --git a/src/components/LayerController/Content.tsx b/src/components/LayerController/Content.tsx
index 73d06ce3..3157c1bc 100644
--- a/src/components/LayerController/Content.tsx
+++ b/src/components/LayerController/Content.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useAtomValue } from 'jotai/utils';
 import { AccordionDetails, Grid, Typography, Divider } from '@material-ui/core';
 import { withStyles } from '@material-ui/styles';
 
@@ -9,6 +10,7 @@ import AxisSliders from './AxisSliders';
 import ChannelController from './ChannelController';
 
 import { range } from '../../utils';
+import type { ControllerProps } from '../../state';
 
 const Details = withStyles({
   root: {
@@ -18,35 +20,37 @@ const Details = withStyles({
   },
 })(AccordionDetails);
 
-function Content({ layerId, nChannels }: { layerId: string; nChannels: number }): JSX.Element {
+function Content({ sourceAtom, layerAtom }: ControllerProps) {
+  const layer = useAtomValue(layerAtom);
+  const nChannels = layer.layerProps.loaderSelection.length;
   return (
     <Details>
       <Grid container direction="column">
-        <AcquisitionController layerId={layerId} />
+        <AcquisitionController sourceAtom={sourceAtom} layerAtom={layerAtom} />
         <Grid>
           <Grid container justify="space-between">
             <Grid item xs={3}>
               <Typography variant="caption">opacity:</Typography>
             </Grid>
             <Grid item xs={8}>
-              <OpacitySlider layerId={layerId} />
+              <OpacitySlider sourceAtom={sourceAtom} layerAtom={layerAtom} />
             </Grid>
           </Grid>
         </Grid>
         <Divider />
-        <AxisSliders layerId={layerId} />
+        <AxisSliders sourceAtom={sourceAtom} layerAtom={layerAtom} />
         <Grid container justify="space-between">
           <Grid item xs={3}>
             <Typography variant="caption">channels:</Typography>
           </Grid>
           <Grid item xs={1}>
-            <AddChannelButton layerId={layerId} />
+            <AddChannelButton sourceAtom={sourceAtom} layerAtom={layerAtom} />
           </Grid>
         </Grid>
         <Divider />
         <Grid>
           {range(nChannels).map((i) => (
-            <ChannelController layerId={layerId} channelIndex={i} key={i + layerId} />
+            <ChannelController sourceAtom={sourceAtom} layerAtom={layerAtom} channelIndex={i} key={i} />
           ))}
         </Grid>
       </Grid>
diff --git a/src/components/LayerController/Header.tsx b/src/components/LayerController/Header.tsx
index 1e77af95..0ffd026c 100644
--- a/src/components/LayerController/Header.tsx
+++ b/src/components/LayerController/Header.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
+import { useAtomValue } from 'jotai/utils';
 import { AccordionSummary, Typography } from '@material-ui/core';
 import { withStyles } from '@material-ui/styles';
 import LayerVisibilityButton from './LayerVisibilityButton';
+import type { ControllerProps } from '../../state';
 
 const DenseAccordionSummary = withStyles({
   root: {
@@ -26,12 +28,17 @@ const DenseAccordionSummary = withStyles({
   expanded: {},
 })(AccordionSummary);
 
-function Header({ layerId, name }: { layerId: string; name: string }): JSX.Element {
-  const label = `layer-controller-${layerId}`;
+interface Props {
+  name: string;
+}
+
+function Header({ sourceAtom, layerAtom, name }: ControllerProps<Props>) {
+  const sourceData = useAtomValue(sourceAtom);
+  const label = `layer-controller-${sourceData.id}`;
   return (
     <DenseAccordionSummary aria-controls={label} id={label}>
       <div style={{ display: 'flex', flexDirection: 'row' }}>
-        <LayerVisibilityButton layerId={layerId} />
+        <LayerVisibilityButton sourceAtom={sourceAtom} layerAtom={layerAtom} />
         <Typography
           style={{
             marginTop: '4px',
diff --git a/src/components/LayerController/LayerVisibilityButton.tsx b/src/components/LayerController/LayerVisibilityButton.tsx
index 0eb26919..1b29cf7a 100644
--- a/src/components/LayerController/LayerVisibilityButton.tsx
+++ b/src/components/LayerController/LayerVisibilityButton.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
-import { useRecoilState } from 'recoil';
+import { useAtom } from 'jotai';
+import { useAtomValue } from 'jotai/utils';
 import type { MouseEvent } from 'react';
 import { IconButton } from '@material-ui/core';
 import { Visibility, VisibilityOff } from '@material-ui/icons';
+import type { ControllerProps } from '../../state';
 
-import { layerStateFamily } from '../../state';
-
-function LayerVisibilityButton({ layerId }: { layerId: string }): JSX.Element {
-  const [layer, setLayer] = useRecoilState(layerStateFamily(layerId));
+function LayerVisibilityButton({ sourceAtom, layerAtom }: ControllerProps) {
+  const sourceData = useAtomValue(sourceAtom);
+  const [layer, setLayer] = useAtom(layerAtom);
   const toggle = (event: MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
     setLayer((prev) => {
@@ -15,18 +16,17 @@ function LayerVisibilityButton({ layerId }: { layerId: string }): JSX.Element {
       return { ...prev, on };
     });
   };
-  const { on } = layer;
   return (
     <IconButton
-      aria-label={`toggle-layer-visibility-${layerId}`}
+      aria-label={`toggle-layer-visibility-${sourceData.id}`}
       onClick={toggle}
       style={{
         backgroundColor: 'transparent',
         marginTop: '2px',
-        color: `rgb(255, 255, 255, ${on ? 1 : 0.5})`,
+        color: `rgb(255, 255, 255, ${layer.on ? 1 : 0.5})`,
       }}
     >
-      {on ? <Visibility /> : <VisibilityOff />}
+      {layer.on ? <Visibility /> : <VisibilityOff />}
     </IconButton>
   );
 }
diff --git a/src/components/LayerController/OpacitySlider.tsx b/src/components/LayerController/OpacitySlider.tsx
index 8a3d3083..89dd64dc 100644
--- a/src/components/LayerController/OpacitySlider.tsx
+++ b/src/components/LayerController/OpacitySlider.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
-import { useRecoilState } from 'recoil';
+import { useAtom } from 'jotai';
 import type { ChangeEvent } from 'react';
 import { Slider } from '@material-ui/core';
 import { withStyles } from '@material-ui/styles';
-
-import { layerStateFamily } from '../../state';
+import type { ControllerProps } from '../../state';
 
 const DenseSlider = withStyles({
   root: {
@@ -17,8 +16,8 @@ const DenseSlider = withStyles({
   },
 })(Slider);
 
-function OpacitySlider({ layerId }: { layerId: string }): JSX.Element {
-  const [layer, setLayer] = useRecoilState(layerStateFamily(layerId));
+function OpacitySlider({ layerAtom }: ControllerProps) {
+  const [layer, setLayer] = useAtom(layerAtom);
   const handleChange = (_: ChangeEvent<unknown>, value: number | number[]) => {
     const opacity = value as number;
     setLayer((prev) => ({ ...prev, layerProps: { ...prev.layerProps, opacity } }));
diff --git a/src/components/LayerController/index.tsx b/src/components/LayerController/index.tsx
index e9082d9a..0d756f6e 100644
--- a/src/components/LayerController/index.tsx
+++ b/src/components/LayerController/index.tsx
@@ -1,13 +1,11 @@
-import React, { useEffect } from 'react';
-import { useRecoilValue, useRecoilState } from 'recoil';
+import React from 'react';
+import { useAtomValue } from 'jotai/utils';
 import MuiAccordion from '@material-ui/core/Accordion';
 import { withStyles } from '@material-ui/styles';
 
-import { sourceInfoState, layerStateFamily } from '../../state';
-import type { SourceData } from '../../state';
-
 import Header from './Header';
 import Content from './Content';
+import { ControllerProps, layerFamilyAtom } from '../../state';
 
 const Accordion = withStyles({
   root: {
@@ -30,29 +28,14 @@ const Accordion = withStyles({
   },
 })(MuiAccordion);
 
-function LayerController({ layerId }: { layerId: string }): JSX.Element {
-  const sourceInfo = useRecoilValue(sourceInfoState);
-  const [layer, setLayer] = useRecoilState(layerStateFamily(layerId));
-
-  useEffect(() => {
-    async function initLayer(sourceData: SourceData) {
-      const { initLayerStateFromSource } = await import('../../io');
-      const initialLayerState = await initLayerStateFromSource(sourceData, layerId);
-      setLayer(initialLayerState);
-    }
-    // Loader only defined once layer state is initialized.
-    if (layerId in sourceInfo) {
-      const config = sourceInfo[layerId];
-      initLayer(config);
-    }
-  }, [sourceInfo]);
-
-  const { name = '' } = sourceInfo[layerId];
-  const nChannels = layer.layerProps.loaderSelection.length;
+function LayerController({ sourceAtom }: Omit<ControllerProps, 'layerAtom'>) {
+  const sourceInfo = useAtomValue(sourceAtom);
+  const layerAtom = layerFamilyAtom(sourceInfo);
+  const { name = '' } = sourceInfo;
   return (
     <Accordion defaultExpanded>
-      <Header layerId={layerId} name={name} />
-      <Content layerId={layerId} nChannels={nChannels} />
+      <Header sourceAtom={sourceAtom} layerAtom={layerAtom} name={name} />
+      <Content sourceAtom={sourceAtom} layerAtom={layerAtom} />
     </Accordion>
   );
 }
diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
index 6b8b7b4f..bf448270 100644
--- a/src/components/Menu.tsx
+++ b/src/components/Menu.tsx
@@ -1,10 +1,10 @@
 import React, { useReducer } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useAtomValue } from 'jotai/utils';
 import { Grid, IconButton } from '@material-ui/core';
 import { Add, Remove } from '@material-ui/icons';
 import { makeStyles } from '@material-ui/styles';
 
-import { layerIdsState } from '../state';
+import { sourceInfoAtomAtoms } from '../state';
 import LayerController from './LayerController';
 
 const useStyles = makeStyles({
@@ -29,8 +29,8 @@ const useStyles = makeStyles({
   },
 });
 
-function Menu(): JSX.Element {
-  const layerIds = useRecoilValue(layerIdsState);
+function Menu() {
+  const sourceAtoms = useAtomValue(sourceInfoAtomAtoms);
   const [hidden, toggle] = useReducer((v) => !v, false);
   const classes = useStyles();
   return (
@@ -46,8 +46,8 @@ function Menu(): JSX.Element {
           {hidden ? <Add /> : <Remove />}
         </IconButton>
         <div className={classes.scroll} style={{ display: hidden ? 'none' : 'flex' }}>
-          {layerIds.map((id) => (
-            <LayerController layerId={id} key={id} />
+          {sourceAtoms.map((sourceAtom) => (
+            <LayerController key={`${sourceAtom}`} sourceAtom={sourceAtom} />
           ))}
         </div>
       </Grid>
diff --git a/src/components/Viewer.tsx b/src/components/Viewer.tsx
index 6506e1ba..eca8a221 100644
--- a/src/components/Viewer.tsx
+++ b/src/components/Viewer.tsx
@@ -1,10 +1,11 @@
 import React, { useRef } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useAtom } from 'jotai';
+import { useAtomValue } from 'jotai/utils';
 import DeckGL from 'deck.gl';
 import { OrthographicView } from '@deck.gl/core';
 import type { Layer } from '@deck.gl/core';
 
-import { viewerViewState, layersSelector, LayerState } from '../state';
+import { layerAtoms, LayerState, viewStateAtom } from '../state';
 import { isInterleaved, fitBounds } from '../utils';
 
 function getLayerSize(props: LayerState['layerProps']) {
@@ -22,10 +23,9 @@ function getLayerSize(props: LayerState['layerProps']) {
   return { height, width, maxZoom };
 }
 
-function WrappedViewStateDeck({ layers }: { layers: Layer<any, any>[] }): JSX.Element {
-  const [viewState, setViewState] = useRecoilState(viewerViewState);
+function WrappedViewStateDeck({ layers }: { layers: Layer<any, any>[] }) {
+  const [viewState, setViewState] = useAtom(viewStateAtom);
   const deckRef = useRef<DeckGL>(null);
-  const views = [new OrthographicView({ id: 'ortho', controller: true })];
 
   // If viewState hasn't been updated, use the first loader to guess viewState
   // TODO: There is probably a better place / way to set the intital view and this is a hack.
@@ -43,19 +43,17 @@ function WrappedViewStateDeck({ layers }: { layers: Layer<any, any>[] }): JSX.El
       layers={layers}
       viewState={viewState}
       onViewStateChange={(e) => setViewState(e.viewState)}
-      views={views}
+      views={[new OrthographicView({ id: 'ortho', controller: true })]}
     />
   );
 }
 
-function Viewer(): JSX.Element {
-  const layerConstructors = useRecoilValue(layersSelector);
-  const layers = layerConstructors.map((l) => {
-    // Something weird with Recoil Loadable here. Need to cast to any.
-    const { Layer, layerProps, on } = l as any;
-    return !Layer || !on ? null : new Layer(layerProps);
+function Viewer() {
+  const layerConstructors = useAtomValue(layerAtoms);
+  const layers = layerConstructors.map((layer) => {
+    return !layer.on ? null : new layer.Layer(layer.layerProps);
   });
-  return <WrappedViewStateDeck layers={layers} />;
+  return <WrappedViewStateDeck layers={layers as Layer<any, any>[]} />;
 }
 
 export default Viewer;
diff --git a/src/index.tsx b/src/index.tsx
index e41c81a4..9f602168 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { RecoilRoot } from 'recoil';
+import { Provider } from 'jotai';
 import { ThemeProvider } from '@material-ui/styles';
 
 import Vizarr from './vizarr';
@@ -8,9 +8,9 @@ import theme from './theme';
 
 ReactDOM.render(
   <ThemeProvider theme={theme}>
-    <RecoilRoot>
+    <Provider>
       <Vizarr />
-    </RecoilRoot>
+    </Provider>
   </ThemeProvider>,
   document.getElementById('root')
 );
diff --git a/src/io.ts b/src/io.ts
index 402f37ee..08858f73 100644
--- a/src/io.ts
+++ b/src/io.ts
@@ -194,7 +194,7 @@ export async function createSourceData(config: ImageLayerConfig): Promise<Source
   throw Error('Failed to load image.');
 }
 
-export function initLayerStateFromSource(sourceData: SourceData, layerId: string): LayerState {
+export function initLayerStateFromSource(sourceData: SourceData): LayerState {
   const {
     loader,
     channel_axis,
@@ -240,7 +240,6 @@ export function initLayerStateFromSource(sourceData: SourceData, layerId: string
   return {
     Layer,
     layerProps: {
-      id: layerId,
       loader: loader.length === 1 ? loader[0] : loader,
       loaders,
       rows,
diff --git a/src/state.ts b/src/state.ts
index 21cef28f..2b88e345 100644
--- a/src/state.ts
+++ b/src/state.ts
@@ -1,9 +1,11 @@
-import { atom, atomFamily, selector, waitForAll } from 'recoil';
-import type { ZarrArray } from 'zarr';
 import type { ImageLayer, MultiscaleImageLayer, ZarrPixelSource } from '@hms-dbmi/viv';
+import type { Matrix4 } from '@math.gl/core/dist/esm';
+import { atom, PrimitiveAtom, SetStateAction } from 'jotai';
+import { atomFamily, splitAtom, waitForAll } from 'jotai/utils';
 import type { VivLayerProps } from 'viv-layers';
+import type { ZarrArray } from 'zarr';
 import type GridLayer from './gridLayer';
-import { Matrix4 } from '@math.gl/core/dist/esm';
+import { initLayerStateFromSource } from './io';
 
 export const DEFAULT_VIEW_STATE = { zoom: 0, target: [0, 0, 0], default: true };
 export const DEFAULT_LAYER_PROPS = {
@@ -18,6 +20,12 @@ export const DEFAULT_LAYER_PROPS = {
   excludeBackground: true,
 };
 
+interface ViewState {
+  zoom: number;
+  target: number[];
+  default?: boolean;
+}
+
 interface BaseConfig {
   source: string | ZarrArray['store'];
   axis_labels?: string[];
@@ -77,7 +85,7 @@ export type SourceData = {
 
 export type LayerCtr<T> = new (...args: any[]) => T;
 export type LayerState = {
-  Layer: null | LayerCtr<typeof ImageLayer | typeof MultiscaleImageLayer | GridLayer>;
+  Layer: LayerCtr<typeof ImageLayer | typeof MultiscaleImageLayer | GridLayer>;
   layerProps: VivLayerProps & {
     loader: ZarrPixelSource<string[]> | ZarrPixelSource<string[]>[];
     contrastLimits: number[][];
@@ -89,35 +97,27 @@ export type LayerState = {
   on: boolean;
 };
 
-export const sourceInfoState = atom({
-  key: 'sourceInfo',
-  default: {} as { [id: string]: SourceData },
-});
+type WithId<T> = T & { id: string };
 
-export const layerIdsState = atom({
-  key: 'layerIds',
-  default: [] as string[],
-});
+export type ControllerProps<T = {}> = {
+  sourceAtom: PrimitiveAtom<WithId<SourceData>>;
+  layerAtom: PrimitiveAtom<WithId<LayerState>>;
+} & T;
 
-export const viewerViewState = atom({
-  key: 'viewerViewState',
-  default: DEFAULT_VIEW_STATE as { zoom: number; target: number[]; default?: boolean },
-});
+export const sourceInfoAtom = atom<WithId<SourceData>[]>([]);
 
-export const layerStateFamily = atomFamily({
-  key: 'layerStateFamily',
-  default: (id: string): LayerState => ({
-    Layer: null,
-    layerProps: { id, modelMatrix: new Matrix4(), ...DEFAULT_LAYER_PROPS },
-    on: false,
-  }),
-});
+export const viewStateAtom = atom<ViewState>(DEFAULT_VIEW_STATE);
+
+export const sourceInfoAtomAtoms = splitAtom(sourceInfoAtom);
+
+export const layerFamilyAtom = atomFamily<WithId<SourceData>, WithId<LayerState>, SetStateAction<WithId<LayerState>>>(
+  (param) => atom({ ...initLayerStateFromSource(param), id: param.id }),
+  (a, b) => a.id === b.id
+);
 
-export const layersSelector = selector({
-  key: 'layerSelector',
-  get: ({ get }) => {
-    const layerIds = get(layerIdsState);
-    const layers = layerIds.map((id) => layerStateFamily(id));
-    return get(waitForAll(layers));
-  },
+export const layerAtoms = atom((get) => {
+  const atoms = get(sourceInfoAtomAtoms);
+  if (atoms.length === 0) return [];
+  const layers = atoms.map((a) => layerFamilyAtom(get(a)));
+  return get(waitForAll(layers));
 });
diff --git a/src/vizarr.tsx b/src/vizarr.tsx
index 02c4d0ba..dc554e3a 100644
--- a/src/vizarr.tsx
+++ b/src/vizarr.tsx
@@ -1,16 +1,15 @@
 import React, { useEffect } from 'react';
-import { useSetRecoilState } from 'recoil';
+import { useUpdateAtom } from 'jotai/utils';
 
-import { layerIdsState, sourceInfoState, viewerViewState } from './state';
+import { sourceInfoAtom, viewStateAtom } from './state';
 import type { ImageLayerConfig } from './state';
 
 import Viewer from './components/Viewer';
 import Menu from './components/Menu';
 
 function App() {
-  const setViewState = useSetRecoilState(viewerViewState);
-  const setLayerIds = useSetRecoilState(layerIdsState);
-  const setSourceInfo = useSetRecoilState(sourceInfoState);
+  const setSourceInfo = useUpdateAtom(sourceInfoAtom);
+  const setViewState = useUpdateAtom(viewStateAtom);
 
   async function addImage(config: ImageLayerConfig) {
     const { createSourceData } = await import('./io');
@@ -20,9 +19,8 @@ function App() {
       if (!sourceData.name) {
         sourceData.name = `image_${Object.keys(prevSourceInfo).length}`;
       }
-      return { ...prevSourceInfo, [id]: sourceData };
+      return [...prevSourceInfo, { id, ...sourceData }];
     });
-    setLayerIds((prevIds) => [...prevIds, id]);
   }
 
   useEffect(() => {