diff --git a/formwidgets/GraphQLSchemaEditor.php b/formwidgets/GraphQLSchemaEditor.php
index 0f681ba..5991180 100644
--- a/formwidgets/GraphQLSchemaEditor.php
+++ b/formwidgets/GraphQLSchemaEditor.php
@@ -38,10 +38,8 @@ public function prepareVars()
         $this->vars['name'] = $this->formField->getName();
         $this->vars['value'] = $this->getLoadValue();
         $this->vars['model'] = $this->model;
-        $this->vars['webpackAssetsUrl'] = asset('plugins/thefehr/lighthouse/formwidgets/graphqlschemaeditor/assets/');
-        $this->vars['webpackUrl'] = asset(
-            'plugins/thefehr/lighthouse/formwidgets/graphqlschemaeditor/assets/graphqlschemaeditor.js'
-        );
+        $this->vars['webpackAssetsUrl'] = asset('/plugins/thefehr/lighthouse/formwidgets/graphqlschemaeditor/assets/');
+        $this->vars['webpackUrl'] = asset('/plugins/thefehr/lighthouse/formwidgets/graphqlschemaeditor/assets/graphqlschemaeditor.js');
     }
 
     /**
diff --git a/formwidgets/graphqlschemaeditor/package-lock.json b/formwidgets/graphqlschemaeditor/package-lock.json
index 65c4c59..02370af 100644
--- a/formwidgets/graphqlschemaeditor/package-lock.json
+++ b/formwidgets/graphqlschemaeditor/package-lock.json
@@ -1166,9 +1166,9 @@
       "dev": true
     },
     "@types/react": {
-      "version": "16.9.19",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.19.tgz",
-      "integrity": "sha512-LJV97//H+zqKWMms0kvxaKYJDG05U2TtQB3chRLF8MPNs+MQh/H1aGlyDUxjaHvu08EAGerdX2z4LTBc7ns77A==",
+      "version": "16.9.22",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.22.tgz",
+      "integrity": "sha512-7OSt4EGiLvy0h5R7X+r0c7S739TCU/LvWbkNOrm10lUwNHe7XPz5OLhLOSZeCkqO9JSCly1NkYJ7ODTUqVnHJQ==",
       "dev": true,
       "requires": {
         "@types/prop-types": "*",
@@ -3034,9 +3034,9 @@
       "dev": true
     },
     "csstype": {
-      "version": "2.6.8",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.8.tgz",
-      "integrity": "sha512-msVS9qTuMT5zwAGCVm4mxfrZ18BNc6Csd0oJAtiFMZ1FAx1CCvy2+5MDmYoix63LM/6NDbNtodCiGYGmFgO0dA=="
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.9.tgz",
+      "integrity": "sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q=="
     },
     "cyclist": {
       "version": "1.0.1",
@@ -3503,15 +3503,47 @@
       "dev": true
     },
     "file-loader": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-5.0.2.tgz",
-      "integrity": "sha512-QMiQ+WBkGLejKe81HU8SZ9PovsU/5uaLo0JdTCEXOYv7i7jfAjHZi1tcwp9tSASJPOmmHZtbdCervFmXMH/Dcg==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-5.1.0.tgz",
+      "integrity": "sha512-u/VkLGskw3Ue59nyOwUwXI/6nuBCo7KBkniB/l7ICwr/7cPNGsL1WCXUp3GB0qgOOKU1TiP49bv4DZF/LJqprg==",
       "dev": true,
       "requires": {
-        "loader-utils": "^1.2.3",
+        "loader-utils": "^1.4.0",
         "schema-utils": "^2.5.0"
       },
       "dependencies": {
+        "emojis-list": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+          "dev": true
+        },
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        },
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+          "dev": true
+        },
         "schema-utils": {
           "version": "2.6.4",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.4.tgz",
@@ -4553,9 +4585,9 @@
       }
     },
     "graphql-editor": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/graphql-editor/-/graphql-editor-3.3.3.tgz",
-      "integrity": "sha512-y4gB9BiP4rJaAso5XaSt+OOXyE3C1kA3+fTue6UDegDTAONnVMT08d4lM8dpMp6mEWkVgZvhkWqOqr9G6/UHFg==",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/graphql-editor/-/graphql-editor-3.3.4.tgz",
+      "integrity": "sha512-Z5VVW5u+o+5E5msS9O60ybJzW+5dHSUss0BVHeczYobhRaGHe5+0XprQx1Sk9s/i75jbvDtXTCfhzp4EheFbqQ==",
       "requires": {
         "classnames": "^2.2.5",
         "faker": "^4.1.0",
@@ -7506,9 +7538,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "3.7.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.5.tgz",
-      "integrity": "sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==",
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.2.tgz",
+      "integrity": "sha512-EgOVgL/4xfVrCMbhYKUQTdF37SQn4Iw73H5BgCrF1Abdun7Kwy/QZsE/ssAy0y4LxBbvua3PIbFsbRczWWnDdQ==",
       "dev": true
     },
     "typestyle": {
diff --git a/formwidgets/graphqlschemaeditor/package.json b/formwidgets/graphqlschemaeditor/package.json
index 2328ede..4381917 100644
--- a/formwidgets/graphqlschemaeditor/package.json
+++ b/formwidgets/graphqlschemaeditor/package.json
@@ -6,7 +6,7 @@
   "dependencies": {
     "babel-cli": "^6.26.0",
     "babel-preset-react-app": "^3.1.2",
-    "graphql-editor": "^3.3.3",
+    "graphql-editor": "^3.3.4",
     "monaco-editor": "^0.20.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
@@ -15,11 +15,11 @@
     "@babel/core": "^7.8.4",
     "@babel/preset-env": "^7.8.4",
     "@babel/preset-react": "^7.8.3",
-    "@types/react": "^16.9.19",
+    "@types/react": "^16.9.22",
     "@types/react-dom": "^16.9.5",
     "babel-loader": "^8.0.6",
     "css-loader": "^3.4.2",
-    "file-loader": "^5.0.2",
+    "file-loader": "^5.1.0",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "monaco-editor-webpack-plugin": "^1.9.0",
@@ -27,13 +27,13 @@
     "style-loader": "^1.1.3",
     "ts-loader": "^6.2.1",
     "ttf-loader": "^1.0.2",
-    "typescript": "^3.7.5",
+    "typescript": "^3.8.2",
     "webpack": "^4.41.6",
     "webpack-cli": "^3.3.11",
     "worker-loader": "^2.0.0"
   },
   "scripts": {
-    "start": "webpack --watch --mode development",
+    "start": "webpack --mode development",
     "build": "webpack"
   },
   "author": "",
diff --git a/formwidgets/graphqlschemaeditor/partials/_graphqlschemaeditor.htm b/formwidgets/graphqlschemaeditor/partials/_graphqlschemaeditor.htm
index 72e1f28..1c1e69c 100644
--- a/formwidgets/graphqlschemaeditor/partials/_graphqlschemaeditor.htm
+++ b/formwidgets/graphqlschemaeditor/partials/_graphqlschemaeditor.htm
@@ -1,8 +1,33 @@
-<h2>My graphql schema editor</h2>
 <div id="graphqleditor" style="height: 70vh"></div>
-<textarea name="<?= $name ?>" id="<?= $this->getId('input') ?>"><?= $value ?></textarea>
+<textarea style="height: 100%; width: 100%; display: block"
+          name="<?= $name ?>"
+          id="<?= $this->getId('input') ?>"><?= $value ?></textarea>
 <script>
     var graphqlEditorValueId = "<?= $this->getId('input') ?>";
     var myRuntimePublicPath = "<?= $webpackAssetsUrl ?>"
+    var lighthouseLibrary = `
+        directive @all(
+          """
+          Specify the class name of the model to use.
+          This is only needed when the default model detection does not work.
+          """
+          model: String
+
+          """
+          Apply scopes to the underlying query.
+          """
+          scopes: [String!]
+        ) on FIELD_DEFINITION
+        `;
 </script>
-<script src="<?= $webpackUrl ?>"></script>
\ No newline at end of file
+<script src="<?= $webpackUrl ?>"></script>
+<style>
+    #graphqleditor > * {
+        height: 100%;
+        width: 100%;
+        margin: 0;
+        overflow: hidden;
+
+        box-sizing: border-box;
+    }
+</style>
diff --git a/http/Controllers/GraphQLController.php b/http/Controllers/GraphQLController.php
deleted file mode 100644
index 039d676..0000000
--- a/http/Controllers/GraphQLController.php
+++ /dev/null
@@ -1,106 +0,0 @@
-<?php
-
-namespace TheFehr\Lighthouse\Http\Controllers;
-
-use Illuminate\Container\Container;
-use Illuminate\Contracts\Events\Dispatcher as EventsDispatcher;
-use Illuminate\Routing\Controller;
-use Nuwave\Lighthouse\Events\StartRequest;
-use Nuwave\Lighthouse\Execution\GraphQLRequest;
-use Nuwave\Lighthouse\GraphQL;
-use Nuwave\Lighthouse\Support\Contracts\CreatesContext;
-use Nuwave\Lighthouse\Support\Contracts\CreatesResponse;
-
-class GraphQLController extends Controller
-{
-    /**
-     * @var \Nuwave\Lighthouse\GraphQL
-     */
-    protected $graphQL;
-
-    /**
-     * @var \Nuwave\Lighthouse\Support\Contracts\CreatesContext
-     */
-    protected $createsContext;
-
-    /**
-     * @var \Illuminate\Contracts\Events\Dispatcher
-     */
-    protected $eventsDispatcher;
-
-    /**
-     * @var \Nuwave\Lighthouse\Support\Contracts\CreatesResponse
-     */
-    protected $createsResponse;
-
-    /**
-     * @var \Illuminate\Container\Container
-     */
-    protected $container;
-
-    /**
-     * Inject middleware into request.
-     *
-     * @param  \Nuwave\Lighthouse\GraphQL  $graphQL
-     * @param  \Nuwave\Lighthouse\Support\Contracts\CreatesContext  $createsContext
-     * @param  \Illuminate\Contracts\Events\Dispatcher  $eventsDispatcher
-     * @param  \Nuwave\Lighthouse\Support\Contracts\CreatesResponse  $createsResponse
-     * @param  \Illuminate\Container\Container  $container
-     * @return void
-     */
-    public function __construct(
-        GraphQL $graphQL,
-        CreatesContext $createsContext,
-        EventsDispatcher $eventsDispatcher,
-        CreatesResponse $createsResponse,
-        Container $container
-    ) {
-        $this->graphQL = $graphQL;
-        $this->createsContext = $createsContext;
-        $this->eventsDispatcher = $eventsDispatcher;
-        $this->createsResponse = $createsResponse;
-        $this->container = $container;
-    }
-
-    /**
-     * Execute GraphQL query.
-     *
-     * @param  \Nuwave\Lighthouse\Execution\GraphQLRequest  $request
-     * @return \Symfony\Component\HttpFoundation\Response
-     */
-    public function query(GraphQLRequest $request)
-    {
-        $this->eventsDispatcher->dispatch(
-            new StartRequest($request)
-        );
-
-        $result = $request->isBatched()
-        ? $this->executeBatched($request)
-        : $this->graphQL->executeRequest($request);
-
-        $response = $this->createsResponse->createResponse($result);
-
-        // When handling multiple requests during the application lifetime,
-        // for example in tests, we need a new GraphQLRequest instance
-        // for each HTTP request, so we forget the singleton here.
-        $this->container->forgetInstance(GraphQLRequest::class);
-
-        return $response;
-    }
-
-    /**
-     * Loop through the individual batched queries and collect the results.
-     *
-     * @param  \Nuwave\Lighthouse\Execution\GraphQLRequest  $request
-     * @return mixed[]
-     */
-    protected function executeBatched(GraphQLRequest $request): array
-    {
-        $results = [];
-        do {
-            $results[] = $this->graphQL->executeRequest($request);
-        } while ($request->advanceBatchIndex());
-
-        return $results;
-    }
-}