diff --git a/.env b/.env
index 71e6064..ec2fda9 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,4 @@
 DEV_SERVER_HTTPS_CERT_BASE=
-DEV_SERVER_HTTPS_CERT_PASS=
\ No newline at end of file
+DEV_SERVER_HTTPS_CERT_PASS=
+DEV_LOCATOR_EDITOR=vscode
+VITE_DEVTOOLS_OVERLAY=true
\ No newline at end of file
diff --git a/bun.lockb b/bun.lockb
index 8acbc1a..a3db47b 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 70973f6..0688b33 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "author": "Rubicon",
   "license": "Apache-2.0",
   "devDependencies": {
+    "@solid-devtools/overlay": "^0.30.1",
     "@suid/vite-plugin": "^0.3.1",
     "@types/hammerjs": "^2.0.46",
     "@vite-pwa/assets-generator": "^0.2.6",
@@ -50,6 +51,7 @@
     "masto": "^6.10.1",
     "nanostores": "^0.11.3",
     "normalize.css": "^8.0.1",
+    "solid-devtools": "^0.30.1",
     "solid-js": "^1.9.3",
     "solid-styled": "^0.11.1",
     "stacktrace-js": "^2.0.2",
diff --git a/src/index.tsx b/src/index.tsx
index f870d32..5441516 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,10 @@
 import { render } from "solid-js/web";
 import App from "./App.js";
+import "solid-devtools";
 
 render(() => <App />, document.getElementById("root")!);
+
+if (import.meta.env.VITE_DEVTOOLS_OVERLAY === "true") {
+  const overlay = await import("@solid-devtools/overlay")
+  overlay.attachDevtoolsOverlay()
+}
diff --git a/src/overrides.d.ts b/src/overrides.d.ts
index 4e0ce4d..870c3fa 100644
--- a/src/overrides.d.ts
+++ b/src/overrides.d.ts
@@ -7,6 +7,10 @@ interface ImportMetaEnv {
    * The code reversion. It's recommended to be the git commit sha.
    */
   readonly VITE_CODE_VERSION?: string;
+  /**
+   * Attach the overlay (in the dev mode) if it's `"true"`.
+   */
+  readonly VITE_DEVTOOLS_OVERLAY?: string;
 }
 
 interface ImportMeta {
diff --git a/vite.config.ts b/vite.config.ts
index b575b90..f263da2 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,6 +6,7 @@ import { VitePWA } from "vite-plugin-pwa";
 import version from "vite-plugin-package-version";
 import manifest from "./manifest.config";
 import { GetManualChunk } from "rollup";
+import devtools from "solid-devtools/vite";
 
 /**
  * Put all strings (/i18n/{key}.<json|js|ts>) into separated chunks based on the key.
@@ -66,6 +67,20 @@ export default defineConfig(({ mode }) => {
 
   return {
     plugins: [
+      devtools({
+        autoname: true,
+        locator: {
+          targetIDE:
+            (devConf["DEV_LOCATOR_EDITOR"] as
+              | "vscode"
+              | "atom"
+              | "webstorm"
+              | "vscode-insiders"
+              | "") || undefined,
+          componentLocation: true,
+          jsxLocation: true,
+        },
+      }),
       suid(),
       solid(),
       solidStyled({