From 719c2de10a47fe1272546331478b832487786163 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Sat, 9 May 2026 14:36:56 +0900
Subject: [PATCH 1/2] feat(landing/codeExamples): add 'lit-query' code example
 to query quick start

---
 .../landing/codeExamples.server.tsx           | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/components/landing/codeExamples.server.tsx b/src/components/landing/codeExamples.server.tsx
index b7ab5107d..dfa67cc96 100644
--- a/src/components/landing/codeExamples.server.tsx
+++ b/src/components/landing/codeExamples.server.tsx
@@ -134,6 +134,27 @@ export class TodosComponent {
 }
 `,
     },
+    lit: {
+      lang: 'ts',
+      code: `import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { createQueryController } from '@tanstack/lit-query'
+
+@customElement('todos-list')
+export class TodosList extends LitElement {
+  private todos = createQueryController(this, {
+    queryKey: ['todos'],
+    queryFn: () => fetch('/api/todos').then(r => r.json()),
+  })
+
+  render() {
+    const { data, isPending, error } = this.todos.current
+    if (isPending) return html\`<span>Loading...</span>\`
+    if (error) return html\`<span>Oops!</span>\`
+    return html\`<ul>\${data.map(t => html\`<li>\${t.title}</li>\`)}</ul>\`
+  }
+}`,
+    },
   },
 }
 

From fa676b2ec42240e3077e2185b8c532f21f5119a1 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Sat, 9 May 2026 14:41:27 +0900
Subject: [PATCH 2/2] style(landing/codeExamples): add blank lines around early
 returns in 'lit' query example

---
 src/components/landing/codeExamples.server.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/landing/codeExamples.server.tsx b/src/components/landing/codeExamples.server.tsx
index dfa67cc96..75b33d82e 100644
--- a/src/components/landing/codeExamples.server.tsx
+++ b/src/components/landing/codeExamples.server.tsx
@@ -149,8 +149,10 @@ export class TodosList extends LitElement {
 
   render() {
     const { data, isPending, error } = this.todos.current
+
     if (isPending) return html\`<span>Loading...</span>\`
     if (error) return html\`<span>Oops!</span>\`
+
     return html\`<ul>\${data.map(t => html\`<li>\${t.title}</li>\`)}</ul>\`
   }
 }`,