diff --git a/packages/playground/package.json b/packages/playground/package.json
index 23c08ca1..9ac7ac14 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -19,6 +19,7 @@
     "@editorjs/collaboration-manager": "workspace:^",
     "@editorjs/core": "workspace:^",
     "@editorjs/dom-adapters": "workspace:^",
+    "@editorjs/header": "workspace:^",
     "@editorjs/model": "workspace:^",
     "@editorjs/ui": "workspace:*",
     "vue": "^3.3.4"
diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index 87e6ed84..4a277cc3 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -5,6 +5,7 @@ import Core from '@editorjs/core';
 import { ref, onMounted } from 'vue';
 import { Node } from './components';
 import { EditorjsUI, BlocksUI, InlineToolbarUI, ToolboxUI, ToolbarUI } from '@editorjs/ui';
+import { Header } from '@editorjs/header';
 /**
  * Editor document for visualizing
  */
@@ -68,6 +69,7 @@ onMounted(() => {
     .use(InlineToolbarUI)
     .use(ToolbarUI)
     .use(ToolboxUI)
+    .use(Header)
     .initialize();
 });
 
diff --git a/packages/playground/tsconfig.json b/packages/playground/tsconfig.json
index 169a2569..76efb901 100644
--- a/packages/playground/tsconfig.json
+++ b/packages/playground/tsconfig.json
@@ -35,6 +35,9 @@
     },
     {
       "path": "../collaboration-manager/tsconfig.json",
+    },
+    {
+      "path": "../tools/header/tsconfig.json"
     }
   ]
 }
diff --git a/packages/playground/vite.config.ts b/packages/playground/vite.config.ts
index 67e426e8..92c60dde 100644
--- a/packages/playground/vite.config.ts
+++ b/packages/playground/vite.config.ts
@@ -9,6 +9,11 @@ export default defineConfig({
       '@': path.resolve(__dirname, './src'),
     },
   },
+  server: {
+    fs: {
+      allow: [path.resolve(__dirname, '../..')],
+    },
+  },
   optimizeDeps: {
     exclude: [
       '@editorjs/ui',