Update web-component example links (#688)

juliawu · gemini-code-assist[bot] · web-flow · commit a1a7bc1e0f7d · 2026-03-11T09:49:16.000-07:00
* Add more examples and update links

* Update api/web_components/index.md

Co-authored-by: gemini-code-assist[bot] &lt;176961590+gemini-code-assist[bot]@users.noreply.github.com&gt;

---------

Co-authored-by: gemini-code-assist[bot] &lt;176961590+gemini-code-assist[bot]@users.noreply.github.com&gt;
diff --git a/api/web_components/examples/all-charts.md b/api/web_components/examples/all-charts.md
@@ -1,7 +1,6 @@
 ---
 layout: code-preview
-title: All Charts
-parent: All Charts - Web Components Example
+title: All Charts - Web Components Example
 published: true
 nav_exclude: true
 iframe_content_url: /assets/examples/web-components/all-charts.html
diff --git a/api/web_components/examples/dynamic-map.md b/api/web_components/examples/dynamic-map.md
@@ -0,0 +1,7 @@
+---
+layout: code-preview
+title: Dynamic Map - Web Components Example
+published: true
+nav_exclude: true
+iframe_content_url: /assets/examples/web-components/dynamic-map.html
+---
diff --git a/api/web_components/examples/line-chart.md b/api/web_components/examples/line-chart.md
@@ -0,0 +1,7 @@
+---
+layout: code-preview
+title: Line Chart - Web Components Example
+published: true
+nav_exclude: true
+iframe_content_url: /assets/examples/web-components/line-chart.html
+---
diff --git a/api/web_components/examples/map-styles.md b/api/web_components/examples/map-styles.md
@@ -0,0 +1,7 @@
+---
+layout: code-preview
+title: Map Styles - Web Components Example
+published: true
+nav_exclude: true
+iframe_content_url: /assets/examples/web-components/map-styles.html
+---
diff --git a/api/web_components/index.md b/api/web_components/index.md
@@ -51,9 +51,8 @@ For example, to embed a line chart:
 </html>
 ```
 
-See a live version of this example you can play around with in
-[Playground](https://lit.dev/playground/#gist=c0c88276739f4f6061807cc943937a14){: target="_blank"}
-([source](/assets/examples/web-components/line-chart.html)).
+See a live version of this example you can play around with
+[here](examples/line-chart.html){: target="_blank"}.
 
 ## Components
 
@@ -67,12 +66,11 @@ See a live version of this example you can play around with in
 - [datacommons-scatter](/api/web_components/scatter)
 - [datacommons-slider](/api/web_components/slider)
 
-## Code Playground Examples
+## Examples
 
-- [Static page with all chart types playground](https://lit.dev/playground/#gist=822ce6018bb41113c866d703760c1def){: target="_blank"}
-  ([source](/assets/examples/web-components/all-charts.html))
-- [Dynamically updating charts playground](https://lit.dev/playground/#gist=9e3ac88e162248f849dd276ff5895ad0){: target="_blank"}
-  ([source](/assets/examples/web-components/dynamic-map.html))
+- [All chart types](examples/all-charts.html){: target="_blank"}
+- [A dynamically updating map](examples/dynamic-map.html){: target="_blank"}
+- [A styled map](examples/map-styles.html){: target="_blank"}
 
 ## Variables and places
 
@@ -125,9 +123,7 @@ Additionally, the following css variables are supported:
 
 ### Styling Example
 
-See a live version of this example you can play around with in
-[Playground](https://lit.dev/playground/#gist=719f5d71c2823ac3e58f504cb6ceccd3){: target="_blank"}
-([source](/assets/examples/web-components/map-styles.html)).
+See a live example [here](examples/map-styles.html){: target="_blank"}.
 
 ```html
 <html>
