diff --git a/public/counter.html b/public/counter.html
index 681101db4..f53b7d6c5 100644
--- a/public/counter.html
+++ b/public/counter.html
@@ -7,24 +7,19 @@
   </head>
   <body>
     <div>
-      <div>status: <span id="network-status"></span></div>
-      <div class="wrap">
+      <div id="network-status"></div>
+      <div id="online-clients"></div>
+      <div class="counter-wrap">
         <span id="counter"></span>
         <button id="increaseButton">+</button>
         <button id="decreaseButton">-</button>
       </div>
-      <div>Online clients:</div>
-      <pre
-        style="white-space: pre-wrap"
-      ><code id="online-clients-holder"></code></pre>
     </div>
     <script src="./yorkie.js"></script>
     <script src="./util.js"></script>
     <script>
       const statusHolder = document.getElementById('network-status');
-      const onlineClientsHolder = document.getElementById(
-        'online-clients-holder',
-      );
+      const onlineClientsHolder = document.getElementById('online-clients');
       const counter = document.getElementById('counter');
       const counterIncreaseButton = document.getElementById('increaseButton');
       const counterDecreaseButton = document.getElementById('decreaseButton');
diff --git a/public/devtool/text.css b/public/devtool/text.css
new file mode 100644
index 000000000..26be992b2
--- /dev/null
+++ b/public/devtool/text.css
@@ -0,0 +1,466 @@
+:root {
+  --deleted-node-color: #dadada;
+  --selected-node-color: #ffffff;
+  --selected-node-bg-color: #ff0000;
+  --hover-node-bg-color: rgba(0, 0, 0, 0.1);
+}
+
+/* layout */
+
+.layout {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.layout > .toolbar {
+  flex: none;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #ececec;
+}
+
+.layout > .toolbar .tools {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 0px 20px;
+}
+
+.layout > .content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.layout > .content > .editor-area,
+.layout > .content > .graph-view {
+  flex: 1;
+}
+
+.layout > .content > .graph-view {
+  display: flex;
+  position: relative;
+  border-top: 1px solid #ececec;
+}
+
+.layout > .content > .graph-view > .graph-area:first-child {
+  border-right: 1px solid #ececec;
+}
+
+.layout > .content > .editor-area {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  height: 300px;
+  flex: none;
+}
+
+.layout > .content > .editor-area > .codemirror-area,
+.layout > .content > .editor-area > .data-area {
+  flex: 1 1 auto;
+  width: 50%;
+  position: relative;
+}
+
+.layout > .content > .editor-area > .codemirror-area {
+  border-right: 1px solid #ececec;
+}
+
+.layout > .content > .editor-area .CodeMirror {
+  height: 100%;
+}
+
+.layout > .content > .editor-area > .data-area {
+  display: flex;
+}
+
+.layout > .content > .editor-area > .data-area > .text-view-area {
+  flex: 1 1 auto;
+  display: flex;
+  height: 100%;
+}
+
+/* toolbar > userlist */
+
+#users-holder {
+  display: flex;
+  gap: 10px;
+}
+
+.user-info {
+  --client-background-color: var(--client-color, #000);
+  --client-status-color: var(--network-status-color, --client-background-color);
+  background-color: var(--client-background-color);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0px 1px;
+  width: 30px;
+  height: 30px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  text-transform: uppercase;
+  color: white;
+  cursor: pointer;
+}
+
+.user-info.me::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  transform-origin: center center;
+  transform: translate(-50%, -50%) scale(1.2);
+  border: 2px solid var(--client-status-color);
+  border-radius: 50%;
+}
+
+/* toolbar > hide deleted node */
+
+.text-view-area.hide-deleted-node .char-item.deleted,
+.text-view-area.hide-deleted-node .structure-item.deleted,
+#splaytree-log-holder.hide-deleted-node .node-item.is-removed,
+#llrbtree-log-holder.hide-deleted-node .node-item.is-removed {
+  display: none;
+}
+
+/* toolbar > hide view */
+
+.layout > .content.hide-splay-tree.hide-llrb-tree > .editor-area,
+.layout > .content.hide-splay-tree.hide-llrb-tree .tabcontent {
+  height: 100%;
+}
+
+/* body > top > center(tab)  */
+
+.text-view-area .tab {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.text-view-area .tab-header {
+  flex: none;
+  display: flex;
+  height: 30px;
+  border-bottom: 1px solid #ececec;
+}
+
+.text-view-area .tab-body {
+  flex: 1;
+  display: flex;
+}
+
+.text-view-area .tab-button {
+  margin-right: 3px;
+  border: none;
+}
+
+.text-view-area .tab-button.active {
+  background-color: #ccc;
+}
+
+.text-view-area .tabcontent {
+  display: none;
+  height: 270px;
+  width: 100%;
+  overflow: auto;
+}
+
+.text-view-area .tabcontent.active {
+  display: block;
+}
+
+/* body > top > center(tab) > text */
+
+.text-view-area .char-item {
+  position: relative;
+  display: inline-block;
+  margin-bottom: 10px;
+  padding: 4px;
+  min-height: 20px;
+  border-bottom: 1px solid #e5e5e5;
+  vertical-align: bottom;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.text-view-area .char-item:hover {
+  background-color: var(--hover-node-bg-color) !important;
+}
+
+.text-view-area .char-item.selected {
+  color: var(--selected-node-color);
+  background-color: var(--selected-node-bg-color);
+}
+
+.text-view-area .char-item.deleted:not(.selected) {
+  text-decoration: line-through;
+  background-color: var(--deleted-node-color);
+}
+
+.text-view-area .char-item .time {
+  display: none;
+}
+
+/* body > top > center(tab) > structure data */
+
+.text-view-area .structure-item {
+  --structure-background-color: var(--client-color, white);
+  display: flex;
+  position: relative;
+  padding: 2px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.text-view-area .structure-item > .icon {
+  background-color: var(--structure-background-color);
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  margin-right: 5px;
+  box-sizing: border-box;
+  padding: 2px;
+  border-radius: 50%;
+}
+
+.text-view-area .structure-item.deleted {
+  text-align: right;
+  background-color: var(--deleted-node-color);
+}
+
+.text-view-area .structure-item.selected {
+  color: var(--selected-node-color);
+  background-color: var(--selected-node-bg-color);
+}
+
+.text-view-area .structure-item:hover {
+  background-color: var(--hover-node-bg-color) !important;
+}
+
+/* body > top > center(tab) > structure text */
+
+.text-view-area #structure-text-holder {
+  padding: 10px;
+  width: 100%;
+  font-size: 12px;
+}
+
+/* body > top > right(selected node info) */
+
+.text-view-area .selected-node-info-area {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  width: 300px;
+}
+
+.text-view-area .selected-node-info-area .title {
+  display: flex;
+  align-items: center;
+  margin: 0px;
+  padding: 10px 10px;
+  height: 30px;
+  border-bottom: 1px solid #ececec;
+  border-left: 1px solid #ececec;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.text-view-area .selected-node-info {
+  flex: 1;
+  width: 100%;
+  border-left: 1px solid #ececec;
+  font-size: 14px;
+}
+
+.text-view-area .selected-node-info .property-item-view {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 10px;
+  text-align: left;
+}
+
+.text-view-area .selected-node-info .property-item-view label {
+  flex: none;
+  width: 72px;
+  text-align: left;
+  font-weight: bold;
+}
+
+/* body > bottom > tree graph  */
+
+.graph-view .graph-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.graph-view .title {
+  display: flex;
+  align-items: center;
+  margin: 0px;
+  padding: 10px 20px;
+  border-bottom: 1px solid #ececec;
+  font-weight: bold;
+}
+
+.graph-view .badge {
+  margin-left: 10px;
+  font-weight: 400;
+  font-size: 12px;
+}
+
+.graph-view .tree-area {
+  flex: 1;
+  overflow: auto;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.tree-area .node-item {
+  display: inline-block;
+  padding: 2px;
+  box-sizing: border-box;
+  cursor: pointer;
+  position: absolute;
+  z-index: 10;
+  text-align: center;
+}
+
+.tree-area .node-item .inner-description {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  box-sizing: border-box;
+  border-color: var(--ticker-color, black);
+  border-width: 2px;
+  border-style: solid;
+  margin-bottom: 10px;
+  position: relative;
+  margin-left: 8px;
+  margin-right: 8px;
+  width: 64px;
+  height: 40px;
+  contain: size;
+  background-color: white;
+}
+
+.tree-area .node-item.selected .inner-description {
+  border-color: var(--selected-node-bg-color) !important;
+  background-color: var(--selected-node-bg-color) !important;
+  color: var(--selected-node-color) !important;
+}
+
+.tree-area .node-item.is-removed .inner-description {
+  background-color: var(--deleted-node-color);
+  border-width: 1px;
+}
+
+.tree-area .node-item .inner-description .key-area {
+  font-size: 10px;
+  padding: 4px;
+  box-sizing: border-box;
+  flex: 1;
+}
+
+.tree-area .node-item .inner-description .value-area {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  box-sizing: border-box;
+  width: 100%;
+  border-top: 1px solid black;
+  font-size: 11px;
+}
+
+.tree-area .node-item .inner-description .value-area .value {
+  flex: 1;
+  text-align: center;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 40px;
+}
+
+.tree-area .node-item .inner-description .value-area .weight {
+  flex: none;
+  border-right: 1px solid black;
+  box-sizing: border-box;
+  padding: 0px 2px;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.tree-area .node-item .inner-description .prev-view,
+.tree-area .node-item .inner-description .next-view {
+  position: absolute;
+  display: none;
+  width: 10px;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  color: black;
+}
+
+.tree-area .node-item .inner-description .prev-view {
+  top: 50%;
+  left: -12px;
+  transform: translate(0, -50%);
+}
+
+.tree-area .node-item .inner-description .next-view {
+  top: 50%;
+  right: -12px;
+  transform: translate(0, -50%);
+}
+
+.tree-area .node-item .inner-description:hover .prev-view,
+.tree-area .node-item .inner-description:hover .next-view {
+  display: flex;
+}
+
+.tree-area .line-holder {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100px;
+  height: 100px;
+}
+
+.tree-area .line-holder svg {
+  display: block;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.tree-area .line-holder path {
+  stroke: black;
+}
diff --git a/public/devtool/text.js b/public/devtool/text.js
new file mode 100644
index 000000000..5e8701ff6
--- /dev/null
+++ b/public/devtool/text.js
@@ -0,0 +1,827 @@
+/* eslint-env browser */
+/* eslint-disable jsdoc/require-jsdoc*/
+
+(function (global) {
+  // TODO(hackerwins): Remove direct dependency on the document.
+
+  // gnb
+  let textViewAreaHolder = document.querySelector('.text-view-area');
+  let hideDeletedNodeHolder = document.getElementById('hide-deleted-node');
+  let hideTextHolder = document.getElementById('hide-text');
+  let viewTextHolder = document.getElementById('view-text');
+  let hideLLRBTreeHolder = document.getElementById('hide-llrb-tree');
+  let viewLLRBTreeHolder = document.getElementById('view-llrb-tree');
+  let hideSplayTreeHolder = document.getElementById('hide-splay-tree');
+  let viewSplayTreeHolder = document.getElementById('view-splay-tree');
+
+  // bodyView
+  let realViewHolder = document.getElementById('real-view');
+
+  // top-right: Structure Info
+  const tabContainer = document.getElementById('tab-container');
+  const textLogHolder = document.getElementById('text-log-holder');
+  const structureInfoHolder = document.getElementById('structure-info-holder');
+  const structureLogHolder = document.getElementById('structure-log-holder');
+  const structureTextHolder = document.getElementById('structure-text-holder');
+  const selectedNodeInfo = document.querySelector(`.selected-node-info`);
+
+  // bottom
+  const treeArea = document.querySelector('.tree-area');
+
+  // bottom-left: SplayTree
+  const splayTreeLogHolder = document.getElementById('splaytree-log-holder');
+  const splayTreeInfo = document.getElementById('splaytree-info');
+
+  // bottom-right: LLRBTree
+  const llrbTreeLogHolder = document.getElementById('llrbtree-log-holder');
+  const llrbTreeInfo = document.getElementById('llrbtree-info');
+
+  let firstRendering = true;
+  let blockList = [];
+  let blockKeys = {};
+  let usersInfo = {};
+
+  function displayLog(doc) {
+    blockList = [];
+
+    displayBlockLog(doc);
+    // Displays a tree log with a timer to improve rendering performance.
+    // If there is an existing timer, it cancels it to prevent redundant rendering calls.
+    displayTreeLogWithTimer(doc);
+  }
+
+  // ======================================
+  // ========== Block Rendering ===========
+  // ======================================
+
+  function displayBlockLog(doc) {
+    blockList = [];
+    blockKeys = {};
+
+    // 01. display structure text
+    const contentString = doc.getRoot().content.toTestString();
+    structureTextHolder.innerHTML = contentString;
+
+    // Make textItems to blockList
+    const textItems = [...contentString.matchAll(/(\[[^\]]*\]|\{[^\}]*})/g)];
+    let textOffset = 0;
+    for (const item of textItems) {
+      let block = null;
+      if (item[0].startsWith('[')) {
+        block = getEditBlock(item[0].match(/\[([^\]]*)\]/));
+        block.offset = textOffset;
+        textOffset += block.value.length;
+        blockKeys[block.time] = block;
+      } else {
+        // deleted block
+        block = getDeleteBlock(item[0].match(/\{([^\}]*)\}/));
+      }
+      blockList.push(block);
+    }
+
+    // 02. display structure data
+    structureLogHolder.innerHTML = blockList
+      .map((block) => {
+        const value = `${block.time} ${displayValue(block.value)}`;
+        const style = `--client-color: ${block.color};`;
+        const attribute = `data-time="${block.time}" style="${style}"`;
+
+        if (block.deleted) {
+          return `
+          <div  class="structure-item deleted" ${attribute}>
+            <span class="icon">&times;</span>{${value}}
+          </div>`;
+        } else {
+          return `
+          <div class="structure-item edit" ${attribute}>
+            <span class="icon"></span>[${value}]
+          </div>`;
+        }
+      })
+      .join('');
+
+    // 03. display char item
+    textLogHolder.innerHTML = blockList
+      .map((block) => {
+        const defaultClass = `char-item ${block.deleted ? 'deleted' : 'real'}`;
+        const defaultAttributes = [
+          `data-time="${block.time}"`,
+          `title="${block.key}"`,
+          `data-has-length="${block.value.length > 1}"`,
+        ].join(' ');
+
+        if (block.deleted) {
+          return `<span class="${defaultClass}" ${defaultAttributes} style="background-color: ${
+            block.color
+          }">
+          <div class="time">${block.time}</div>
+          <div>${displayValue(block.value)}</div>
+        </span>`;
+        } else {
+          return `<span class="${defaultClass}" ${defaultAttributes} style="border: 1px solid ${
+            block.color
+          }" data-offset="${block.offset}">
+          <div class="time">${block.time}</div>
+          <div>${displayValue(block.value)}</div>
+        </span>`;
+        }
+      })
+      .join('');
+  }
+
+  function getEditBlock(block) {
+    const [, key] = block;
+    const [time, ...valueList] = key.split(' ');
+    const value = valueList.join(' ');
+    const [lamport, ticker, delimiter, offset] = time.split(':');
+    const color = Object.values(usersInfo).find(
+      (it) => it.ticker === ticker,
+    )?.color;
+
+    return {
+      key,
+      value,
+      color,
+      time,
+      lamport,
+      ticker,
+      t: delimiter,
+      offset,
+      blockKey: `${lamport}:${ticker}:${delimiter}`,
+    };
+  }
+
+  function getDeleteBlock(block) {
+    const [, key] = block;
+    const [time, value] = key.split(' ');
+    const [lamport, ticker, delimiter, offset] = time.split(':');
+    const color = Object.values(usersInfo).find(
+      (it) => it.ticker === ticker,
+    )?.color;
+
+    return {
+      deleted: true,
+      key,
+      value,
+      color,
+      time,
+      lamport,
+      ticker,
+      t: delimiter,
+      offset,
+      blockKey: `${lamport}:${ticker}:${delimiter}`,
+    };
+  }
+
+  function displayValue(value) {
+    if (value === ' ') {
+      return '&lt;space&gt;';
+    } else if (value === '\n') {
+      return '&lt;enter&gt;';
+    } else if (value === '\t') {
+      return '&lt;tab&gt;';
+    }
+
+    return value;
+  }
+
+  // ======================================
+  // ========== Tree Rendering ============
+  // ======================================
+
+  let displayTimer;
+  function displayTreeLogWithTimer(doc) {
+    if (displayTimer) {
+      clearTimeout(displayTimer);
+    }
+
+    displayTimer = setTimeout(() => {
+      displayTreeLog(doc);
+      displayBlockLog(doc);
+    }, 500);
+  }
+
+  let splayNext = [];
+  let llrbNext = [];
+  let splayHeadNode;
+  let llrbHeadNode;
+  let splayPanzoomInstance;
+  let llrbPanzoomInstance;
+  function displayTreeLog(doc) {
+    // render splay tree
+    splayNext = [];
+    const splayhead = getNewSplayTree(
+      doc.getRoot().content.text.rgaTreeSplit.treeByIndex.root,
+    );
+    splayHeadNode = splayhead;
+    calculateTreeViewport(splayhead);
+    calculateAbsolutePosition('splay', splayhead, 0, splayhead.viewport.width);
+    splayTreeInfo.innerHTML = `depth: ${splayNext.length - 1}`;
+    splayTreeLogHolder.innerHTML =
+      renderHeadLineView('splay', splayhead) +
+      renderHeadHTML('splay', splayhead);
+
+    // render llrb tree
+    llrbNext = [];
+    const llrbhead = getNewLLRBTree(
+      doc.getRoot().content.text.rgaTreeSplit.treeByID.root,
+    );
+    llrbHeadNode = llrbhead;
+    calculateTreeViewport(llrbhead);
+    calculateAbsolutePosition('llrb', llrbhead, 0, llrbhead.viewport.width);
+    llrbTreeInfo.innerHTML = `depth: ${llrbNext.length - 1}`;
+    llrbTreeLogHolder.innerHTML =
+      renderHeadLineView('llrb', llrbhead) + renderHeadHTML('llrb', llrbhead);
+
+    if (firstRendering) {
+      const rootRect = treeArea.getBoundingClientRect();
+      moveToSelectedItem(splayPanzoomInstance, rootRect, splayhead);
+      moveToSelectedItem(llrbPanzoomInstance, rootRect, llrbhead);
+      firstRendering = false;
+    }
+  }
+
+  function getNewSplayTree(node, depth = 0, parent = null) {
+    if (typeof splayNext[depth] !== 'number') {
+      splayNext[depth] = 0;
+    }
+
+    const currentNode = {
+      parent,
+      depth,
+      next: splayNext[depth]++,
+      actorID: node.id.createdAt.actorID,
+      isRemoved: node?.isRemoved?.(),
+      removedAt: node?.removedAt,
+      key: node.id.toTestString(),
+      weight: node.weight,
+      value: node.value?.content,
+      attributes: node.value?.attributes,
+    };
+    currentNode.left = node.left
+      ? getNewSplayTree(node.left, depth + 1, currentNode)
+      : null;
+    currentNode.right = node.right
+      ? getNewSplayTree(node.right, depth + 1, currentNode)
+      : null;
+    return currentNode;
+  }
+
+  function getNewLLRBTree(node, depth = 0, parent = null) {
+    if (typeof llrbNext[depth] !== 'number') {
+      llrbNext[depth] = 0;
+    }
+
+    const currentNode = {
+      parent,
+      depth,
+      next: llrbNext[depth]++,
+      actorID: node.key.createdAt.actorID,
+      isRemoved: node.value.isRemoved(),
+      removedAt: node.value.removedAt,
+      key: node.key.toTestString(),
+      weight: node.value.weight,
+      value: node.value.value?.content,
+      isRed: node.isRed,
+    };
+    currentNode.left = node.left
+      ? getNewLLRBTree(node.left, depth + 1, currentNode)
+      : null;
+    currentNode.right = node.right
+      ? getNewLLRBTree(node.right, depth + 1, currentNode)
+      : null;
+    return currentNode;
+  }
+
+  function calculateTreeViewport(node) {
+    if (!node) {
+      return;
+    }
+    if (!node.left && !node.right) {
+      node.viewport = {
+        width: 64,
+      };
+      return;
+    }
+
+    node.viewport = {
+      width: 0,
+    };
+    if (node.left) {
+      calculateTreeViewport(node.left);
+      node.viewport.width += node.left.viewport.width;
+      node.viewport.width += 10;
+    }
+    if (node.right) {
+      calculateTreeViewport(node.right);
+      node.viewport.width += node.right.viewport.width;
+    }
+  }
+
+  function calculateAbsolutePosition(type, node, startX = 0, endX = 0) {
+    if (!node) {
+      return;
+    }
+
+    node.viewport.x = startX + node.viewport.width / 2;
+    node.viewport.top = node.depth * 52;
+    node.viewport.left = node.viewport.x;
+
+    let hasReconcileLeft = false;
+
+    if (node.left) {
+      if (
+        (node.right?.left || node.right?.right) &&
+        !node.left.left &&
+        !node.left.right
+      ) {
+        if (node.right) {
+          hasReconcileLeft = true;
+        }
+      } else {
+        // startX -= (node.right?.viewport.width || 0);
+      }
+      calculateAbsolutePosition(
+        type,
+        node.left,
+        startX,
+        startX + node.left.viewport.width,
+      );
+    }
+
+    let hasReconcileRight = false;
+    if (node.right) {
+      if (
+        (node.left?.left || node.left?.right) &&
+        !node.right.left &&
+        !node.right.right
+      ) {
+        if (node.left) {
+          hasReconcileRight = true;
+        }
+      } else {
+        startX += node.left?.viewport.width || 0;
+      }
+      calculateAbsolutePosition(
+        type,
+        node.right,
+        startX + 10,
+        startX + node.right.viewport.width,
+      );
+    }
+
+    if (hasReconcileLeft) {
+      node.left.viewport.left =
+        node.viewport.left - node.left.viewport.width / 2 - 10;
+    }
+    if (hasReconcileRight) {
+      if (node.left) {
+        node.right.viewport.left = node.left.viewport.left + 70;
+      } else {
+        node.right.viewport.left =
+          node.viewport.left + node.viewport.width / 2 + 10;
+      }
+    }
+  }
+
+  function renderHeadLineView(type, node) {
+    return `
+  <div class="line-holder">
+    <svg overflow="visible">
+      <path class="line" d="${renderLineHTML(type, node)}"/>
+    </svg>
+  </div>`;
+  }
+
+  function renderLineHTML(type, node) {
+    if (!node) {
+      return '';
+    }
+    return `
+    ${
+      node.parent
+        ? `M ${node.viewport.left + 40} ${node.viewport.top + 25} L ${
+            node.parent.viewport.left + 40
+          } ${node.parent.viewport.top + 25}`
+        : ''
+    }
+    ${node.left ? renderLineHTML(type, node.left) : ''}
+    ${node.right ? renderLineHTML(type, node.right) : ''}
+  `;
+  }
+
+  function renderHeadHTML(type, node) {
+    if (!node) {
+      return '';
+    }
+
+    // prettier-ignore
+    return (
+    `<div 
+        class="node-item ${node.isRemoved ? 'is-removed' : ''}" 
+        style="--ticker-color: ${usersInfo[node.actorID]?.color}; transform-origin: center center; transform: translate3d(${node.viewport.left}px, ${node.viewport.top}px, 0px);"
+        data-key="${node.key}">
+      <div class="content">
+        <div class="inner-description">
+          ${!node.isRemoved ? `<div class="prev-view">&lt;</div>` : ''}
+          <div class="key-area">${node.key}</div>
+          <div class="value-area">
+            <div class="weight">${node.weight === 0 ? 'Ø' : node.weight}</div>
+            <div class="value">${displayValue(node.value)}</div>
+          </div>
+          ${!node.isRemoved ? `<div class="next-view">&gt;</div>` : ''}
+        </div>
+      </div>
+    </div>`
+    + (node.left ? renderHeadHTML(type, node.left) : '')
+    + (node.right ? renderHeadHTML(type, node.right) : '')
+  );
+  }
+
+  // Initialize panzoom
+  splayPanzoomInstance = panzoom(splayTreeLogHolder, {
+    transformOrigin: {
+      x: 0.5,
+      y: 0.5,
+    },
+  });
+  llrbPanzoomInstance = panzoom(llrbTreeLogHolder, {
+    transformOrigin: {
+      x: 0.5,
+      y: 0.5,
+    },
+  });
+
+  // ======================================
+  // ========== Selecting Node ============
+  // ======================================
+
+  let selectedNodeElement = null;
+  let llrbselectedNodeElement = null;
+  let selectedNodeCharElement = null;
+  let selectedNodeStructureElement = null;
+
+  function treeLogEventHandler(e) {
+    // Move to the prev node of the selected node
+    const prevView = e.target.closest('.prev-view');
+    if (prevView) {
+      goPrevNode(e);
+      return;
+    }
+
+    // Move to the next node of the selected node
+    const nextView = e.target.closest('.next-view');
+    if (nextView) {
+      goNextNode(e);
+      return;
+    }
+
+    // TreeLog - select tree node
+    const nodeItem = e.target.closest('.node-item');
+    if (nodeItem) {
+      const itemID = nodeItem.getAttribute('data-key');
+      const innerDescription = e.target.closest('.inner-description');
+      if (innerDescription) {
+        highlightAndMoveToSelectedItem(itemID);
+      }
+    }
+  }
+
+  function structureInfoEventHandler(e) {
+    const charItem = e.target.closest('.char-item');
+    if (charItem) {
+      const itemID = charItem.getAttribute('data-time');
+      highlightAndMoveToSelectedItem(itemID);
+    }
+
+    const structureItem = e.target.closest('.structure-item');
+    if (structureItem) {
+      const itemID = structureItem.getAttribute('data-time');
+      highlightAndMoveToSelectedItem(itemID);
+    }
+  }
+
+  structureInfoHolder.addEventListener('click', structureInfoEventHandler);
+  splayTreeLogHolder.addEventListener('click', treeLogEventHandler);
+  llrbTreeLogHolder.addEventListener('click', treeLogEventHandler);
+
+  function goPrevNode(e) {
+    e.preventDefault();
+    const nodeItem = e.target.closest('.node-item');
+    if (!nodeItem) return;
+    const nodeID = nodeItem.getAttribute('data-key');
+    const innerDescription = e.target.closest('.inner-description');
+    if (!innerDescription) return;
+
+    // find current tree node
+    const currentTreeNode = traverseTree(splayHeadNode, (node) => {
+      if (node.key === nodeID) {
+        return true;
+      }
+    });
+    if (currentTreeNode.deleted) return;
+
+    // find previous node that has not been deleted
+    const currentIndex = blockList.findIndex((block) => {
+      if (block.time === currentTreeNode.key) {
+        return true;
+      }
+    });
+    if (currentIndex > -1) {
+      for (let startIndex = currentIndex - 1; startIndex >= 0; startIndex--) {
+        const prevItem = blockList[startIndex];
+        if (!prevItem.deleted) {
+          highlightAndMoveToSelectedItem(prevItem.time);
+          return;
+        }
+      }
+    }
+  }
+
+  function goNextNode(e) {
+    e.preventDefault();
+    const nodeItem = e.target.closest('.node-item');
+    if (!nodeItem) return;
+    const nodeID = nodeItem.getAttribute('data-key');
+    const innerDescription = e.target.closest('.inner-description');
+    if (!innerDescription) return;
+
+    // find current tree node
+    const currentTreeNode = traverseTree(splayHeadNode, (node) => {
+      if (node.key === nodeID) {
+        return true;
+      }
+    });
+    if (currentTreeNode.deleted) return;
+
+    // find next node that has not been deleted
+    const currentIndex = blockList.findIndex((block) => {
+      if (block.time === currentTreeNode.key) {
+        return true;
+      }
+    });
+    if (currentIndex > -1) {
+      for (
+        let startIndex = currentIndex + 1;
+        startIndex < blockList.length;
+        startIndex++
+      ) {
+        const nextItem = blockList[startIndex];
+        if (!nextItem.deleted) {
+          highlightAndMoveToSelectedItem(nextItem.time);
+          return;
+        }
+      }
+    }
+  }
+
+  function highlightAndMoveToSelectedItem(selectedKey) {
+    const splaySelectedNode = traverseTree(splayHeadNode, (node) => {
+      if (node.key === selectedKey) {
+        return true;
+      }
+    });
+    const llrbSelectedNode = traverseTree(llrbHeadNode, (node) => {
+      if (node.key === selectedKey) {
+        return true;
+      }
+    });
+
+    // Displays selected item info.
+    displaySelectedItemInfo(splaySelectedNode);
+    // Highlights the selected item in the CodeMirror editor.
+    highlightCMSelectedItem(splaySelectedNode);
+    // Highlights the selected item in the text log, structure data, and tree log.
+    highlightSelectedItem(selectedKey);
+
+    // panzoom refresh
+    const rootRect = treeArea.getBoundingClientRect();
+    moveToSelectedItem(splayPanzoomInstance, rootRect, splaySelectedNode);
+    moveToSelectedItem(llrbPanzoomInstance, rootRect, llrbSelectedNode);
+  }
+
+  function traverseTree(node, callback) {
+    if (node.left) {
+      const left = traverseTree(node.left, callback);
+      if (left) {
+        return left;
+      }
+    }
+
+    if (callback(node)) {
+      return node;
+    }
+
+    if (node.right) {
+      const right = traverseTree(node.right, callback);
+      if (right) {
+        return right;
+      }
+    }
+  }
+
+  function displaySelectedItemInfo(node) {
+    if (selectedNodeInfo) {
+      const block = blockKeys[node.key];
+      selectedNodeInfo.innerHTML = `
+      <div class="property-view">
+        <div class="property-item-view"><label>parent:</label> <div class="value">${
+          node.parent?.key
+        }</div></div>
+        <hr />
+        <div class="property-item-view"><label>key:</label> <div class="value">${
+          node.key
+        }</div></div>
+        <div class="property-item-view"><label>weight:</label> <div class="value">${
+          node.weight
+        }</div></div>
+        <div class="property-item-view"><label>offset:</label> <div class="value">${
+          block ? block.offset : 'deleted'
+        }</div></div>
+        <div class="property-item-view"><label>value:</label> <div class="value">${displayValue(
+          node.value,
+        )}</div></div>
+        <div class="property-item-view"><label>left:</label> <div class="value">${
+          node.left?.key
+        }</div></div>
+        <div class="property-item-view"><label>right:</label> <div class="value">${
+          node.right?.key
+        }</div></div>
+      </div>`;
+    }
+  }
+
+  let selectedItemMaker;
+  let codeMirrorInstance;
+  function highlightCMSelectedItem(selectedItem) {
+    if (selectedItemMaker) {
+      selectedItemMaker.clear();
+    }
+
+    const block = blockKeys[selectedItem.key];
+    if (!block) return;
+
+    const cm = codeMirrorInstance;
+    const fromPos = cm.posFromIndex(block.offset);
+    const toPos = cm.posFromIndex(block.offset + selectedItem.value.length);
+    const color = usersInfo[selectedItem.actorID]?.color || 'red';
+    selectedItemMaker = cm.markText(fromPos, toPos, {
+      css: `background: ${color}; color: white; border: 2px solid black; box-sizing: border-box; border-radius: 4px; padding: 2px`,
+      insertLeft: true,
+    });
+  }
+
+  function highlightSelectedItem(selectedKey) {
+    if (selectedNodeElement) {
+      selectedNodeElement.classList.remove('selected');
+    }
+    selectedNodeElement = splayTreeLogHolder.querySelector(
+      `.node-item[data-key="${selectedKey}"]`,
+    );
+    if (selectedNodeElement) {
+      selectedNodeElement.classList.add('selected');
+    }
+
+    if (llrbselectedNodeElement) {
+      llrbselectedNodeElement.classList.remove('selected');
+    }
+    llrbselectedNodeElement = llrbTreeLogHolder.querySelector(
+      `.node-item[data-key="${selectedKey}"]`,
+    );
+    if (llrbselectedNodeElement) {
+      llrbselectedNodeElement.classList.add('selected');
+    }
+
+    if (selectedNodeCharElement) {
+      selectedNodeCharElement.classList.remove('selected');
+    }
+    selectedNodeCharElement = textLogHolder.querySelector(
+      `.char-item[data-time="${selectedKey}"]`,
+    );
+    if (selectedNodeCharElement) {
+      selectedNodeCharElement.classList.add('selected');
+      selectedNodeCharElement.scrollIntoView({
+        block: 'center',
+        inline: 'center',
+      });
+    }
+
+    if (selectedNodeStructureElement) {
+      selectedNodeStructureElement.classList.remove('selected');
+    }
+    selectedNodeStructureElement = structureLogHolder.querySelector(
+      `.structure-item[data-time="${selectedKey}"]`,
+    );
+    if (selectedNodeStructureElement) {
+      selectedNodeStructureElement.classList.add('selected');
+      selectedNodeStructureElement.scrollIntoView({
+        block: 'center',
+        inline: 'center',
+      });
+    }
+  }
+
+  function moveToSelectedItem(panzoomInstance, rootRect, selectedItem) {
+    const trans = panzoomInstance.getTransform();
+    const rect = {
+      x: selectedItem.viewport.left,
+      y: selectedItem.viewport.top,
+    };
+
+    panzoomInstance?.moveTo(
+      -rect.x * trans.scale + rootRect.width / 2,
+      -rect.y * trans.scale + rootRect.height / 2,
+    );
+  }
+
+  // ======================================
+  // ============ UI Control ==============
+  // ======================================
+
+  // Manages tabs within the 'text-view-area', displaying the content of the selected tab.
+  function openTab(e, target) {
+    const tabButtons = tabContainer.querySelectorAll('.tab-button');
+    const tabcontents = tabContainer.querySelectorAll('.tabcontent');
+
+    tabButtons.forEach((it) => it.classList.remove('active'));
+    tabcontents.forEach((it) => it.classList.remove('active'));
+
+    e.target.classList.add('active');
+    tabContainer.querySelector(`#${target}`).classList.add('active');
+  }
+
+  // Toggle options in the 'center-tools'.
+  let hideDeletedNode = false;
+  let hideText = true;
+  let hideSplayTree = true;
+  let hideLLRBTree = true;
+
+  setHideDeletedNode(hideDeletedNode);
+  setHideText(hideText);
+  setHideSplayTree(hideSplayTree);
+  setHideLLRBTree(hideLLRBTree);
+
+  function toggleDeletedNodeShow() {
+    setHideDeletedNode(!hideDeletedNode);
+  }
+
+  function toggleText() {
+    setHideText(!hideText);
+  }
+
+  function toggleSplayTree() {
+    setHideSplayTree(!hideSplayTree);
+  }
+
+  function toggleLLRBTree() {
+    setHideLLRBTree(!hideLLRBTree);
+  }
+
+  function setHideDeletedNode(hide) {
+    hideDeletedNode = hide;
+    hideDeletedNodeHolder.checked = hideDeletedNode;
+    textViewAreaHolder.classList.toggle('hide-deleted-node', hideDeletedNode);
+    splayTreeLogHolder.classList.toggle('hide-deleted-node', hideDeletedNode);
+    llrbTreeLogHolder.classList.toggle('hide-deleted-node', hideDeletedNode);
+  }
+
+  function setHideText(hide) {
+    hideText = hide;
+    hideTextHolder.checked = hideText;
+    viewTextHolder.style.display = hideText ? 'block' : 'none';
+    realViewHolder.classList.toggle('hide-text', !hideText);
+  }
+
+  function setHideSplayTree(hide) {
+    hideSplayTree = hide;
+    hideSplayTreeHolder.checked = hideSplayTree;
+    viewSplayTreeHolder.style.display = hideSplayTree ? 'flex' : 'none';
+    realViewHolder.classList.toggle('hide-splay-tree', !hideSplayTree);
+  }
+
+  function setHideLLRBTree(hide) {
+    hideLLRBTree = hide;
+    hideLLRBTreeHolder.checked = hideLLRBTree;
+    viewLLRBTreeHolder.style.display = hideLLRBTree ? 'flex' : 'none';
+    realViewHolder.classList.toggle('hide-llrb-tree', !hideLLRBTree);
+  }
+
+  function setUsersInfo(info) {
+    usersInfo = info;
+  }
+
+  function setCodeMirror(cm) {
+    codeMirrorInstance = cm;
+  }
+
+  global.devtool = {
+    displayLog,
+    openTab,
+    toggleDeletedNodeShow,
+    toggleText,
+    toggleSplayTree,
+    toggleLLRBTree,
+    setUsersInfo,
+    setCodeMirror,
+  };
+})(window);
diff --git a/public/drawing.html b/public/drawing.html
index b9d672d2a..f526ee09d 100644
--- a/public/drawing.html
+++ b/public/drawing.html
@@ -16,18 +16,14 @@
         id="drawing-panel"
         style="border: 1px solid black"
       ></canvas>
-      <div>Online clients:</div>
-      <pre
-        style="white-space: pre-wrap"
-      ><code id="online-clients-log"></code></pre>
-      <div>document:</div>
-      <pre style="white-space: pre-wrap"><code id="doc-log"></code></pre>
+      <pre style="white-space: pre-wrap"><code id="online-clients"></code></pre>
+      <pre style="white-space: pre-wrap" id="log-holder"></pre>
     </div>
     <script src="./yorkie.js"></script>
     <script>
       const drawingPanel = document.getElementById('drawing-panel');
-      const docPanel = document.getElementById('doc-log');
-      const onlineClientsPanel = document.getElementById('online-clients-log');
+      const docPanel = document.getElementById('log-holder');
+      const onlineClientsPanel = document.getElementById('online-clients');
       const onlineClientsCount = document.getElementById(
         'online-clients-count',
       );
diff --git a/public/index.html b/public/index.html
index 59b90e631..965c83a71 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,61 +2,240 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <title>Codemirror Example</title>
+    <title>CodeMirror Example</title>
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.css"
     />
     <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="./devtool/text.css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.js"></script>
+    <script src="https://unpkg.com/panzoom@9.4.0/dist/panzoom.min.js"></script>
+    <style type="text/css" id="codemirror-custom-style"></style>
   </head>
   <body>
-    <div>
-      <div>status: <span id="network-status"></span></div>
-      <textarea id="placeholder" cols="30" rows="10"></textarea>
-      <div>online clients:</div>
-      <pre
-        style="white-space: pre-wrap"
-      ><code id="online-clients-holder"></code></pre>
-      <div>document:</div>
-      <pre style="white-space: pre-wrap"><code id="log-holder"></code></pre>
-      <div>text:</div>
-      <pre
-        style="white-space: pre-wrap"
-      ><code id="text-log-holder"></code></pre>
+    <div class="layout">
+      <div class="toolbar">
+        <div class="left-tools tools">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="100"
+            height="38"
+            viewBox="0 0 100 38"
+            fill="none"
+            role="img"
+          >
+            <mask id="path-1-inside-1_4874_2783" fill="white">
+              <path
+                d="M11.8574 11.4048L18.8525 21.4507C19.2947 22.086 20.1683 22.2423 20.8036 21.8001C20.9398 21.7052 21.0581 21.5869 21.153 21.4507L28.148 11.4048C29.0327 10.1343 28.7198 8.3872 27.4495 7.5027C26.9794 7.17549 26.4205 7 25.8477 7H14.1577C12.6095 7 11.3545 8.25503 11.3545 9.80322C11.3547 10.3758 11.5302 10.9347 11.8574 11.4048Z"
+              ></path>
+            </mask>
+            <path
+              d="M11.8574 11.4048L18.8525 21.4507C19.2947 22.086 20.1683 22.2423 20.8036 21.8001C20.9398 21.7052 21.0581 21.5869 21.153 21.4507L28.148 11.4048C29.0327 10.1343 28.7198 8.3872 27.4495 7.5027C26.9794 7.17549 26.4205 7 25.8477 7H14.1577C12.6095 7 11.3545 8.25503 11.3545 9.80322C11.3547 10.3758 11.5302 10.9347 11.8574 11.4048Z"
+              fill="#514C49"
+              stroke="#FEFDFB"
+              stroke-miterlimit="10"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              mask="url(#path-1-inside-1_4874_2783)"
+            ></path>
+            <path
+              d="M22.8637 29.5446C23.3612 29.8283 23.9338 29.9528 24.5042 29.9014L37.2991 28.7469C38.3271 28.6542 39.0851 27.7457 38.9924 26.7178C38.9876 26.6636 38.9803 26.6096 38.9706 26.556C38.5862 24.4114 37.8296 22.3507 36.7352 20.4668C35.6407 18.5829 34.2255 16.9048 32.5532 15.5085C31.761 14.8471 30.5825 14.953 29.9211 15.7455C29.8862 15.7872 29.8532 15.8305 29.8219 15.8752L22.4807 26.418C22.1535 26.888 21.978 27.4469 21.978 28.0198V27.9849C21.978 28.3055 22.0604 28.6208 22.2176 28.9002C22.3826 29.1751 22.6155 29.4029 22.8942 29.5617"
+              fill="#FDC433"
+            ></path>
+            <path
+              d="M17.8492 28.7605C17.6844 29.097 17.4222 29.376 17.0969 29.5616L17.1365 29.539C16.6391 29.8227 16.0665 29.9472 15.4961 29.8959L2.70114 28.7414C2.64694 28.7365 2.59295 28.7293 2.53935 28.7196C1.52348 28.5375 0.847507 27.5663 1.02965 26.5505C1.41407 24.4057 2.17064 22.3451 3.26489 20.4611C4.35914 18.577 5.77455 16.8993 7.44706 15.5028C7.48877 15.4679 7.53208 15.4349 7.57681 15.4037C8.42384 14.8139 9.58841 15.0225 10.1784 15.8695L17.5196 26.4124C17.8468 26.8825 18.0223 27.4414 18.0223 28.0142V27.9685C18.0223 28.343 17.9096 28.7091 17.6991 29.019"
+              fill="#FDC433"
+            ></path>
+            <path
+              d="M46 13.0243L50.3839 20.7431V24.9463H52.4806V20.7272L56.8645 13.0243H54.6726L51.7658 18.3231L51.4164 19.0237L51.0669 18.3231L48.192 13.0243H46Z"
+              fill="#332E2B"
+            ></path>
+            <path
+              d="M61.4832 15.7917C58.9259 15.7917 57.0358 17.6863 57.0358 20.4884C57.0358 23.2905 58.9259 25.1851 61.4832 25.1851C64.0087 25.1851 65.9307 23.2905 65.9307 20.4884C65.9307 17.6863 64.0087 15.7917 61.4832 15.7917ZM61.4832 23.4656C60.149 23.4656 59.0689 22.2556 59.0689 20.4884C59.0689 18.7212 60.149 17.5112 61.4832 17.5112C62.8175 17.5112 63.8976 18.7212 63.8976 20.4884C63.8976 22.2556 62.8175 23.4656 61.4832 23.4656Z"
+              fill="#332E2B"
+            ></path>
+            <path
+              d="M73.6325 15.8076C72.6 15.8076 71.5676 16.0783 70.821 16.7788V16.0305H68.7879V24.9463H70.821V21.2685C70.821 20.3929 70.8846 19.8356 70.964 19.5013C71.234 18.3391 72.2982 17.543 73.6325 17.6067V15.8076Z"
+              fill="#332E2B"
+            ></path>
+            <path
+              d="M82.1798 24.9463H84.6259L80.6232 20.2177L84.2288 16.0305H81.7827L78.6059 19.8516V13.0779H76.5728V24.9463H78.6059V20.6476L82.1798 24.9463Z"
+              fill="#332E2B"
+            ></path>
+            <path
+              d="M88.6995 16.0305H86.6664V24.9463H88.6995V16.0305ZM86.5711 15.0434H88.7948V12.8145H86.5711V15.0434Z"
+              fill="#332E2B"
+            ></path>
+            <path
+              d="M98.3957 21.8258C97.8875 22.781 96.9344 23.4656 95.8543 23.4656C94.6313 23.4656 93.7259 22.4626 93.5512 21.2526H100V20.2814C100 17.6704 98.2051 15.7917 95.7114 15.7917C93.3288 15.7917 91.4228 17.6863 91.4228 20.4884C91.4228 23.2905 93.2176 25.1851 95.8543 25.1851C97.5062 25.1851 98.9834 24.3095 99.8729 22.9562L98.3957 21.8258ZM93.5353 19.565C93.7894 18.2913 94.6313 17.5112 95.7114 17.5112C96.8709 17.5112 97.6651 18.3709 97.9033 19.565H93.5353Z"
+              fill="#332E2B"
+            ></path>
+          </svg>
+          <div><span id="network-status"></span></div>
+        </div>
+        <div class="center-tools tools">
+          <label style="display: flex; align-items: center">
+            <input
+              type="checkbox"
+              id="hide-deleted-node"
+              onClick="devtool.toggleDeletedNodeShow()"
+            />
+            <span>Hide deleted node</span>
+          </label>
+          <label style="display: flex; align-items: center">
+            <input
+              type="checkbox"
+              id="hide-text"
+              onClick="devtool.toggleText()"
+            />
+            <span>Text</span>
+          </label>
+          <label style="display: flex; align-items: center">
+            <input
+              type="checkbox"
+              id="hide-splay-tree"
+              onClick="devtool.toggleSplayTree()"
+            />
+            <span>SplayTree</span>
+          </label>
+          <label style="display: flex; align-items: center">
+            <input
+              type="checkbox"
+              id="hide-llrb-tree"
+              onClick="devtool.toggleLLRBTree()"
+            />
+            <span>LLRBTree</span>
+          </label>
+        </div>
+        <div class="right-tools tools">
+          <div style="padding: 10px 0px" id="users-holder"></div>
+        </div>
+      </div>
+      <div id="real-view" class="content">
+        <div class="editor-area">
+          <div class="codemirror-area">
+            <textarea id="textarea" cols="30" rows="10"></textarea>
+          </div>
+          <div class="data-area" id="view-text">
+            <div class="text-view-area">
+              <div id="tab-container" class="tab">
+                <div class="tab-header">
+                  <button
+                    class="tab-button active"
+                    onclick="devtool.openTab(event, 'text')"
+                  >
+                    Text
+                  </button>
+                  <button
+                    class="tab-button"
+                    onclick="devtool.openTab(event, 'structure')"
+                  >
+                    Structure Data
+                  </button>
+                  <button
+                    class="tab-button"
+                    onclick="devtool.openTab(event, 'structure-text')"
+                  >
+                    Structure Text
+                  </button>
+                </div>
+                <div id="structure-info-holder" class="tab-body">
+                  <div id="text" class="tabcontent active">
+                    <div id="text-log-holder"></div>
+                  </div>
+                  <div id="structure" class="tabcontent">
+                    <div id="structure-log-holder"></div>
+                  </div>
+                  <div id="structure-text" class="tabcontent">
+                    <div id="structure-text-holder"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="selected-node-info-area">
+                <h4 class="title">Selected SplayTree Node</h4>
+                <div class="selected-node-info"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="graph-view">
+          <div class="graph-area" id="view-splay-tree">
+            <h4 class="title">
+              <span>SplayTree</span>
+              <span class="badge" id="splaytree-info"></span>
+            </h4>
+            <div class="tree-area">
+              <div id="splaytree-log-holder"></div>
+            </div>
+          </div>
+          <div class="graph-area" id="view-llrb-tree">
+            <h4 class="title">
+              <span>LLRBTree</span>
+              <span class="badge" id="llrbtree-info"></span>
+            </h4>
+            <div class="tree-area">
+              <div id="llrbtree-log-holder"></div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <script src="./yorkie.js"></script>
     <script src="./util.js"></script>
+    <script src="./devtool/text.js"></script>
     <script>
+      const textarea = document.getElementById('textarea');
       const statusHolder = document.getElementById('network-status');
-      const placeholder = document.getElementById('placeholder');
-      const onlineClientsHolder = document.getElementById(
-        'online-clients-holder',
-      );
-      const logHolder = document.getElementById('log-holder');
-      const textLogHolder = document.getElementById('text-log-holder');
+      const usersHolder = document.getElementById('users-holder');
       const selectionMap = new Map();
 
       function getRandomColor() {
-        const colors = ['#FECEEA', '#FEF1D2', '#A9FDD8', '#D7F8FF', '#CEC5FA'];
+        const colors = ['#FFC75F', '#FF6F91', '#00C9A7', '#F3C5FF', '#009EFA'];
         const randomIndex = Math.floor(Math.random() * colors.length);
         return colors[randomIndex];
       }
 
-      function displayLog(doc, codemirror) {
-        logHolder.innerText = doc.toJSON();
-
-        textLogHolder.innerText = doc.getRoot().content.toTestString();
-      }
-
-      function displayOnlineClients(presences, myClientID) {
-        const usernames = [];
-        for (const { clientID, presence } of presences) {
-          usernames.push(
-            clientID === myClientID ? `<b>${clientID}</b>` : clientID,
-          );
-        }
-        onlineClientsHolder.innerHTML = JSON.stringify(usernames);
+      function displayUsers(users, myClientID) {
+        const usersInfo = Object.fromEntries(
+          users.map((user) => {
+            const id = user.clientID;
+            return [
+              id,
+              {
+                id,
+                ticker: id.substr(-2),
+                user,
+                color: user.presence.color,
+              },
+            ];
+          }),
+        );
+        devtool.setUsersInfo(usersInfo);
+
+        usersHolder.innerHTML = users
+          .map(({ clientID: id }) => {
+            const color = usersInfo[id].color;
+            const ticker = usersInfo[id].ticker;
+
+            const idString = `<span class="user-info ${
+              id === myClientID ? 'me' : ''
+            }" style="--client-color: ${color}" data-id="${id}" title="${id}"> ${ticker}</span>`;
+
+            return idString;
+          })
+          .join('');
+
+        document.head.querySelector('#codemirror-custom-style').textContent = `
+          :root {
+            --network-status-color: ${
+              network.isOnline ? usersInfo[myClientID]?.color : '#ff0000'
+            };
+          }
+          .CodeMirror-selected {
+            background-color: ${usersInfo[myClientID]?.color} !important;
+          }
+        `;
       }
 
       // https://github.com/codemirror/CodeMirror/pull/5619
@@ -138,19 +317,25 @@
 
       async function main() {
         try {
-          // 01-1. create client with RPCAddr(envoy).
+          // 01. create an instance of codemirror.
+          const codemirror = CodeMirror.fromTextArea(textarea, {
+            lineNumbers: true,
+          });
+          devtool.setCodeMirror(codemirror);
+
+          // 02-1. create client with RPCAddr(envoy).
           const client = new yorkie.Client('http://localhost:8080');
-          // 01-2. subscribe client event.
+          // 02-2. subscribe client event.
           client.subscribe(network.statusListener(statusHolder));
 
-          // 01-3. activate client
+          // 02-3. activate client
           await client.activate();
 
-          // 02. create a document then attach it into the client.
+          // 03-1. create a document then attach it into the client.
           const doc = new yorkie.Document('codemirror');
           doc.subscribe('presence', (event) => {
             if (event.type === 'presence-changed') return;
-            displayOnlineClients(doc.getPresences(), client.getID());
+            displayUsers(doc.getPresences(), client.getID());
           });
 
           await client.attach(doc, {
@@ -163,12 +348,12 @@
             }
           }, 'create content if not exists');
 
-          // 02-2. subscribe document event.
+          // 03-2. subscribe document event.
           doc.subscribe((event) => {
             if (event.type === 'snapshot') {
               codemirror.setValue(doc.getRoot().content.toString());
             }
-            displayLog(doc, codemirror);
+            devtool.displayLog(doc, codemirror);
           });
 
           doc.subscribe('others', (event) => {
@@ -183,11 +368,6 @@
             }
           });
 
-          doc.subscribe((event) => {
-            // TODO(hackerwins): Do we need to receive the presence changed events here?
-            console.log(event);
-          });
-
           doc.subscribe('$.content', (event) => {
             if (event.type === 'remote-change') {
               const { actor, operations } = event.value;
@@ -203,12 +383,6 @@
               }
             }
           });
-          await client.sync();
-
-          // 03. create an instance of codemirror.
-          const codemirror = CodeMirror.fromTextArea(placeholder, {
-            lineNumbers: true,
-          });
 
           // 04. bind the document with the codemirror.
           // 04-1. codemirror to document(applying local).
@@ -283,7 +457,7 @@
 
           // 05. synchronize text of document and codemirror.
           codemirror.setValue(doc.getRoot().content.toString());
-          displayLog(doc, codemirror);
+          devtool.displayLog(doc, codemirror);
           for (const user of doc.getPresences()) {
             if (user.clientID === client.getID()) continue;
             displayRemoteSelection(codemirror, doc, user);
diff --git a/public/multi.html b/public/multi.html
index ec95c8b59..40a57cfab 100644
--- a/public/multi.html
+++ b/public/multi.html
@@ -11,15 +11,12 @@
     <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/quill-cursors@3.1.0/dist/quill-cursors.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/color-hash@1.0.3/dist/color-hash.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/short-unique-id@latest/dist/short-unique-id.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/short-unique-id@4.4.4/dist/short-unique-id.min.js"></script>
   </head>
   <body>
     <div>
-      <div>status: <span id="network-status"></span></div>
-      <div>online clients:</div>
-      <pre
-        style="white-space: pre-wrap"
-      ><code id="online-clients-holder"></code></pre>
+      <div id="network-status"></div>
+      <div id="online-clients"></div>
       <div class="counter">
         <h2>Counter</h2>
         <button class="increaseButton">
@@ -44,9 +41,7 @@ <h2>yorkie document</h2>
     <script>
       const statusHolder = document.getElementById('network-status');
       const placeholder = document.getElementById('placeholder');
-      const onlineClientsHolder = document.getElementById(
-        'online-clients-holder',
-      );
+      const onlineClientsHolder = document.getElementById('online-clients');
       const logHolder = document.getElementById('log-holder');
       const shortUniqueID = new ShortUniqueId();
       const colorHash = new ColorHash();
diff --git a/public/quill.html b/public/quill.html
index e25673fb4..0e70728f4 100644
--- a/public/quill.html
+++ b/public/quill.html
@@ -12,12 +12,12 @@
     <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/quill-cursors@3.1.0/dist/quill-cursors.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/color-hash@1.0.3/dist/color-hash.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/short-unique-id@latest/dist/short-unique-id.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/short-unique-id@4.4.4/dist/short-unique-id.min.js"></script>
   </head>
   <body>
     <div id="network-status"></div>
-    <div id="editor"></div>
     <div id="online-clients"></div>
+    <div id="editor"></div>
     <div id="document"></div>
     <div id="document-text"></div>
 
diff --git a/public/style.css b/public/style.css
index eb1dfcd29..e1ba6494e 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,13 +1,34 @@
-body {
-  background: white;
+/* ============== RESET CSS ============= */
+/* prettier-ignore */
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a,  address, cite, code,
+del, dfn, em, img,  strong, sub,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+  vertical-align: baseline;
+  box-sizing: border-box;
 }
-
-h2 {
-  margin-top: 1.6em;
+ol,
+ul {
+  list-style: none;
 }
 
-li {
-  list-style: none;
+/* ============= COMMON CSS ============= */
+body {
+  margin: 8px;
+  background: white;
 }
 
 button {
@@ -17,22 +38,61 @@ button {
   align-items: center;
 }
 
+#network-status,
+#online-clients,
+#log-holder {
+  margin: 1rem;
+  font-family: monospace;
+}
+#network-status:before {
+  content: 'network: ';
+}
+#online-clients:before {
+  content: 'online-clients: ';
+}
+#log-holder:before {
+  content: 'root: ';
+}
 #network-status span {
   display: inline-block;
   height: 0.8rem;
   width: 0.8rem;
   border-radius: 0.4rem;
 }
