diff --git a/public/app/core/components/code_editor/code_editor.ts b/public/app/core/components/code_editor/code_editor.ts
index cc3b1e46ad4..048d7beaa0b 100644
--- a/public/app/core/components/code_editor/code_editor.ts
+++ b/public/app/core/components/code_editor/code_editor.ts
@@ -38,6 +38,8 @@ import 'brace/mode/sql';
 import 'brace/snippets/sql';
 import 'brace/mode/markdown';
 import 'brace/snippets/markdown';
+import 'brace/mode/json';
+import 'brace/snippets/json';
 
 const DEFAULT_THEME_DARK = "ace/theme/grafana-dark";
 const DEFAULT_THEME_LIGHT = "ace/theme/textmate";
diff --git a/public/app/partials/edit_json.html b/public/app/partials/edit_json.html
index 48d2237376b..b87bb0ce261 100644
--- a/public/app/partials/edit_json.html
+++ b/public/app/partials/edit_json.html
@@ -11,7 +11,7 @@
 
 	<div class="tabbed-view-body">
 		<div class="gf-form">
-			<textarea class="gf-form-input" ng-model="json" rows="20" spellcheck="false"></textarea>
+			<code-editor content="json" data-mode="json" data-max-lines=40 ></code-editor>
 		</div>
 
 		<div class="gf-form-button-row">