diff --git a/src/Editor.js b/src/Editor.js
index 3e443be..f2a4e3c 100644
--- a/src/Editor.js
+++ b/src/Editor.js
@@ -3,6 +3,8 @@ import { set, or, not, and } from "set-fns";
import useStateSnapshots from "use-state-snapshots";
import { Draggable, Droppable, DragDropContext } from "react-beautiful-dnd";
+import InfoPanel from "./components/InfoPanel";
+
import useCanvasConnection from "./editor/useCanvasConnection";
import exampleDoc from "./editor/exampleDoc";
import useKeys from "./useKeys";
@@ -937,6 +939,19 @@ const Editor = ({ config }) => {
/>
) : null}
+
+
+
{selection.size === 0 ? (
diff --git a/src/components/InfoPanel.js b/src/components/InfoPanel.js
new file mode 100644
index 0000000..8da94cd
--- /dev/null
+++ b/src/components/InfoPanel.js
@@ -0,0 +1,38 @@
+import React from "react";
+
+const InfoPanel = ({ mouse, viewport, keys }) => (
+
+
+ - mouse
+ - {(mouse.x + "," + mouse.y).padEnd(10, " ")}
+ - zoom
+ - {(Math.round(viewport.scale * 100) + "%").padEnd(10, " ")}
+ - viewport
+ - {(viewport.x + "," + viewport.y).padEnd(10, " ")}
+ - mode
+ - {mouse.status.padEnd(10, " ")}
+ - keys
+ - {keys.size === 0 ? "-" : [...keys].join(", ")}
+
+);
+
+export default InfoPanel;