diff --git a/src/components/App.tsx b/src/components/App.tsx
index 91464364..600e6d79 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -457,7 +457,9 @@ class App extends React.Component<AppProps, AppState> {
   }
 
   public focusContainer = () => {
-    this.excalidrawContainerRef.current?.focus();
+    if (this.props.autoFocus) {
+      this.excalidrawContainerRef.current?.focus();
+    }
   };
 
   public getSceneElementsIncludingDeleted = () => {
diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx
index a2705825..91ef63f7 100644
--- a/src/excalidraw-app/index.tsx
+++ b/src/excalidraw-app/index.tsx
@@ -453,6 +453,7 @@ const ExcalidrawWrapper = () => {
         detectScroll={false}
         handleKeyboardGlobally={true}
         onLibraryChange={onLibraryChange}
+        autoFocus={true}
       />
       {excalidrawAPI && <CollabWrapper excalidrawAPI={excalidrawAPI} />}
       {errorMessage && (
diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md
index 3c25794b..96fb8d76 100644
--- a/src/packages/excalidraw/CHANGELOG.md
+++ b/src/packages/excalidraw/CHANGELOG.md
@@ -19,6 +19,10 @@ Please add the latest change on the top under the correct section.
 
 ### Features
 
+- Added prop [`autoFocus`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#autoFocus) to focus the excalidraw component on page load when enabled, defaults to false [#3691](https://github.com/excalidraw/excalidraw/pull/3691).
+
+  Note: Earlier Excalidraw component was focussed by default on page load, you need to enable `autoFocus` prop to retain the same behaviour.
+
 - Added prop `UIOptions.canvasActions.export.renderCustomUI` to support Custom UI rendering inside export dialog [#3666](https://github.com/excalidraw/excalidraw/pull/3666).
 - Added prop `UIOptions.canvasActions.saveAsImage` to show/hide the **Save as image** button in the canvas actions. Defauls to `true` hence the **Save as Image** button is rendered [#3662](https://github.com/excalidraw/excalidraw/pull/3662).
 
diff --git a/src/packages/excalidraw/README_NEXT.md b/src/packages/excalidraw/README_NEXT.md
index f48ccb2a..00e43d16 100644
--- a/src/packages/excalidraw/README_NEXT.md
+++ b/src/packages/excalidraw/README_NEXT.md
@@ -378,6 +378,7 @@ To view the full example visit :point_down:
 | [`detectScroll`](#detectScroll) | boolean | true | Indicates whether to update the offsets when nearest ancestor is scrolled. |
 | [`handleKeyboardGlobally`](#handleKeyboardGlobally) | boolean | false | Indicates whether to bind the keyboard events to document. |
 | [`onLibraryChange`](#onLibraryChange) | <pre>(items: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L200">LibraryItems</a>) => void &#124; Promise&lt;any&gt; </pre> |  | The callback if supplied is triggered when the library is updated and receives the library items. |
+| [`autoFocus`](#autoFocus) | boolean | false | Implies whether to focus the Excalidraw component on page load |
 
 ### Dimensions of Excalidraw
 
@@ -644,6 +645,10 @@ It is invoked with empty items when user clears the library. You can use this ca
 
 The unique id of the excalidraw component. This can be used to identify the excalidraw component, for example importing the library items to the excalidraw component from where it was initiated when you have multiple excalidraw components rendered on the same page as shown in [multiple excalidraw demo](https://codesandbox.io/s/multiple-excalidraw-k1xx5).
 
+### autoFocus
+
+This prop implies whether to focus the Excalidraw component on page load. Defaults to false.
+
 ### Extra API's
 
 #### `getSceneVersion`
diff --git a/src/packages/excalidraw/index.tsx b/src/packages/excalidraw/index.tsx
index b7bc53ad..7fbc00b5 100644
--- a/src/packages/excalidraw/index.tsx
+++ b/src/packages/excalidraw/index.tsx
@@ -33,6 +33,7 @@ const Excalidraw = (props: ExcalidrawProps) => {
     detectScroll = true,
     handleKeyboardGlobally = false,
     onLibraryChange,
+    autoFocus = false,
   } = props;
 
   const canvasActions = props.UIOptions?.canvasActions;
@@ -92,6 +93,7 @@ const Excalidraw = (props: ExcalidrawProps) => {
         detectScroll={detectScroll}
         handleKeyboardGlobally={handleKeyboardGlobally}
         onLibraryChange={onLibraryChange}
+        autoFocus={autoFocus}
       />
     </InitializeApp>
   );
diff --git a/src/tests/packages/excalidraw.test.tsx b/src/tests/packages/excalidraw.test.tsx
index 6dbc234d..a1e6927e 100644
--- a/src/tests/packages/excalidraw.test.tsx
+++ b/src/tests/packages/excalidraw.test.tsx
@@ -224,4 +224,22 @@ describe("<Excalidraw/>", () => {
       });
     });
   });
+
+  describe("Test autoFocus prop", () => {
+    it("should not focus when autoFocus is false", async () => {
+      const { container } = await render(<Excalidraw />);
+
+      expect(
+        container.querySelector(".excalidraw") === document.activeElement,
+      ).toBe(false);
+    });
+
+    it("should focus when autoFocus is true", async () => {
+      const { container } = await render(<Excalidraw autoFocus={true} />);
+
+      expect(
+        container.querySelector(".excalidraw") === document.activeElement,
+      ).toBe(true);
+    });
+  });
 });
diff --git a/src/types.ts b/src/types.ts
index 213b373b..76888717 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -201,6 +201,7 @@ export interface ExcalidrawProps {
   detectScroll?: boolean;
   handleKeyboardGlobally?: boolean;
   onLibraryChange?: (libraryItems: LibraryItems) => void | Promise<any>;
+  autoFocus?: boolean;
 }
 
 export type SceneData = {