diff --git a/libs/extension/src/devtools/mockPage/MockClassComponent.tsx b/libs/extension/src/devtools/mockPage/MockClassComponent.tsx
new file mode 100644
index 00000000..c59385ed
--- /dev/null
+++ b/libs/extension/src/devtools/mockPage/MockClassComponent.tsx
@@ -0,0 +1,22 @@
+import { Component } from 'horizon';
+
+const defaultState = {
+  name: 'jenny',
+  boolean: true,
+};
+
+export default class MockClassComponent extends Component<{fruit: string}, typeof defaultState> {
+
+  state = defaultState;
+
+  render() {
+    return (
+      <div>
+        <button onClick={() => (this.setState({name: 'pika'}))} >update state</button>
+        {this.state.name}
+        {this.props?.fruit}
+      </div>
+    );
+  }
+
+}
\ No newline at end of file
diff --git a/libs/extension/src/devtools/mockPage/MockFunctionComponent.tsx b/libs/extension/src/devtools/mockPage/MockFunctionComponent.tsx
new file mode 100644
index 00000000..48a76e93
--- /dev/null
+++ b/libs/extension/src/devtools/mockPage/MockFunctionComponent.tsx
@@ -0,0 +1,22 @@
+import { useState, useEffect, useRef, createContext } from 'horizon';
+
+const Ctx = createContext();
+
+export default function MockFunctionComponent(props) {
+  const [age, setAge] = useState(0);
+  const domRef = useRef<HTMLDivElement>();
+  const objRef = useRef({ str: 'string' });
+  
+  useEffect(() => { }, []);
+
+  return (
+    <div>
+      age: {age}
+      <button onClick={() => setAge(age + 1)} >update age</button>
+      count: {props.count}
+      <div ref={domRef} />
+      <div>{objRef.current.str}</div>
+      <Ctx.Provider value={{ctx: 'I am ctx'}}></Ctx.Provider>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/libs/extension/src/devtools/mockPage/index.tsx b/libs/extension/src/devtools/mockPage/index.tsx
new file mode 100644
index 00000000..9b5332e3
--- /dev/null
+++ b/libs/extension/src/devtools/mockPage/index.tsx
@@ -0,0 +1,18 @@
+import { render } from 'horizon';
+import MockClassComponent from './MockClassComponent';
+import MockFunctionComponent from './MockFunctionComponent';
+
+const root = document.createElement('div');
+document.body.append(root);
+
+function App() {
+  return (
+    <div>
+      abc
+      <MockClassComponent fruit={'apple'}/>
+      <MockFunctionComponent />
+    </div>
+  );
+}
+
+render(<App/>, root);
diff --git a/libs/extension/src/devtools/mockPage/mockPage.html b/libs/extension/src/devtools/mockPage/mockPage.html
new file mode 100644
index 00000000..5e6b02c8
--- /dev/null
+++ b/libs/extension/src/devtools/mockPage/mockPage.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf8">
+  <title>Horizon Mock Page</title>
+  <script src="horizon.production.js"></script>
+  <style>
+    html {
+      width: 100%;
+      height: 100%;
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+  </style>
+</head>
+
+<body>
+
+</body>
+
+</html>
