diff --git a/src/data/__snapshots__/transform.test.ts.snap b/src/data/__snapshots__/transform.test.ts.snap
index 0b3a33cd..ae846bdc 100644
--- a/src/data/__snapshots__/transform.test.ts.snap
+++ b/src/data/__snapshots__/transform.test.ts.snap
@@ -6,11 +6,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "backgroundColor": "#d8f5a2",
   "boundElements": [
     {
-      "id": "id40",
+      "id": "id41",
       "type": "arrow",
     },
     {
-      "id": "id41",
+      "id": "id42",
       "type": "arrow",
     },
   ],
@@ -45,7 +45,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id41",
+      "id": "id42",
       "type": "arrow",
     },
   ],
@@ -97,12 +97,12 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "opacity": 100,
   "points": [
     [
-      0,
-      0,
+      0.5,
+      0.5,
     ],
     [
-      395,
-      35,
+      394.5,
+      34.5,
     ],
   ],
   "roughness": 1,
@@ -110,7 +110,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "seed": Any<Number>,
   "startArrowhead": null,
   "startBinding": {
-    "elementId": "id42",
+    "elementId": "id43",
     "focus": -0.08139534883720931,
     "gap": 1,
   },
@@ -150,11 +150,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "opacity": 100,
   "points": [
     [
-      0,
+      0.5,
       0,
     ],
     [
-      400,
+      399.5,
       0,
     ],
   ],
@@ -186,7 +186,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id40",
+      "id": "id41",
       "type": "arrow",
     },
   ],
@@ -222,7 +222,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "baseline": 0,
   "boundElements": [
     {
-      "id": "id43",
+      "id": "id44",
       "type": "arrow",
     },
   ],
@@ -266,7 +266,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "baseline": 0,
   "boundElements": [
     {
-      "id": "id43",
+      "id": "id44",
       "type": "arrow",
     },
   ],
@@ -309,7 +309,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id44",
+      "id": "id45",
       "type": "text",
     },
   ],
@@ -317,7 +317,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "endBinding": {
     "elementId": "text-2",
     "focus": 0,
-    "gap": 5,
+    "gap": 205,
   },
   "fillStyle": "solid",
   "frameId": null,
@@ -331,11 +331,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "opacity": 100,
   "points": [
     [
-      0,
+      0.5,
       0,
     ],
     [
-      300,
+      99.5,
       0,
     ],
   ],
@@ -355,7 +355,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "updated": 1,
   "version": 3,
   "versionNonce": Any<Number>,
-  "width": 300,
+  "width": 100,
   "x": 255,
   "y": 239,
 }
@@ -367,7 +367,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "backgroundColor": "transparent",
   "baseline": 0,
   "boundElements": null,
-  "containerId": "id43",
+  "containerId": "id44",
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -395,7 +395,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "versionNonce": Any<Number>,
   "verticalAlign": "middle",
   "width": 130,
-  "x": 340,
+  "x": 240,
   "y": 226.5,
 }
 `;
@@ -406,13 +406,13 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id33",
+      "id": "id34",
       "type": "text",
     },
   ],
   "endArrowhead": "arrow",
   "endBinding": {
-    "elementId": "id35",
+    "elementId": "id36",
     "focus": 0,
     "gap": 1,
   },
@@ -428,11 +428,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "opacity": 100,
   "points": [
     [
-      0,
+      0.5,
       0,
     ],
     [
-      300,
+      99.5,
       0,
     ],
   ],
@@ -441,7 +441,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "seed": Any<Number>,
   "startArrowhead": null,
   "startBinding": {
-    "elementId": "id34",
+    "elementId": "id35",
     "focus": 0,
     "gap": 1,
   },
@@ -452,7 +452,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "updated": 1,
   "version": 3,
   "versionNonce": Any<Number>,
-  "width": 300,
+  "width": 100,
   "x": 255,
   "y": 239,
 }
@@ -464,7 +464,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "backgroundColor": "transparent",
   "baseline": 0,
   "boundElements": null,
-  "containerId": "id32",
+  "containerId": "id33",
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -492,7 +492,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "versionNonce": Any<Number>,
   "verticalAlign": "middle",
   "width": 130,
-  "x": 340,
+  "x": 240,
   "y": 226.5,
 }
 `;
