diff --git a/packages/www/src/global.d.ts b/packages/www/src/global.d.ts
index 166cf3638..6aef027fd 100644
--- a/packages/www/src/global.d.ts
+++ b/packages/www/src/global.d.ts
@@ -1,6 +1,6 @@
 declare namespace JSX {
   interface IntrinsicElements {
-    "sp-split-view": React.DetailedHTMLProps<
+    'sp-split-view': React.DetailedHTMLProps<
       React.HTMLAttributes<HTMLElement>,
       HTMLElement
     >;
diff --git a/packages/www/src/web-components/play-ground.tsx b/packages/www/src/web-components/play-ground.tsx
index 71bc54006..02a40571b 100644
--- a/packages/www/src/web-components/play-ground.tsx
+++ b/packages/www/src/web-components/play-ground.tsx
@@ -1,18 +1,18 @@
-import "@spectrum-web-components/split-view/sp-split-view.js";
-import type { WebContext } from "brisa";
+import '@spectrum-web-components/split-view/sp-split-view.js';
+import type { WebContext } from 'brisa';
 
 export default async function PlayGround(
   { defaultValue }: { defaultValue: string },
   { state, css, cleanup, onMount, self }: WebContext,
 ) {
-  const code = state<string>("");
-  const preview: HTMLIFrameElement = self.querySelector("#preview-iframe")!;
-  const activeTab = state<string>("tab-wc");
+  const code = state<string>('');
+  const preview: HTMLIFrameElement = self.querySelector('#preview-iframe')!;
+  const activeTab = state<string>('tab-wc');
 
   function onReceiveCompiledCode(e: MessageEvent) {
-    if (e.data.source !== "brisa-playground-preview") return;
+    if (e.data.source !== 'brisa-playground-preview') return;
     if (e.data.ready) sendDefaultCode();
-    if (typeof e.data.code === "string") {
+    if (typeof e.data.code === 'string') {
       code.value = e.data.code;
     }
   }
@@ -22,11 +22,11 @@ export default async function PlayGround(
   }
 
   onMount(() => {
-    window.addEventListener("message", onReceiveCompiledCode);
+    window.addEventListener('message', onReceiveCompiledCode);
   });
 
   cleanup(() => {
-    window.removeEventListener("message", onReceiveCompiledCode);
+    window.removeEventListener('message', onReceiveCompiledCode);
   });
 
   css`
@@ -125,8 +125,8 @@ export default async function PlayGround(
             role="tab"
             title="Web Component"
             aria-label="Web Component"
-            aria-selected={activeTab.value === "tab-wc"}
-            onClick={() => (activeTab.value = "tab-wc")}
+            aria-selected={activeTab.value === 'tab-wc'}
+            onClick={() => (activeTab.value = 'tab-wc')}
           >
             Web Component
           </button>
@@ -136,8 +136,8 @@ export default async function PlayGround(
             role="tab"
             title="Compiled Code"
             aria-label="Compiled Code"
-            aria-selected={activeTab.value === "tab-compiled"}
-            onClick={() => (activeTab.value = "tab-compiled")}
+            aria-selected={activeTab.value === 'tab-compiled'}
+            onClick={() => (activeTab.value = 'tab-compiled')}
           >
             Compiled Code
           </button>
@@ -145,14 +145,14 @@ export default async function PlayGround(
 
         <div
           id="tab-wc"
-          class={`tab-content ${activeTab.value === "tab-wc" ? "active" : ""}`}
+          class={`tab-content ${activeTab.value === 'tab-wc' ? 'active' : ''}`}
         >
           <slot name="preview-iframe" />
         </div>
 
         <div
           id="tab-compiled"
-          class={`tab-content ${activeTab.value === "tab-compiled" ? "active" : ""}`}
+          class={`tab-content ${activeTab.value === 'tab-compiled' ? 'active' : ''}`}
         >
           <textarea disabled>{code.value}</textarea>
         </div>