diff --git a/src/views/liveeditor/LiveEditor.vue b/src/views/liveeditor/LiveEditor.vue
index c20d9fba1..b99c0639c 100644
--- a/src/views/liveeditor/LiveEditor.vue
+++ b/src/views/liveeditor/LiveEditor.vue
@@ -52,13 +52,21 @@ export default {
             type: String,
             default: null
         },
-        extFiles: {
-            type: String,
+        directives: {
+            type: Array,
             default: null
         },
-        activeButtonIndex: {
-            type: String,
-            default: null
+        toastService: {
+            type: Boolean,
+            default: false
+        },
+        confirmationService: {
+            type: Boolean,
+            default: false
+        },
+        terminalService: {
+            type: Boolean,
+            default: false
         }
     },
     methods: {
@@ -127,8 +135,7 @@ export default {
   }
 }`
                     },
-                    ...files,
-                    ...this.extFiles
+                    ...files
                 }
             }
         },
@@ -140,6 +147,7 @@ export default {
             let content = this.sources.template.content;
             let style = this.sources.template.style || '';
             let api = this.sources.api ?  this.sources.api.content : '';
+            let apiStyle = this.sources.api && this.sources.api.style ? this.sources.api.style : '';
             let scriptText = 'script';
             let _files = {}, importElement = '', element = '', components = '', imports = '', directives = '';
 
@@ -156,43 +164,11 @@ ${style}`
                 _files[`src/components/${name}${extension}`] = {       
                 content: `${api}
 </${scriptText}>
+
+${apiStyle}
 `   
                 }
             }
-            
-
-            let mittComponents = ['ToastDemo', 'OrganizationChartDemo', 'ConfirmDialogDemo', 'ConfirmPopupDemo', 'TerminalDemo', 'SplitButtonDemo', 'DeferredContentDemo', 'OverlayPanelDemo', 'FileUploadDemo', 'DataTableDemo', 'TreeDemo', 'TreeTableDemo'];
-
-            mittComponents.forEach(cmp => {
-                if(name === cmp) {
-                    extDependencies['mitt'] = "^2.1.0";
-                    imports += `import Toast from "primevue/toast";
-import ToastService from "primevue/toastservice";
-`;
-                    directives += `app.use(ToastService);
-`;
-                    components += `app.component("Toast", Toast);
-`;
-                }
-            });
-
-            if(name === 'ConfirmDialogDemo' || name === 'ConfirmPopupDemo') {
-                imports += `import ConfirmationService from "primevue/confirmationservice";
-`;
-                directives += `app.use(ConfirmationService);
-`;
-            }
-
-            let directiveEl = ['EditorDemo'];
-
-            directiveEl.forEach(dir => {
-                if(name === dir) {
-                    imports += `import Tooltip from "primevue/tooltip";
-`;
-                    directives += `app.directive("tooltip", Tooltip);
-`;
-                }
-            })
 
             if(this.components) {
                 this.components.forEach(comp => {
@@ -201,26 +177,104 @@ import ToastService from "primevue/toastservice";
                     components += `app.component("${comp}", ${comp});
 `;
                 })
-            } 
+            }
+
+            if(this.directives) {
+                this.directives.forEach(dir => {
+                    if(dir === 'Tooltip') {
+                        imports += `import Tooltip from "primevue/tooltip";
+`;
+                        directives += `app.directive("tooltip", Tooltip);
+`;
+                    }
+
+                    if(dir === 'Badge') {
+                        imports += `import BadgeDirective from "primevue/badgedirective";
+`;
+                        directives += `app.directive("badge", BadgeDirective);
+`;
+                    }
+                })
+            }
+
+            if(this.toastService) {
+                extDependencies['mitt'] = "^2.1.0";
+                        
+                imports += `import Toast from "primevue/toast";
+import ToastService from "primevue/toastservice";
+`;
+                directives += `app.use(ToastService);
+`;
+                components += `app.component("Toast", Toast);
+`;
+            }
+
+            if(this.confirmationService) {
+                imports += `import ConfirmationService from "primevue/confirmationservice";
+`;
+                directives += `app.use(ConfirmationService);
+`;
+            }
+
+            if(this.terminalService) {
+                extDependencies['mitt'] = "^2.1.0";
+            }
 
             if(name !== 'ToastDemo' && name !== 'TooltipDemo' && name !== 'RippleDemo' && name !== 'FloatLabelDemo' && name !== 'InputGroupDemo' && name !== 'InvalidDemo' && name !== 'FormLayoutDemo') {
                 element += `app.component("${name.slice(0, -4)}", ${name.slice(0, -4)});`;
             }
 