@@ -503,7 +503,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id32",
+      "id": "id33",
       "type": "arrow",
     },
   ],
@@ -538,7 +538,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id32",
+      "id": "id33",
       "type": "arrow",
     },
   ],
@@ -562,7 +562,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "version": 2,
   "versionNonce": Any<Number>,
   "width": 100,
-  "x": 555,
+  "x": 355,
   "y": 189,
 }
 `;
@@ -573,13 +573,13 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id37",
+      "id": "id38",
       "type": "text",
     },
   ],
   "endArrowhead": "arrow",
   "endBinding": {
-    "elementId": "id39",
+    "elementId": "id40",
     "focus": 0,
     "gap": 1,
   },
@@ -595,11 +595,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "opacity": 100,
   "points": [
     [
-      0,
+      0.5,
       0,
     ],
     [
-      300,
+      99.5,
       0,
     ],
   ],
@@ -608,7 +608,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "seed": Any<Number>,
   "startArrowhead": null,
   "startBinding": {
-    "elementId": "id38",
+    "elementId": "id39",
     "focus": 0,
     "gap": 1,
   },
@@ -619,7 +619,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "updated": 1,
   "version": 3,
   "versionNonce": Any<Number>,
-  "width": 300,
+  "width": 100,
   "x": 255,
   "y": 239,
 }
@@ -631,7 +631,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "backgroundColor": "transparent",
   "baseline": 0,
   "boundElements": null,
-  "containerId": "id36",
+  "containerId": "id37",
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -659,7 +659,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "versionNonce": Any<Number>,
   "verticalAlign": "middle",
   "width": 130,
-  "x": 340,
+  "x": 240,
   "y": 226.5,
 }
 `;
@@ -671,7 +671,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "baseline": 0,
   "boundElements": [
     {
-      "id": "id36",
+      "id": "id37",
       "type": "arrow",
     },
   ],
@@ -715,7 +715,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "baseline": 0,
   "boundElements": [
     {
-      "id": "id36",
+      "id": "id37",
       "type": "arrow",
     },
   ],
@@ -747,7 +747,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "versionNonce": Any<Number>,
   "verticalAlign": "top",
   "width": 100,
-  "x": 555,
+  "x": 355,
   "y": 226.5,
 }
 `;
@@ -801,11 +801,11 @@ exports[`Test Transform > should transform linear elements 1`] = `
   "opacity": 100,
   "points": [
     [
-      0,
+      0.5,
       0,
     ],
     [
-      300,
+      99.5,
       0,
     ],
   ],
@@ -821,7 +821,7 @@ exports[`Test Transform > should transform linear elements 1`] = `
   "updated": 1,
   "version": 1,
   "versionNonce": Any<Number>,
-  "width": 300,
+  "width": 100,
   "x": 100,
   "y": 20,
 }
@@ -846,11 +846,11 @@ exports[`Test Transform > should transform linear elements 2`] = `
   "opacity": 100,
   "points": [
     [
-      0,
+      0.5,
       0,
     ],
     [
-      300,
+      99.5,
       0,
     ],
   ],
@@ -866,7 +866,7 @@ exports[`Test Transform > should transform linear elements 2`] = `
   "updated": 1,
   "version": 1,
   "versionNonce": Any<Number>,
-  "width": 300,
+  "width": 100,
   "x": 450,
   "y": 20,
 }
@@ -895,7 +895,7 @@ exports[`Test Transform > should transform linear elements 3`] = `
       0,
     ],
     [
-      300,
+      100,
       0,
     ],
   ],
@@ -911,7 +911,7 @@ exports[`Test Transform > should transform linear elements 3`] = `
   "updated": 1,
   "version": 1,
   "versionNonce": Any<Number>,
-  "width": 300,
+  "width": 100,
   "x": 100,
   "y": 60,
 }
@@ -940,7 +940,7 @@ exports[`Test Transform > should transform linear elements 4`] = `
       0,
     ],
     [
-      300,
+      100,
       0,
     ],
   ],
