diff --git a/website/playground/new-samples/customizing-the-appearence/exposed-colors/sample.js b/website/playground/new-samples/customizing-the-appearence/exposed-colors/sample.js
index 24d5cc1c..f4c30492 100644
--- a/website/playground/new-samples/customizing-the-appearence/exposed-colors/sample.js
+++ b/website/playground/new-samples/customizing-the-appearence/exposed-colors/sample.js
@@ -107,6 +107,8 @@ monaco.editor.create(document.getElementById("container"), {
 'editorLineNumber.activeForeground' // Color of editor active line number.
 'editorRuler.foreground' // Color of the editor rulers.
 'editorCodeLens.foreground' // Foreground color of editor code lenses
+'editorInlayHint.foreground' // Foreground color of editor inlay hints
+'editorInlayHint.background' // Background color of editor inlay hints
 'editorBracketMatch.background' // Background color behind matching brackets
 'editorBracketMatch.border' // Color for matching brackets boxes
 'editorOverviewRuler.border' // Color of the overview ruler border.
diff --git a/website/playground/new-samples/extending-language-services/inlay-hints-provider-example/sample.css b/website/playground/new-samples/extending-language-services/inlay-hints-provider-example/sample.css
new file mode 100644
index 00000000..e69de29b
diff --git a/website/playground/new-samples/extending-language-services/inlay-hints-provider-example/sample.html b/website/playground/new-samples/extending-language-services/inlay-hints-provider-example/sample.html
new file mode 100644
index 00000000..b2e43e28
--- /dev/null
+++ b/website/playground/new-samples/extending-language-services/inlay-hints-provider-example/sample.html
@@ -0,0 +1 @@
+<div id="container" style="height:100%;"></div>
diff --git a/website/playground/new-samples/extending-language-services/inlay-hints-provider-example/sample.js b/website/playground/new-samples/extending-language-services/inlay-hints-provider-example/sample.js
new file mode 100644
index 00000000..d130233d
--- /dev/null
+++ b/website/playground/new-samples/extending-language-services/inlay-hints-provider-example/sample.js
@@ -0,0 +1,38 @@
+const value = `
+const f = (a, b) => a + b;
+
+const result = f(2, 5);
+`;
+
+const editor = monaco.editor.create(document.getElementById("container"), {
+    value,
+    language: "javascript"
+});
+
+monaco.languages.registerInlayHintsProvider('javascript', {
+    provideInlayHints(model, range, token) {
+        return [{
+            kind: monaco.languages.InlayHintKind.Type,
+            position: { column: 13, lineNumber: 4 },
+            text: `: Number`,
+        }, {
+            kind: monaco.languages.InlayHintKind.Type,
+            position: { column: 13, lineNumber: 2 },
+            text: `: Number`,
+        }, {
+            kind: monaco.languages.InlayHintKind.Type,
+            position: { column: 16, lineNumber: 2 },
+            text: `: Number`,
+            whitespaceBefore: true, // see difference between a and b parameter
+        }, {
+            kind: monaco.languages.InlayHintKind.Parameter,
+            position: { column: 18, lineNumber: 4 },
+            text: `a:`,
+        }, {
+            kind: monaco.languages.InlayHintKind.Parameter,
+            position: { column: 21, lineNumber: 4 },
+            text: `b:`,
+            whitespaceAfter: true, // similar to whitespaceBefore
+        }]
+    }
+});