-            if(name !== 'ToastDemo' && name !== 'FloatLabelDemo' && name !== 'InputGroupDemo' && name !== 'InvalidDemo' && name !== 'FormLayoutDemo') {
+            if(name !== 'TooltipDemo' && name !== 'ToastDemo' && name !== 'FloatLabelDemo' && name !== 'InputGroupDemo' && name !== 'InvalidDemo' && name !== 'FormLayoutDemo') {
                 importElement += `import ${name.slice(0, -4)} from "primevue/${name.slice(0, -4).toLowerCase()}";`;
             }
 
-            if(name === 'TooltipDemo' || name === 'RippleDemo'){
+            if(name === 'RippleDemo'){
                 directives += `app.directive("${name.slice(0, -4).toLowerCase()}", ${name.slice(0, -4)});
 `;
             }
 
-            if(name === 'BadgeDemo' || name === 'AvatarDemo'){
-                imports += `import BadgeDirective from "primevue/badgedirective";
-`;
-                directives += `app.directive("badge", BadgeDirective);
-`;
+            if (this.service) {
+                const dataArr = this.data ? this.data.split(',') : null;
+
+                extDependencies['axios'] =  "^0.19.0";
+
+                if(dataArr) {
+                    dataArr.forEach(el => {
+                        _files[`public/data/${el}.json`] = {
+                            content: data[el]
+                        };
+
+                        _files[`src/service/${this.service}.js`] = {
+                            content: `import axios from 'axios';
+import data from '../../public/data/${el}.json';
+
+${services[this.service]}
+`
+                        };
+                    });
+                }
+
+                else {
+                    _files[`src/service/${this.service}.js`] = {
+                            content: `import axios from 'axios';
+
+${services[this.service]}
+`
+                        };
+                }
+            }
+
+            if(name === 'EditorDemo') {
+                extDependencies['quill'] =  "^1.3.7";
+            }
+            if(name === 'FullCalendarDemo') {
+                extDependencies['@fullcalendar/core'] = "5.4.0";
+                extDependencies['@fullcalendar/daygrid'] = "5.4.0";
+                extDependencies['@fullcalendar/interaction'] = "5.4.0";
+                extDependencies['@fullcalendar/timegrid'] = "5.4.0";
+            }
+            if(name === 'ChartDemo') {
+                extDependencies['chart.js'] = "2.7.3";
             }
 
             _files['src/main.js'] = {
@@ -511,57 +565,6 @@ img.flag {
                         `,
             }
 
-            if (this.service) {
-                const dataArr = this.data ? this.data.split(',') : null;
-
-                if(dataArr) {
-                    dataArr.forEach(el => {
-                        _files[`public/data/${el}.json`] = {
-                            content: data[el]
-                        };
-
-                        _files[`src/service/${this.service}.js`] = {
-                            content: `import axios from 'axios';
-import data from '../../public/data/${el}.json';
-
-${services[this.service]}
-`
-                        };
-                    });
-                }
-
-                else {
-                    _files[`src/service/${this.service}.js`] = {
-                            content: `import axios from 'axios';
-
-${services[this.service]}
-`
-                        };
-                }
-
-
-                extDependencies['axios'] =  "^0.19.0";
-            }
-
-            if(name === 'EditorDemo') {
-                extDependencies['quill'] =  "^1.3.7";
-            }
-            if(name === 'FullCalendarDemo') {
-                extDependencies['@fullcalendar/core'] = "5.4.0";
-                extDependencies['@fullcalendar/daygrid'] = "5.4.0";
-                extDependencies['@fullcalendar/interaction'] = "5.4.0";
-                extDependencies['@fullcalendar/timegrid'] = "5.4.0";
-            }
-            if(name === 'ChartDemo') {
-                extDependencies['chart.js'] = "2.7.3";
-            }
-
-            mittComponents.forEach(cmp => {
-                if(name === cmp) {
-                    extDependencies['mitt'] = "^2.1.0";
-                }
-            });
-
             return this.createSandboxParameters(`${name}${extension}`, _files, extDependencies);
         }
     },