@@ -956,7 +956,7 @@ exports[`Test Transform > should transform linear elements 4`] = `
   "updated": 1,
   "version": 1,
   "versionNonce": Any<Number>,
-  "width": 300,
+  "width": 100,
   "x": 450,
   "y": 60,
 }
@@ -1221,56 +1221,6 @@ exports[`Test Transform > should transform text element 2`] = `
 `;
 
 exports[`Test Transform > should transform to labelled arrows when label provided for arrows 1`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": [
-    {
-      "id": "id28",
-      "type": "text",
-    },
-  ],
-  "endArrowhead": "arrow",
-  "endBinding": null,
-  "fillStyle": "solid",
-  "frameId": null,
-  "groupIds": [],
-  "height": 0,
-  "id": Any<String>,
-  "isDeleted": false,
-  "lastCommittedPoint": null,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": [
-    [
-      0,
-      0,
-    ],
-    [
-      300,
-      0,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": null,
-  "seed": Any<Number>,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 2,
-  "type": "arrow",
-  "updated": 1,
-  "version": 1,
-  "versionNonce": Any<Number>,
-  "width": 300,
-  "x": 100,
-  "y": 100,
-}
-`;
-
-exports[`Test Transform > should transform to labelled arrows when label provided for arrows 2`] = `
 {
   "angle": 0,
   "backgroundColor": "transparent",
@@ -1294,11 +1244,11 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "opacity": 100,
   "points": [
     [
-      0,
+      0.5,
       0,
     ],
     [
-      300,
+      99.5,
       0,
     ],
   ],
@@ -1314,13 +1264,13 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "updated": 1,
   "version": 1,
   "versionNonce": Any<Number>,
-  "width": 300,
+  "width": 100,
   "x": 100,
-  "y": 200,
+  "y": 100,
 }
 `;
 
-exports[`Test Transform > should transform to labelled arrows when label provided for arrows 3`] = `
+exports[`Test Transform > should transform to labelled arrows when label provided for arrows 2`] = `
 {
   "angle": 0,
   "backgroundColor": "transparent",
@@ -1335,7 +1285,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
-  "height": 130,
+  "height": 0,
   "id": Any<String>,
   "isDeleted": false,
   "lastCommittedPoint": null,
@@ -1344,11 +1294,11 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "opacity": 100,
   "points": [
     [
-      0,
+      0.5,
       0,
     ],
     [
-      300,
+      99.5,
       0,
     ],
   ],
@@ -1357,20 +1307,20 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "seed": Any<Number>,
   "startArrowhead": null,
   "startBinding": null,
-  "strokeColor": "#1098ad",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 2,
   "type": "arrow",
   "updated": 1,
-  "version": 2,
+  "version": 1,
   "versionNonce": Any<Number>,
-  "width": 300,
+  "width": 100,
   "x": 100,
-  "y": 300,
+  "y": 200,
 }
 `;
 
-exports[`Test Transform > should transform to labelled arrows when label provided for arrows 4`] = `
+exports[`Test Transform > should transform to labelled arrows when label provided for arrows 3`] = `
 {
   "angle": 0,
   "backgroundColor": "transparent",
@@ -1394,11 +1344,11 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "opacity": 100,
   "points": [
     [
-      0,
+      0.5,
       0,
     ],
     [
-      300,
+      99.5,
       0,
     ],
   ],
@@ -1414,7 +1364,57 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "updated": 1,
   "version": 2,
   "versionNonce": Any<Number>,
-  "width": 300,
+  "width": 100,
+  "x": 100,
+  "y": 300,
+}
+`;
+
+exports[`Test Transform > should transform to labelled arrows when label provided for arrows 4`] = `
+{
+  "angle": 0,
+  "backgroundColor": "transparent",
+  "boundElements": [
+    {
+      "id": "id32",
+      "type": "text",
+    },
+  ],
+  "endArrowhead": "arrow",
+  "endBinding": null,
+  "fillStyle": "solid",
+  "frameId": null,
+  "groupIds": [],
+  "height": 130,
+  "id": Any<String>,
+  "isDeleted": false,
+  "lastCommittedPoint": null,
+  "link": null,
+  "locked": false,
+  "opacity": 100,
+  "points": [
+    [
+      0.5,
+      0,
+    ],
+    [
+      99.5,
+      0,
+    ],
+  ],
+  "roughness": 1,
+  "roundness": null,
+  "seed": Any<Number>,
+  "startArrowhead": null,
+  "startBinding": null,
+  "strokeColor": "#1098ad",
+  "strokeStyle": "solid",
+  "strokeWidth": 2,
+  "type": "arrow",
+  "updated": 1,
+  "version": 2,
+  "versionNonce": Any<Number>,
+  "width": 100,
   "x": 100,
   "y": 400,
 }
@@ -1426,7 +1426,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "backgroundColor": "transparent",
   "baseline": 0,
   "boundElements": null,
-  "containerId": "id24",
+  "containerId": "id25",
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -1454,7 +1454,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "versionNonce": Any<Number>,
   "verticalAlign": "middle",
   "width": 130,
-  "x": 185,
+  "x": 85,
   "y": 87.5,
 }
 `;
