diff --git a/src/index.tsx b/src/index.tsx
index bb267644..2b0337be 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2191,7 +2191,10 @@ export class App extends React.Component<any, AppState> {
             onPointerLeave={this.removePointer}
             onDrop={event => {
               const file = event.dataTransfer.files[0];
-              if (file?.type === "application/json") {
+              if (
+                file?.type === "application/json" ||
+                file?.name.endsWith(".excalidraw")
+              ) {
                 loadFromBlob(file)
                   .then(({ elements, appState }) =>
                     this.syncActionResult({ elements, appState }),
diff --git a/src/scene/data.ts b/src/scene/data.ts
index 1381304d..7405996d 100644
--- a/src/scene/data.ts
+++ b/src/scene/data.ts
@@ -83,7 +83,7 @@ export async function saveAsJSON(
 ) {
   const serialized = serializeAsJSON(elements, appState);
 
-  const name = `${appState.name}.json`;
+  const name = `${appState.name}.excalidraw`;
   await fileSave(
     new Blob([serialized], { type: "application/json" }),
     {
@@ -96,7 +96,7 @@ export async function saveAsJSON(
 export async function loadFromJSON() {
   const blob = await fileOpen({
     description: "Excalidraw files",
-    extensions: ["json"],
+    extensions: ["json", "excalidraw"],
     mimeTypes: ["application/json"],
   });
   return loadFromBlob(blob);