diff --git a/src-wasm/hello/Cargo.toml b/src-wasm/hello/Cargo.toml
index c1b2bf68..7fd6c005 100644
--- a/src-wasm/hello/Cargo.toml
+++ b/src-wasm/hello/Cargo.toml
@@ -23,6 +23,7 @@ console_error_panic_hook = { version = "0.1.6", optional = true }
 # compared to the default allocator's ~10K. It is slower than the default
 # allocator, however.
 wee_alloc = { version = "0.4.5", optional = true }
+wasm-bindgen-futures = "0.4.34"
 
 [dev-dependencies]
 wasm-bindgen-test = "0.3.13"
diff --git a/src-wasm/hello/src/lib.rs b/src-wasm/hello/src/lib.rs
index 8bad11a5..8ab83c58 100644
--- a/src-wasm/hello/src/lib.rs
+++ b/src-wasm/hello/src/lib.rs
@@ -1,14 +1,14 @@
-mod utils;
-
 use wasm_bindgen::prelude::*;
 
+mod utils;
+
 // When the `wee_alloc` feature is enabled, use `wee_alloc` as the global allocator.
 #[cfg(feature = "wee_alloc")]
 #[global_allocator]
 static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
 
 #[wasm_bindgen]
-extern {
+extern "C" {
     fn alert(s: &str);
 
     #[wasm_bindgen(js_namespace = console)]
diff --git a/src-web/App.tsx b/src-web/App.tsx
index aecb65ae..46551323 100644
--- a/src-web/App.tsx
+++ b/src-web/App.tsx
@@ -39,7 +39,7 @@ function App() {
       <Helmet>
         <body className="bg-background" />
       </Helmet>
-      <div className="w-full h-7 bg-gray-100" data-tauri-drag-region="" />
+      <div className="w-full h-7 bg-gray-50" data-tauri-drag-region="" />
       <div className="p-12 h-full w-full overflow-auto">
         <Stacks as="form" className="mt-5 items-end" onSubmit={sendRequest}>
           <DropdownMenuRadio
@@ -79,7 +79,7 @@ function App() {
               {responseBody?.elapsed2}ms
             </div>
             <Grid cols={2} rows={2} gap={1}>
-              <Editor value={responseBody?.body} />
+              <Editor value={responseBody?.body} language="application/json" />
               <div className="iframe-wrapper">
                 <iframe
                   title="Response preview"
diff --git a/src-web/components/Editor/Editor.css b/src-web/components/Editor/Editor.css
index 4d266dc7..8e240db9 100644
--- a/src-web/components/Editor/Editor.css
+++ b/src-web/components/Editor/Editor.css
@@ -6,15 +6,25 @@
 }
 
 .cm-editor .cm-scroller {
-    padding-top: 0.5em;
-    padding-bottom: 0.5em;
     border-radius: var(--border-radius-lg);
-    background-color: hsl(var(--color-gray-50));
+    background-color: hsl(var(--color-gray-50) / 0.5);
 }
 
 .cm-editor .cm-line {
     padding-left: 1.5em;
     padding-right: 1.5em;
+    color: hsl(var(--color-gray-900));
+}
+
+.cm-editor .cm-gutters {
+    background-color: transparent;
+    border-right: 1px solid hsl(var(--color-gray-100));
+    color: hsl(var(--color-gray-300));
+}
+
+.cm-editor .cm-activeLineGutter,
+.cm-editor .cm-activeLine {
+    background-color: hsl(var(--color-gray-100) / 0.5);
 }
 
 .cm-editor * {
diff --git a/src-web/components/Editor/Editor.tsx b/src-web/components/Editor/Editor.tsx
index ae860751..55c56ecb 100644
--- a/src-web/components/Editor/Editor.tsx
+++ b/src-web/components/Editor/Editor.tsx
@@ -1,11 +1,12 @@
-import useCodeMirror from '../../hooks/useCodemirror';
+import useCodeMirror, { EditorLanguage } from '../../hooks/useCodemirror';
 import './Editor.css';
 
 interface Props {
+  language: EditorLanguage;
   value: string;
 }
 
 export default function Editor(props: Props) {
-  const { ref } = useCodeMirror({ value: props.value });
+  const { ref } = useCodeMirror({ value: props.value, language: props.language });
   return <div ref={ref} className="m-0 text-sm overflow-hidden" />;
 }
diff --git a/src-web/hooks/useCodemirror.ts b/src-web/hooks/useCodemirror.ts
index a7c83d00..44587271 100644
--- a/src-web/hooks/useCodemirror.ts
+++ b/src-web/hooks/useCodemirror.ts
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { EditorView, minimalSetup } from 'codemirror';
+import { EditorView, basicSetup } from 'codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { json } from '@codemirror/lang-json';
 import { html } from '@codemirror/lang-html';
@@ -12,30 +12,37 @@ const myHighlightStyle = HighlightStyle.define([
     tag: [tags.documentMeta, tags.blockComment, tags.lineComment, tags.docComment, tags.comment],
     color: '#757b93',
   },
-  { tag: tags.name, color: '#4b92ff' },
+  { tag: tags.name, color: '#4dafff' },
   { tag: tags.variableName, color: '#4bff4e' },
   { tag: tags.attributeName, color: '#b06fff' },
   { tag: tags.attributeValue, color: '#ff964b' },
-  { tag: tags.keyword, color: '#fc6' },
+  { tag: [tags.keyword, tags.string], color: '#fc6' },
   { tag: tags.comment, color: '#f5d', fontStyle: 'italic' },
 ]);
 
-const extensions = [
-  minimalSetup,
-  syntaxHighlighting(myHighlightStyle),
-  html(),
-  javascript(),
-  json(),
-];
+const syntaxExtensions = {
+  'application/json': json(),
+  'application/javascript': javascript(),
+  'text/html': html(),
+};
 
-export default function useCodeMirror({ value }: { value: string }) {
+const extensions = [basicSetup, syntaxHighlighting(myHighlightStyle)];
+export type EditorLanguage = keyof typeof syntaxExtensions;
+
+export default function useCodeMirror({
+  value,
+  language,
+}: {
+  value: string;
+  language: EditorLanguage;
+}) {
   const [cm, setCm] = useState<EditorView | null>(null);
   const ref = useRef(null);
   useEffect(() => {
     if (ref.current === null) return;
 
     const view = new EditorView({
-      extensions,
+      extensions: [...extensions, syntaxExtensions[language]],
       parent: ref.current,
     });
 
@@ -47,7 +54,10 @@ export default function useCodeMirror({ value }: { value: string }) {
   useEffect(() => {
     if (cm === null) return;
 
-    const newState = EditorState.create({ doc: value, extensions });
+    const newState = EditorState.create({
+      doc: value,
+      extensions: [...extensions, syntaxExtensions[language]],
+    });
     cm.setState(newState);
   }, [cm, value]);
 
