diff --git a/resources/views/json-editor.blade.php b/resources/views/json-editor.blade.php
index 0347928..e521a32 100644
--- a/resources/views/json-editor.blade.php
+++ b/resources/views/json-editor.blade.php
@@ -1,52 +1,64 @@
 <x-filament-forms::field-wrapper
-    :id="$getId()"
-    :label="$getLabel()"
-    :label-sr-only="$isLabelHidden()"
-    :helper-text="$getHelperText()"
-    :hint="$getHint()"
-    :hint-icon="$getHintIcon()"
-    :required="$isRequired()"
-    :state-path="$getStatePath()"
+        :id="$getId()"
+        :label="$getLabel()"
+        :label-sr-only="$isLabelHidden()"
+        :helper-text="$getHelperText()"
+        :hint="$getHint()"
+        :hint-icon="$getHintIcon()"
+        :required="$isRequired()"
+        :state-path="$getStatePath()"
 >
-    <div class="w-full" x-data="{
+    <div class="w-full"
+         x-load-css="['{{ asset('css/awcodes/headings/invaders-filament-jsoneditor.css') }}']"
+         data-js-before="app.js"
+         x-load-js="['{{ asset('js/awcodes/headings/invaders-filament-jsoneditor.js') }}']"
+         data-dispatch="jsoneditor-loaded"
+         x-on:jsoneditor-loaded-js.window="start"
+         x-data="{
             state: $wire.entangle('{{ $getStatePath() }}'),
-        }"
-         x-init="$nextTick(() => {
-            const options = {
-                modes: {{ $getModes() }},
-                history: true,
-                onChange: function(){
-                },
-                onChangeJSON: function(json){
-                    state=JSON.stringify(json);
-                },
-                onChangeText: function(jsonString){
-                    state=jsonString;
-                },
-                onValidationError: function (errors) {
-                    errors.forEach((error) => {
-                      switch (error.type) {
-                        case 'validation': // schema validation error
-                          break;
-                        case 'error':  // json parse error
-                            console.log(error.message);
-                          break;
-                      }
-                    })
-                }
-            };
-            if(typeof json_editor !== 'undefined'){
-                json_editor = new JSONEditor($refs.editor, options);
-                json_editor.set(state);
-            } else {
-                let json_editor = new JSONEditor($refs.editor, options);
-                json_editor.set(state);
+            editor: null,
+            destroy() {
+                this.editor = null;
+            },
+            start() {
+                $nextTick(() => {
+                    if(this.editor !== null) {
+                        return;
+                    }
+                    const options = {
+                        modes: {{ $getModes() }},
+                        history: true,
+                        onChange: () => {
+                            // onChange callback code if needed
+                        },
+                        onChangeJSON: (json) => {
+                            this.state = JSON.stringify(json);
+                        },
+                        onChangeText: (jsonString) => {
+                            this.state = jsonString;
+                        },
+                        onValidationError: (errors) => {
+                            errors.forEach((error) => {
+                                switch (error.type) {
+                                    case 'validation': // schema validation error
+                                        // Handle schema validation error
+                                        break;
+                                    case 'error':  // json parse error
+                                        console.log(error.message);
+                                        break;
+                                }
+                            });
+                        }
+                    };
+                    if(typeof JSONEditor !== 'undefined') {
+                        this.editor = new JSONEditor($refs.editor, options);
+                        Alpine.raw(this.editor).set(this.state);
+                    }
+                })
             }
-         })"
+        }"
          x-cloak
          wire:ignore>
-            <div x-ref="editor" class="w-full ace_editor"
-                 style="min-height: 30vh;height:{{ $getHeight() }}px"></div>
+        <div x-ref="editor" class="w-full ace_editor" style="min-height: 30vh;height:{{ $getHeight() }}px"></div>
     </div>
-</x-filament-forms::field-wrapper>
-
+</x-filament-forms::field-wrapper>
\ No newline at end of file
diff --git a/src/FilamentJsoneditorServiceProvider.php b/src/FilamentJsoneditorServiceProvider.php
index d508fad..13341dd 100644
--- a/src/FilamentJsoneditorServiceProvider.php
+++ b/src/FilamentJsoneditorServiceProvider.php
@@ -22,14 +22,18 @@ public function configurePackage(Package $package): void
 
         $this->publishes([
             __DIR__ . '/../dist/jsoneditor/img/jsoneditor-icons.svg' => public_path('css/awcodes/headings/img/jsoneditor-icons.svg'),
-        ], 'filament-jsoneditor-img');
+            __DIR__ . '/../dist/jsoneditor/jsoneditor.min.css' => public_path('css/awcodes/headings/jsoneditor.min.css'),
+            __DIR__ . '/../dist/jsoneditor/jsoneditor.min.js' => public_path('js/awcodes/headings/jsoneditor.min.js'),
+        ], 'filament-jsoneditor');
     }
 
-    public function packageBooted(): void
+    public function packageRegistered(): void
     {
-        FilamentAsset::register([
-            Css::make('invaders-filament-jsoneditor', __DIR__ . '/../dist/jsoneditor/jsoneditor.min.css'),
-            Js::make('invaders-filament-jsoneditor', __DIR__ . '/../dist/jsoneditor/jsoneditor.min.js'),
-        ], 'awcodes/headings');
+        if ($this->app->runningInConsole()) {
+            FilamentAsset::register([
+                Css::make('invaders-filament-jsoneditor', __DIR__ . '/../dist/jsoneditor/jsoneditor.min.css'),
+                Js::make('invaders-filament-jsoneditor', __DIR__ . '/../dist/jsoneditor/jsoneditor.min.js'),
+            ], 'awcodes/headings');
+        }
     }
 }