@@ -1465,7 +1465,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "backgroundColor": "transparent",
   "baseline": 0,
   "boundElements": null,
-  "containerId": "id25",
+  "containerId": "id26",
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -1493,7 +1493,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "versionNonce": Any<Number>,
   "verticalAlign": "middle",
   "width": 200,
-  "x": 150,
+  "x": 50,
   "y": 187.5,
 }
 `;
@@ -1504,7 +1504,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "backgroundColor": "transparent",
   "baseline": 0,
   "boundElements": null,
-  "containerId": "id26",
+  "containerId": "id27",
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -1533,7 +1533,7 @@ LABELLED ARROW",
   "versionNonce": Any<Number>,
   "verticalAlign": "middle",
   "width": 150,
-  "x": 175,
+  "x": 75,
   "y": 275,
 }
 `;
@@ -1544,7 +1544,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "backgroundColor": "transparent",
   "baseline": 0,
   "boundElements": null,
-  "containerId": "id27",
+  "containerId": "id28",
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -1573,7 +1573,7 @@ LABELLED ARROW",
   "versionNonce": Any<Number>,
   "verticalAlign": "middle",
   "width": 150,
-  "x": 175,
+  "x": 75,
   "y": 375,
 }
 `;
@@ -1584,7 +1584,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id18",
+      "id": "id19",
       "type": "text",
     },
   ],
@@ -1619,7 +1619,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id19",
+      "id": "id20",
       "type": "text",
     },
   ],
@@ -1654,7 +1654,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id20",
+      "id": "id21",
       "type": "text",
     },
   ],
@@ -1689,7 +1689,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "backgroundColor": "#fff3bf",
   "boundElements": [
     {
-      "id": "id21",
+      "id": "id22",
       "type": "text",
     },
   ],
@@ -1724,7 +1724,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id22",
+      "id": "id23",
       "type": "text",
     },
   ],
@@ -1759,7 +1759,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "backgroundColor": "#ffec99",
   "boundElements": [
     {
-      "id": "id23",
+      "id": "id24",
       "type": "text",
     },
   ],
@@ -1794,7 +1794,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "backgroundColor": "transparent",
   "baseline": 0,
   "boundElements": null,
-  "containerId": "id12",
+  "containerId": "id13",
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -1833,7 +1833,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "backgroundColor": "transparent",
   "baseline": 0,
   "boundElements": null,
-  "containerId": "id13",
+  "containerId": "id14",
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -1873,7 +1873,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "backgroundColor": "transparent",
   "baseline": 0,
   "boundElements": null,
-  "containerId": "id14",
+  "containerId": "id15",
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -1915,7 +1915,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "backgroundColor": "transparent",
   "baseline": 0,
   "boundElements": null,
-  "containerId": "id15",
+  "containerId": "id16",
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -1955,7 +1955,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "backgroundColor": "transparent",
   "baseline": 0,
   "boundElements": null,
-  "containerId": "id16",
+  "containerId": "id17",
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -1996,7 +1996,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "backgroundColor": "transparent",
   "baseline": 0,
   "boundElements": null,
-  "containerId": "id17",
+  "containerId": "id18",
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
diff --git a/src/data/transform.test.ts b/src/data/transform.test.ts
index 03d65bea..b6abfb37 100644
--- a/src/data/transform.test.ts
+++ b/src/data/transform.test.ts
@@ -5,7 +5,31 @@ import {
 } from "./transform";
 import { ExcalidrawArrowElement } from "../element/types";
 
+const opts = { regenerateIds: false };
+
 describe("Test Transform", () => {
+  it("should generate id unless opts.regenerateIds is set to false explicitly", () => {
+    const elements = [
+      {
+        type: "rectangle",
+        x: 100,
+        y: 100,
+        id: "rect-1",
+      },
+    ];
+    let data = convertToExcalidrawElements(
+      elements as ExcalidrawElementSkeleton[],
+    );
+    expect(data.length).toBe(1);
+    expect(data[0].id).toBe("id0");
+
+    data = convertToExcalidrawElements(
+      elements as ExcalidrawElementSkeleton[],
+      opts,
+    );
+    expect(data[0].id).toBe("rect-1");
+  });
+
   it("should transform regular shapes", () => {
     const elements = [
       {
@@ -59,6 +83,7 @@ describe("Test Transform", () => {
 
     convertToExcalidrawElements(
       elements as ExcalidrawElementSkeleton[],
+      opts,
     ).forEach((ele) => {
       expect(ele).toMatchSnapshot({
         seed: expect.any(Number),
@@ -87,6 +112,7 @@ describe("Test Transform", () => {
     ];
     convertToExcalidrawElements(
       elements as ExcalidrawElementSkeleton[],
+      opts,
     ).forEach((ele) => {
       expect(ele).toMatchSnapshot({
         seed: expect.any(Number),
@@ -128,6 +154,7 @@ describe("Test Transform", () => {
     ];
     const excaldrawElements = convertToExcalidrawElements(
       elements as ExcalidrawElementSkeleton[],
+      opts,
     );
 
     expect(excaldrawElements.length).toBe(4);
@@ -210,6 +237,7 @@ describe("Test Transform", () => {
     ];
     const excaldrawElements = convertToExcalidrawElements(
       elements as ExcalidrawElementSkeleton[],
+      opts,
     );
 
     expect(excaldrawElements.length).toBe(12);
@@ -267,6 +295,7 @@ describe("Test Transform", () => {
     ];
     const excaldrawElements = convertToExcalidrawElements(
       elements as ExcalidrawElementSkeleton[],
+      opts,
     );
 
     expect(excaldrawElements.length).toBe(8);
@@ -300,6 +329,7 @@ describe("Test Transform", () => {
       ];
       const excaldrawElements = convertToExcalidrawElements(
         elements as ExcalidrawElementSkeleton[],
+        opts,
       );
 
       expect(excaldrawElements.length).toBe(4);
@@ -321,7 +351,7 @@ describe("Test Transform", () => {
       });
 
       expect(text).toMatchObject({
-        x: 340,
+        x: 240,
         y: 226.5,
         type: "text",
         text: "HELLO WORLD!!",
@@ -341,7 +371,7 @@ describe("Test Transform", () => {
       });
 
       expect(ellipse).toMatchObject({
-        x: 555,
+        x: 355,
         y: 189,
         type: "ellipse",
         boundElements: [
@@ -383,10 +413,10 @@ describe("Test Transform", () => {
 
       const excaldrawElements = convertToExcalidrawElements(
         elements as ExcalidrawElementSkeleton[],
+        opts,
       );
 
       expect(excaldrawElements.length).toBe(4);
-
       const [arrow, text1, text2, text3] = excaldrawElements;
 
       expect(arrow).toMatchObject({
@@ -406,7 +436,7 @@ describe("Test Transform", () => {
       });
 
       expect(text1).toMatchObject({
-        x: 340,
+        x: 240,
         y: 226.5,
         type: "text",
         text: "HELLO WORLD!!",
@@ -426,7 +456,7 @@ describe("Test Transform", () => {
       });
 
       expect(text3).toMatchObject({
-        x: 555,
+        x: 355,
         y: 226.5,
         type: "text",
         boundElements: [
@@ -499,6 +529,7 @@ describe("Test Transform", () => {
 
       const excaldrawElements = convertToExcalidrawElements(
         elements as ExcalidrawElementSkeleton[],
+        opts,
       );
 
       expect(excaldrawElements.length).toBe(5);
@@ -547,6 +578,7 @@ describe("Test Transform", () => {
 
       const excaldrawElements = convertToExcalidrawElements(
         elements as ExcalidrawElementSkeleton[],
+        opts,
       );
 
       expect(excaldrawElements.length).toBe(4);
@@ -600,17 +632,18 @@ describe("Test Transform", () => {
 
       const excaldrawElements = convertToExcalidrawElements(
         elements as ExcalidrawElementSkeleton[],
+        opts,
       );
 
       expect(excaldrawElements.length).toBe(4);
-      const [, , arrow] = excaldrawElements;
+      const [, , arrow, text] = excaldrawElements;
       expect(arrow).toMatchObject({
         type: "arrow",
         x: 255,
         y: 239,
         boundElements: [
           {
-            id: "id46",
+            id: text.id,
             type: "text",
           },
         ],
@@ -650,17 +683,18 @@ describe("Test Transform", () => {
       ];
       const excaldrawElements = convertToExcalidrawElements(
         elements as ExcalidrawElementSkeleton[],
+        opts,
       );
       expect(excaldrawElements.length).toBe(2);
       const [arrow, rect] = excaldrawElements;
       expect((arrow as ExcalidrawArrowElement).endBinding).toStrictEqual({
         elementId: "rect-1",
         focus: 0,
-        gap: 5,
+        gap: 205,
       });
       expect(rect.boundElements).toStrictEqual([
         {
-          id: "id47",
+          id: arrow.id,
           type: "arrow",
         },
       ]);
@@ -692,6 +726,7 @@ describe("Test Transform", () => {
     ];
     const excaldrawElements = convertToExcalidrawElements(
       elements as ExcalidrawElementSkeleton[],
+      opts,
     );
 
     expect(excaldrawElements.length).toBe(1);
diff --git a/src/data/transform.ts b/src/data/transform.ts
index bf541195..a34ea1a6 100644
--- a/src/data/transform.ts
+++ b/src/data/transform.ts
@@ -39,6 +39,8 @@ import {
 } from "../element/types";
 import { MarkOptional } from "../utility-types";
 import { assertNever, getFontString } from "../utils";
+import { getSizeFromPoints } from "../points";
+import { randomId } from "../random";
 
 export type ValidLinearElement = {
   type: "arrow" | "line";
@@ -159,7 +161,7 @@ export type ExcalidrawElementSkeleton =
     } & Partial<ExcalidrawImageElement>);
 
 const DEFAULT_LINEAR_ELEMENT_PROPS = {
-  width: 300,
+  width: 100,
   height: 0,
 };
 
@@ -357,6 +359,48 @@ const bindLinearElementToElement = (
       );
     }
   }
+
+  // Update start/end points by 0.5 so bindings don't overlap with start/end bound element coordinates.
+  const endPointIndex = linearElement.points.length - 1;
+  const delta = 0.5;
+  const newPoints = JSON.parse(JSON.stringify(linearElement.points));
+  // left to right so shift the arrow towards right
+  if (
+    linearElement.points[endPointIndex][0] >
+    linearElement.points[endPointIndex - 1][0]
+  ) {
+    newPoints[0][0] = delta;
+    newPoints[endPointIndex][0] -= delta;
+  }
+
+  // right to left so shift the arrow towards left
+  if (
+    linearElement.points[endPointIndex][0] <
+    linearElement.points[endPointIndex - 1][0]
+  ) {
+    newPoints[0][0] = -delta;
+    newPoints[endPointIndex][0] += delta;
+  }
+  // top to bottom so shift the arrow towards top
+  if (
+    linearElement.points[endPointIndex][1] >
+    linearElement.points[endPointIndex - 1][1]
+  ) {
+    newPoints[0][1] = delta;
+    newPoints[endPointIndex][1] -= delta;
+  }
+
+  // bottom to top so shift the arrow towards bottom
+  if (
+    linearElement.points[endPointIndex][1] <
+    linearElement.points[endPointIndex - 1][1]
+  ) {
+    newPoints[0][1] = -delta;
+    newPoints[endPointIndex][1] += delta;
+  }
+
+  Object.assign(linearElement, { points: newPoints });
+
   return {
     linearElement,
     startBoundElement,
@@ -384,18 +428,28 @@ class ElementStore {
 }
 
 export const convertToExcalidrawElements = (
-  elements: ExcalidrawElementSkeleton[] | null,
+  elementsSkeleton: ExcalidrawElementSkeleton[] | null,
+  opts?: { regenerateIds: boolean },
 ) => {
-  if (!elements) {
+  if (!elementsSkeleton) {
     return [];
   }
+  const elements: ExcalidrawElementSkeleton[] = JSON.parse(
+    JSON.stringify(elementsSkeleton),
+  );
 
   const elementStore = new ElementStore();
   const elementsWithIds = new Map<string, ExcalidrawElementSkeleton>();
+  const oldToNewElementIdMap = new Map<string, string>();
 
   // Create individual elements
   for (const element of elements) {
     let excalidrawElement: ExcalidrawElement;
+    const originalId = element.id;
+    if (opts?.regenerateIds !== false) {
+      Object.assign(element, { id: randomId() });
+    }
+
     switch (element.type) {
       case "rectangle":
       case "ellipse":
@@ -444,6 +498,11 @@ export const convertToExcalidrawElements = (
           ],
           ...element,
         });
+
+        Object.assign(
+          excalidrawElement,
+          getSizeFromPoints(excalidrawElement.points),
+        );
         break;
       }
       case "text": {
@@ -499,6 +558,9 @@ export const convertToExcalidrawElements = (
     } else {
       elementStore.add(excalidrawElement);
       elementsWithIds.set(excalidrawElement.id, element);
+      if (originalId) {
+        oldToNewElementIdMap.set(originalId, excalidrawElement.id);
+      }
     }
   }
 
@@ -524,6 +586,18 @@ export const convertToExcalidrawElements = (
               element.type === "arrow" ? element?.start : undefined;
             const originalEnd =
               element.type === "arrow" ? element?.end : undefined;
+            if (originalStart && originalStart.id) {
+              const newStartId = oldToNewElementIdMap.get(originalStart.id);
+              if (newStartId) {
+                Object.assign(originalStart, { id: newStartId });
+              }
+            }
+            if (originalEnd && originalEnd.id) {
+              const newEndId = oldToNewElementIdMap.get(originalEnd.id);
+              if (newEndId) {
+                Object.assign(originalEnd, { id: newEndId });
+              }
+            }
             const { linearElement, startBoundElement, endBoundElement } =
               bindLinearElementToElement(
                 container as ExcalidrawArrowElement,
@@ -539,13 +613,23 @@ export const convertToExcalidrawElements = (
         } else {
           switch (element.type) {
             case "arrow": {
+              const { start, end } = element;
+              if (start && start.id) {
+                const newStartId = oldToNewElementIdMap.get(start.id);
+                Object.assign(start, { id: newStartId });
+              }
+              if (end && end.id) {
+                const newEndId = oldToNewElementIdMap.get(end.id);
+                Object.assign(end, { id: newEndId });
+              }
               const { linearElement, startBoundElement, endBoundElement } =
                 bindLinearElementToElement(
                   excalidrawElement as ExcalidrawArrowElement,
-                  element.start,
-                  element.end,
+                  start,
+                  end,
                   elementStore,
                 );
+
               elementStore.add(linearElement);
               elementStore.add(startBoundElement);
               elementStore.add(endBoundElement);
diff --git a/src/packages/excalidraw/.size-limit.json b/src/packages/excalidraw/.size-limit.json
index 1b953f30..242d0614 100644
--- a/src/packages/excalidraw/.size-limit.json
+++ b/src/packages/excalidraw/.size-limit.json
@@ -1,7 +1,7 @@
 [
   {
     "path": "dist/excalidraw.production.min.js",
-    "limit": "305 kB"
+    "limit": "320 kB"
   },
   {
     "path": "dist/excalidraw-assets/locales",
diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md
index b852757d..89796079 100644
--- a/src/packages/excalidraw/CHANGELOG.md
+++ b/src/packages/excalidraw/CHANGELOG.md
@@ -15,7 +15,9 @@ Please add the latest change on the top under the correct section.
 
 ### Features
 
-- Add `selected` prop for `MainMenu.Item` and `MainMenu.ItemCustom` components to indicate active state. [7078](https://github.com/excalidraw/excalidraw/pull/7078)
+- Regenerate ids by default when using transform api and also update bindings by 0.5px to avoid possible overlapping [#7195](https://github.com/excalidraw/excalidraw/pull/7195)
+
+- Add `selected` prop for `MainMenu.Item` and `MainMenu.ItemCustom` components to indicate active state. [#7078](https://github.com/excalidraw/excalidraw/pull/7078)
 
 ## 0.16.1 (2023-09-21)