diff --git a/packages/core/__tests__/lib/core-element.test.ts b/packages/core/__tests__/lib/core-element.test.ts
index 2515863..3a65af7 100644
--- a/packages/core/__tests__/lib/core-element.test.ts
+++ b/packages/core/__tests__/lib/core-element.test.ts
@@ -25,6 +25,17 @@ describe("@idraw/core: Element API", () => {
     expect(elems).toStrictEqual([_data.elements[1]]);
   });
 
+  test('getElement', async () => {  
+    const uuid = core.getData().elements[0]?.uuid;
+    const elem = core.getElement(uuid);
+    expect(elem).toStrictEqual(core.getData().elements[0])
+  });
+
+  test('getElementByIndex', async () => {  
+    const index = 0;
+    const elem = core.getElementByIndex(index);
+    expect(elem).toStrictEqual(core.getData().elements[index])
+  });
 
 });
 
diff --git a/packages/core/__tests__/lib/element.test.ts b/packages/core/__tests__/lib/element.test.ts
index 60abf6f..eb72db0 100644
--- a/packages/core/__tests__/lib/element.test.ts
+++ b/packages/core/__tests__/lib/element.test.ts
@@ -3,7 +3,7 @@ import Core from './../../src';
 import { getData } from './../data';
 import { Element } from './../../src/lib/element';
 
-describe("./lib/element", () => {
+describe("@idraw/core: lib/element", () => {
   document.body.innerHTML = `
     <div id="mount"></div>
   `;
diff --git a/packages/core/examples/features/css/index.css b/packages/core/examples/features/css/index.css
index a49784e..5d0eaeb 100644
--- a/packages/core/examples/features/css/index.css
+++ b/packages/core/examples/features/css/index.css
@@ -55,7 +55,7 @@ html, body {
 
 .elem-item {
   height: 32px;
-  width: 240px;
+  min-width: 300px;
   border: 1px solid #999999;
   border-bottom: none;
   line-height: 30px;
@@ -68,7 +68,7 @@ html, body {
 }
 
 .elem-item-name {
-  margin-left: 10px;
+  margin: 0 10px;
   cursor: pointer;
 }
 
@@ -76,7 +76,8 @@ html, body {
   float: right;
   font-size: 12px;
   height: 24px;
-  width: 40px;
+  min-width: 40px;
+  padding: 0 6px;
   border-radius: 12px;
   border: 1px solid #cccccc;
   text-align: center;
diff --git a/packages/core/examples/features/lib/element.js b/packages/core/examples/features/lib/element.js
index 005a1b3..686ad94 100644
--- a/packages/core/examples/features/lib/element.js
+++ b/packages/core/examples/features/lib/element.js
@@ -22,6 +22,7 @@ function renderElemens(core) {
       <span class="elem-item-btn ${i === elems.length - 1 ? 'btn-hidden' : ''}" data-elem-btn-up="${ele.uuid || ''}">Up</span>
       <span class="elem-item-btn ${i === 0 ? 'btn-hidden' : '' }" data-elem-btn-down="${ele.uuid || ''}">Down</span>
       <span class="elem-item-btn" data-elem-btn-lock="${ele.uuid || ''}">Lock</span>
+      <span class="elem-item-btn" data-elem-btn-invisible="${ele.uuid || ''}">Invisible</span>
     </div>
     `);
   }
@@ -46,6 +47,10 @@ function listenElements(core) {
       const uuid = el.getAttribute('data-elem-btn-down');
       core.moveDownElement(uuid);
       renderElemens(core);
+    } else if (el.hasAttribute('data-elem-btn-lock')) {
+      const uuid = el.getAttribute('data-elem-btn-lock');
+      core.moveDownElement(uuid);
+      renderElemens(core);
     }
   }, true);
 
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index f332cb4..7e411ee 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -15,7 +15,7 @@ import {
   _board, _data, _opts, _config, _renderer, _element, _helper, _tempData, _draw, _coreEvent, 
   _mapper, _emitChangeScreen, _emitChangeData,_todo
 } from './names';
-import { getSelectedElements, updateElement, selectElementByIndex, 
+import { getSelectedElements, updateElement, selectElementByIndex, getElement, getElementByIndex,
   selectElement, moveUpElement, moveDownElement, addElement, deleteElement,
   insertElementBefore, insertElementBeforeIndex, insertElementAfter, insertElementAfterIndex,
 } from './mixins/element';
@@ -82,6 +82,14 @@ class Core {
     this[_renderer].render(this[_data], this[_helper].getConfig(), opts?.resourceChangeUUIDs || []);
   }
 
+  getElement(uuid: string) {
+    return getElement(this, uuid);
+  }
+
+  getElementByIndex(index: number) {
+    return getElementByIndex(this, index);
+  }
+
   selectElementByIndex(index: number, opts?: { useMode?: boolean }): void {
     return selectElementByIndex(this, index, opts)
   }
diff --git a/packages/core/src/mixins/element.ts b/packages/core/src/mixins/element.ts
index 8e307c5..731ee53 100644
--- a/packages/core/src/mixins/element.ts
+++ b/packages/core/src/mixins/element.ts
@@ -33,6 +33,23 @@ export function getSelectedElements(core: Core): TypeElement<keyof TypeElemDesc>
   return deepClone(elems);
 }
 
+export function getElement(core: Core, uuid: string): TypeElement<keyof TypeElemDesc>|null {
+  let elem: TypeElement<keyof TypeElemDesc>|null = null;
+  const index = core[_helper].getElementIndexByUUID(uuid);
+  if (index !== null && core[_data].elements[index]) {
+    elem = deepClone(core[_data].elements[index]);
+  }
+  return elem;
+}
+
+export function getElementByIndex(core: Core, index: number): TypeElement<keyof TypeElemDesc>|null {
+  let elem: TypeElement<keyof TypeElemDesc>|null = null;
+  if (index >=0  && core[_data].elements[index]) {
+    elem = deepClone(core[_data].elements[index]);
+  }
+  return elem;
+}
+
 export function updateElement(core: Core, elem: TypeElement<keyof TypeElemDesc>) {
   const _elem  = deepClone(elem) as TypeElement<keyof TypeElemDesc>;
   const data = core[_data];