-
-.green {
+#network-status .green {
   background-color: green;
 }
-
-.red {
+#network-status .red {
   background-color: red;
 }
 
-.wrap {
+/* ============= quill.html ============= */
+
+.ql-editor {
+  min-height: 300px;
+  overflow-y: auto;
+  resize: vertical;
+}
+
+#document,
+#document-text {
+  margin: 1rem;
+  font-family: monospace;
+}
+
+#document:before {
+  display: block;
+  content: 'document: ';
+}
+
+#document-text:before {
+  display: block;
+  content: 'text: ';
+}
+
+/* ============ counter.html ============ */
+
+.counter-wrap {
   display: flex;
   align-items: center;
   margin: 1em 0;
@@ -55,41 +115,12 @@ button {
   height: 30px;
 }
 
-#network-status:before {
-  content: 'network: ';
-  font-size: 1rem;
-}
-
-#peers:before {
-  display: block;
-  content: 'peers: ';
-  font-size: 1rem;
-}
-
-#document:before {
-  display: block;
-  content: 'document: ';
-  font-size: 1rem;
-}
-
-#document-text:before {
-  display: block;
-  content: 'text: ';
-  font-size: 1rem;
-}
-
-#network-status,
-#peers,
-#document,
-#document-text {
-  margin: 1rem 0;
-  font-family: monospace;
-}
+/* ============= multi.html ============= */
 
-.ql-editor {
-  min-height: 300px;
-  overflow-y: auto;
-  resize: vertical;
+h2 {
+  margin: 1.6em 0 0.4em;
+  font-weight: bold;
+  font-size: 24px;
 }
 
 .increaseButton {
@@ -162,38 +193,3 @@ button {
   border: none;
   outline: none;
 }
-#editor {
-  width: 80%;
-  margin: 30px 10px;
-  padding: 30px 20px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
-.input-wrapper {
-  display: flex;
-  flex-direction: column;
-  margin: 20px;
-  width: 80%;
-}
-.input-wrapper label {
-  margin-bottom: 10px;
-}
-.input-wrapper input {
-  padding: 10px;
-  margin-bottom: 10px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  font-size: 14px;
-}
-.input-wrapper button {
-  padding: 10px 20px;
-  border: none;
-  border-radius: 4px;
-  background-color: #2196f3;
-  color: #fff;
-  font-size: 14px;
-  cursor: pointer;
-}
-.input-wrapper button:hover {
-  background-color: #0d8bf2;
-}
