diff --git a/docs/rest/api/RestEndpoint.md b/docs/rest/api/RestEndpoint.md
index 0b67e275e96f..a831c3fe9b0e 100644
--- a/docs/rest/api/RestEndpoint.md
+++ b/docs/rest/api/RestEndpoint.md
@@ -418,7 +418,7 @@ class QSEndpoint<O extends RestGenerics = any> extends RestEndpoint<O> {
 
 <EndpointPlayground input="/foo?a%5Bb%5D=c" init={{method: 'GET', headers: {'Content-Type': 'application/json'}}}>
 
-```typescript title="QSEndpoint" collapsed {6}
+```typescript title="QSEndpoint" collapsed {7}
 import { RestEndpoint, RestGenerics } from '@data-client/rest';
 import qs from 'qs';
 
diff --git a/website/src/components/Playground/editor-types/qs.d.ts b/website/src/components/Playground/editor-types/qs.d.ts
new file mode 100644
index 000000000000..b3716e0a80f9
--- /dev/null
+++ b/website/src/components/Playground/editor-types/qs.d.ts
@@ -0,0 +1,57 @@
+export = QueryString;
+export as namespace qs;
+
+declare namespace QueryString {
+    type defaultEncoder = (str: any, defaultEncoder?: any, charset?: string) => string;
+    type defaultDecoder = (str: string, decoder?: any, charset?: string) => string;
+
+    interface IStringifyOptions {
+        delimiter?: string | undefined;
+        strictNullHandling?: boolean | undefined;
+        skipNulls?: boolean | undefined;
+        encode?: boolean | undefined;
+        encoder?:
+            | ((str: any, defaultEncoder: defaultEncoder, charset: string, type: "key" | "value") => string)
+            | undefined;
+        filter?: Array<string | number> | ((prefix: string, value: any) => any) | undefined;
+        arrayFormat?: "indices" | "brackets" | "repeat" | "comma" | undefined;
+        indices?: boolean | undefined;
+        sort?: ((a: any, b: any) => number) | undefined;
+        serializeDate?: ((d: Date) => string) | undefined;
+        format?: "RFC1738" | "RFC3986" | undefined;
+        encodeValuesOnly?: boolean | undefined;
+        addQueryPrefix?: boolean | undefined;
+        allowDots?: boolean | undefined;
+        charset?: "utf-8" | "iso-8859-1" | undefined;
+        charsetSentinel?: boolean | undefined;
+    }
+
+    interface IParseOptions {
+        comma?: boolean | undefined;
+        delimiter?: string | RegExp | undefined;
+        depth?: number | false | undefined;
+        decoder?:
+            | ((str: string, defaultDecoder: defaultDecoder, charset: string, type: "key" | "value") => any)
+            | undefined;
+        arrayLimit?: number | undefined;
+        parseArrays?: boolean | undefined;
+        allowDots?: boolean | undefined;
+        plainObjects?: boolean | undefined;
+        allowPrototypes?: boolean | undefined;
+        allowSparse?: boolean | undefined;
+        parameterLimit?: number | undefined;
+        strictNullHandling?: boolean | undefined;
+        ignoreQueryPrefix?: boolean | undefined;
+        charset?: "utf-8" | "iso-8859-1" | undefined;
+        charsetSentinel?: boolean | undefined;
+        interpretNumericEntities?: boolean | undefined;
+    }
+
+    interface ParsedQs {
+        [key: string]: undefined | string | string[] | ParsedQs | ParsedQs[];
+    }
+
+    function stringify(obj: any, options?: IStringifyOptions): string;
+    function parse(str: string, options?: IParseOptions & { decoder?: never | undefined }): ParsedQs;
+    function parse(str: string | Record<string, string>, options?: IParseOptions): { [key: string]: unknown };
+}
diff --git a/website/src/components/Playground/monaco-init.ts b/website/src/components/Playground/monaco-init.ts
index 4a6aca1e9862..e900dc19bee9 100644
--- a/website/src/components/Playground/monaco-init.ts
+++ b/website/src/components/Playground/monaco-init.ts
@@ -212,6 +212,9 @@ if (
       import(
         /* webpackChunkName: 'uuidDTS', webpackPreload: true */ '!!raw-loader?esModule=false!./editor-types/uuid.d.ts'
       ),
+      import(
+        /* webpackChunkName: 'qsDTS', webpackPreload: true */ '!!raw-loader?esModule=false!./editor-types/qs.d.ts'
+      ),
       ...rhDeps.map(
         dep =>
           import(
@@ -221,7 +224,7 @@ if (
     ]).then(([mPromise, ...settles]) => {
       if (mPromise.status !== 'fulfilled' || !mPromise.value) return;
       const monaco = mPromise.value;
-      const [react, bignumber, temporal, uuid, ...rhLibs] = settles.map(
+      const [react, bignumber, temporal, uuid, qs, ...rhLibs] = settles.map(
         result => (result.status === 'fulfilled' ? result.value.default : ''),
       );
 
@@ -307,6 +310,10 @@ if (
         `declare module "uuid" { ${uuid} }`,
         'file:///node_modules/@types/uuid/index.d.ts',
       );
+      monaco.languages.typescript.typescriptDefaults.addExtraLib(
+        `declare module "qs" { ${qs} }`,
+        'file:///node_modules/@types/qs/index.d.ts',
+      );
       monaco.languages.typescript.typescriptDefaults.addExtraLib(
         `declare globals { ${react} }`,
       );