diff --git a/package.json b/package.json
index d1d2ca3..9a88854 100644
--- a/package.json
+++ b/package.json
@@ -4,10 +4,10 @@
   "private": true,
   "homepage": "https://pdftron.github.io/webviewer-react-sample",
   "dependencies": {
+    "@pdftron/webviewer": "^10.6.0",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
-    "react-scripts": "2.1.1",
-    "@pdftron/webviewer": "^10.0.0"
+    "react-scripts": "2.1.1"
   },
   "devDependencies": {
     "btoa": "^1.2.1",
@@ -33,4 +33,4 @@
     "not ie <= 11",
     "not op_mini all"
   ]
-}
\ No newline at end of file
+}
diff --git a/public/files/sample_pdf.pdf b/public/files/sample_pdf.pdf
new file mode 100644
index 0000000..d8c2428
Binary files /dev/null and b/public/files/sample_pdf.pdf differ
diff --git a/src/App.css b/src/App.css
index e29218c..8ed8241 100644
--- a/src/App.css
+++ b/src/App.css
@@ -14,4 +14,5 @@
   font-size: 1.2em;
   line-height: 44px;
   color: white;
+  text-align: right;
 }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index f086938..5650b84 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,43 +1,57 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useState, useCallback } from 'react';
 import WebViewer from '@pdftron/webviewer';
 import './App.css';
 
 const App = () => {
   const viewer = useRef(null);
+  const [instance, setInstance] = useState(null);
+  const [isEditingMode, setIsEditingMode] = useState(false)
 
-  // if using a class, equivalent of componentDidMount 
   useEffect(() => {
-    WebViewer(
+    WebViewer.Iframe(
       {
         path: '/webviewer/lib',
-        initialDoc: '/files/PDFTRON_about.pdf',
-        licenseKey: 'your_license_key'  // sign up to get a free trial key at https://dev.apryse.com
+        initialDoc: '/files/sample_pdf.pdf',
+        licenseKey: 'your_license_key',
       },
       viewer.current,
     ).then((instance) => {
-      const { documentViewer, annotationManager, Annotations } = instance.Core;
-
-      documentViewer.addEventListener('documentLoaded', () => {
-        const rectangleAnnot = new Annotations.RectangleAnnotation({
-          PageNumber: 1,
-          // values are in page coordinates with (0, 0) in the top left
-          X: 100,
-          Y: 150,
-          Width: 200,
-          Height: 50,
-          Author: annotationManager.getCurrentUser()
-        });
-
-        annotationManager.addAnnotation(rectangleAnnot);
-        // need to draw the annotation otherwise it won't show up until the page is refreshed
-        annotationManager.redrawAnnotation(rectangleAnnot);
-      });
+      setInstance(instance);
     });
   }, []);
 
+  const enableCustomReadOnlyMode = useCallback(
+    (isReadOnlyMode = !isEditingMode) => {
+      const { annotationManager } = instance.Core;
+      const fieldManager = annotationManager.getFieldManager();
+
+      fieldManager.forEachField(field => {
+        field.flags.set("ReadOnly", isReadOnlyMode);
+      });
+    },
+    [instance, isEditingMode]
+  );
+
+  useEffect(() => {
+    if (instance) {
+      const { documentViewer } = instance.Core;
+
+      // For the first time when pdf loads
+      documentViewer.addEventListener("annotationsLoaded", enableCustomReadOnlyMode);
+      // For the subsequent loads when switched between edit and read-only modes.
+      enableCustomReadOnlyMode();
+
+      return () => {
+        documentViewer.removeEventListener("annotationsLoaded", enableCustomReadOnlyMode);
+      };
+    }
+
+    return undefined;
+  }, [instance, enableCustomReadOnlyMode]);
+
   return (
     <div className="App">
-      <div className="header">React sample</div>
+      <div className="header"><button onClick={() => setIsEditingMode(isEditingMode => !isEditingMode)}>{isEditingMode ? 'Disable Editing' : 'Enable Editing'}</button></div>
       <div className="webviewer" ref={viewer}></div>
     </div>
   );