diff --git a/client/src/playground/console.js b/client/src/playground/console.js
new file mode 100644
index 000000000000..e087a7c6b7b3
--- /dev/null
+++ b/client/src/playground/console.js
@@ -0,0 +1,49 @@
+import { createComponent } from "@lit/react";
+import { html, LitElement } from "lit";
+import React from "react";
+
+import styles from "./console.scss?css" with { type: "css" };
+
+/** @import { VConsole } from "./types" */
+
+export class PlayConsole extends LitElement {
+ static properties = {
+ vConsole: { attribute: false },
+ };
+
+ static styles = styles;
+
+ constructor() {
+ super();
+ /** @type {VConsole[]} */
+ this.vConsole = [];
+ }
+
+ render() {
+ return html`
+
+
+ ${this.vConsole.map(({ message }) => {
+ return html`
+ -
+
${message}
+
+ `;
+ })}
+
+ `;
+ }
+
+ updated() {
+ const output = this.renderRoot.querySelector("ul");
+ output?.scrollTo({ top: output.scrollHeight });
+ }
+}
+
+customElements.define("play-console", PlayConsole);
+
+export const ReactPlayConsole = createComponent({
+ tagName: "play-console",
+ elementClass: PlayConsole,
+ react: React,
+});
diff --git a/client/src/playground/console.scss b/client/src/playground/console.scss
new file mode 100644
index 000000000000..42f969410d11
--- /dev/null
+++ b/client/src/playground/console.scss
@@ -0,0 +1,38 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ font-size: var(--type-smaller-font-size);
+ margin: 0;
+ width: 100%;
+}
+
+.header {
+ background-color: var(--code-background-inline);
+ font-weight: 600;
+ text-align: center;
+ width: 100%;
+}
+
+ul {
+ background-color: var(--code-background-inline);
+ height: 6rem;
+ list-style: none;
+ margin: 0;
+ max-height: 6rem;
+ overflow: auto;
+ padding: 0;
+ width: 100%;
+}
+
+li {
+ padding: 0 1rem;
+
+ &::before {
+ content: ">";
+ }
+}
+
+code {
+ font-family: var(--font-code);
+ tab-size: 4;
+}
diff --git a/client/src/playground/console.tsx b/client/src/playground/console.tsx
deleted file mode 100644
index 6a182d441a86..000000000000
--- a/client/src/playground/console.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useEffect, useRef } from "react";
-
-export interface VConsole {
- prop: string;
- message: string;
-}
-
-export function Console({ vConsole }: { vConsole: VConsole[] }) {
- const consoleUl = useRef(null);
- const scrollToBottom = () => {
- consoleUl.current?.scrollTo({ top: consoleUl.current?.scrollHeight });
- };
- useEffect(() => {
- scrollToBottom();
- }, [vConsole]);
- return (
-
-
Console
-
- {vConsole.map(({ prop, message }, i) => {
- return (
- -
-
{message}
-
- );
- })}
-
-