diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx
index 8ec15047..bdf8814d 100644
--- a/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx
+++ b/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx
@@ -5,11 +5,12 @@ import { storiesOf } from "@storybook/react";
 import * as React from "react";
 
 import { SandpackProvider } from "../../contexts/sandpackContext";
+import { useSandpack } from "../../hooks";
 
 import * as mocks from "./languages-mocks";
 
 import { CodeEditor, SandpackCodeEditor } from "./index";
-import { useSandpack } from "../../hooks";
+
 const stories = storiesOf("components/CodeMirror", module);
 
 Object.entries(mocks).forEach(([languageName, mockFile]) =>
@@ -147,6 +148,7 @@ export default function List() {
   );
   return <ul>{listItems}</ul>;
 }`}
+      readOnly
       decorators={[
         { className: "highlight", line: 1 },
         { className: "highlight", line: 9 },
diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
index 0992e5d2..8fae6640 100644
--- a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
+++ b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
@@ -183,8 +183,12 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
       [decorators]
     );
 
+    const useStaticReadOnly = readOnly && decorators?.length === 0;
+
     React.useEffect(() => {
-      if (!wrapper.current || !shouldInitEditor || readOnly) return;
+      if (!wrapper.current || !shouldInitEditor || useStaticReadOnly) {
+        return;
+      }
 
       const parentDiv = wrapper.current;
       const existingPlaceholder = parentDiv.querySelector(
@@ -214,10 +218,14 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
         cmView.current?.destroy();
       };
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [shouldInitEditor, readOnly]);
+    }, [shouldInitEditor, readOnly, useStaticReadOnly]);
 
     React.useEffect(() => {
-      if (cmView.current && !readOnly) {
+      if (useStaticReadOnly) {
+        return;
+      }
+
+      if (cmView.current) {
         const customCommandsKeymap: KeyBinding[] = [
           {
             key: "Tab",
@@ -327,6 +335,7 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
       wrapContent,
       themeId,
       readOnly,
+      useStaticReadOnly,
       autoReload,
     ]);
 
@@ -441,7 +450,7 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
       return `var(--${THEME_PREFIX}-space-${offset})`;
     };
 
-    if (readOnly) {
+    if (useStaticReadOnly) {
       return (
         <>
           <pre