diff --git a/packages/api-explorer/package-lock.json b/packages/api-explorer/package-lock.json
index f0cdc97a8..d89a755c8 100644
--- a/packages/api-explorer/package-lock.json
+++ b/packages/api-explorer/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@readme/api-explorer",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -8217,6 +8217,15 @@
         "prop-types": "^15.5.8"
       }
     },
+    "react-debounce-input": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-debounce-input/-/react-debounce-input-3.2.0.tgz",
+      "integrity": "sha1-aXjGBh2Jj1SfQEF/sNLrvs9Qqqo=",
+      "requires": {
+        "lodash.debounce": "^4",
+        "prop-types": "^15"
+      }
+    },
     "react-json-view": {
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/react-json-view/-/react-json-view-1.19.1.tgz",
@@ -8229,7 +8238,7 @@
       }
     },
     "react-jsonschema-form": {
-      "version": "github:domharrington/react-jsonschema-form#f056a1ed34d2d0841ae897303e9d29b9e8143687",
+      "version": "github:domharrington/react-jsonschema-form#115e75dbbf9b64a107ffb98ec410a8fd6ce1ced5",
       "from": "github:domharrington/react-jsonschema-form#dist-committed",
       "requires": {
         "ajv": "^5.2.3",
diff --git a/packages/api-explorer/package.json b/packages/api-explorer/package.json
index 10e35e2fd..dded6f3f7 100644
--- a/packages/api-explorer/package.json
+++ b/packages/api-explorer/package.json
@@ -17,6 +17,7 @@
     "prop-types": "^15.5.10",
     "react": "^16.4.2",
     "react-copy-to-clipboard": "^5.0.1",
+    "react-debounce-input": "^3.2.0",
     "react-json-view": "^1.19.1",
     "react-jsonschema-form": "github:domharrington/react-jsonschema-form#dist-committed",
     "react-waypoint": "^7.3.1",
diff --git a/packages/api-explorer/src/SecurityInput.jsx b/packages/api-explorer/src/SecurityInput.jsx
index 440feea2f..052858067 100644
--- a/packages/api-explorer/src/SecurityInput.jsx
+++ b/packages/api-explorer/src/SecurityInput.jsx
@@ -1,5 +1,6 @@
 const React = require('react');
 const PropTypes = require('prop-types');
+const DebounceInput = require('react-debounce-input');
 
 const Oauth2 = require('./security-input-types/Oauth2');
 const ApiKey = require('./security-input-types/ApiKey');
@@ -10,15 +11,35 @@ const types = {
   apiKey: ApiKey,
 };
 
+class Input extends React.Component {
+  render() {
+    return (
+      <DebounceInput
+        {...this.props}
+        minLength={2}
+        debounceTimeout={process.env.NODE_ENV === 'test' ? 0 : 300}
+      />
+    );
+  }
+}
+
 function SecurityInput(props) {
   function change(value) {
     return props.onChange({ [props.scheme._key]: value });
   }
+
   switch (props.scheme.type) {
     case 'apiKey':
     case 'oauth2': {
       const Component = types[props.scheme.type];
-      return <Component {...props} apiKey={props.auth[props.scheme._key]} change={change} />;
+      return (
+        <Component
+          {...props}
+          apiKey={props.auth[props.scheme._key]}
+          change={change}
+          Input={Input}
+        />
+      );
     }
     case 'http':
       // TODO support other schemes? https://github.com/readmeio/api-explorer/issues/15
@@ -29,11 +50,14 @@ function SecurityInput(props) {
             change={change}
             user={props.auth[props.scheme._key].user}
             pass={props.auth[props.scheme._key].pass}
+            Input={Input}
           />
         );
       }
       if (props.scheme.scheme === 'bearer') {
-        return <Oauth2 {...props} apiKey={props.auth[props.scheme._key]} change={change} />;
+        return (
+          <Oauth2 {...props} apiKey={props.auth[props.scheme._key]} change={change} Input={Input} />
+        );
       }
       break;
     default:
diff --git a/packages/api-explorer/src/security-input-types/ApiKey.jsx b/packages/api-explorer/src/security-input-types/ApiKey.jsx
index fb8162a2c..96e6cce9b 100644
--- a/packages/api-explorer/src/security-input-types/ApiKey.jsx
+++ b/packages/api-explorer/src/security-input-types/ApiKey.jsx
@@ -1,17 +1,17 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 
-function ApiKey({ apiKey, scheme, authInputRef, change }) {
+function ApiKey({ apiKey, scheme, authInputRef, change, Input }) {
   return (
     <div className="row">
       <div className="col-xs-5">
         <label htmlFor="apiKey">{scheme.name}</label>
       </div>
       <div className="col-xs-7">
-        <input
-          ref={authInputRef}
+        <Input
+          inputRef={authInputRef}
           type="text"
-          onChange={e => change(e.currentTarget.value)}
+          onChange={e => change(e.target.value)}
           value={apiKey}
         />
       </div>
@@ -26,6 +26,7 @@ ApiKey.propTypes = {
   }).isRequired,
   authInputRef: PropTypes.func,
   change: PropTypes.func.isRequired,
+  Input: PropTypes.func.isRequired,
 };
 
 ApiKey.defaultProps = {
diff --git a/packages/api-explorer/src/security-input-types/Basic.jsx b/packages/api-explorer/src/security-input-types/Basic.jsx
index ee15d63a7..1086b5e57 100644
--- a/packages/api-explorer/src/security-input-types/Basic.jsx
+++ b/packages/api-explorer/src/security-input-types/Basic.jsx
@@ -1,7 +1,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 
-function Basic({ user, pass, change, authInputRef }) {
+function Basic({ user, pass, change, authInputRef, Input }) {
   function inputChange(name, value) {
     change(Object.assign({ user, pass }, { [name]: value }));
   }
@@ -10,19 +10,19 @@ function Basic({ user, pass, change, authInputRef }) {
     <div className="row">
       <div className="col-xs-6">
         <label htmlFor="user">username</label>
-        <input
-          ref={authInputRef}
+        <Input
+          inputRef={authInputRef}
           type="text"
-          onChange={e => inputChange(e.currentTarget.name, e.currentTarget.value)}
+          onChange={e => inputChange(e.target.name, e.target.value)}
           name="user"
           value={user}
         />
       </div>
       <div className="col-xs-6">
         <label htmlFor="password">password</label>
-        <input
+        <Input
           type="text"
-          onChange={e => inputChange(e.currentTarget.name, e.currentTarget.value)}
+          onChange={e => inputChange(e.target.name, e.target.value)}
           name="pass"
           value={pass}
         />
@@ -36,6 +36,7 @@ Basic.propTypes = {
   authInputRef: PropTypes.func,
   user: PropTypes.string,
   pass: PropTypes.string,
+  Input: PropTypes.func.isRequired,
 };
 
 Basic.defaultProps = {
diff --git a/packages/api-explorer/src/security-input-types/Oauth2.jsx b/packages/api-explorer/src/security-input-types/Oauth2.jsx
index 2e4832f21..39b30beda 100644
--- a/packages/api-explorer/src/security-input-types/Oauth2.jsx
+++ b/packages/api-explorer/src/security-input-types/Oauth2.jsx
@@ -3,7 +3,7 @@ const PropTypes = require('prop-types');
 
 const oauthHref = require('../lib/oauth-href');
 
-function Oauth2({ apiKey, authInputRef, oauth, change }) {
+function Oauth2({ apiKey, authInputRef, oauth, change, Input }) {
   if (!apiKey && oauth) {
     return (
       <section>
@@ -40,11 +40,11 @@ function Oauth2({ apiKey, authInputRef, oauth, change }) {
           </div>
         </div>
         <div className="col-xs-6">
-          <input
-            ref={authInputRef}
+          <Input
+            inputRef={authInputRef}
             disabled={oauth}
             type="text"
-            onChange={e => change(e.currentTarget.value)}
+            onChange={e => change(e.target.value)}
             name="apiKey"
             value={apiKey}
           />
@@ -59,6 +59,7 @@ Oauth2.propTypes = {
   oauth: PropTypes.bool.isRequired,
   change: PropTypes.func.isRequired,
   authInputRef: PropTypes.func,
+  Input: PropTypes.func.isRequired,
 };
 
 Oauth2.defaultProps = {