diff --git a/graphene_django/static/graphene_django/graphiql.js b/graphene_django/static/graphene_django/graphiql.js
index e38cd62..c939216 100644
--- a/graphene_django/static/graphene_django/graphiql.js
+++ b/graphene_django/static/graphene_django/graphiql.js
@@ -97,6 +97,6 @@
   // Render <GraphiQL /> into the body.
   ReactDOM.render(
     React.createElement(GraphiQL, options),
-    document.body
+    document.getElementById("editor")
   );
 })();
diff --git a/graphene_django/templates/graphene/graphiql.html b/graphene_django/templates/graphene/graphiql.html
index a0d0e1a..d0546bd 100644
--- a/graphene_django/templates/graphene/graphiql.html
+++ b/graphene_django/templates/graphene/graphiql.html
@@ -10,7 +10,7 @@ add "&raw" to the end of the URL within a browser.
 <html>
 <head>
   <style>
-    html, body {
+    html, body, #editor {
       height: 100%;
       margin: 0;
       overflow: hidden;
@@ -31,6 +31,7 @@ add "&raw" to the end of the URL within a browser.
           crossorigin="anonymous"></script>
 </head>
 <body>
+  <div id="editor"></div>
   {% csrf_token %}
   <script src="{% static 'graphene_django/graphiql.js' %}"></script>
 </body>
