diff --git a/docs/pages/full/index.tsx b/docs/pages/full/index.tsx
index a112e5ab..d55502db 100644
--- a/docs/pages/full/index.tsx
+++ b/docs/pages/full/index.tsx
@@ -1,10 +1,14 @@
 import {
   AppBar,
-  FormControl, FormControlLabel,
+  FormControl,
+  FormControlLabel,
   InputLabel,
   MenuItem,
-  Select, Switch,
-  TextField, Toolbar, Typography
+  Select,
+  Switch,
+  TextField,
+  Toolbar,
+  Typography
 } from '@mui/material'
 import {
   applyValue,
@@ -106,6 +110,7 @@ const IndexPage: React.FC = () => {
   const [theme, setTheme] = useState<JsonViewerTheme>('light')
   const [src, setSrc] = useState(() => example)
   const [displayDataTypes, setDisplayDataTypes] = useState(true)
+  const [editable, setEditable] = useState(true)
   useEffect(() => {
     const loop = () => {
       setSrc(src => ({
@@ -135,7 +140,14 @@ const IndexPage: React.FC = () => {
       <Toolbar/>
       <FormControlLabel
         control={<Switch
-          value={displayDataTypes}
+          checked={editable}
+          onChange={event => setEditable(event.target.checked)}
+        />}
+        label='Editable'
+      />
+      <FormControlLabel
+        control={<Switch
+          checked={displayDataTypes}
           onChange={event => setDisplayDataTypes(event.target.checked)}
         />}
         label='DisplayDataTypes'
@@ -189,6 +201,7 @@ const IndexPage: React.FC = () => {
       </FormControl>
       <JsonViewer
         value={src}
+        editable={editable}
         indentWidth={indent}
         theme={theme}
         displayDataTypes={displayDataTypes}
diff --git a/src/components/DataKeyPair.tsx b/src/components/DataKeyPair.tsx
index 01fce8be..fc5928d3 100644
--- a/src/components/DataKeyPair.tsx
+++ b/src/components/DataKeyPair.tsx
@@ -32,20 +32,20 @@ const IconBox = styled(props => <Box {...props} component='span'/>)`
 
 export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
   const { value, path, nestedIndex } = props
-  const propsEditable = props.editable ?? false
+  const propsEditable = props.editable ?? undefined
   const storeEditable = useJsonViewerStore(store => store.editable)
   const editable = useMemo(() => {
     if (storeEditable === false) {
       return false
     }
-    if (!propsEditable) {
+    if (propsEditable === false) {
       // props.editable is false which means we cannot provide the suitable way to edit it
       return false
     }
     if (typeof storeEditable === 'function') {
       return !!storeEditable(path, value)
     }
-    return propsEditable
+    return storeEditable
   }, [path, propsEditable, storeEditable, value])
   const [tempValue, setTempValue] = useState(typeof value === 'function' ? () => value : value)
   const depth = path.length