diff --git a/client/src/playground/console.tsx b/client/src/playground/console.tsx
index 8b2264043771..6a182d441a86 100644
--- a/client/src/playground/console.tsx
+++ b/client/src/playground/console.tsx
@@ -1,13 +1,22 @@
+import { useEffect, useRef } from "react";
+
 export interface VConsole {
   prop: string;
   message: string;
 }
 
 export function Console({ vConsole }: { vConsole: VConsole[] }) {
+  const consoleUl = useRef<HTMLUListElement | null>(null);
+  const scrollToBottom = () => {
+    consoleUl.current?.scrollTo({ top: consoleUl.current?.scrollHeight });
+  };
+  useEffect(() => {
+    scrollToBottom();
+  }, [vConsole]);
   return (
     <div id="play-console">
       <span>Console</span>
-      <ul>
+      <ul ref={consoleUl}>
         {vConsole.map(({ prop, message }, i) => {
           return (
             <li key={i}>