diff --git a/src/web/Creator.tsx b/src/web/Creator.tsx
new file mode 100644
index 00000000..f80cc352
--- /dev/null
+++ b/src/web/Creator.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+
+const ALLOWED_LIST = ['H1', 'H2', 'H3', 'H4', 'P']
+const WRAPPER_ID = '__react-content-loader_creator___'
+
+const appendExample = (x, y) => {
+  const wrapper = document.querySelector(`#${WRAPPER_ID}`)
+  const element = document.createElement('div')
+
+  element.style.left = `${x}px`
+  element.style.top = `${y}px`
+  element.style.width = '50px'
+  element.style.height = '50px'
+  element.style.position = 'absolute'
+  element.style.backgroundColor = 'red'
+
+  wrapper.appendChild(element)
+}
+
+const Creator: React.FC = ({ children }) => {
+  return (
+    <span
+      id={WRAPPER_ID}
+      onMouseOver={e => {
+        e.stopPropagation()
+
+        const nodes = document
+          .elementFromPoint(e.clientX, e.clientY)
+          .querySelectorAll(ALLOWED_LIST.join(', '))
+        console.log(e)
+        appendExample(e.clientX, e.clientY)
+      }}
+    >
+      {children}
+    </span>
+  )
+}
+
+export { Creator }
diff --git a/src/web/index.ts b/src/web/index.ts
index 9a8c0923..504d1b0f 100755
--- a/src/web/index.ts
+++ b/src/web/index.ts
@@ -22,5 +22,6 @@ export { default as Instagram } from './presets/InstagramStyle'
 export { default as Code } from './presets/CodeStyle'
 export { default as List } from './presets/ListStyle'
 export { default as BulletList } from './presets/BulletListStyle'
+export { Creator } from './Creator'
 
 export default ContentLoader
diff --git a/tsconfig.json b/tsconfig.json
index ffcbb947..266797d0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,3 +1,6 @@
 {
-  "extends": "./tsconfig.base.json"
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["dom"]
+  }
 }