diff --git a/examples/clay-official-website/index.html b/examples/clay-official-website/index.html
index 227d72a..1b955bf 100644
--- a/examples/clay-official-website/index.html
+++ b/examples/clay-official-website/index.html
@@ -220,6 +220,8 @@
         window.mouseWheelXThisFrame = 0;
         window.mouseWheelYThisFrame = 0;
         window.touchDown = false;
+        window.arrowKeyDownPressedThisFrame = false;
+        window.arrowKeyUpPressedThisFrame = false;
         let zeroTimeout = null;
         addEventListener("wheel", (event) => {
             window.mouseWheelXThisFrame = event.deltaX * 0.1;
@@ -261,6 +263,15 @@
             window.mouseDown = false;
         });
 
+        document.addEventListener("keydown", (event) => {
+            if (event.key === "ArrowDown") {
+                window.arrowKeyDownPressedThisFrame = true;
+            }
+            if (event.key === "ArrowUp") {
+                window.arrowKeyUpPressedThisFrame = true;
+            }
+        });
+
         const importObject = {
             clay: { measureTextFunction: (addressOfDimensions, textToMeasure, addressOfConfig) => {
                 let stringLength = memoryDataView.getUint32(textToMeasure, true);
@@ -665,7 +676,7 @@
         const elapsed = currentTime - previousFrameTime;
         previousFrameTime = currentTime;
         let activeRendererIndex = memoryDataView.getUint32(instance.exports.ACTIVE_RENDERER_INDEX.value, true);
-        instance.exports.UpdateDrawFrame(scratchSpaceAddress, window.innerWidth, window.innerHeight, window.mouseWheelXThisFrame, window.mouseWheelYThisFrame, window.mousePositionXThisFrame, window.mousePositionYThisFrame, window.touchDown, window.mouseDown, elapsed / 1000);
+        instance.exports.UpdateDrawFrame(scratchSpaceAddress, window.innerWidth, window.innerHeight, window.mouseWheelXThisFrame, window.mouseWheelYThisFrame, window.mousePositionXThisFrame, window.mousePositionYThisFrame, window.touchDown, window.mouseDown, window.arrowKeyDownPressedThisFrame, window.arrowKeyUpPressedThisFrame, elapsed / 1000);
         let rendererChanged = activeRendererIndex !== window.previousActiveRendererIndex;
         switch (activeRendererIndex) {
             case 0: {
@@ -688,6 +699,8 @@
         window.previousActiveRendererIndex = activeRendererIndex;
         requestAnimationFrame(renderLoop);
         window.mouseDownThisFrame = false;
+        window.arrowKeyUpPressedThisFrame = false;
+        window.arrowKeyDownPressedThisFrame = false;
     }
     init();
 </script>
diff --git a/examples/clay-official-website/main.c b/examples/clay-official-website/main.c
index 3cc15c4..60eafab 100644
--- a/examples/clay-official-website/main.c
+++ b/examples/clay-official-website/main.c
@@ -349,7 +349,7 @@ Clay_RenderCommandArray CreateLayout(float lerpValue) {
     return Clay_EndLayout((int)windowWidth, (int)windowHeight);
 }
 
-CLAY_WASM_EXPORT("UpdateDrawFrame") Clay_RenderCommandArray UpdateDrawFrame(float width, float height, float mouseWheelX, float mouseWheelY, float mousePositionX, float mousePositionY, bool isTouchDown, bool isMouseDown, float deltaTime) {
+CLAY_WASM_EXPORT("UpdateDrawFrame") Clay_RenderCommandArray UpdateDrawFrame(float width, float height, float mouseWheelX, float mouseWheelY, float mousePositionX, float mousePositionY, bool isTouchDown, bool isMouseDown, bool arrowKeyDownPressedThisFrame, bool arrowKeyUpPressedThisFrame, float deltaTime) {
     windowWidth = width;
     windowHeight = height;
     if (deltaTime == deltaTime) { // NaN propagation can cause pain here
@@ -395,6 +395,18 @@ CLAY_WASM_EXPORT("UpdateDrawFrame") Clay_RenderCommandArray UpdateDrawFrame(floa
         }
     }
 
+    if (arrowKeyDownPressedThisFrame) {
+        Clay_ScrollContainerData scrollContainerData = Clay_GetScrollContainerData(CLAY_ID("OuterScrollContainer"));
+        if (scrollContainerData.contentDimensions.height > 0) {
+            scrollContainerData.scrollPosition->y = scrollContainerData.scrollPosition->y - 50;
+        }
+    } else if (arrowKeyUpPressedThisFrame) {
+        Clay_ScrollContainerData scrollContainerData = Clay_GetScrollContainerData(CLAY_ID("OuterScrollContainer"));
+        if (scrollContainerData.contentDimensions.height > 0) {
+            scrollContainerData.scrollPosition->y = scrollContainerData.scrollPosition->y + 50;
+        }
+    }
+
     Clay_UpdateScrollContainers(isTouchDown, (Clay_Vector2) {mouseWheelX, mouseWheelY}, deltaTime);
     return CreateLayout(animationLerpValue < 0 ? (animationLerpValue + 1) : (1 - animationLerpValue));
     //----------------------------------------------------------------------------------
diff --git a/renderers/web/html/clay-html-renderer.html b/renderers/web/html/clay-html-renderer.html
index ab7bdf6..4f04ea4 100644
--- a/renderers/web/html/clay-html-renderer.html
+++ b/renderers/web/html/clay-html-renderer.html
@@ -277,6 +277,14 @@
             window.mouseDown = true;
         });
 
+        document.addEventListener("keydown", (event) => {
+            if (event.key === "ArrowDown") {
+                console.log("arrowdown");
+            }
+            if (event.key === "ArrowUp") {
+                console.log("arrowup");
+            }
+        });
         const importObject = {
             clay: {
                 measureTextFunction: (addressOfDimensions, textToMeasure, addressOfConfig) => {