diff --git a/src/AppDocumentation.vue b/src/AppDocumentation.vue
index 4cdf40c3a..aa79b044e 100644
--- a/src/AppDocumentation.vue
+++ b/src/AppDocumentation.vue
@@ -11,7 +11,8 @@ export default {
         data: null,
         dependencies: null,
         extPages: null,
-        extFiles: null
+        extFiles: null,
+        component: null
     },
     methods: {
         renderPanels() {
@@ -26,7 +27,7 @@ export default {
                 /* eslint-disable */
                 tabs.push(
                     <TabPanel header={this.sources[sourceType].tabName}>
-                        <LiveEditor name={this.name} sources={this.sources} service={this.service} data={this.data} dependencies={this.dependencies} extPages={this.extPages} extFiles={this.extFiles}/>
+                        <LiveEditor name={this.name} sources={this.sources} service={this.service} data={this.data} dependencies={this.dependencies} extPages={this.extPages} extFiles={this.extFiles} component={this.component}/>
                         <pre v-code><code>
                             {this.sources[sourceType].content.replace('<\\/script>', '<\/script>')}
                         </code></pre>
diff --git a/src/views/chart/BarChartDoc.vue b/src/views/chart/BarChartDoc.vue
index 37b95a26d..f0cf4d715 100755
--- a/src/views/chart/BarChartDoc.vue
+++ b/src/views/chart/BarChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}"/>
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart"/>
 </template>
 
 <script>
diff --git a/src/views/chart/ComboChartDoc.vue b/src/views/chart/ComboChartDoc.vue
index 3aa4a9cb5..83b6f539c 100755
--- a/src/views/chart/ComboChartDoc.vue
+++ b/src/views/chart/ComboChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}"/>
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart"/>
 </template>
 
 <script>
diff --git a/src/views/chart/DoughnutChartDoc.vue b/src/views/chart/DoughnutChartDoc.vue
index c06b61756..06d641e59 100755
--- a/src/views/chart/DoughnutChartDoc.vue
+++ b/src/views/chart/DoughnutChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" />
 </template>
 
 <script>
diff --git a/src/views/chart/LineChartDoc.vue b/src/views/chart/LineChartDoc.vue
index 1e9564d04..9bb3d1cc3 100755
--- a/src/views/chart/LineChartDoc.vue
+++ b/src/views/chart/LineChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" />
 </template>
 
 <script>
diff --git a/src/views/chart/PieChartDoc.vue b/src/views/chart/PieChartDoc.vue
index c18eb3d53..2a9ad6b47 100755
--- a/src/views/chart/PieChartDoc.vue
+++ b/src/views/chart/PieChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" />
 </template>
 
 <script>
diff --git a/src/views/chart/PolarAreaChartDoc.vue b/src/views/chart/PolarAreaChartDoc.vue
index b0418798d..e92848297 100755
--- a/src/views/chart/PolarAreaChartDoc.vue
+++ b/src/views/chart/PolarAreaChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" />
 </template>
 
 <script>
diff --git a/src/views/chart/RadarChartDoc.vue b/src/views/chart/RadarChartDoc.vue
index 243ffacad..b5b2b6813 100755
--- a/src/views/chart/RadarChartDoc.vue
+++ b/src/views/chart/RadarChartDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" />
+	<AppDoc name="ChartDemo" :sources="sources" :dependencies="{'chart.js': '2.7.3'}" component="Chart" />
 </template>
 
 <script>
diff --git a/src/views/editor/EditorDoc.vue b/src/views/editor/EditorDoc.vue
index 3fb209019..4e0eb14d6 100755
--- a/src/views/editor/EditorDoc.vue
+++ b/src/views/editor/EditorDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="EditorDemo" :sources="sources" :dependencies="{'quill': '^1.3.7'}">
+	<AppDoc name="EditorDemo" :sources="sources" :dependencies="{'quill': '^1.3.7'}" component="Editor">
         <h5>Import</h5>
 <pre v-code.script><code>
 import Editor from 'primevue/editor';
diff --git a/src/views/fullcalendar/FullCalendarDoc.vue b/src/views/fullcalendar/FullCalendarDoc.vue
index 878d90cb8..4edb0ff90 100755
--- a/src/views/fullcalendar/FullCalendarDoc.vue
+++ b/src/views/fullcalendar/FullCalendarDoc.vue
@@ -1,5 +1,5 @@
 <template>
-	<AppDoc name="FullCalendarDemo" :sources="sources" :service="['EventService']" :data="['events']" :dependencies="{'@fullcalendar/core': '5.4.0', '@fullcalendar/daygrid': '5.4.0', '@fullcalendar/interaction': '5.4.0', '@fullcalendar/timegrid': '5.4.0'}">
+	<AppDoc name="FullCalendarDemo" :sources="sources" :service="['EventService']" :data="['events']" :dependencies="{'@fullcalendar/core': '5.4.0', '@fullcalendar/daygrid': '5.4.0', '@fullcalendar/interaction': '5.4.0', '@fullcalendar/timegrid': '5.4.0'}" component="FullCalendar">
         <h5>Import</h5>
 <pre v-code.script><code>
 import FullCalendar from 'primevue/fullcalendar';
diff --git a/src/views/liveeditor/LiveEditor.vue b/src/views/liveeditor/LiveEditor.vue
index 338cc5bdf..f202cabe4 100644
--- a/src/views/liveeditor/LiveEditor.vue
+++ b/src/views/liveeditor/LiveEditor.vue
@@ -1,5 +1,5 @@
 <template>
-    <span v-if="showEditor">
+    <span v-if="showEditor" class="p-d-flex p-jc-end">
         <SplitButton :model="items" label="Edit in CodeSandbox" class="liveEditorSplitButton" @click="openDefaultCSB" />
     </span>
 </template>
@@ -45,6 +45,10 @@ export default {
         extFiles: {
             type: Object,
             default: null
+        },
+        component: {
+            type: String,
+            default: null
         }
     },
     methods: {
@@ -340,9 +344,9 @@ ${extIndexCSS}
             let pages = this.extPages ? this.extPages : '';
             let _files = {}, element = '';
 
-            if(this.dependencies) {
-                extImport += `import ${name.slice(0, -4)} from 'primevue/${name.slice(0, -4).toLowerCase()}';`
-                extElement += `app.component('${name.slice(0, -4)}', ${name.slice(0, -4)});`;
+            if(this.component) {
+                extImport += `import ${this.component} from 'primevue/${this.component.toLowerCase()}';`
+                extElement += `app.component('${this.component}', ${this.component});`;
             }
 
             if (this.service) {