diff --git a/examples/landing/components/editor/RenderNode.tsx b/examples/landing/components/editor/RenderNode.tsx
index 8f849016c..1c6a2f97a 100644
--- a/examples/landing/components/editor/RenderNode.tsx
+++ b/examples/landing/components/editor/RenderNode.tsx
@@ -6,6 +6,7 @@ import styled from 'styled-components';
 
 import ArrowUp from '../../public/icons/arrow-up.svg';
 import Delete from '../../public/icons/delete.svg';
+import Duplicate from '../../public/icons/duplicate.svg';
 import Move from '../../public/icons/move.svg';
 
 const IndicatorDiv = styled.div`
@@ -13,6 +14,18 @@ const IndicatorDiv = styled.div`
   margin-top: -29px;
   font-size: 12px;
   line-height: 12px;
+`;
+
+const Btn = styled.a`
+  padding: 0 0px;
+  opacity: 0.9;
+  display: flex;
+  align-items: center;
+  > div {
+    position: relative;
+    top: -50%;
+    left: -50%;
+  }
 
   svg {
     fill: #fff;
@@ -21,7 +34,7 @@ const IndicatorDiv = styled.div`
   }
 `;
 
-const Btn = styled.a`
+const DuplicateBtn = styled.a`
   padding: 0 0px;
   opacity: 0.9;
   display: flex;
@@ -31,6 +44,11 @@ const Btn = styled.a`
     top: -50%;
     left: -50%;
   }
+
+  svg {
+    width: 15px;
+    height: 15px;
+  }
 `;
 
 export const RenderNode = ({ render }) => {
@@ -47,6 +65,7 @@ export const RenderNode = ({ render }) => {
     deletable,
     connectors: { drag },
     parent,
+    isCanvas,
   } = useNode((node) => ({
     isHover: node.events.hovered,
     dom: node.dom,
@@ -55,6 +74,7 @@ export const RenderNode = ({ render }) => {
     deletable: query.node(node.id).isDeletable(),
     parent: node.data.parent,
     props: node.data.props,
+    isCanvas: query.node(node.id).isCanvas(),
   }));
 
   const currentRef = useRef<HTMLDivElement>();
@@ -128,7 +148,7 @@ export const RenderNode = ({ render }) => {
               )}
               {deletable ? (
                 <Btn
-                  className="cursor-pointer"
+                  className="mr-2 cursor-pointer"
                   onMouseDown={(e: React.MouseEvent) => {
                     e.stopPropagation();
                     actions.delete(id);
@@ -137,6 +157,22 @@ export const RenderNode = ({ render }) => {
                   <Delete />
                 </Btn>
               ) : null}
+              {!isCanvas ? (
+                <DuplicateBtn
+                  className="cursor-pointer"
+                  onMouseDown={() => {
+                    const {
+                      data: { type, props },
+                    } = query.node(id).get();
+                    actions.add(
+                      query.createNode(React.createElement(type, props)),
+                      parent
+                    );
+                  }}
+                >
+                  <Duplicate />
+                </DuplicateBtn>
+              ) : null}
             </IndicatorDiv>,
             document.querySelector('.page-container')
           )
diff --git a/examples/landing/public/icons/duplicate.svg b/examples/landing/public/icons/duplicate.svg
new file mode 100644
index 000000000..10895b924
--- /dev/null
+++ b/examples/landing/public/icons/duplicate.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
\ No newline at end of file