diff --git a/apps/desktop/.env b/apps/desktop/.env
index 5c8d27e2d..f4077a02d 100644
--- a/apps/desktop/.env
+++ b/apps/desktop/.env
@@ -1,5 +1,5 @@
-# VITE_API_URL=https://app.penx.io
-VITE_API_URL=http://localhost:3000
+VITE_API_URL=https://app.penx.io
+# VITE_API_URL=http://localhost:3000
 
 NEXT_PUBLIC_PLATFORM=DESKTOP
 
diff --git a/extension-samples/preset-ui/developer/.gitignore b/extension-samples/preset-ui/developer/.gitignore
new file mode 100644
index 000000000..0e1a8353b
--- /dev/null
+++ b/extension-samples/preset-ui/developer/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+.DS_Store
+dist
+*.log
\ No newline at end of file
diff --git a/extension-samples/preset-ui/developer/.prettierrc b/extension-samples/preset-ui/developer/.prettierrc
new file mode 100644
index 000000000..fa295cd75
--- /dev/null
+++ b/extension-samples/preset-ui/developer/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80
+}
\ No newline at end of file
diff --git a/extension-samples/preset-ui/developer/README.md b/extension-samples/preset-ui/developer/README.md
new file mode 100644
index 000000000..f2f553c64
--- /dev/null
+++ b/extension-samples/preset-ui/developer/README.md
@@ -0,0 +1 @@
+# Counter
diff --git a/extension-samples/preset-ui/developer/assets/logo.svg b/extension-samples/preset-ui/developer/assets/logo.svg
new file mode 100644
index 000000000..2e8e722e3
--- /dev/null
+++ b/extension-samples/preset-ui/developer/assets/logo.svg
@@ -0,0 +1 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class=""><rect id="r4" width="512" height="512" x="0" y="0" rx="128" fill="url(#r5)" stroke="#FFFFFF" stroke-width="0" stroke-opacity="100%" paint-order="stroke"></rect><clipPath id="clip"><use xlink:href="#r4"></use></clipPath><defs><linearGradient id="r5" gradientUnits="userSpaceOnUse" gradientTransform="rotate(180)" style="transform-origin: center center;"><stop stop-color="#68AEFF"></stop><stop offset="1" stop-color="#003EB7"></stop></linearGradient><radialGradient id="r6" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(256) rotate(90) scale(512)"><stop stop-color="white"></stop><stop offset="1" stop-color="white" stop-opacity="0"></stop></radialGradient></defs><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="352" height="352" x="80" y="80" alignment-baseline="middle" style="color: rgb(255, 255, 255);"><path fill="currentColor" d="M5.75 10C10 10 10 5.75 10 5.75S10 10 14.25 10C10 10 10 14.25 10 14.25S10 10 5.75 10ZM4 1.75S4 4 1.75 4C4 4 4 6.25 4 6.25S4 4 6.25 4C4 4 4 1.75 4 1.75Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 10C10 10 10 5.75 10 5.75S10 10 14.25 10C10 10 10 14.25 10 14.25S10 10 5.75 10ZM4 1.75S4 4 1.75 4C4 4 4 6.25 4 6.25S4 4 6.25 4C4 4 4 1.75 4 1.75Z"></path></svg></svg>
\ No newline at end of file
diff --git a/extension-samples/preset-ui/developer/manifest.json b/extension-samples/preset-ui/developer/manifest.json
new file mode 100644
index 000000000..e1e1ae0ac
--- /dev/null
+++ b/extension-samples/preset-ui/developer/manifest.json
@@ -0,0 +1,20 @@
+{
+  "name": "developer",
+  "title": "Developer",
+  "description": "PenX Developer Tools",
+  "icon": {
+    "name": "lucide--braces"
+  },
+  "commands": [
+    {
+      "name": "create-extension",
+      "title": "Create Extension",
+      "subtitle": "",
+      "description": "",
+      "icon": {
+        "name": "lucide--braces"
+      },
+      "mode": "preset-ui"
+    }
+  ]
+}
diff --git a/extension-samples/preset-ui/developer/package.json b/extension-samples/preset-ui/developer/package.json
new file mode 100644
index 000000000..fd8ea088f
--- /dev/null
+++ b/extension-samples/preset-ui/developer/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "counter",
+  "private": true,
+  "scripts": {
+    "dev": "penx dev",
+    "release": "penx release"
+  },
+  "devDependencies": {
+    "@penxio/preset-ui": "workspace:*",
+    "@penxio/api": "workspace:*",
+    "penx-cli": "workspace:*",
+    "prettier": "^3.2.5",
+    "typescript": "^5.3.2"
+  }
+}
diff --git a/extension-samples/preset-ui/developer/src/create-extension.command.ts b/extension-samples/preset-ui/developer/src/create-extension.command.ts
new file mode 100644
index 000000000..00c09130b
--- /dev/null
+++ b/extension-samples/preset-ui/developer/src/create-extension.command.ts
@@ -0,0 +1,12 @@
+import { MarkdownApp } from '@penxio/preset-ui'
+
+export function main() {
+  let counter = 1
+
+  const app = new MarkdownApp({ content: `## ${counter}` }).run()
+
+  setInterval(() => {
+    counter++
+    app.setState({ content: `## ${counter}` })
+  }, 1000)
+}
diff --git a/extension-samples/preset-ui/developer/tsconfig.json b/extension-samples/preset-ui/developer/tsconfig.json
new file mode 100644
index 000000000..562c94951
--- /dev/null
+++ b/extension-samples/preset-ui/developer/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "module": "esnext",
+    "strict": true,
+    "lib": ["ESNext", "DOM"],
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "noUnusedLocals": true,
+    "noImplicitAny": true,
+    "allowJs": true,
+    "noEmit": true,
+    "outDir": "dist",
+    "resolveJsonModule": true
+  }
+}