From 65613bf61a479380197ceb6cef7c3ddc4274b6a2 Mon Sep 17 00:00:00 2001
From: Alek <alek@reflex.dev>
Date: Fri, 26 Jun 2026 15:54:44 -0700
Subject: [PATCH 1/8] SEO: dedupe sitewide redirect links and fix JSON-LD in
 shared site package

Footer/navbar link to /blog/ and /docs/ (was /blog, /docs which 301) and FORUM_URL -> GitHub Discussions, clearing ~1400 'links to redirect' rows sitewide. pricing_jsonld drops the price-less Enterprise offer and blog_index_jsonld drops the invalid ListItem datePublished (Google rich-results / schema.org errors).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../reflex-site-shared/src/reflex_site_shared/constants.py | 4 +++-
 .../reflex-site-shared/src/reflex_site_shared/meta/meta.py | 7 -------
 .../src/reflex_site_shared/views/footer.py                 | 4 ++--
 .../src/reflex_site_shared/views/marketing_navbar.py       | 2 +-
 4 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/reflex-site-shared/src/reflex_site_shared/constants.py b/packages/reflex-site-shared/src/reflex_site_shared/constants.py
index ceeb7fe792e..56838cb6929 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/constants.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/constants.py
@@ -17,7 +17,9 @@
 LINKEDIN_URL = "https://www.linkedin.com/company/reflex-dev"
 OLD_GITHUB_URL = "https://github.com/pynecone-io/pynecone"
 GITHUB_DISCUSSIONS_URL = "https://github.com/orgs/reflex-dev/discussions"
-FORUM_URL = "https://forum.reflex.dev"
+# forum.reflex.dev permanently redirects (301) to GitHub Discussions; link
+# directly to avoid the redirect hop on every page that references the forum.
+FORUM_URL = GITHUB_DISCUSSIONS_URL
 TWITTER_URL = "https://twitter.com/getreflex"
 DISCORD_URL = "https://discord.gg/T5WSbC2YtQ"
 ROADMAP_URL = "https://github.com/reflex-dev/reflex/issues/2727"
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/meta/meta.py b/packages/reflex-site-shared/src/reflex_site_shared/meta/meta.py
index 85536790068..78b65c419e2 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/meta/meta.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/meta/meta.py
@@ -292,7 +292,6 @@ def blog_index_jsonld(posts: list[tuple[str, dict]], url: str) -> rx.Component:
             "position": i + 1,
             "url": f"{REFLEX_DOMAIN_URL.rstrip('/')}/blog/{path}",
             "name": meta.get("title_tag") or meta.get("title", ""),
-            "datePublished": str(meta.get("date", "")),
         }
         for i, (path, meta) in enumerate(posts[:20])
     ]
@@ -368,12 +367,6 @@ def pricing_jsonld(url: str) -> rx.Component:
                         "name": "Free",
                         "availability": "https://schema.org/InStock",
                     },
-                    {
-                        "@type": "Offer",
-                        "name": "Enterprise",
-                        "description": "Custom enterprise pricing",
-                        "availability": "https://schema.org/PreOrder",
-                    },
                 ],
             },
         ],
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/views/footer.py b/packages/reflex-site-shared/src/reflex_site_shared/views/footer.py
index 69d80a90d4b..9e265526339 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/views/footer.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/views/footer.py
@@ -287,7 +287,7 @@ def footer_index(
                         footer_link_flex(
                             "Resources",
                             [
-                                footer_link("Blog", "/blog"),
+                                footer_link("Blog", "/blog/"),
                                 footer_link("Templates", "/templates"),
                                 footer_link(
                                     "Integrations",
@@ -313,7 +313,7 @@ def footer_index(
                         footer_link_flex(
                             "Developers",
                             [
-                                footer_link("Documentation", "/docs"),
+                                footer_link("Documentation", "/docs/"),
                                 footer_link("Changelog", CHANGELOG_URL),
                                 footer_link("Common Errors", "/errors"),
                             ],
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/views/marketing_navbar.py b/packages/reflex-site-shared/src/reflex_site_shared/views/marketing_navbar.py
index 0642c76002e..61439999972 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/views/marketing_navbar.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/views/marketing_navbar.py
@@ -594,7 +594,7 @@ def resources_blog_column() -> rx.Component:
         rx.el.elements.a(
             "Read All in Blog",
             ui.icon("ArrowRight01Icon", class_name="size-4 shrink-0"),
-            href="/blog",
+            href="/blog/",
             class_name="text-secondary-12 text-sm font-[525] flex items-center gap-1.5 hover:text-primary-10 dark:hover:text-primary-9 mt-auto pt-3",
         ),
         on_mount=RecentBlogsState.fetch_recent_blogs,

From e08fac3f972f64bcddce902a67171e50147308cd Mon Sep 17 00:00:00 2001
From: Alek <alek@reflex.dev>
Date: Fri, 26 Jun 2026 15:54:44 -0700
Subject: [PATCH 2/8] SEO: emit complete per-page meta for docs pages

Docs pages now emit description + full Open Graph + Twitter card + canonical (previously only a title), with page-specific OG values and a /docs-prefixed trailing-slash canonical that also drives the sitemap loc. Titles lengthened and de-duplicated; descriptions auto-extracted from each page's first paragraph. Fixes Twitter-card-missing (~770), OG-incomplete (~691), meta-description-missing (~770), duplicate-without-canonical (~765), title-too-short (~549), and non-canonical/3XX-in-sitemap.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 docs/app/reflex_docs/pages/docs/__init__.py   | 81 +++++++++++++++++-
 .../pages/docs_landing/__init__.py            |  2 +-
 .../app/reflex_docs/pages/library_previews.py |  2 +-
 docs/app/reflex_docs/reflex_docs.py           | 83 ++++++++++++++++---
 .../reflex_docs/templates/docpage/docpage.py  | 50 ++++++++---
 5 files changed, 191 insertions(+), 27 deletions(-)

diff --git a/docs/app/reflex_docs/pages/docs/__init__.py b/docs/app/reflex_docs/pages/docs/__init__.py
index 971ca615b7a..7de6b1a283b 100644
--- a/docs/app/reflex_docs/pages/docs/__init__.py
+++ b/docs/app/reflex_docs/pages/docs/__init__.py
@@ -1,4 +1,5 @@
 import os
+import re
 from collections import defaultdict, namedtuple
 from pathlib import Path
 from types import SimpleNamespace
@@ -194,13 +195,75 @@ def resolve_doc_route(doc: str, title: str) -> ResolvedDoc | None:
     return ResolvedDoc(route=route, display_title=display_title, category=category)
 
 
-def make_docpage(route: str, title: str, doc_virtual: str, render_fn):
+def extract_doc_description(
+    markdown_text: str | None,
+    metadata: dict | None = None,
+    max_len: int = 155,
+) -> str | None:
+    """Derive a meta description for a documentation page.
+
+    Prefers an explicit frontmatter ``meta_description``/``description``;
+    otherwise extracts the first prose paragraph of the markdown body. Returns
+    None if nothing usable is found (callers fall back to a title-based default).
+
+    Args:
+        markdown_text: The raw markdown body of the doc.
+        metadata: Parsed frontmatter, if any.
+        max_len: Soft maximum length for the description.
+
+    Returns:
+        A cleaned, truncated description, or None.
+    """
+    if metadata:
+        for key in ("meta_description", "description"):
+            value = metadata.get(key)
+            if isinstance(value, str) and value.strip():
+                return value.strip()
+    if not markdown_text:
+        return None
+    try:
+        # Drop fenced code blocks (```...```), including ```python exec blocks.
+        text = re.sub(r"```.*?```", "", markdown_text, flags=re.DOTALL)
+        para_lines: list[str] = []
+        skip_prefixes = (
+            "#", ">", "---", "import ", "from ", "|", "<", "- ", "* ", "rx.",
+            "```", "1.", "2.", "3.",
+        )
+        for raw in text.splitlines():
+            line = raw.strip()
+            if not line:
+                if para_lines:
+                    break
+                continue
+            if line.startswith(skip_prefixes):
+                continue
+            para_lines.append(line)
+        if not para_lines:
+            return None
+        para = " ".join(para_lines)
+        para = re.sub(r"!\[[^\]]*\]\([^)]*\)", "", para)  # images
+        para = re.sub(r"\[([^\]]+)\]\([^)]*\)", r"\1", para)  # links -> text
+        para = re.sub(r"[*_`]+", "", para)  # emphasis / inline code
+        para = re.sub(r"^~?\s*\d+\s*min\s*(?:read)?\s*·?\s*", "", para)  # reading time
+        para = re.sub(r"\s+", " ", para).strip()
+        if len(para) < 20:
+            return None
+        if len(para) > max_len:
+            para = para[:max_len].rsplit(" ", 1)[0].rstrip(",.;:") + "…"
+        return para or None
+    except Exception:
+        return None
+
+
+def make_docpage(
+    route: str, title: str, doc_virtual: str, render_fn, description: str | None = None
+):
     """Wrap a render function as a docpage, setting module metadata."""
     doc_path = Path(doc_virtual)
     render_fn.__module__ = ".".join(doc_path.parts[:-1])
     render_fn.__name__ = doc_path.stem
     render_fn.__qualname__ = doc_path.stem
-    return docpage(set_path=route, t=title)(render_fn)
+    return docpage(set_path=route, t=title, description=description)(render_fn)
 
 
 def handle_library_doc(
@@ -250,7 +313,19 @@ def comp(_actual=actual_path, _virtual=virtual_doc):
             body = rx.fragment(body, faq_script)
         return ((toc, doc_content), body)
 
-    return make_docpage(resolved.route, resolved.display_title, virtual_doc, comp)
+    try:
+        description = extract_doc_description(
+            Path(actual_path).read_text(encoding="utf-8")
+        )
+    except Exception:
+        description = None
+    return make_docpage(
+        resolved.route,
+        resolved.display_title,
+        virtual_doc,
+        comp,
+        description=description,
+    )
 
 
 # Build doc_markdown_sources mapping
diff --git a/docs/app/reflex_docs/pages/docs_landing/__init__.py b/docs/app/reflex_docs/pages/docs_landing/__init__.py
index 76025e0f2dd..b78f6108073 100644
--- a/docs/app/reflex_docs/pages/docs_landing/__init__.py
+++ b/docs/app/reflex_docs/pages/docs_landing/__init__.py
@@ -24,7 +24,7 @@
         title="Reflex Documentation - Build Web Apps in Pure Python",
         description="Reflex documentation: tutorials, API reference, and guides for building full-stack Python web apps. Get started in minutes.",
         image=f"{REFLEX_ASSETS_CDN}previews/index_preview.webp",
-        url="https://reflex.dev/docs",
+        url="https://reflex.dev/docs/",
     ),
 )
 def docs_landing() -> rx.Component:
diff --git a/docs/app/reflex_docs/pages/library_previews.py b/docs/app/reflex_docs/pages/library_previews.py
index e74bf40c8e3..773d7a87f31 100644
--- a/docs/app/reflex_docs/pages/library_previews.py
+++ b/docs/app/reflex_docs/pages/library_previews.py
@@ -103,7 +103,7 @@ def create_previews(
     @docpage(
         right_sidebar=False,
         set_path=f"/library{prefix.rstrip('/')}/" + path.strip("/") + "/",
-        page_title=component_category + " Library",
+        page_title=component_category + " Component Library · Reflex Docs",
     )
     def page() -> rx.Component:
         from reflex_docs.templates.docpage.sidebar.sidebar_items import (
diff --git a/docs/app/reflex_docs/reflex_docs.py b/docs/app/reflex_docs/reflex_docs.py
index d47d672b7bc..49913e60b27 100644
--- a/docs/app/reflex_docs/reflex_docs.py
+++ b/docs/app/reflex_docs/reflex_docs.py
@@ -7,8 +7,13 @@
 import reflex_enterprise as rxe
 from reflex_site_shared import styles
 from reflex_site_shared.backend.status import monitor_checkly_status
-from reflex_site_shared.constants import REFLEX_ASSETS_CDN
-from reflex_site_shared.meta.meta import favicons_links, to_cdn_image_url
+from reflex_site_shared.constants import REFLEX_ASSETS_CDN, REFLEX_DOMAIN_URL
+from reflex_site_shared.meta.meta import (
+    ONE_LINE_DESCRIPTION,
+    create_meta_tags,
+    favicons_links,
+    to_cdn_image_url,
+)
 from reflex_site_shared.telemetry import get_pixel_website_trackers
 
 from reflex_docs.pages import page404, routes
@@ -75,6 +80,25 @@ def _llms_txt_directive() -> rx.Component:
         )
     routes = routes[:WINDOWS_MAX_ROUTES]
 
+# Routes are registered without the frontend path prefix; it is mounted at
+# runtime (frontend_path="/docs"), so the public URL needs it prepended.
+_FRONTEND_PATH = (rx.config.get_config().frontend_path or "").rstrip("/")
+
+
+def _canonical_url(path: str) -> str:
+    """Build the absolute, trailing-slash canonical URL for a route path.
+
+    Args:
+        path: The route path (e.g. ``/state/overview/``), without the
+            frontend path prefix.
+
+    Returns:
+        The absolute canonical URL (e.g. ``https://reflex.dev/docs/state/overview/``).
+    """
+    url = REFLEX_DOMAIN_URL.rstrip("/") + _FRONTEND_PATH + path
+    return url if url.endswith("/") else url + "/"
+
+
 # Add the pages to the app.
 for route in routes:
     # print(f"Adding route: {route}")
@@ -87,23 +111,58 @@ def _llms_txt_directive() -> rx.Component:
             or f"{REFLEX_ASSETS_CDN}previews/index_preview.webp"
         )
 
+        # Build a complete, page-specific set of SEO meta tags (description,
+        # Open Graph, Twitter card, canonical) from the route's own title and
+        # description. Emitting these via `meta` — rather than add_page's
+        # `description`/`image` kwargs — prevents Reflex from emitting a second
+        # `description`/`og:image` tag (the "multiple meta description tags"
+        # issue), makes OG/Twitter values page-specific (docs pages previously
+        # had no description/og/twitter/canonical at all), and adds the missing
+        # canonical link.
+        if isinstance(route.title, str) and "[" not in route.path:
+            canonical = _canonical_url(route.path)
+            meta = create_meta_tags(
+                title=route.title,
+                description=route.description or ONE_LINE_DESCRIPTION,
+                image=image_url,
+                url=canonical,
+            )
+            # Preserve any extra page-declared tags (e.g. robots) not already
+            # covered, without re-introducing duplicate description/OG/Twitter.
+            if route.meta:
+                seen = {
+                    m.get("name") or m.get("property")
+                    for m in meta
+                    if isinstance(m, dict)
+                }
+                meta.extend(
+                    m
+                    for m in route.meta
+                    if isinstance(m, dict)
+                    and (m.get("name") or m.get("property")) not in seen
+                )
+        else:
+            # Dynamic ([...]) or Var-titled routes: a static canonical/title
+            # can't be emitted, so keep any page-provided meta as-is.
+            canonical = None
+            meta = list(route.meta) if route.meta is not None else []
+        meta.append({"name": "theme-color", "content": route.background_color})
+
         page_args = {
             "component": route.component,
             "route": route.path,
             "title": route.title,
-            "image": image_url,
-            "meta": [
-                {"name": "theme-color", "content": route.background_color},
-            ],
+            "meta": meta,
             "on_load": route.on_load,
         }
 
-        # Add the description only if it is not None
-        if route.description is not None:
-            page_args["description"] = route.description
-        # Add the extra meta data only if it is not None
-        if route.meta is not None:
-            page_args["meta"].extend(route.meta)
+        # Emit the trailing-slash canonical URL as the sitemap <loc> so the
+        # sitemap entry matches the canonical link (and the 200 page). The
+        # default would use the route without a trailing slash, which
+        # 301-redirects — surfacing as "3XX redirect in sitemap" /
+        # "non-canonical page in sitemap".
+        if canonical is not None:
+            page_args["context"] = {"sitemap": {"loc": canonical}}
 
         # Call add_page with the dynamically constructed arguments
         app.add_page(**page_args)
diff --git a/docs/app/reflex_docs/templates/docpage/docpage.py b/docs/app/reflex_docs/templates/docpage/docpage.py
index f3cef4eb9eb..06ccb4713eb 100644
--- a/docs/app/reflex_docs/templates/docpage/docpage.py
+++ b/docs/app/reflex_docs/templates/docpage/docpage.py
@@ -782,6 +782,7 @@ def docpage(
     right_sidebar: bool = True,
     page_title: str | None = None,
     pseudo_right_bar: bool = False,
+    description: str | None = None,
 ):
     """A template that most pages on the reflex.dev site should use.
 
@@ -793,6 +794,9 @@ def docpage(
         right_sidebar: Whether to show the right sidebar.
         page_title: The full title to set for the page. If None, defaults to `{title} · Reflex Docs`.
         pseudo_right_bar: Whether to show a pseudo right sidebar (empty space).
+        description: The meta description for the page. If None, a descriptive
+            fallback derived from the page title is used so the page always has
+            a non-empty, page-specific meta description.
 
     Returns:
         A wrapper function that returns the full webpage.
@@ -1033,23 +1037,49 @@ def wrapper(*args, **kwargs) -> rx.Component:
                 on_mount=rx.call_script(right_sidebar_item_highlight()),
             )
 
-        components = path.split("/")
+        # Section is the first path segment (these routes are mounted under
+        # /docs at runtime, so the path itself has no "docs" prefix).
+        segments = [c for c in path.split("/") if c]
+        section = segments[0] if len(segments) > 1 else None
         category = (
-            " ".join(
-                word.capitalize() for word in components[2].replace("-", " ").split()
-            )
-            if len(components) > 2
+            " ".join(word.capitalize() for word in section.replace("-", " ").split())
+            if section
             else None
         )
+        # Drop the section if it just repeats the page title (avoids titles like
+        # "Introduction · Introduction · Reflex Docs").
+        if category and category.lower() == title.lower():
+            category = None
+
+        # Build a descriptive, length-appropriate <title>. Nested docs pages
+        # previously used the bare title (e.g. "Styling"), which is too short
+        # for search engines; suffix the section and site so every doc title is
+        # unique and substantial, dropping the section if it would push the
+        # title past the ~60 char SERP truncation point.
         if page_title:
-            return Route(
-                path=path,
-                title=page_title,
-                component=wrapper,
+            seo_title = page_title
+        else:
+            with_category = (
+                f"{title} · {category} · Reflex Docs"
+                if category
+                else f"{title} · Reflex Docs"
+            )
+            seo_title = (
+                with_category if len(with_category) <= 60 else f"{title} · Reflex Docs"
             )
+
+        # Always provide a non-empty, page-specific meta description. Real
+        # descriptions come from the doc (see make_docpage); otherwise fall back
+        # to a concise, title-derived sentence so the page is never description-less.
+        seo_description = description or (
+            f"{title} — Reflex docs. Reflex is the open-source Python framework "
+            "for building full-stack web apps and internal tools."
+        )
+
         return Route(
             path=path,
-            title=f"{title} · Reflex Docs" if category is None else title,
+            title=seo_title,
+            description=seo_description,
             component=wrapper,
         )
 

From b4ff09e95f0836993971234299166ac6a12e65f3 Mon Sep 17 00:00:00 2001
From: Alek <alek@reflex.dev>
Date: Fri, 26 Jun 2026 15:54:44 -0700
Subject: [PATCH 3/8] SEO: add missing H1s, image alt text, and fix broken docs
 links

Add a top-level H1 to 10 docs pages that had none; add descriptive alt text to ~97 rx.image() calls across docs and to integrations-docs screenshots; repoint the dead build.reflex.dev/tokens link to /docs/hosting/tokens.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 docs/advanced_onboarding/how-reflex-works.md  |  2 +-
 docs/ai_builder/app_lifecycle/copy_app.md     |  1 +
 docs/ai_builder/app_lifecycle/deploy_app.md   |  1 +
 docs/ai_builder/app_lifecycle/download_app.md |  1 +
 docs/ai_builder/app_lifecycle/fork_app.md     |  1 +
 docs/ai_builder/app_lifecycle/general.md      |  1 +
 docs/ai_builder/app_lifecycle/share_app.md    |  1 +
 docs/ai_builder/features/automated_testing.md |  1 +
 docs/ai_builder/features/connect_to_github.md |  2 ++
 docs/ai_builder/features/customization.md     |  2 ++
 docs/ai_builder/features/editor_modes.md      |  1 +
 docs/ai_builder/features/image_as_prompt.md   |  1 +
 .../features/installing_external_packages.md  |  2 ++
 .../features/integration_shortcut.md          |  1 +
 docs/ai_builder/features/knowledge.md         |  1 +
 .../ai_builder/features/restore_checkpoint.md |  1 +
 docs/ai_builder/features/secrets.md           |  2 ++
 docs/ai_builder/figma.md                      |  2 ++
 docs/ai_builder/images.md                     |  1 +
 docs/ai_builder/overview/templates.md         |  2 ++
 docs/ai_builder/overview/tutorial.md          |  4 ++++
 .../overview/what_is_reflex_build.md          |  2 ++
 docs/assets/overview.md                       |  6 ++---
 docs/custom-components/overview.md            |  1 +
 .../prerequisites-for-publishing.md           |  3 +++
 docs/enterprise/ag_grid/aligned-grids.md      |  2 ++
 docs/getting_started/project-structure.md     |  2 +-
 docs/hosting/app-management.md                |  7 +++---
 docs/hosting/billing.md                       |  2 ++
 docs/hosting/compute.md                       |  2 ++
 docs/hosting/config_file.md                   |  2 ++
 docs/hosting/custom-domains.md                |  8 +++----
 docs/hosting/databricks.md                    |  2 +-
 docs/hosting/logs.md                          | 10 +++++---
 docs/hosting/machine-types.md                 |  5 +++-
 docs/hosting/regions.md                       |  4 ++++
 docs/hosting/secrets-environment-vars.md      |  4 ++--
 docs/library/forms/select-ll.md               |  1 +
 docs/library/forms/upload.md                  | 10 ++++----
 docs/library/layout/aspect_ratio.md           |  1 +
 docs/library/layout/inset.md                  |  4 +++-
 docs/library/media/image.md                   |  6 +++--
 docs/library/other/clipboard.md               |  2 +-
 docs/recipes/auth/login_form.md               |  4 ++++
 docs/recipes/auth/signup_form.md              |  4 ++++
 docs/recipes/content/grid.md                  |  1 +
 docs/recipes/content/top_banner.md            |  1 +
 docs/recipes/layout/footer.md                 |  3 +++
 docs/recipes/layout/navbar.md                 | 12 ++++++++++
 docs/recipes/layout/sidebar.md                |  2 ++
 docs/recipes/others/checkboxes.md             |  2 +-
 docs/wrapping-react/custom-code-and-hooks.md  |  2 ++
 docs/wrapping-react/local-packages.md         |  3 ++-
 docs/wrapping-react/step-by-step.md           |  2 ++
 .../src/integrations_docs/docs/databricks.md  | 24 +++++++++----------
 .../src/integrations_docs/docs/google_auth.md |  8 +++----
 .../src/integrations_docs/docs/okta_auth.md   | 10 ++++----
 57 files changed, 144 insertions(+), 51 deletions(-)

diff --git a/docs/advanced_onboarding/how-reflex-works.md b/docs/advanced_onboarding/how-reflex-works.md
index 7e8a4ccc5e2..140f4e80aea 100644
--- a/docs/advanced_onboarding/how-reflex-works.md
+++ b/docs/advanced_onboarding/how-reflex-works.md
@@ -55,7 +55,7 @@ The diagram below provides a detailed overview of how a Reflex app works. We'll
 
 ```python eval
 rx.el.a(
-    rx.image(src="https://web.reflex-assets.dev/other/architecture.webp"),
+    rx.image(src="https://web.reflex-assets.dev/other/architecture.webp", alt='Reflex app architecture diagram'),
     href="https://web.reflex-assets.dev/other/architecture.webp",
     target="_blank",
 )
diff --git a/docs/ai_builder/app_lifecycle/copy_app.md b/docs/ai_builder/app_lifecycle/copy_app.md
index 57c6a088149..90808a056ed 100644
--- a/docs/ai_builder/app_lifecycle/copy_app.md
+++ b/docs/ai_builder/app_lifecycle/copy_app.md
@@ -12,6 +12,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/app_lifecycle/copy_light.avif",
+            alt='Copying an app in Reflex AI Builder',
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
diff --git a/docs/ai_builder/app_lifecycle/deploy_app.md b/docs/ai_builder/app_lifecycle/deploy_app.md
index a4c59930577..1c409c1da7a 100644
--- a/docs/ai_builder/app_lifecycle/deploy_app.md
+++ b/docs/ai_builder/app_lifecycle/deploy_app.md
@@ -18,6 +18,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/app_lifecycle/deploy_light.avif",
+            alt='Deploying an app in Reflex AI Builder',
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
diff --git a/docs/ai_builder/app_lifecycle/download_app.md b/docs/ai_builder/app_lifecycle/download_app.md
index 3cf23c10786..7d02df1bb7f 100644
--- a/docs/ai_builder/app_lifecycle/download_app.md
+++ b/docs/ai_builder/app_lifecycle/download_app.md
@@ -13,6 +13,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/app_lifecycle/download_light.avif",
+            alt='Downloading an app in Reflex AI Builder',
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
diff --git a/docs/ai_builder/app_lifecycle/fork_app.md b/docs/ai_builder/app_lifecycle/fork_app.md
index 55d6556ad72..bd29ef6996d 100644
--- a/docs/ai_builder/app_lifecycle/fork_app.md
+++ b/docs/ai_builder/app_lifecycle/fork_app.md
@@ -10,6 +10,7 @@ import reflex as rx
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/overview/fork_template_light.avif",
+        alt='Forking an app in Reflex AI Builder',
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/app_lifecycle/general.md b/docs/ai_builder/app_lifecycle/general.md
index 936a07b0071..71bc342c78b 100644
--- a/docs/ai_builder/app_lifecycle/general.md
+++ b/docs/ai_builder/app_lifecycle/general.md
@@ -11,6 +11,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/app_lifecycle/general_light.avif",
+            alt='General app settings in Reflex AI Builder',
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
diff --git a/docs/ai_builder/app_lifecycle/share_app.md b/docs/ai_builder/app_lifecycle/share_app.md
index 84ac29375fd..da1c2efff4c 100644
--- a/docs/ai_builder/app_lifecycle/share_app.md
+++ b/docs/ai_builder/app_lifecycle/share_app.md
@@ -11,6 +11,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/app_lifecycle/share_light.avif",
+            alt='Sharing an app in Reflex AI Builder',
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
diff --git a/docs/ai_builder/features/automated_testing.md b/docs/ai_builder/features/automated_testing.md
index 63617abd56c..95fb9ee2ec0 100644
--- a/docs/ai_builder/features/automated_testing.md
+++ b/docs/ai_builder/features/automated_testing.md
@@ -16,6 +16,7 @@ rx.el.div(
             "https://web.reflex-assets.dev/ai_builder/features/test_light.webp",
             "https://web.reflex-assets.dev/ai_builder/features/test_dark.webp",
         ),
+        alt='Automated testing in Reflex AI Builder',
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/features/connect_to_github.md b/docs/ai_builder/features/connect_to_github.md
index 5dfe3aa405d..16ce05abe9f 100644
--- a/docs/ai_builder/features/connect_to_github.md
+++ b/docs/ai_builder/features/connect_to_github.md
@@ -16,6 +16,7 @@ The Github integration is important to make sure that you don't lose your progre
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/connecting_to_github.avif",
+        alt='Connecting a Reflex AI Builder app to GitHub',
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
@@ -36,6 +37,7 @@ The commit history is a great way to see the changes that you have made to your
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/github_commit_history.avif",
+        alt='GitHub commit history for a Reflex AI Builder app',
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/features/customization.md b/docs/ai_builder/features/customization.md
index 8bc70eb9937..22d481e492b 100644
--- a/docs/ai_builder/features/customization.md
+++ b/docs/ai_builder/features/customization.md
@@ -24,6 +24,7 @@ rx.el.div(
             "https://web.reflex-assets.dev/ai_builder/features/style_light.webp",
             "https://web.reflex-assets.dev/ai_builder/features/style_dark.webp",
         ),
+        alt='Custom styling options in Reflex AI Builder',
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
@@ -51,6 +52,7 @@ rx.el.div(
             "https://web.reflex-assets.dev/ai_builder/features/theme_light.webp",
             "https://web.reflex-assets.dev/ai_builder/features/theme_dark.webp",
         ),
+        alt='Theme customization in Reflex AI Builder',
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/features/editor_modes.md b/docs/ai_builder/features/editor_modes.md
index 77cc6c9725f..15ea733c8d1 100644
--- a/docs/ai_builder/features/editor_modes.md
+++ b/docs/ai_builder/features/editor_modes.md
@@ -11,6 +11,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/features/diff_light.avif",
+            alt='Reflex AI Builder editor diff view',
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
diff --git a/docs/ai_builder/features/image_as_prompt.md b/docs/ai_builder/features/image_as_prompt.md
index 27848fd04e9..489654f3c25 100644
--- a/docs/ai_builder/features/image_as_prompt.md
+++ b/docs/ai_builder/features/image_as_prompt.md
@@ -15,6 +15,7 @@ Below is an image showing how to upload an image to the AI Builder, you can clic
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/image_upload.avif",
+        alt='Using an image as a prompt in Reflex AI Builder',
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/features/installing_external_packages.md b/docs/ai_builder/features/installing_external_packages.md
index 82066f94232..eea0ba580de 100644
--- a/docs/ai_builder/features/installing_external_packages.md
+++ b/docs/ai_builder/features/installing_external_packages.md
@@ -20,6 +20,7 @@ Enter the name of the package you want to install in the chat interface. The AI
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/external_packages_input.avif",
+        alt='Installing external packages via the chat interface',
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
@@ -35,6 +36,7 @@ Add the package to the `requirements.txt` file and then save the app. This will
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/external_packages_requirements.avif",
+        alt='Installing external packages via requirements.txt',
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/features/integration_shortcut.md b/docs/ai_builder/features/integration_shortcut.md
index 9b1ff95fb7f..944a11ac3a7 100644
--- a/docs/ai_builder/features/integration_shortcut.md
+++ b/docs/ai_builder/features/integration_shortcut.md
@@ -17,6 +17,7 @@ rx.el.div(
             "https://web.reflex-assets.dev/ai_builder/features/shortcut_light.webp",
             "https://web.reflex-assets.dev/ai_builder/features/shortcut_dark.webp",
         ),
+        alt='Integrations shortcut in Reflex AI Builder',
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/features/knowledge.md b/docs/ai_builder/features/knowledge.md
index 0def762a71c..4cfcf01ccde 100644
--- a/docs/ai_builder/features/knowledge.md
+++ b/docs/ai_builder/features/knowledge.md
@@ -10,6 +10,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/features/knowledge_light.avif",
+            alt='Reflex AI Builder knowledge section',
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
diff --git a/docs/ai_builder/features/restore_checkpoint.md b/docs/ai_builder/features/restore_checkpoint.md
index 0b2f4f0aa39..686a831bc58 100644
--- a/docs/ai_builder/features/restore_checkpoint.md
+++ b/docs/ai_builder/features/restore_checkpoint.md
@@ -10,6 +10,7 @@ import reflex as rx
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/features/restore_light.avif",
+        alt='Restoring a checkpoint in Reflex AI Builder',
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/features/secrets.md b/docs/ai_builder/features/secrets.md
index 6dacd5db084..aec50e5e884 100644
--- a/docs/ai_builder/features/secrets.md
+++ b/docs/ai_builder/features/secrets.md
@@ -11,6 +11,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/features/secrets_light.avif",
+            alt='Adding secrets in Reflex AI Builder',
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
@@ -49,6 +50,7 @@ import reflex as rx
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/features/secret_bulk_light.avif",
+        alt='Adding secrets in bulk with the raw editor',
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/figma.md b/docs/ai_builder/figma.md
index 36f15973665..a82ba6239db 100644
--- a/docs/ai_builder/figma.md
+++ b/docs/ai_builder/figma.md
@@ -1 +1,3 @@
+# Figma Integration
+
 Integration Coming Soon!
\ No newline at end of file
diff --git a/docs/ai_builder/images.md b/docs/ai_builder/images.md
index 640e51f56c2..fb04baf1fe0 100644
--- a/docs/ai_builder/images.md
+++ b/docs/ai_builder/images.md
@@ -32,6 +32,7 @@ import reflex as rx
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/add_images_to_assets.avif",
+        alt='Uploading an image to app assets in Reflex AI Builder',
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/overview/templates.md b/docs/ai_builder/overview/templates.md
index b22ae06da3e..245762d46cb 100644
--- a/docs/ai_builder/overview/templates.md
+++ b/docs/ai_builder/overview/templates.md
@@ -10,6 +10,7 @@ import reflex as rx
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/overview/templates_light.avif",
+        alt='Reflex AI Builder templates gallery',
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
@@ -25,6 +26,7 @@ To use a template, simply click the template and then in the bottom right corner
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/overview/fork_template_light.avif",
+        alt='Forking a template in Reflex AI Builder',
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/overview/tutorial.md b/docs/ai_builder/overview/tutorial.md
index 9b913a8c208..c12df266455 100644
--- a/docs/ai_builder/overview/tutorial.md
+++ b/docs/ai_builder/overview/tutorial.md
@@ -33,6 +33,7 @@ import reflex as rx
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/overview/tutorial_1_light.avif",
+        alt='Creating a dashboard in Reflex AI Builder',
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
@@ -55,6 +56,7 @@ Your dashboard now becomes much more useful with real-time filtering. Users can
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/overview/tutorial_2_light.avif",
+        alt='Adding interactive filtering in Reflex AI Builder',
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
@@ -79,6 +81,7 @@ Your app now has full CRUD capability for employee records. The modal form provi
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/overview/tutorial_3_light.avif",
+        alt='Enabling data entry in Reflex AI Builder',
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
@@ -103,6 +106,7 @@ Your app now has proper navigation between the dashboard and chat functionality.
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/overview/tutorial_4_light.avif",
+        alt='Building a multi-page app in Reflex AI Builder',
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/overview/what_is_reflex_build.md b/docs/ai_builder/overview/what_is_reflex_build.md
index b5da763e0fe..7789ccbf207 100644
--- a/docs/ai_builder/overview/what_is_reflex_build.md
+++ b/docs/ai_builder/overview/what_is_reflex_build.md
@@ -130,6 +130,7 @@ def _docs_app_section_features_small_screen(feature: dict):
     return rx.el.div(
         rx.image(
             src=feature["img"],
+            alt='Reflex Build feature illustration',
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
@@ -179,6 +180,7 @@ def _docs_app_sections():
         rx.el.div(
             rx.image(
                 src=features_data[0]["img"],
+                alt='Reflex Build feature illustration',
                 class_name="rounded-md h-auto",
                 border=f"0.81px solid {rx.color('slate', 5)}",
             ),
diff --git a/docs/assets/overview.md b/docs/assets/overview.md
index 37d6d46d99a..9a8c2bb533f 100644
--- a/docs/assets/overview.md
+++ b/docs/assets/overview.md
@@ -31,7 +31,7 @@ assets
 Then you can display it using a `rx.image` component:
 
 ```python demo
-rx.image(src="https://web.reflex-assets.dev/other/Reflex.svg", width="5em")
+rx.image(src="https://web.reflex-assets.dev/other/Reflex.svg", alt='Reflex logo', width="5em")
 ```
 
 ```md alert
@@ -47,7 +47,7 @@ The `rx.asset` function provides a more flexible way to reference assets in your
 Local assets are stored in the app's `assets/` directory and are referenced using `rx.asset`:
 
 ```python demo
-rx.image(src=rx.asset("Reflex.svg"), width="5em")
+rx.image(src=rx.asset("Reflex.svg"), alt='Reflex logo', width="5em")
 ```
 
 #### Shared Assets
@@ -76,7 +76,7 @@ import reflex as rx
 
 # image.png is located in a subfolder next to this Python file
 def my_component_with_image():
-    return rx.image(src=rx.asset("image.png", shared=True, subfolder="images"))
+    return rx.image(src=rx.asset("image.png", shared=True, subfolder="images"), alt='Example image asset')
 ```
 
 ```md alert
diff --git a/docs/custom-components/overview.md b/docs/custom-components/overview.md
index 3d0c36fa668..fbaaea1df3d 100644
--- a/docs/custom-components/overview.md
+++ b/docs/custom-components/overview.md
@@ -14,6 +14,7 @@ Check out the custom components gallery [here](/docs/custom-components/overview)
 rx.center(
     rx.image(
         src="https://web.reflex-assets.dev/custom_components/pypi_reflex_custom_components.webp",
+        alt='PyPI page listing Reflex custom components',
         width="400px",
         border_radius="15px",
         border="1px solid",
diff --git a/docs/custom-components/prerequisites-for-publishing.md b/docs/custom-components/prerequisites-for-publishing.md
index 727ae8b1433..fedc1a64606 100644
--- a/docs/custom-components/prerequisites-for-publishing.md
+++ b/docs/custom-components/prerequisites-for-publishing.md
@@ -20,6 +20,7 @@ It is straightforward to create accounts and API tokens with PyPI. There is offi
 rx.center(
     rx.image(
         src="https://web.reflex-assets.dev/custom_components/pypi_register.webp",
+        alt='PyPI account registration page',
         style=image_style,
         margin_bottom="16px",
         loading="lazy",
@@ -33,6 +34,7 @@ A user can use username and password to authenticate with PyPI when publishing.
 rx.center(
     rx.image(
         src="https://web.reflex-assets.dev/custom_components/pypi_account_settings.webp",
+        alt='PyPI account settings page',
         style=image_style,
         margin_bottom="16px",
         loading="lazy",
@@ -46,6 +48,7 @@ Scroll down to the API tokens section and click on the "Add API token" button. F
 rx.center(
     rx.image(
         src="https://web.reflex-assets.dev/custom_components/pypi_api_tokens.webp",
+        alt='PyPI API tokens settings page',
         style=image_style,
         width="700px",
         loading="lazy",
diff --git a/docs/enterprise/ag_grid/aligned-grids.md b/docs/enterprise/ag_grid/aligned-grids.md
index d371eb09554..12c0a127e37 100644
--- a/docs/enterprise/ag_grid/aligned-grids.md
+++ b/docs/enterprise/ag_grid/aligned-grids.md
@@ -2,6 +2,8 @@
 title: Aligned Grids
 ---
 
+# Aligned Grids
+
 AgGrid provides a way to align multiple grids together. This is useful when you want to display related data in a synchronized manner.
 
 You can do so through the `aligned_grids` prop. This prop takes a list of grid IDs that you want to align.
diff --git a/docs/getting_started/project-structure.md b/docs/getting_started/project-structure.md
index b757e96e0b0..a4289d39ecb 100644
--- a/docs/getting_started/project-structure.md
+++ b/docs/getting_started/project-structure.md
@@ -53,7 +53,7 @@ The `assets` directory is where you can store any static assets you want to be p
 For example, if you save an image to `assets/image.png` you can display it from your app like this:
 
 ```python
-rx.image(src="https://web.reflex-assets.dev/other/image.png")
+rx.image(src="https://web.reflex-assets.dev/other/image.png", alt='Example image asset')
 ```
 
 ## Main Project
diff --git a/docs/hosting/app-management.md b/docs/hosting/app-management.md
index d4be82c800e..c1599aac519 100644
--- a/docs/hosting/app-management.md
+++ b/docs/hosting/app-management.md
@@ -17,7 +17,8 @@ To stop an app follow the arrow in the image below and press on the `Stop app` b
 
 ```python eval
 rx.image(
-    src="https://web.reflex-assets.dev/other/stopping_app.webp", padding_bottom="20px"
+    src="https://web.reflex-assets.dev/other/stopping_app.webp",
+    alt='Stopping an app in Reflex Cloud', padding_bottom="20px"
 )
 ```
 
@@ -31,13 +32,13 @@ rx.image(
 To delete an app click on the `Settings` tab in the Cloud UI on the app page.
 
 ```python eval
-rx.image(src="https://web.reflex-assets.dev/other/environment_variables.webp")
+rx.image(src="https://web.reflex-assets.dev/other/environment_variables.webp", alt='App environment variables in Reflex Cloud')
 ```
 
 Then click on the `Danger` tab as shown below.
 
 ```python eval
-rx.image(src="https://web.reflex-assets.dev/other/deleting_app.webp")
+rx.image(src="https://web.reflex-assets.dev/other/deleting_app.webp", alt='Deleting an app in Reflex Cloud')
 ```
 
 Here there is a `Delete app` button. Pressing this button will delete the app and all of its data. This action is irreversible.
diff --git a/docs/hosting/billing.md b/docs/hosting/billing.md
index aae00a7b829..abde86eef8c 100644
--- a/docs/hosting/billing.md
+++ b/docs/hosting/billing.md
@@ -2,6 +2,8 @@
 import reflex as rx
 ```
 
+# Billing
+
 ## Overview 
 
 Billing for Reflex Cloud is monthly per project. Project owners and admins are able to view and manage the billing page. 
diff --git a/docs/hosting/compute.md b/docs/hosting/compute.md
index 0da8d51919c..562e9da9c50 100644
--- a/docs/hosting/compute.md
+++ b/docs/hosting/compute.md
@@ -2,6 +2,8 @@
 import reflex as rx
 ```
 
+# Compute
+
 ## Compute Usage
 
 Reflex Cloud is billed on a per second basis so you only pay for when your app is being used by your end users. When your app is idle, you are not charged. 
diff --git a/docs/hosting/config_file.md b/docs/hosting/config_file.md
index d4791a8c783..f07b1aec319 100644
--- a/docs/hosting/config_file.md
+++ b/docs/hosting/config_file.md
@@ -2,6 +2,8 @@
 import reflex as rx
 ```
 
+# Cloud Config File
+
 ## What is reflex cloud config?
 
 The following command:
diff --git a/docs/hosting/custom-domains.md b/docs/hosting/custom-domains.md
index c523f2bb1ce..d07ee6adb68 100644
--- a/docs/hosting/custom-domains.md
+++ b/docs/hosting/custom-domains.md
@@ -23,7 +23,7 @@ Once you have purchased your domain, you can add it to your Reflex Cloud app by
 2 - Once your app is deployed click the `Custom Domain` tab and add your custom domain to the input field and press the Add domain button. You should now see a page like below:
 
 ```python eval
-rx.image(src="https://web.reflex-assets.dev/other/custom-domains-DNS-inputs.webp")
+rx.image(src="https://web.reflex-assets.dev/other/custom-domains-DNS-inputs.webp", alt='Custom domain DNS record inputs')
 ```
 
 ```python eval
@@ -33,7 +33,7 @@ rx.box(height="20px")
 3 - On the domain registrar's website, navigate to the DNS settings for your domain. It should look something like the image below:
 
 ```python eval
-rx.image(src="https://web.reflex-assets.dev/other/custom-domains-DNS-before.webp")
+rx.image(src="https://web.reflex-assets.dev/other/custom-domains-DNS-before.webp", alt='DNS settings before adding custom domain records')
 ```
 
 ```python eval
@@ -43,7 +43,7 @@ rx.box(height="20px")
 4 - Add all four of the DNS records provided by Reflex Cloud to your domain registrar's DNS settings. If there is already an A name record, delete it and replace it with the one provided by Reflex Cloud. Your DNS settings should look like the image below:
 
 ```python eval
-rx.image(src="https://web.reflex-assets.dev/other/custom-domains-DNS-after.webp")
+rx.image(src="https://web.reflex-assets.dev/other/custom-domains-DNS-after.webp", alt='DNS settings after adding custom domain records')
 ```
 
 ```md alert warning
@@ -63,7 +63,7 @@ rx.box(height="20px")
 5 - Once you have added the DNS records, refresh the page on the Reflex Cloud page (it may take a few minutes to a few hours to update successfully). If the records are correct, you should see a success message like the one below:
 
 ```python eval
-rx.image(src="https://web.reflex-assets.dev/other/custom-domains-success.webp")
+rx.image(src="https://web.reflex-assets.dev/other/custom-domains-success.webp", alt='Custom domain successfully configured')
 ```
 
 ```python eval
diff --git a/docs/hosting/databricks.md b/docs/hosting/databricks.md
index 779a2b747db..43f3bd03992 100644
--- a/docs/hosting/databricks.md
+++ b/docs/hosting/databricks.md
@@ -54,7 +54,7 @@ env:
 ### Obtain Required Tokens
 
 1. **Reflex Access Token**
-   - Visit [Reflex Cloud Tokens](https://build.reflex.dev/tokens/)
+   - Visit the [Reflex Cloud Tokens docs](/docs/hosting/tokens)
    - Navigate to Account Settings → Tokens
    - Create a new token and copy the value
    - Replace `your-token-here` in the configuration
diff --git a/docs/hosting/logs.md b/docs/hosting/logs.md
index d58b9387249..3593c0183b5 100644
--- a/docs/hosting/logs.md
+++ b/docs/hosting/logs.md
@@ -2,13 +2,16 @@
 import reflex as rx
 ```
 
+# Logs
+
 ## View Logs
 
 To view the app logs follow the arrow in the image below and press on the `Logs` dropdown.
 
 ```python eval
 rx.image(
-    src="https://web.reflex-assets.dev/other/view_logs.webp", padding_bottom="20px"
+    src="https://web.reflex-assets.dev/other/view_logs.webp",
+    alt='Viewing app logs in Reflex Cloud', padding_bottom="20px"
 )
 ```
 
@@ -22,7 +25,7 @@ rx.image(
 To view the deployment history follow the arrow in the image below and press on the `Deployments`.
 
 ```python eval
-rx.image(src="https://web.reflex-assets.dev/other/view_deployment_logs.webp")
+rx.image(src="https://web.reflex-assets.dev/other/view_deployment_logs.webp", alt='Viewing deployment logs in Reflex Cloud')
 ```
 
 This brings you to the page below where you can see the deployment history of your app. Click on deployment you wish to explore further.
@@ -30,6 +33,7 @@ This brings you to the page below where you can see the deployment history of yo
 ```python eval
 rx.image(
     src="https://web.reflex-assets.dev/other/view_deployment_logs_2.webp",
+    alt='Deployment logs and history in Reflex Cloud',
     padding_bottom="20px",
 )
 ```
@@ -42,5 +46,5 @@ rx.image(
 This brings you to the page below where you can view the deployment logs of your app by clicking the `Build logs` dropdown.
 
 ```python eval
-rx.image(src="https://web.reflex-assets.dev/other/view_deployment_logs_3.webp")
+rx.image(src="https://web.reflex-assets.dev/other/view_deployment_logs_3.webp", alt='CLI command to view deployment history')
 ```
\ No newline at end of file
diff --git a/docs/hosting/machine-types.md b/docs/hosting/machine-types.md
index a58e2c23b2a..7449daebd43 100644
--- a/docs/hosting/machine-types.md
+++ b/docs/hosting/machine-types.md
@@ -2,6 +2,8 @@
 import reflex as rx
 ```
 
+# Machine Types
+
 ## Machine Types
 
 
@@ -11,7 +13,8 @@ To scale your VM in the Cloud UI, click on the `Settings` tab in the Cloud UI on
 
 ```python eval
 rx.image(
-    src="https://web.reflex-assets.dev/other/scaling_vms.webp", padding_bottom="20px"
+    src="https://web.reflex-assets.dev/other/scaling_vms.webp",
+    alt='Selecting machine types for scaling VMs', padding_bottom="20px"
 )
 ```
 
diff --git a/docs/hosting/regions.md b/docs/hosting/regions.md
index 432c6c8f17d..e5ac24211d5 100644
--- a/docs/hosting/regions.md
+++ b/docs/hosting/regions.md
@@ -45,6 +45,8 @@ COUNTRIES_CODES = {
 }
 ```
 
+# Regions
+
 ## Regions
 
 To scale your app you can choose different regions. Regions are different locations around the world where your app can be deployed. 
@@ -54,6 +56,7 @@ To scale your app to multiple regions in the Cloud UI, click on the `Settings` t
 ```python eval
 rx.image(
     src="https://web.reflex-assets.dev/other/scaling_regions.webp",
+    alt='Selecting deployment regions for scaling',
     padding_bottom="20px",
 )
 ```
@@ -93,6 +96,7 @@ rx.el.table(
                     rx.el.div(
                         rx.image(
                             src=f"https://build.reflex.dev/flags/{COUNTRIES_CODES[region]}.svg",
+                            alt='Region country flag',
                             class_name="rounded-[2px] mr-2 w-5 h-4",
                         ),
                         REGIONS_DICT[region],
diff --git a/docs/hosting/secrets-environment-vars.md b/docs/hosting/secrets-environment-vars.md
index 43bb6de6503..9e37bf53ec4 100644
--- a/docs/hosting/secrets-environment-vars.md
+++ b/docs/hosting/secrets-environment-vars.md
@@ -39,13 +39,13 @@ You access the values of `envs` by referencing `os.environ` with their names as
 To find the secrets tab, click on the `Settings` tab in the Cloud UI on the app page.
 
 ```python eval
-rx.image(src="https://web.reflex-assets.dev/other/environment_variables.webp")
+rx.image(src="https://web.reflex-assets.dev/other/environment_variables.webp", alt='Environment variables panel in Reflex Cloud UI')
 ```
 
 Then click on the `Secrets` tab as shown below.
 
 ```python eval
-rx.image(src="https://web.reflex-assets.dev/other/environment_variables_2.webp")
+rx.image(src="https://web.reflex-assets.dev/other/environment_variables_2.webp", alt='Adding environment variables in Reflex Cloud UI')
 ```
 
 From here you can add or edit your environment variables. You will need to restart your app for these changes to take effect.
diff --git a/docs/library/forms/select-ll.md b/docs/library/forms/select-ll.md
index 81a07b0301b..dfd1c9fe29d 100644
--- a/docs/library/forms/select-ll.md
+++ b/docs/library/forms/select-ll.md
@@ -248,6 +248,7 @@ rx.card(
     rx.flex(
         rx.image(
             src="https://web.reflex-assets.dev/other/reflex_banner.png",
+            alt='Reflex banner image',
             width="100%",
             height="auto",
         ),
diff --git a/docs/library/forms/upload.md b/docs/library/forms/upload.md
index f41615b5116..ade2d40bcf2 100644
--- a/docs/library/forms/upload.md
+++ b/docs/library/forms/upload.md
@@ -37,7 +37,7 @@ def upload_component():
     return rx.vstack(
         rx.upload(id="upload"),
         rx.button("Upload", on_click=State.handle_upload(rx.upload_files("upload"))),
-        rx.foreach(State.uploaded_files, lambda f: rx.image(src=rx.get_upload_url(f))),
+        rx.foreach(State.uploaded_files, lambda f: rx.image(src=rx.get_upload_url(f), alt='Uploaded file preview')),
     )
 ```
 
@@ -138,7 +138,7 @@ def upload_component():
         # Display uploaded files using rx.get_upload_url()
         rx.foreach(
             State.uploaded_files,
-            lambda filename: rx.image(src=rx.get_upload_url(filename)),
+            lambda filename: rx.image(src=rx.get_upload_url(filename), alt='Uploaded file preview'),
         ),
     )
 ```
@@ -148,7 +148,7 @@ def upload_component():
 Below is an example of how to allow multiple file uploads (in this case images).
 
 ```python demo box
-rx.image(src="https://web.reflex-assets.dev/other/upload.webp")
+rx.image(src="https://web.reflex-assets.dev/other/upload.webp", alt='Multiple file upload component example')
 ```
 
 ```python
@@ -203,7 +203,7 @@ def index():
             "Clear",
             on_click=rx.clear_selected_files("upload1"),
         ),
-        rx.foreach(State.img, lambda img: rx.image(src=rx.get_upload_url(img))),
+        rx.foreach(State.img, lambda img: rx.image(src=rx.get_upload_url(img), alt='Uploaded file preview')),
         padding="5em",
     )
 ```
@@ -352,7 +352,7 @@ def index():
             rx.foreach(
                 State.img,
                 lambda img: rx.vstack(
-                    rx.image(src=rx.get_upload_url(img)),
+                    rx.image(src=rx.get_upload_url(img), alt='Uploaded file preview'),
                     rx.text(img),
                 ),
             ),
diff --git a/docs/library/layout/aspect_ratio.md b/docs/library/layout/aspect_ratio.md
index 1c6ea601681..5233fb1a9d3 100644
--- a/docs/library/layout/aspect_ratio.md
+++ b/docs/library/layout/aspect_ratio.md
@@ -73,6 +73,7 @@ rx.flex(
             rx.aspect_ratio(
                 rx.image(
                     src="https://web.reflex-assets.dev/other/logo.jpg",
+                    alt='Reflex logo',
                     width="100%",
                     height="100%",
                 ),
diff --git a/docs/library/layout/inset.md b/docs/library/layout/inset.md
index c1b59d88115..0cc1d43e329 100644
--- a/docs/library/layout/inset.md
+++ b/docs/library/layout/inset.md
@@ -5,7 +5,7 @@ components:
 Inset: |
   lambda **props: rx.card(
       rx.inset(
-          rx.image(src="https://web.reflex-assets.dev/other/reflex_banner.png", height="auto"),
+          rx.image(src="https://web.reflex-assets.dev/other/reflex_banner.png", alt='Reflex banner image', height="auto"),
           **props,
       ),
       width="500px",
@@ -29,6 +29,7 @@ rx.card(
     rx.inset(
         rx.image(
             src="https://web.reflex-assets.dev/other/reflex_banner.png",
+            alt='Reflex banner image',
             width="100%",
             height="auto",
         ),
@@ -54,6 +55,7 @@ rx.card(
     rx.inset(
         rx.image(
             src="https://web.reflex-assets.dev/other/reflex_banner.png",
+            alt='Reflex banner image',
             width="100%",
             height="auto",
         ),
diff --git a/docs/library/media/image.md b/docs/library/media/image.md
index c699fb97ae2..46a40d55d90 100644
--- a/docs/library/media/image.md
+++ b/docs/library/media/image.md
@@ -14,7 +14,8 @@ This could either be a local path from the assets folder or an external link.
 
 ```python demo
 rx.image(
-    src="https://web.reflex-assets.dev/other/logo.jpg", width="100px", height="auto"
+    src="https://web.reflex-assets.dev/other/logo.jpg",
+    alt='Reflex logo', width="100px", height="auto"
 )
 ```
 
@@ -23,6 +24,7 @@ Image composes a box and can be styled similarly.
 ```python demo
 rx.image(
     src="https://web.reflex-assets.dev/other/logo.jpg",
+    alt='Reflex logo',
     width="100px",
     height="auto",
     border_radius="15px 50px",
@@ -47,7 +49,7 @@ class ImageState(rx.State):
 
 
 def image_pil_example():
-    return rx.vstack(rx.image(src=ImageState.image))
+    return rx.vstack(rx.image(src=ImageState.image, alt='Dynamically generated image'))
 ```
 
 ```md alert info
diff --git a/docs/library/other/clipboard.md b/docs/library/other/clipboard.md
index 48154d39c73..84066bed264 100644
--- a/docs/library/other/clipboard.md
+++ b/docs/library/other/clipboard.md
@@ -73,6 +73,6 @@ def clipboard_image_example():
             rx.input(placeholder="Paste Image (prevent default)"),
             on_paste=ClipboardPasteImageState.on_paste.prevent_default,
         ),
-        rx.image(src=ClipboardPasteImageState.last_image_uri),
+        rx.image(src=ClipboardPasteImageState.last_image_uri, alt='Image pasted from clipboard'),
     )
 ```
diff --git a/docs/recipes/auth/login_form.md b/docs/recipes/auth/login_form.md
index 6b1e4f33c8b..c956664d62a 100644
--- a/docs/recipes/auth/login_form.md
+++ b/docs/recipes/auth/login_form.md
@@ -15,6 +15,7 @@ def login_default() -> rx.Component:
             rx.center(
                 rx.image(
                     src="https://web.reflex-assets.dev/other/logo.jpg",
+                    alt='Reflex logo',
                     width="2.5em",
                     height="auto",
                     border_radius="25%",
@@ -87,6 +88,7 @@ def login_default_icons() -> rx.Component:
             rx.center(
                 rx.image(
                     src="https://web.reflex-assets.dev/other/logo.jpg",
+                    alt='Reflex logo',
                     width="2.5em",
                     height="auto",
                     border_radius="25%",
@@ -164,6 +166,7 @@ def login_single_thirdparty() -> rx.Component:
             rx.flex(
                 rx.image(
                     src="https://web.reflex-assets.dev/other/logo.jpg",
+                    alt='Reflex logo',
                     width="2.5em",
                     height="auto",
                     border_radius="25%",
@@ -256,6 +259,7 @@ def login_multiple_thirdparty() -> rx.Component:
             rx.flex(
                 rx.image(
                     src="https://web.reflex-assets.dev/other/logo.jpg",
+                    alt='Reflex logo',
                     width="2.5em",
                     height="auto",
                     border_radius="25%",
diff --git a/docs/recipes/auth/signup_form.md b/docs/recipes/auth/signup_form.md
index 1bf1e44c406..0ea9071901f 100644
--- a/docs/recipes/auth/signup_form.md
+++ b/docs/recipes/auth/signup_form.md
@@ -15,6 +15,7 @@ def signup_default() -> rx.Component:
             rx.center(
                 rx.image(
                     src="https://web.reflex-assets.dev/other/logo.jpg",
+                    alt='Reflex logo',
                     width="2.5em",
                     height="auto",
                     border_radius="25%",
@@ -95,6 +96,7 @@ def signup_default_icons() -> rx.Component:
             rx.center(
                 rx.image(
                     src="https://web.reflex-assets.dev/other/logo.jpg",
+                    alt='Reflex logo',
                     width="2.5em",
                     height="auto",
                     border_radius="25%",
@@ -181,6 +183,7 @@ def signup_single_thirdparty() -> rx.Component:
             rx.flex(
                 rx.image(
                     src="https://web.reflex-assets.dev/other/logo.jpg",
+                    alt='Reflex logo',
                     width="2.5em",
                     height="auto",
                     border_radius="25%",
@@ -281,6 +284,7 @@ def signup_multiple_thirdparty() -> rx.Component:
             rx.flex(
                 rx.image(
                     src="https://web.reflex-assets.dev/other/logo.jpg",
+                    alt='Reflex logo',
                     width="2.5em",
                     height="auto",
                     border_radius="25%",
diff --git a/docs/recipes/content/grid.md b/docs/recipes/content/grid.md
index 54a92234772..db08b49ae5d 100644
--- a/docs/recipes/content/grid.md
+++ b/docs/recipes/content/grid.md
@@ -38,6 +38,7 @@ rx.grid(
             rx.inset(
                 rx.image(
                     src="https://web.reflex-assets.dev/other/reflex_banner.png",
+                    alt='Reflex banner image',
                     width="100%",
                     height="auto",
                 ),
diff --git a/docs/recipes/content/top_banner.md b/docs/recipes/content/top_banner.md
index ade04a4c0ed..06147820ef5 100644
--- a/docs/recipes/content/top_banner.md
+++ b/docs/recipes/content/top_banner.md
@@ -90,6 +90,7 @@ class TopBannerSignup(rx.ComponentState):
             rx.flex(
                 rx.image(
                     src="https://web.reflex-assets.dev/other/logo.jpg",
+                    alt='Reflex logo',
                     width="2em",
                     height="auto",
                     border_radius="25%",
diff --git a/docs/recipes/layout/footer.md b/docs/recipes/layout/footer.md
index 04708a3feef..73144454ee8 100644
--- a/docs/recipes/layout/footer.md
+++ b/docs/recipes/layout/footer.md
@@ -65,6 +65,7 @@ def footer() -> rx.Component:
                     rx.hstack(
                         rx.image(
                             src="https://web.reflex-assets.dev/other/logo.jpg",
+                            alt='Reflex logo',
                             width="2.25em",
                             height="auto",
                             border_radius="25%",
@@ -192,6 +193,7 @@ def footer_newsletter() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
+                        alt='Reflex logo',
                         width="2em",
                         height="auto",
                         border_radius="25%",
@@ -301,6 +303,7 @@ def footer_three_columns() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
+                        alt='Reflex logo',
                         width="2em",
                         height="auto",
                         border_radius="25%",
diff --git a/docs/recipes/layout/navbar.md b/docs/recipes/layout/navbar.md
index 47a832ab1b8..7d86435ae92 100644
--- a/docs/recipes/layout/navbar.md
+++ b/docs/recipes/layout/navbar.md
@@ -28,6 +28,7 @@ def navbar() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
+                        alt='Reflex logo',
                         width="2.25em",
                         height="auto",
                         border_radius="25%",
@@ -52,6 +53,7 @@ def navbar() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
+                        alt='Reflex logo',
                         width="2em",
                         height="auto",
                         border_radius="25%",
@@ -96,6 +98,7 @@ def navbar_dropdown() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
+                        alt='Reflex logo',
                         width="2.25em",
                         height="auto",
                         border_radius="25%",
@@ -135,6 +138,7 @@ def navbar_dropdown() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
+                        alt='Reflex logo',
                         width="2em",
                         height="auto",
                         border_radius="25%",
@@ -183,6 +187,7 @@ def navbar_searchbar() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
+                        alt='Reflex logo',
                         width="2.25em",
                         height="auto",
                         border_radius="25%",
@@ -206,6 +211,7 @@ def navbar_searchbar() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
+                        alt='Reflex logo',
                         width="2em",
                         height="auto",
                         border_radius="25%",
@@ -256,6 +262,7 @@ def navbar_icons() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
+                        alt='Reflex logo',
                         width="2.25em",
                         height="auto",
                         border_radius="25%",
@@ -279,6 +286,7 @@ def navbar_icons() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
+                        alt='Reflex logo',
                         width="2em",
                         height="auto",
                         border_radius="25%",
@@ -323,6 +331,7 @@ def navbar_buttons() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
+                        alt='Reflex logo',
                         width="2.25em",
                         height="auto",
                         border_radius="25%",
@@ -352,6 +361,7 @@ def navbar_buttons() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
+                        alt='Reflex logo',
                         width="2em",
                         height="auto",
                         border_radius="25%",
@@ -399,6 +409,7 @@ def navbar_user() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
+                        alt='Reflex logo',
                         width="2.25em",
                         height="auto",
                         border_radius="25%",
@@ -434,6 +445,7 @@ def navbar_user() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
+                        alt='Reflex logo',
                         width="2em",
                         height="auto",
                         border_radius="25%",
diff --git a/docs/recipes/layout/sidebar.md b/docs/recipes/layout/sidebar.md
index e24d2b24a1a..b164a9fddcf 100644
--- a/docs/recipes/layout/sidebar.md
+++ b/docs/recipes/layout/sidebar.md
@@ -86,6 +86,7 @@ def sidebar() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
+                        alt='Reflex logo',
                         width="2.25em",
                         height="auto",
                         border_radius="25%",
@@ -187,6 +188,7 @@ def sidebar_bottom_profile() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
+                        alt='Reflex logo',
                         width="2.25em",
                         height="auto",
                         border_radius="25%",
diff --git a/docs/recipes/others/checkboxes.md b/docs/recipes/others/checkboxes.md
index ae2e50239dd..f8cbe766003 100644
--- a/docs/recipes/others/checkboxes.md
+++ b/docs/recipes/others/checkboxes.md
@@ -9,7 +9,7 @@ A smart checkboxes group where you can track all checked boxes, as well as place
 ## Recipe
 
 ```python eval
-rx.center(rx.image(src="https://web.reflex-assets.dev/templates/smart_checkboxes.webp"))
+rx.center(rx.image(src="https://web.reflex-assets.dev/templates/smart_checkboxes.webp", alt='Smart checkboxes recipe screenshot'))
 ```
 
 This recipe use a `dict[str, bool]` for the checkboxes state tracking.
diff --git a/docs/wrapping-react/custom-code-and-hooks.md b/docs/wrapping-react/custom-code-and-hooks.md
index a967ee94689..c35f908d678 100644
--- a/docs/wrapping-react/custom-code-and-hooks.md
+++ b/docs/wrapping-react/custom-code-and-hooks.md
@@ -1,3 +1,5 @@
+# Custom Code and Hooks
+
 When wrapping a React component, you may need to define custom code or hooks that are specific to the component. This is done by defining the `add_custom_code`or `add_hooks` methods in your component class.
 
 ## Custom Code
diff --git a/docs/wrapping-react/local-packages.md b/docs/wrapping-react/local-packages.md
index 11108d3517d..429c8fdb85d 100644
--- a/docs/wrapping-react/local-packages.md
+++ b/docs/wrapping-react/local-packages.md
@@ -28,7 +28,8 @@ class Hello(rx.Component):
         props.setdefault("align", "center")
         return rx.hstack(
             rx.image(
-                src=rx.asset("wave.svg", shared=True), width="50px", height="50px"
+                src=rx.asset("wave.svg", shared=True),
+                alt='Wave SVG asset', width="50px", height="50px"
             ),
             rx.heading("Hello ", *children),
             **props,
diff --git a/docs/wrapping-react/step-by-step.md b/docs/wrapping-react/step-by-step.md
index e69de29bb2d..5bab69ef458 100644
--- a/docs/wrapping-react/step-by-step.md
+++ b/docs/wrapping-react/step-by-step.md
@@ -0,0 +1,2 @@
+
+# Wrapping React Step by Step
diff --git a/packages/integrations-docs/src/integrations_docs/docs/databricks.md b/packages/integrations-docs/src/integrations_docs/docs/databricks.md
index dfadd9a3067..268813ea507 100644
--- a/packages/integrations-docs/src/integrations_docs/docs/databricks.md
+++ b/packages/integrations-docs/src/integrations_docs/docs/databricks.md
@@ -31,13 +31,13 @@ With Databricks, your app can:
    - Copy the Server hostname (this is your **DATABRICKS_HOST**).
    - Copy the HTTP path removing the `/sql/1.0/warehouses/` prefix (this is your **DATABRICKS_WAREHOUSE_ID**).
 
-![databricks_integration_1.webp](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_integration_1.webp)
+![Databricks SQL Warehouse connection details](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_integration_1.webp)
 
 ### 3 - Get your **DATABRICKS_CATALOG** and **DATABRICKS_SCHEMA**:
    - Click the SQL Editor from the sidebar.
    - Choose the **DATABRICKS_CATALOG** and **DATABRICKS_SCHEMA** from the dropdowns as shown below.
 
-![databricks_integration_4.webp](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_integration_4.webp)
+![Selecting Databricks catalog and schema in SQL Editor](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_integration_4.webp)
 
 
 ### 4 - Obtain your authentication credentials:
@@ -60,31 +60,31 @@ If your workspace administrator has already added Reflex as a Connected App in y
 
 - Open the dropdown in the top right corner and select **Manage Account**.
 
-![databricks_integration_oauth_1.webp](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_integration_oauth_1.webp)
+![Opening Manage Account in Databricks](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_integration_oauth_1.webp)
 
 - Select `Users and Groups`
 
-![databricks_integration_oauth_2.webp](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_integration_oauth_2.webp)
+![Selecting Users and Groups in Databricks account](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_integration_oauth_2.webp)
 
 - Select the `Service Principals` tab and click `Add Service Principal`.
 
-![databricks_integration_oauth_3.webp](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_integration_oauth_3.webp)
+![Adding a Databricks service principal](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_integration_oauth_3.webp)
 
 - Fill in the details and click `Add Service Principal`.
 
-![databricks_integration_oauth_4.webp](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_integration_oauth_4.webp)
+![Entering Databricks service principal details](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_integration_oauth_4.webp)
 
 - Click the `Credentials and Secrets` tab and click `Generate Secret`.
 
-![databricks_integration_oauth_5.webp](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_integration_oauth_5.webp)
+![Generating a Databricks service principal secret](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_integration_oauth_5.webp)
 
 - Set a lifetime for the secrets and click `Generate`.
 
-![databricks_integration_oauth_6.webp](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_integration_oauth_6.webp)
+![Setting Databricks secret lifetime](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_integration_oauth_6.webp)
 
 - Copy the generated **DATABRICKS_CLIENT_ID** and **DATABRICKS_CLIENT_SECRET**.
 
-![databricks_integration_oauth_7.webp](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_integration_oauth_7.webp)
+![Copying Databricks client ID and secret](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_integration_oauth_7.webp)
 
 `````
 
@@ -118,13 +118,13 @@ Once connected, the AI Builder can execute queries directly against your Databri
 - Login to Databricks
 - Go to manage account
 
-![databricks_admin_auth_1.webp](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_admin_auth_1.webp)
+![Opening Manage Account as Databricks admin](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_admin_auth_1.webp)
 
 - Go to **Settings** → **Apps Connections** → **Add new connection**
 
-![databricks_admin_auth_2.webp](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_admin_auth_2.webp)
+![Adding a new app connection in Databricks settings](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_admin_auth_2.webp)
 
 - Give it a name, enter the redirect URL that Reflex Build provides, Click `All APIs` and uncheck `Generate a client secret` and then add.
    - URL: `https://build.reflex.dev/_reflex_oidc_databricks/authorization-code/callback`
 
-![databricks_admin_auth_3.webp](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_admin_auth_3.webp)
\ No newline at end of file
+![Configuring the Reflex redirect URL in Databricks](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/databricks_admin_auth_3.webp)
\ No newline at end of file
diff --git a/packages/integrations-docs/src/integrations_docs/docs/google_auth.md b/packages/integrations-docs/src/integrations_docs/docs/google_auth.md
index 03d9ccac214..90efb0a38b1 100644
--- a/packages/integrations-docs/src/integrations_docs/docs/google_auth.md
+++ b/packages/integrations-docs/src/integrations_docs/docs/google_auth.md
@@ -16,19 +16,19 @@ The **Google Auth Integration** allows your app to authenticate users using thei
 
 3 - Click **Create Credentials**
 
-![Google Auth 1](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/google_auth_1.webp)
+![Creating credentials in Google Cloud Console](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/google_auth_1.webp)
 
 4 - Choose **OAuth client ID**.
 
-![Google Auth 2](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/google_auth_2.webp)
+![Choosing OAuth client ID credential type](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/google_auth_2.webp)
 
 5 - Choose **Web Application** as the application type, name the application and enter your sandbox URL, which you get from the Google Auth integration panel, as the **Authorized JavaScript Origin** and **Authorized Redirect URIs**.
 
-![Google Auth 3](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/google_auth_3.webp)
+![Configuring Google OAuth web application origins](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/google_auth_3.webp)
 
 6 - Copy the generated **Client ID** (`GOOGLE_CLIENT_ID`) and **Client Secret** (`GOOGLE_CLIENT_SECRET`).
 
-![Google Auth 4](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/google_auth_4.webp)
+![Copying Google client ID and secret](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/google_auth_4.webp)
 
 
 ## Step 2: Configure the Integration in Your App
diff --git a/packages/integrations-docs/src/integrations_docs/docs/okta_auth.md b/packages/integrations-docs/src/integrations_docs/docs/okta_auth.md
index 55b7e47a2ca..420a1cbc782 100644
--- a/packages/integrations-docs/src/integrations_docs/docs/okta_auth.md
+++ b/packages/integrations-docs/src/integrations_docs/docs/okta_auth.md
@@ -27,11 +27,11 @@ Before connecting, you need to create an OIDC application in the Okta Admin Cons
 
 2 - Click **Create App Integration**
 
-![Okta Auth 1](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/okta_auth_1.png)
+![Creating an Okta app integration](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/okta_auth_1.png)
 
 3 - Select **OIDC – OpenID Connect** and choose **Web Application**
 
-![Okta Auth 2](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/okta_auth_2.png)
+![Selecting OIDC web application in Okta](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/okta_auth_2.png)
 
 4 - Configure your app settings:
    - **Allow wildcard * in sign-in redirect URIs**
@@ -41,13 +41,13 @@ Before connecting, you need to create an OIDC application in the Okta Admin Cons
      `https://{your-sandbox}`
    - Assign to the correct **Group** or **Everyone** depending on your access control
 
-![Okta Auth 3](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/okta_auth_3.png)
+![Configuring Okta sign-in redirect URIs](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/okta_auth_3.png)
 
 5 - Save the app integration.
 
 6 - Copy your **Client ID** (`OKTA_CLIENT_ID`) and **Client Secret** (`OKTA_CLIENT_SECRET`) from the app settings.
 
-![Okta Auth 4](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/okta_auth_4.png)
+![Copying Okta client ID and secret](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/okta_auth_4.png)
 
 
 ## Step 2: Finding Your Okta Issuer URI
@@ -62,7 +62,7 @@ If your Issuer URI is `https://{yourOktaDomain}.okta.com/oauth2/default`
 
 Use `https://{yourOktaDomain}.okta.com`
 
-![Okta Auth 5](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/okta_auth_5.png)
+![Finding the Okta issuer URI](https://raw.githubusercontent.com/reflex-dev/integrations-docs/refs/heads/main/images/docs/okta_auth_5.png)
 
 
 > **Note:** Always use separate Okta apps for dev, staging, and production environments to avoid mixing credentials.

From ebc03c5d34cb37e52ba994afa889f1b1bc33949f Mon Sep 17 00:00:00 2001
From: Alek <alek@reflex.dev>
Date: Fri, 26 Jun 2026 15:58:59 -0700
Subject: [PATCH 4/8] Apply pre-commit ruff formatting to docs code blocks

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 docs/advanced_onboarding/how-reflex-works.md  |  5 +++-
 docs/ai_builder/app_lifecycle/copy_app.md     |  2 +-
 docs/ai_builder/app_lifecycle/deploy_app.md   |  2 +-
 docs/ai_builder/app_lifecycle/download_app.md |  2 +-
 docs/ai_builder/app_lifecycle/fork_app.md     |  2 +-
 docs/ai_builder/app_lifecycle/general.md      |  2 +-
 docs/ai_builder/app_lifecycle/share_app.md    |  2 +-
 docs/ai_builder/features/automated_testing.md |  2 +-
 docs/ai_builder/features/connect_to_github.md |  4 ++--
 docs/ai_builder/features/customization.md     |  4 ++--
 docs/ai_builder/features/editor_modes.md      |  2 +-
 docs/ai_builder/features/image_as_prompt.md   |  2 +-
 .../features/installing_external_packages.md  |  4 ++--
 .../features/integration_shortcut.md          |  2 +-
 docs/ai_builder/features/knowledge.md         |  2 +-
 .../ai_builder/features/restore_checkpoint.md |  2 +-
 docs/ai_builder/features/secrets.md           |  4 ++--
 docs/ai_builder/images.md                     |  2 +-
 docs/ai_builder/overview/templates.md         |  4 ++--
 docs/ai_builder/overview/tutorial.md          |  8 +++----
 .../overview/what_is_reflex_build.md          |  4 ++--
 docs/app/reflex_docs/pages/docs/__init__.py   | 16 +++++++++++--
 docs/assets/overview.md                       | 11 ++++++---
 docs/custom-components/overview.md            |  2 +-
 .../prerequisites-for-publishing.md           |  6 ++---
 docs/getting_started/project-structure.md     |  2 +-
 docs/hosting/app-management.md                | 13 +++++++---
 docs/hosting/custom-domains.md                | 20 ++++++++++++----
 docs/hosting/logs.md                          | 15 ++++++++----
 docs/hosting/machine-types.md                 |  3 ++-
 docs/hosting/regions.md                       |  4 ++--
 docs/hosting/secrets-environment-vars.md      | 10 ++++++--
 docs/library/forms/select-ll.md               |  2 +-
 docs/library/forms/upload.md                  | 23 ++++++++++++++----
 docs/library/layout/aspect_ratio.md           |  2 +-
 docs/library/layout/inset.md                  |  4 ++--
 docs/library/media/image.md                   |  8 ++++---
 docs/library/other/clipboard.md               |  5 +++-
 docs/recipes/auth/login_form.md               |  8 +++----
 docs/recipes/auth/signup_form.md              |  8 +++----
 docs/recipes/content/grid.md                  |  2 +-
 docs/recipes/content/top_banner.md            |  2 +-
 docs/recipes/layout/footer.md                 |  6 ++---
 docs/recipes/layout/navbar.md                 | 24 +++++++++----------
 docs/recipes/layout/sidebar.md                |  4 ++--
 docs/recipes/others/checkboxes.md             |  7 +++++-
 docs/wrapping-react/local-packages.md         |  4 +++-
 47 files changed, 176 insertions(+), 98 deletions(-)

diff --git a/docs/advanced_onboarding/how-reflex-works.md b/docs/advanced_onboarding/how-reflex-works.md
index 140f4e80aea..5ebd52537f7 100644
--- a/docs/advanced_onboarding/how-reflex-works.md
+++ b/docs/advanced_onboarding/how-reflex-works.md
@@ -55,7 +55,10 @@ The diagram below provides a detailed overview of how a Reflex app works. We'll
 
 ```python eval
 rx.el.a(
-    rx.image(src="https://web.reflex-assets.dev/other/architecture.webp", alt='Reflex app architecture diagram'),
+    rx.image(
+        src="https://web.reflex-assets.dev/other/architecture.webp",
+        alt="Reflex app architecture diagram",
+    ),
     href="https://web.reflex-assets.dev/other/architecture.webp",
     target="_blank",
 )
diff --git a/docs/ai_builder/app_lifecycle/copy_app.md b/docs/ai_builder/app_lifecycle/copy_app.md
index 90808a056ed..5230b28918d 100644
--- a/docs/ai_builder/app_lifecycle/copy_app.md
+++ b/docs/ai_builder/app_lifecycle/copy_app.md
@@ -12,7 +12,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/app_lifecycle/copy_light.avif",
-            alt='Copying an app in Reflex AI Builder',
+            alt="Copying an app in Reflex AI Builder",
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
diff --git a/docs/ai_builder/app_lifecycle/deploy_app.md b/docs/ai_builder/app_lifecycle/deploy_app.md
index 1c409c1da7a..fb18372abe7 100644
--- a/docs/ai_builder/app_lifecycle/deploy_app.md
+++ b/docs/ai_builder/app_lifecycle/deploy_app.md
@@ -18,7 +18,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/app_lifecycle/deploy_light.avif",
-            alt='Deploying an app in Reflex AI Builder',
+            alt="Deploying an app in Reflex AI Builder",
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
diff --git a/docs/ai_builder/app_lifecycle/download_app.md b/docs/ai_builder/app_lifecycle/download_app.md
index 7d02df1bb7f..3093612c945 100644
--- a/docs/ai_builder/app_lifecycle/download_app.md
+++ b/docs/ai_builder/app_lifecycle/download_app.md
@@ -13,7 +13,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/app_lifecycle/download_light.avif",
-            alt='Downloading an app in Reflex AI Builder',
+            alt="Downloading an app in Reflex AI Builder",
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
diff --git a/docs/ai_builder/app_lifecycle/fork_app.md b/docs/ai_builder/app_lifecycle/fork_app.md
index bd29ef6996d..b76721dc0f5 100644
--- a/docs/ai_builder/app_lifecycle/fork_app.md
+++ b/docs/ai_builder/app_lifecycle/fork_app.md
@@ -10,7 +10,7 @@ import reflex as rx
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/overview/fork_template_light.avif",
-        alt='Forking an app in Reflex AI Builder',
+        alt="Forking an app in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/app_lifecycle/general.md b/docs/ai_builder/app_lifecycle/general.md
index 71bc342c78b..f81322ebaa7 100644
--- a/docs/ai_builder/app_lifecycle/general.md
+++ b/docs/ai_builder/app_lifecycle/general.md
@@ -11,7 +11,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/app_lifecycle/general_light.avif",
-            alt='General app settings in Reflex AI Builder',
+            alt="General app settings in Reflex AI Builder",
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
diff --git a/docs/ai_builder/app_lifecycle/share_app.md b/docs/ai_builder/app_lifecycle/share_app.md
index da1c2efff4c..1fe634acf67 100644
--- a/docs/ai_builder/app_lifecycle/share_app.md
+++ b/docs/ai_builder/app_lifecycle/share_app.md
@@ -11,7 +11,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/app_lifecycle/share_light.avif",
-            alt='Sharing an app in Reflex AI Builder',
+            alt="Sharing an app in Reflex AI Builder",
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
diff --git a/docs/ai_builder/features/automated_testing.md b/docs/ai_builder/features/automated_testing.md
index 95fb9ee2ec0..5b59ca623bf 100644
--- a/docs/ai_builder/features/automated_testing.md
+++ b/docs/ai_builder/features/automated_testing.md
@@ -16,7 +16,7 @@ rx.el.div(
             "https://web.reflex-assets.dev/ai_builder/features/test_light.webp",
             "https://web.reflex-assets.dev/ai_builder/features/test_dark.webp",
         ),
-        alt='Automated testing in Reflex AI Builder',
+        alt="Automated testing in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/features/connect_to_github.md b/docs/ai_builder/features/connect_to_github.md
index 16ce05abe9f..dd2404971d1 100644
--- a/docs/ai_builder/features/connect_to_github.md
+++ b/docs/ai_builder/features/connect_to_github.md
@@ -16,7 +16,7 @@ The Github integration is important to make sure that you don't lose your progre
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/connecting_to_github.avif",
-        alt='Connecting a Reflex AI Builder app to GitHub',
+        alt="Connecting a Reflex AI Builder app to GitHub",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
@@ -37,7 +37,7 @@ The commit history is a great way to see the changes that you have made to your
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/github_commit_history.avif",
-        alt='GitHub commit history for a Reflex AI Builder app',
+        alt="GitHub commit history for a Reflex AI Builder app",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/features/customization.md b/docs/ai_builder/features/customization.md
index 22d481e492b..3b432fb6f94 100644
--- a/docs/ai_builder/features/customization.md
+++ b/docs/ai_builder/features/customization.md
@@ -24,7 +24,7 @@ rx.el.div(
             "https://web.reflex-assets.dev/ai_builder/features/style_light.webp",
             "https://web.reflex-assets.dev/ai_builder/features/style_dark.webp",
         ),
-        alt='Custom styling options in Reflex AI Builder',
+        alt="Custom styling options in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
@@ -52,7 +52,7 @@ rx.el.div(
             "https://web.reflex-assets.dev/ai_builder/features/theme_light.webp",
             "https://web.reflex-assets.dev/ai_builder/features/theme_dark.webp",
         ),
-        alt='Theme customization in Reflex AI Builder',
+        alt="Theme customization in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/features/editor_modes.md b/docs/ai_builder/features/editor_modes.md
index 15ea733c8d1..c65d23a3812 100644
--- a/docs/ai_builder/features/editor_modes.md
+++ b/docs/ai_builder/features/editor_modes.md
@@ -11,7 +11,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/features/diff_light.avif",
-            alt='Reflex AI Builder editor diff view',
+            alt="Reflex AI Builder editor diff view",
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
diff --git a/docs/ai_builder/features/image_as_prompt.md b/docs/ai_builder/features/image_as_prompt.md
index 489654f3c25..a57fdbc8e91 100644
--- a/docs/ai_builder/features/image_as_prompt.md
+++ b/docs/ai_builder/features/image_as_prompt.md
@@ -15,7 +15,7 @@ Below is an image showing how to upload an image to the AI Builder, you can clic
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/image_upload.avif",
-        alt='Using an image as a prompt in Reflex AI Builder',
+        alt="Using an image as a prompt in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/features/installing_external_packages.md b/docs/ai_builder/features/installing_external_packages.md
index eea0ba580de..48b6b87fae0 100644
--- a/docs/ai_builder/features/installing_external_packages.md
+++ b/docs/ai_builder/features/installing_external_packages.md
@@ -20,7 +20,7 @@ Enter the name of the package you want to install in the chat interface. The AI
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/external_packages_input.avif",
-        alt='Installing external packages via the chat interface',
+        alt="Installing external packages via the chat interface",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
@@ -36,7 +36,7 @@ Add the package to the `requirements.txt` file and then save the app. This will
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/external_packages_requirements.avif",
-        alt='Installing external packages via requirements.txt',
+        alt="Installing external packages via requirements.txt",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/features/integration_shortcut.md b/docs/ai_builder/features/integration_shortcut.md
index 944a11ac3a7..1bf0c381452 100644
--- a/docs/ai_builder/features/integration_shortcut.md
+++ b/docs/ai_builder/features/integration_shortcut.md
@@ -17,7 +17,7 @@ rx.el.div(
             "https://web.reflex-assets.dev/ai_builder/features/shortcut_light.webp",
             "https://web.reflex-assets.dev/ai_builder/features/shortcut_dark.webp",
         ),
-        alt='Integrations shortcut in Reflex AI Builder',
+        alt="Integrations shortcut in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/features/knowledge.md b/docs/ai_builder/features/knowledge.md
index 4cfcf01ccde..8aa04d29878 100644
--- a/docs/ai_builder/features/knowledge.md
+++ b/docs/ai_builder/features/knowledge.md
@@ -10,7 +10,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/features/knowledge_light.avif",
-            alt='Reflex AI Builder knowledge section',
+            alt="Reflex AI Builder knowledge section",
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
diff --git a/docs/ai_builder/features/restore_checkpoint.md b/docs/ai_builder/features/restore_checkpoint.md
index 686a831bc58..a80409091b0 100644
--- a/docs/ai_builder/features/restore_checkpoint.md
+++ b/docs/ai_builder/features/restore_checkpoint.md
@@ -10,7 +10,7 @@ import reflex as rx
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/features/restore_light.avif",
-        alt='Restoring a checkpoint in Reflex AI Builder',
+        alt="Restoring a checkpoint in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/features/secrets.md b/docs/ai_builder/features/secrets.md
index aec50e5e884..dbd677e0ca1 100644
--- a/docs/ai_builder/features/secrets.md
+++ b/docs/ai_builder/features/secrets.md
@@ -11,7 +11,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/features/secrets_light.avif",
-            alt='Adding secrets in Reflex AI Builder',
+            alt="Adding secrets in Reflex AI Builder",
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
@@ -50,7 +50,7 @@ import reflex as rx
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/features/secret_bulk_light.avif",
-        alt='Adding secrets in bulk with the raw editor',
+        alt="Adding secrets in bulk with the raw editor",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/images.md b/docs/ai_builder/images.md
index fb04baf1fe0..984fec55b58 100644
--- a/docs/ai_builder/images.md
+++ b/docs/ai_builder/images.md
@@ -32,7 +32,7 @@ import reflex as rx
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/add_images_to_assets.avif",
-        alt='Uploading an image to app assets in Reflex AI Builder',
+        alt="Uploading an image to app assets in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/overview/templates.md b/docs/ai_builder/overview/templates.md
index 245762d46cb..d53892d5d22 100644
--- a/docs/ai_builder/overview/templates.md
+++ b/docs/ai_builder/overview/templates.md
@@ -10,7 +10,7 @@ import reflex as rx
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/overview/templates_light.avif",
-        alt='Reflex AI Builder templates gallery',
+        alt="Reflex AI Builder templates gallery",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
@@ -26,7 +26,7 @@ To use a template, simply click the template and then in the bottom right corner
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/overview/fork_template_light.avif",
-        alt='Forking a template in Reflex AI Builder',
+        alt="Forking a template in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/overview/tutorial.md b/docs/ai_builder/overview/tutorial.md
index c12df266455..9eaf72a074f 100644
--- a/docs/ai_builder/overview/tutorial.md
+++ b/docs/ai_builder/overview/tutorial.md
@@ -33,7 +33,7 @@ import reflex as rx
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/overview/tutorial_1_light.avif",
-        alt='Creating a dashboard in Reflex AI Builder',
+        alt="Creating a dashboard in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
@@ -56,7 +56,7 @@ Your dashboard now becomes much more useful with real-time filtering. Users can
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/overview/tutorial_2_light.avif",
-        alt='Adding interactive filtering in Reflex AI Builder',
+        alt="Adding interactive filtering in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
@@ -81,7 +81,7 @@ Your app now has full CRUD capability for employee records. The modal form provi
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/overview/tutorial_3_light.avif",
-        alt='Enabling data entry in Reflex AI Builder',
+        alt="Enabling data entry in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
@@ -106,7 +106,7 @@ Your app now has proper navigation between the dashboard and chat functionality.
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/overview/tutorial_4_light.avif",
-        alt='Building a multi-page app in Reflex AI Builder',
+        alt="Building a multi-page app in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
diff --git a/docs/ai_builder/overview/what_is_reflex_build.md b/docs/ai_builder/overview/what_is_reflex_build.md
index 7789ccbf207..efbe8e825f1 100644
--- a/docs/ai_builder/overview/what_is_reflex_build.md
+++ b/docs/ai_builder/overview/what_is_reflex_build.md
@@ -130,7 +130,7 @@ def _docs_app_section_features_small_screen(feature: dict):
     return rx.el.div(
         rx.image(
             src=feature["img"],
-            alt='Reflex Build feature illustration',
+            alt="Reflex Build feature illustration",
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
@@ -180,7 +180,7 @@ def _docs_app_sections():
         rx.el.div(
             rx.image(
                 src=features_data[0]["img"],
-                alt='Reflex Build feature illustration',
+                alt="Reflex Build feature illustration",
                 class_name="rounded-md h-auto",
                 border=f"0.81px solid {rx.color('slate', 5)}",
             ),
diff --git a/docs/app/reflex_docs/pages/docs/__init__.py b/docs/app/reflex_docs/pages/docs/__init__.py
index 7de6b1a283b..5309db1c535 100644
--- a/docs/app/reflex_docs/pages/docs/__init__.py
+++ b/docs/app/reflex_docs/pages/docs/__init__.py
@@ -226,8 +226,20 @@ def extract_doc_description(
         text = re.sub(r"```.*?```", "", markdown_text, flags=re.DOTALL)
         para_lines: list[str] = []
         skip_prefixes = (
-            "#", ">", "---", "import ", "from ", "|", "<", "- ", "* ", "rx.",
-            "```", "1.", "2.", "3.",
+            "#",
+            ">",
+            "---",
+            "import ",
+            "from ",
+            "|",
+            "<",
+            "- ",
+            "* ",
+            "rx.",
+            "```",
+            "1.",
+            "2.",
+            "3.",
         )
         for raw in text.splitlines():
             line = raw.strip()
diff --git a/docs/assets/overview.md b/docs/assets/overview.md
index 9a8c2bb533f..f4166141bb1 100644
--- a/docs/assets/overview.md
+++ b/docs/assets/overview.md
@@ -31,7 +31,9 @@ assets
 Then you can display it using a `rx.image` component:
 
 ```python demo
-rx.image(src="https://web.reflex-assets.dev/other/Reflex.svg", alt='Reflex logo', width="5em")
+rx.image(
+    src="https://web.reflex-assets.dev/other/Reflex.svg", alt="Reflex logo", width="5em"
+)
 ```
 
 ```md alert
@@ -47,7 +49,7 @@ The `rx.asset` function provides a more flexible way to reference assets in your
 Local assets are stored in the app's `assets/` directory and are referenced using `rx.asset`:
 
 ```python demo
-rx.image(src=rx.asset("Reflex.svg"), alt='Reflex logo', width="5em")
+rx.image(src=rx.asset("Reflex.svg"), alt="Reflex logo", width="5em")
 ```
 
 #### Shared Assets
@@ -76,7 +78,10 @@ import reflex as rx
 
 # image.png is located in a subfolder next to this Python file
 def my_component_with_image():
-    return rx.image(src=rx.asset("image.png", shared=True, subfolder="images"), alt='Example image asset')
+    return rx.image(
+        src=rx.asset("image.png", shared=True, subfolder="images"),
+        alt="Example image asset",
+    )
 ```
 
 ```md alert
diff --git a/docs/custom-components/overview.md b/docs/custom-components/overview.md
index fbaaea1df3d..fa23d59d471 100644
--- a/docs/custom-components/overview.md
+++ b/docs/custom-components/overview.md
@@ -14,7 +14,7 @@ Check out the custom components gallery [here](/docs/custom-components/overview)
 rx.center(
     rx.image(
         src="https://web.reflex-assets.dev/custom_components/pypi_reflex_custom_components.webp",
-        alt='PyPI page listing Reflex custom components',
+        alt="PyPI page listing Reflex custom components",
         width="400px",
         border_radius="15px",
         border="1px solid",
diff --git a/docs/custom-components/prerequisites-for-publishing.md b/docs/custom-components/prerequisites-for-publishing.md
index fedc1a64606..ac852ffe86e 100644
--- a/docs/custom-components/prerequisites-for-publishing.md
+++ b/docs/custom-components/prerequisites-for-publishing.md
@@ -20,7 +20,7 @@ It is straightforward to create accounts and API tokens with PyPI. There is offi
 rx.center(
     rx.image(
         src="https://web.reflex-assets.dev/custom_components/pypi_register.webp",
-        alt='PyPI account registration page',
+        alt="PyPI account registration page",
         style=image_style,
         margin_bottom="16px",
         loading="lazy",
@@ -34,7 +34,7 @@ A user can use username and password to authenticate with PyPI when publishing.
 rx.center(
     rx.image(
         src="https://web.reflex-assets.dev/custom_components/pypi_account_settings.webp",
-        alt='PyPI account settings page',
+        alt="PyPI account settings page",
         style=image_style,
         margin_bottom="16px",
         loading="lazy",
@@ -48,7 +48,7 @@ Scroll down to the API tokens section and click on the "Add API token" button. F
 rx.center(
     rx.image(
         src="https://web.reflex-assets.dev/custom_components/pypi_api_tokens.webp",
-        alt='PyPI API tokens settings page',
+        alt="PyPI API tokens settings page",
         style=image_style,
         width="700px",
         loading="lazy",
diff --git a/docs/getting_started/project-structure.md b/docs/getting_started/project-structure.md
index a4289d39ecb..efc7afd6a41 100644
--- a/docs/getting_started/project-structure.md
+++ b/docs/getting_started/project-structure.md
@@ -53,7 +53,7 @@ The `assets` directory is where you can store any static assets you want to be p
 For example, if you save an image to `assets/image.png` you can display it from your app like this:
 
 ```python
-rx.image(src="https://web.reflex-assets.dev/other/image.png", alt='Example image asset')
+rx.image(src="https://web.reflex-assets.dev/other/image.png", alt="Example image asset")
 ```
 
 ## Main Project
diff --git a/docs/hosting/app-management.md b/docs/hosting/app-management.md
index c1599aac519..278c1d36820 100644
--- a/docs/hosting/app-management.md
+++ b/docs/hosting/app-management.md
@@ -18,7 +18,8 @@ To stop an app follow the arrow in the image below and press on the `Stop app` b
 ```python eval
 rx.image(
     src="https://web.reflex-assets.dev/other/stopping_app.webp",
-    alt='Stopping an app in Reflex Cloud', padding_bottom="20px"
+    alt="Stopping an app in Reflex Cloud",
+    padding_bottom="20px",
 )
 ```
 
@@ -32,13 +33,19 @@ rx.image(
 To delete an app click on the `Settings` tab in the Cloud UI on the app page.
 
 ```python eval
-rx.image(src="https://web.reflex-assets.dev/other/environment_variables.webp", alt='App environment variables in Reflex Cloud')
+rx.image(
+    src="https://web.reflex-assets.dev/other/environment_variables.webp",
+    alt="App environment variables in Reflex Cloud",
+)
 ```
 
 Then click on the `Danger` tab as shown below.
 
 ```python eval
-rx.image(src="https://web.reflex-assets.dev/other/deleting_app.webp", alt='Deleting an app in Reflex Cloud')
+rx.image(
+    src="https://web.reflex-assets.dev/other/deleting_app.webp",
+    alt="Deleting an app in Reflex Cloud",
+)
 ```
 
 Here there is a `Delete app` button. Pressing this button will delete the app and all of its data. This action is irreversible.
diff --git a/docs/hosting/custom-domains.md b/docs/hosting/custom-domains.md
index d07ee6adb68..eb1a220889b 100644
--- a/docs/hosting/custom-domains.md
+++ b/docs/hosting/custom-domains.md
@@ -23,7 +23,10 @@ Once you have purchased your domain, you can add it to your Reflex Cloud app by
 2 - Once your app is deployed click the `Custom Domain` tab and add your custom domain to the input field and press the Add domain button. You should now see a page like below:
 
 ```python eval
-rx.image(src="https://web.reflex-assets.dev/other/custom-domains-DNS-inputs.webp", alt='Custom domain DNS record inputs')
+rx.image(
+    src="https://web.reflex-assets.dev/other/custom-domains-DNS-inputs.webp",
+    alt="Custom domain DNS record inputs",
+)
 ```
 
 ```python eval
@@ -33,7 +36,10 @@ rx.box(height="20px")
 3 - On the domain registrar's website, navigate to the DNS settings for your domain. It should look something like the image below:
 
 ```python eval
-rx.image(src="https://web.reflex-assets.dev/other/custom-domains-DNS-before.webp", alt='DNS settings before adding custom domain records')
+rx.image(
+    src="https://web.reflex-assets.dev/other/custom-domains-DNS-before.webp",
+    alt="DNS settings before adding custom domain records",
+)
 ```
 
 ```python eval
@@ -43,7 +49,10 @@ rx.box(height="20px")
 4 - Add all four of the DNS records provided by Reflex Cloud to your domain registrar's DNS settings. If there is already an A name record, delete it and replace it with the one provided by Reflex Cloud. Your DNS settings should look like the image below:
 
 ```python eval
-rx.image(src="https://web.reflex-assets.dev/other/custom-domains-DNS-after.webp", alt='DNS settings after adding custom domain records')
+rx.image(
+    src="https://web.reflex-assets.dev/other/custom-domains-DNS-after.webp",
+    alt="DNS settings after adding custom domain records",
+)
 ```
 
 ```md alert warning
@@ -63,7 +72,10 @@ rx.box(height="20px")
 5 - Once you have added the DNS records, refresh the page on the Reflex Cloud page (it may take a few minutes to a few hours to update successfully). If the records are correct, you should see a success message like the one below:
 
 ```python eval
-rx.image(src="https://web.reflex-assets.dev/other/custom-domains-success.webp", alt='Custom domain successfully configured')
+rx.image(
+    src="https://web.reflex-assets.dev/other/custom-domains-success.webp",
+    alt="Custom domain successfully configured",
+)
 ```
 
 ```python eval
diff --git a/docs/hosting/logs.md b/docs/hosting/logs.md
index 3593c0183b5..b9983640140 100644
--- a/docs/hosting/logs.md
+++ b/docs/hosting/logs.md
@@ -11,7 +11,8 @@ To view the app logs follow the arrow in the image below and press on the `Logs`
 ```python eval
 rx.image(
     src="https://web.reflex-assets.dev/other/view_logs.webp",
-    alt='Viewing app logs in Reflex Cloud', padding_bottom="20px"
+    alt="Viewing app logs in Reflex Cloud",
+    padding_bottom="20px",
 )
 ```
 
@@ -25,7 +26,10 @@ rx.image(
 To view the deployment history follow the arrow in the image below and press on the `Deployments`.
 
 ```python eval
-rx.image(src="https://web.reflex-assets.dev/other/view_deployment_logs.webp", alt='Viewing deployment logs in Reflex Cloud')
+rx.image(
+    src="https://web.reflex-assets.dev/other/view_deployment_logs.webp",
+    alt="Viewing deployment logs in Reflex Cloud",
+)
 ```
 
 This brings you to the page below where you can see the deployment history of your app. Click on deployment you wish to explore further.
@@ -33,7 +37,7 @@ This brings you to the page below where you can see the deployment history of yo
 ```python eval
 rx.image(
     src="https://web.reflex-assets.dev/other/view_deployment_logs_2.webp",
-    alt='Deployment logs and history in Reflex Cloud',
+    alt="Deployment logs and history in Reflex Cloud",
     padding_bottom="20px",
 )
 ```
@@ -46,5 +50,8 @@ rx.image(
 This brings you to the page below where you can view the deployment logs of your app by clicking the `Build logs` dropdown.
 
 ```python eval
-rx.image(src="https://web.reflex-assets.dev/other/view_deployment_logs_3.webp", alt='CLI command to view deployment history')
+rx.image(
+    src="https://web.reflex-assets.dev/other/view_deployment_logs_3.webp",
+    alt="CLI command to view deployment history",
+)
 ```
\ No newline at end of file
diff --git a/docs/hosting/machine-types.md b/docs/hosting/machine-types.md
index 7449daebd43..38525c418d6 100644
--- a/docs/hosting/machine-types.md
+++ b/docs/hosting/machine-types.md
@@ -14,7 +14,8 @@ To scale your VM in the Cloud UI, click on the `Settings` tab in the Cloud UI on
 ```python eval
 rx.image(
     src="https://web.reflex-assets.dev/other/scaling_vms.webp",
-    alt='Selecting machine types for scaling VMs', padding_bottom="20px"
+    alt="Selecting machine types for scaling VMs",
+    padding_bottom="20px",
 )
 ```
 
diff --git a/docs/hosting/regions.md b/docs/hosting/regions.md
index e5ac24211d5..c76471eba7f 100644
--- a/docs/hosting/regions.md
+++ b/docs/hosting/regions.md
@@ -56,7 +56,7 @@ To scale your app to multiple regions in the Cloud UI, click on the `Settings` t
 ```python eval
 rx.image(
     src="https://web.reflex-assets.dev/other/scaling_regions.webp",
-    alt='Selecting deployment regions for scaling',
+    alt="Selecting deployment regions for scaling",
     padding_bottom="20px",
 )
 ```
@@ -96,7 +96,7 @@ rx.el.table(
                     rx.el.div(
                         rx.image(
                             src=f"https://build.reflex.dev/flags/{COUNTRIES_CODES[region]}.svg",
-                            alt='Region country flag',
+                            alt="Region country flag",
                             class_name="rounded-[2px] mr-2 w-5 h-4",
                         ),
                         REGIONS_DICT[region],
diff --git a/docs/hosting/secrets-environment-vars.md b/docs/hosting/secrets-environment-vars.md
index 9e37bf53ec4..513b80b2c89 100644
--- a/docs/hosting/secrets-environment-vars.md
+++ b/docs/hosting/secrets-environment-vars.md
@@ -39,13 +39,19 @@ You access the values of `envs` by referencing `os.environ` with their names as
 To find the secrets tab, click on the `Settings` tab in the Cloud UI on the app page.
 
 ```python eval
-rx.image(src="https://web.reflex-assets.dev/other/environment_variables.webp", alt='Environment variables panel in Reflex Cloud UI')
+rx.image(
+    src="https://web.reflex-assets.dev/other/environment_variables.webp",
+    alt="Environment variables panel in Reflex Cloud UI",
+)
 ```
 
 Then click on the `Secrets` tab as shown below.
 
 ```python eval
-rx.image(src="https://web.reflex-assets.dev/other/environment_variables_2.webp", alt='Adding environment variables in Reflex Cloud UI')
+rx.image(
+    src="https://web.reflex-assets.dev/other/environment_variables_2.webp",
+    alt="Adding environment variables in Reflex Cloud UI",
+)
 ```
 
 From here you can add or edit your environment variables. You will need to restart your app for these changes to take effect.
diff --git a/docs/library/forms/select-ll.md b/docs/library/forms/select-ll.md
index dfd1c9fe29d..7a63b29fb02 100644
--- a/docs/library/forms/select-ll.md
+++ b/docs/library/forms/select-ll.md
@@ -248,7 +248,7 @@ rx.card(
     rx.flex(
         rx.image(
             src="https://web.reflex-assets.dev/other/reflex_banner.png",
-            alt='Reflex banner image',
+            alt="Reflex banner image",
             width="100%",
             height="auto",
         ),
diff --git a/docs/library/forms/upload.md b/docs/library/forms/upload.md
index ade2d40bcf2..ee340206a58 100644
--- a/docs/library/forms/upload.md
+++ b/docs/library/forms/upload.md
@@ -37,7 +37,10 @@ def upload_component():
     return rx.vstack(
         rx.upload(id="upload"),
         rx.button("Upload", on_click=State.handle_upload(rx.upload_files("upload"))),
-        rx.foreach(State.uploaded_files, lambda f: rx.image(src=rx.get_upload_url(f), alt='Uploaded file preview')),
+        rx.foreach(
+            State.uploaded_files,
+            lambda f: rx.image(src=rx.get_upload_url(f), alt="Uploaded file preview"),
+        ),
     )
 ```
 
@@ -138,7 +141,9 @@ def upload_component():
         # Display uploaded files using rx.get_upload_url()
         rx.foreach(
             State.uploaded_files,
-            lambda filename: rx.image(src=rx.get_upload_url(filename), alt='Uploaded file preview'),
+            lambda filename: rx.image(
+                src=rx.get_upload_url(filename), alt="Uploaded file preview"
+            ),
         ),
     )
 ```
@@ -148,7 +153,10 @@ def upload_component():
 Below is an example of how to allow multiple file uploads (in this case images).
 
 ```python demo box
-rx.image(src="https://web.reflex-assets.dev/other/upload.webp", alt='Multiple file upload component example')
+rx.image(
+    src="https://web.reflex-assets.dev/other/upload.webp",
+    alt="Multiple file upload component example",
+)
 ```
 
 ```python
@@ -203,7 +211,12 @@ def index():
             "Clear",
             on_click=rx.clear_selected_files("upload1"),
         ),
-        rx.foreach(State.img, lambda img: rx.image(src=rx.get_upload_url(img), alt='Uploaded file preview')),
+        rx.foreach(
+            State.img,
+            lambda img: rx.image(
+                src=rx.get_upload_url(img), alt="Uploaded file preview"
+            ),
+        ),
         padding="5em",
     )
 ```
@@ -352,7 +365,7 @@ def index():
             rx.foreach(
                 State.img,
                 lambda img: rx.vstack(
-                    rx.image(src=rx.get_upload_url(img), alt='Uploaded file preview'),
+                    rx.image(src=rx.get_upload_url(img), alt="Uploaded file preview"),
                     rx.text(img),
                 ),
             ),
diff --git a/docs/library/layout/aspect_ratio.md b/docs/library/layout/aspect_ratio.md
index 5233fb1a9d3..3dd943ef63e 100644
--- a/docs/library/layout/aspect_ratio.md
+++ b/docs/library/layout/aspect_ratio.md
@@ -73,7 +73,7 @@ rx.flex(
             rx.aspect_ratio(
                 rx.image(
                     src="https://web.reflex-assets.dev/other/logo.jpg",
-                    alt='Reflex logo',
+                    alt="Reflex logo",
                     width="100%",
                     height="100%",
                 ),
diff --git a/docs/library/layout/inset.md b/docs/library/layout/inset.md
index 0cc1d43e329..ad69c81e349 100644
--- a/docs/library/layout/inset.md
+++ b/docs/library/layout/inset.md
@@ -29,7 +29,7 @@ rx.card(
     rx.inset(
         rx.image(
             src="https://web.reflex-assets.dev/other/reflex_banner.png",
-            alt='Reflex banner image',
+            alt="Reflex banner image",
             width="100%",
             height="auto",
         ),
@@ -55,7 +55,7 @@ rx.card(
     rx.inset(
         rx.image(
             src="https://web.reflex-assets.dev/other/reflex_banner.png",
-            alt='Reflex banner image',
+            alt="Reflex banner image",
             width="100%",
             height="auto",
         ),
diff --git a/docs/library/media/image.md b/docs/library/media/image.md
index 46a40d55d90..77108d51070 100644
--- a/docs/library/media/image.md
+++ b/docs/library/media/image.md
@@ -15,7 +15,9 @@ This could either be a local path from the assets folder or an external link.
 ```python demo
 rx.image(
     src="https://web.reflex-assets.dev/other/logo.jpg",
-    alt='Reflex logo', width="100px", height="auto"
+    alt="Reflex logo",
+    width="100px",
+    height="auto",
 )
 ```
 
@@ -24,7 +26,7 @@ Image composes a box and can be styled similarly.
 ```python demo
 rx.image(
     src="https://web.reflex-assets.dev/other/logo.jpg",
-    alt='Reflex logo',
+    alt="Reflex logo",
     width="100px",
     height="auto",
     border_radius="15px 50px",
@@ -49,7 +51,7 @@ class ImageState(rx.State):
 
 
 def image_pil_example():
-    return rx.vstack(rx.image(src=ImageState.image, alt='Dynamically generated image'))
+    return rx.vstack(rx.image(src=ImageState.image, alt="Dynamically generated image"))
 ```
 
 ```md alert info
diff --git a/docs/library/other/clipboard.md b/docs/library/other/clipboard.md
index 84066bed264..46867e00592 100644
--- a/docs/library/other/clipboard.md
+++ b/docs/library/other/clipboard.md
@@ -73,6 +73,9 @@ def clipboard_image_example():
             rx.input(placeholder="Paste Image (prevent default)"),
             on_paste=ClipboardPasteImageState.on_paste.prevent_default,
         ),
-        rx.image(src=ClipboardPasteImageState.last_image_uri, alt='Image pasted from clipboard'),
+        rx.image(
+            src=ClipboardPasteImageState.last_image_uri,
+            alt="Image pasted from clipboard",
+        ),
     )
 ```
diff --git a/docs/recipes/auth/login_form.md b/docs/recipes/auth/login_form.md
index c956664d62a..a1bd782dfe2 100644
--- a/docs/recipes/auth/login_form.md
+++ b/docs/recipes/auth/login_form.md
@@ -15,7 +15,7 @@ def login_default() -> rx.Component:
             rx.center(
                 rx.image(
                     src="https://web.reflex-assets.dev/other/logo.jpg",
-                    alt='Reflex logo',
+                    alt="Reflex logo",
                     width="2.5em",
                     height="auto",
                     border_radius="25%",
@@ -88,7 +88,7 @@ def login_default_icons() -> rx.Component:
             rx.center(
                 rx.image(
                     src="https://web.reflex-assets.dev/other/logo.jpg",
-                    alt='Reflex logo',
+                    alt="Reflex logo",
                     width="2.5em",
                     height="auto",
                     border_radius="25%",
@@ -166,7 +166,7 @@ def login_single_thirdparty() -> rx.Component:
             rx.flex(
                 rx.image(
                     src="https://web.reflex-assets.dev/other/logo.jpg",
-                    alt='Reflex logo',
+                    alt="Reflex logo",
                     width="2.5em",
                     height="auto",
                     border_radius="25%",
@@ -259,7 +259,7 @@ def login_multiple_thirdparty() -> rx.Component:
             rx.flex(
                 rx.image(
                     src="https://web.reflex-assets.dev/other/logo.jpg",
-                    alt='Reflex logo',
+                    alt="Reflex logo",
                     width="2.5em",
                     height="auto",
                     border_radius="25%",
diff --git a/docs/recipes/auth/signup_form.md b/docs/recipes/auth/signup_form.md
index 0ea9071901f..c7758cc1472 100644
--- a/docs/recipes/auth/signup_form.md
+++ b/docs/recipes/auth/signup_form.md
@@ -15,7 +15,7 @@ def signup_default() -> rx.Component:
             rx.center(
                 rx.image(
                     src="https://web.reflex-assets.dev/other/logo.jpg",
-                    alt='Reflex logo',
+                    alt="Reflex logo",
                     width="2.5em",
                     height="auto",
                     border_radius="25%",
@@ -96,7 +96,7 @@ def signup_default_icons() -> rx.Component:
             rx.center(
                 rx.image(
                     src="https://web.reflex-assets.dev/other/logo.jpg",
-                    alt='Reflex logo',
+                    alt="Reflex logo",
                     width="2.5em",
                     height="auto",
                     border_radius="25%",
@@ -183,7 +183,7 @@ def signup_single_thirdparty() -> rx.Component:
             rx.flex(
                 rx.image(
                     src="https://web.reflex-assets.dev/other/logo.jpg",
-                    alt='Reflex logo',
+                    alt="Reflex logo",
                     width="2.5em",
                     height="auto",
                     border_radius="25%",
@@ -284,7 +284,7 @@ def signup_multiple_thirdparty() -> rx.Component:
             rx.flex(
                 rx.image(
                     src="https://web.reflex-assets.dev/other/logo.jpg",
-                    alt='Reflex logo',
+                    alt="Reflex logo",
                     width="2.5em",
                     height="auto",
                     border_radius="25%",
diff --git a/docs/recipes/content/grid.md b/docs/recipes/content/grid.md
index db08b49ae5d..9dd83ce3c30 100644
--- a/docs/recipes/content/grid.md
+++ b/docs/recipes/content/grid.md
@@ -38,7 +38,7 @@ rx.grid(
             rx.inset(
                 rx.image(
                     src="https://web.reflex-assets.dev/other/reflex_banner.png",
-                    alt='Reflex banner image',
+                    alt="Reflex banner image",
                     width="100%",
                     height="auto",
                 ),
diff --git a/docs/recipes/content/top_banner.md b/docs/recipes/content/top_banner.md
index 06147820ef5..efc9a2ffd75 100644
--- a/docs/recipes/content/top_banner.md
+++ b/docs/recipes/content/top_banner.md
@@ -90,7 +90,7 @@ class TopBannerSignup(rx.ComponentState):
             rx.flex(
                 rx.image(
                     src="https://web.reflex-assets.dev/other/logo.jpg",
-                    alt='Reflex logo',
+                    alt="Reflex logo",
                     width="2em",
                     height="auto",
                     border_radius="25%",
diff --git a/docs/recipes/layout/footer.md b/docs/recipes/layout/footer.md
index 73144454ee8..87587c8f974 100644
--- a/docs/recipes/layout/footer.md
+++ b/docs/recipes/layout/footer.md
@@ -65,7 +65,7 @@ def footer() -> rx.Component:
                     rx.hstack(
                         rx.image(
                             src="https://web.reflex-assets.dev/other/logo.jpg",
-                            alt='Reflex logo',
+                            alt="Reflex logo",
                             width="2.25em",
                             height="auto",
                             border_radius="25%",
@@ -193,7 +193,7 @@ def footer_newsletter() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
-                        alt='Reflex logo',
+                        alt="Reflex logo",
                         width="2em",
                         height="auto",
                         border_radius="25%",
@@ -303,7 +303,7 @@ def footer_three_columns() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
-                        alt='Reflex logo',
+                        alt="Reflex logo",
                         width="2em",
                         height="auto",
                         border_radius="25%",
diff --git a/docs/recipes/layout/navbar.md b/docs/recipes/layout/navbar.md
index 7d86435ae92..0817dd97306 100644
--- a/docs/recipes/layout/navbar.md
+++ b/docs/recipes/layout/navbar.md
@@ -28,7 +28,7 @@ def navbar() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
-                        alt='Reflex logo',
+                        alt="Reflex logo",
                         width="2.25em",
                         height="auto",
                         border_radius="25%",
@@ -53,7 +53,7 @@ def navbar() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
-                        alt='Reflex logo',
+                        alt="Reflex logo",
                         width="2em",
                         height="auto",
                         border_radius="25%",
@@ -98,7 +98,7 @@ def navbar_dropdown() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
-                        alt='Reflex logo',
+                        alt="Reflex logo",
                         width="2.25em",
                         height="auto",
                         border_radius="25%",
@@ -138,7 +138,7 @@ def navbar_dropdown() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
-                        alt='Reflex logo',
+                        alt="Reflex logo",
                         width="2em",
                         height="auto",
                         border_radius="25%",
@@ -187,7 +187,7 @@ def navbar_searchbar() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
-                        alt='Reflex logo',
+                        alt="Reflex logo",
                         width="2.25em",
                         height="auto",
                         border_radius="25%",
@@ -211,7 +211,7 @@ def navbar_searchbar() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
-                        alt='Reflex logo',
+                        alt="Reflex logo",
                         width="2em",
                         height="auto",
                         border_radius="25%",
@@ -262,7 +262,7 @@ def navbar_icons() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
-                        alt='Reflex logo',
+                        alt="Reflex logo",
                         width="2.25em",
                         height="auto",
                         border_radius="25%",
@@ -286,7 +286,7 @@ def navbar_icons() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
-                        alt='Reflex logo',
+                        alt="Reflex logo",
                         width="2em",
                         height="auto",
                         border_radius="25%",
@@ -331,7 +331,7 @@ def navbar_buttons() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
-                        alt='Reflex logo',
+                        alt="Reflex logo",
                         width="2.25em",
                         height="auto",
                         border_radius="25%",
@@ -361,7 +361,7 @@ def navbar_buttons() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
-                        alt='Reflex logo',
+                        alt="Reflex logo",
                         width="2em",
                         height="auto",
                         border_radius="25%",
@@ -409,7 +409,7 @@ def navbar_user() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
-                        alt='Reflex logo',
+                        alt="Reflex logo",
                         width="2.25em",
                         height="auto",
                         border_radius="25%",
@@ -445,7 +445,7 @@ def navbar_user() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
-                        alt='Reflex logo',
+                        alt="Reflex logo",
                         width="2em",
                         height="auto",
                         border_radius="25%",
diff --git a/docs/recipes/layout/sidebar.md b/docs/recipes/layout/sidebar.md
index b164a9fddcf..cb3bf4b7294 100644
--- a/docs/recipes/layout/sidebar.md
+++ b/docs/recipes/layout/sidebar.md
@@ -86,7 +86,7 @@ def sidebar() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
-                        alt='Reflex logo',
+                        alt="Reflex logo",
                         width="2.25em",
                         height="auto",
                         border_radius="25%",
@@ -188,7 +188,7 @@ def sidebar_bottom_profile() -> rx.Component:
                 rx.hstack(
                     rx.image(
                         src="https://web.reflex-assets.dev/other/logo.jpg",
-                        alt='Reflex logo',
+                        alt="Reflex logo",
                         width="2.25em",
                         height="auto",
                         border_radius="25%",
diff --git a/docs/recipes/others/checkboxes.md b/docs/recipes/others/checkboxes.md
index f8cbe766003..2bf5be09c0a 100644
--- a/docs/recipes/others/checkboxes.md
+++ b/docs/recipes/others/checkboxes.md
@@ -9,7 +9,12 @@ A smart checkboxes group where you can track all checked boxes, as well as place
 ## Recipe
 
 ```python eval
-rx.center(rx.image(src="https://web.reflex-assets.dev/templates/smart_checkboxes.webp", alt='Smart checkboxes recipe screenshot'))
+rx.center(
+    rx.image(
+        src="https://web.reflex-assets.dev/templates/smart_checkboxes.webp",
+        alt="Smart checkboxes recipe screenshot",
+    )
+)
 ```
 
 This recipe use a `dict[str, bool]` for the checkboxes state tracking.
diff --git a/docs/wrapping-react/local-packages.md b/docs/wrapping-react/local-packages.md
index 429c8fdb85d..86e9e1968e8 100644
--- a/docs/wrapping-react/local-packages.md
+++ b/docs/wrapping-react/local-packages.md
@@ -29,7 +29,9 @@ class Hello(rx.Component):
         return rx.hstack(
             rx.image(
                 src=rx.asset("wave.svg", shared=True),
-                alt='Wave SVG asset', width="50px", height="50px"
+                alt="Wave SVG asset",
+                width="50px",
+                height="50px",
             ),
             rx.heading("Hello ", *children),
             **props,

From c4722443571f10e9037cd2738a768975014c3f4e Mon Sep 17 00:00:00 2001
From: Alek <alek@reflex.dev>
Date: Fri, 26 Jun 2026 16:16:38 -0700
Subject: [PATCH 5/8] =?UTF-8?q?SEO:=20address=20review=20=E2=80=94=20broad?=
 =?UTF-8?q?en=20numbered-list=20skip=20+=20bound=20title=20fallback?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

extract_doc_description now skips ordered-list items 1.-9. (was 1.-3.) so later numbered items aren't pulled into descriptions; the bare-title fallback is now length-checked, dropping to the unsuffixed title when even that would exceed ~60 chars.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 docs/app/reflex_docs/pages/docs/__init__.py       | 4 +---
 docs/app/reflex_docs/templates/docpage/docpage.py | 5 ++++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/docs/app/reflex_docs/pages/docs/__init__.py b/docs/app/reflex_docs/pages/docs/__init__.py
index 5309db1c535..08dd6962707 100644
--- a/docs/app/reflex_docs/pages/docs/__init__.py
+++ b/docs/app/reflex_docs/pages/docs/__init__.py
@@ -237,9 +237,7 @@ def extract_doc_description(
             "* ",
             "rx.",
             "```",
-            "1.",
-            "2.",
-            "3.",
+            *(f"{n}." for n in range(1, 10)),
         )
         for raw in text.splitlines():
             line = raw.strip()
diff --git a/docs/app/reflex_docs/templates/docpage/docpage.py b/docs/app/reflex_docs/templates/docpage/docpage.py
index 06ccb4713eb..41d1bf685c4 100644
--- a/docs/app/reflex_docs/templates/docpage/docpage.py
+++ b/docs/app/reflex_docs/templates/docpage/docpage.py
@@ -1064,8 +1064,11 @@ def wrapper(*args, **kwargs) -> rx.Component:
                 if category
                 else f"{title} · Reflex Docs"
             )
+            fallback = f"{title} · Reflex Docs"
             seo_title = (
-                with_category if len(with_category) <= 60 else f"{title} · Reflex Docs"
+                with_category
+                if len(with_category) <= 60
+                else (fallback if len(fallback) <= 60 else title)
             )
 
         # Always provide a non-empty, page-specific meta description. Real

From 6f727e1a5c1b3f96a163987d014d033cb4c48b9b Mon Sep 17 00:00:00 2001
From: Alek <alek@reflex.dev>
Date: Fri, 26 Jun 2026 16:28:30 -0700
Subject: [PATCH 6/8] SEO: emit a single og:image (fix favicon + preview
 duplicate)

Reflex's compiler always renders one og:image from add_page's image kwarg (defaulting to favicon.ico). Pass the real preview image to add_page and strip og:image from the create_meta_tags meta list, so each page has exactly one og:image (the preview) plus one twitter:image, instead of favicon + preview. Applies to the docs renderer (reflex_docs.py) and docs landing page.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../pages/docs_landing/__init__.py            | 19 +++++++++++++------
 docs/app/reflex_docs/reflex_docs.py           | 11 +++++++++++
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/docs/app/reflex_docs/pages/docs_landing/__init__.py b/docs/app/reflex_docs/pages/docs_landing/__init__.py
index b78f6108073..4dbffcc1fd1 100644
--- a/docs/app/reflex_docs/pages/docs_landing/__init__.py
+++ b/docs/app/reflex_docs/pages/docs_landing/__init__.py
@@ -20,12 +20,19 @@
 @rx.page(
     route="/",
     title="Reflex Documentation - Build Web Apps in Pure Python",
-    meta=create_meta_tags(
-        title="Reflex Documentation - Build Web Apps in Pure Python",
-        description="Reflex documentation: tutorials, API reference, and guides for building full-stack Python web apps. Get started in minutes.",
-        image=f"{REFLEX_ASSETS_CDN}previews/index_preview.webp",
-        url="https://reflex.dev/docs/",
-    ),
+    # og:image is emitted once by the compiler from `image`; drop it from the
+    # create_meta_tags list to avoid a favicon-default + preview duplicate.
+    image=f"{REFLEX_ASSETS_CDN}previews/index_preview.webp",
+    meta=[
+        m
+        for m in create_meta_tags(
+            title="Reflex Documentation - Build Web Apps in Pure Python",
+            description="Reflex documentation: tutorials, API reference, and guides for building full-stack Python web apps. Get started in minutes.",
+            image=f"{REFLEX_ASSETS_CDN}previews/index_preview.webp",
+            url="https://reflex.dev/docs/",
+        )
+        if not (isinstance(m, dict) and m.get("property") == "og:image")
+    ],
 )
 def docs_landing() -> rx.Component:
     return rx.el.div(
diff --git a/docs/app/reflex_docs/reflex_docs.py b/docs/app/reflex_docs/reflex_docs.py
index 49913e60b27..d0298ed5e24 100644
--- a/docs/app/reflex_docs/reflex_docs.py
+++ b/docs/app/reflex_docs/reflex_docs.py
@@ -148,10 +148,21 @@ def _canonical_url(path: str) -> str:
             meta = list(route.meta) if route.meta is not None else []
         meta.append({"name": "theme-color", "content": route.background_color})
 
+        # Reflex's compiler always renders exactly one og:image from add_page's
+        # `image` kwarg (defaulting to the favicon). Pass the real preview as
+        # `image` and drop og:image from the meta list, so the page has a single
+        # og:image (the preview) rather than the favicon default + the preview.
+        meta = [
+            m
+            for m in meta
+            if not (isinstance(m, dict) and m.get("property") == "og:image")
+        ]
+
         page_args = {
             "component": route.component,
             "route": route.path,
             "title": route.title,
+            "image": image_url,
             "meta": meta,
             "on_load": route.on_load,
         }

From 3789e7b0a99b7f849265951e1c45410b6e9dc615 Mon Sep 17 00:00:00 2001
From: Alek <alek@reflex.dev>
Date: Fri, 26 Jun 2026 16:35:30 -0700
Subject: [PATCH 7/8] SEO: stop frontmatter leaking into docs meta
 descriptions; add image alt

extract_doc_description now prefers a frontmatter description field and otherwise strips the whole --- block before scanning, so lines like 'title: Aligned Grids' or 'tags: DevTools' no longer become the meta description. Also add alt text to docs-landing and shared gallery/markdown images.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 docs/app/reflex_docs/pages/docs/__init__.py     | 17 ++++++++++++++++-
 .../pages/docs_landing/views/ai_builder.py      |  2 ++
 .../components/blocks/headings.py               |  1 +
 .../src/reflex_site_shared/gallery/common.py    |  1 +
 .../src/reflex_site_shared/gallery/gallery.py   |  1 +
 5 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/docs/app/reflex_docs/pages/docs/__init__.py b/docs/app/reflex_docs/pages/docs/__init__.py
index 08dd6962707..f88b60169d8 100644
--- a/docs/app/reflex_docs/pages/docs/__init__.py
+++ b/docs/app/reflex_docs/pages/docs/__init__.py
@@ -222,8 +222,23 @@ def extract_doc_description(
     if not markdown_text:
         return None
     try:
+        text = markdown_text
+        # Handle a leading YAML frontmatter block (--- ... ---): prefer an
+        # explicit description field, otherwise strip the entire block so its
+        # key:value lines (title:, tags:, ...) don't leak into the description.
+        frontmatter = re.match(r"?\s*---\r?\n(.*?)\r?\n---\r?\n", text, flags=re.DOTALL)
+        if frontmatter:
+            for fm_line in frontmatter.group(1).splitlines():
+                key_value = re.match(
+                    r"\s*(?:meta_description|description)\s*:\s*(\S.*)", fm_line
+                )
+                if key_value:
+                    value = key_value.group(1).strip().strip("\"'")
+                    if len(value) >= 20:
+                        return value
+            text = text[frontmatter.end() :]
         # Drop fenced code blocks (```...```), including ```python exec blocks.
-        text = re.sub(r"```.*?```", "", markdown_text, flags=re.DOTALL)
+        text = re.sub(r"```.*?```", "", text, flags=re.DOTALL)
         para_lines: list[str] = []
         skip_prefixes = (
             "#",
diff --git a/docs/app/reflex_docs/pages/docs_landing/views/ai_builder.py b/docs/app/reflex_docs/pages/docs_landing/views/ai_builder.py
index 7527b4308c9..caf5a28c6dd 100644
--- a/docs/app/reflex_docs/pages/docs_landing/views/ai_builder.py
+++ b/docs/app/reflex_docs/pages/docs_landing/views/ai_builder.py
@@ -161,6 +161,7 @@ def ai_builder_section() -> rx.Component:
                     description="A comprehensive guide to working effectively with AI Builder. The key to success is clarity, structure, and iteration.",
                     content=rx.image(
                         src=f"{REFLEX_ASSETS_CDN}docs/{rx.color_mode_cond('light', 'dark')}/getting_started_1.svg",
+                        alt="AI Builder getting started guide",
                         class_name="w-full h-auto pb-8",
                     ),
                     href=ai_builder_pages.overview.best_practices.path,
@@ -176,6 +177,7 @@ def ai_builder_section() -> rx.Component:
                     description="The Reflex Model Context Protocol (MCP) provides AI assistants and coding tools with structured access to Reflex documentation and component information.",
                     content=rx.image(
                         src=f"{REFLEX_ASSETS_CDN}docs/{rx.color_mode_cond('light', 'dark')}/mcp_1.svg",
+                        alt="Reflex MCP integration illustration",
                         class_name="w-full h-auto -mt-4",
                     ),
                     href=ai_builder_pages.integrations.mcp_overview.path,
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/headings.py b/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/headings.py
index 1d4751288de..70ac6a36ca8 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/headings.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/components/blocks/headings.py
@@ -270,5 +270,6 @@ def img_comp_xd(src: rx.Var[str]) -> rx.Component:
     """
     return rx.image(
         src=src,
+        alt="Documentation image",
         class_name="rounded-lg border border-secondary-a4 mb-2",
     )
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/gallery/common.py b/packages/reflex-site-shared/src/reflex_site_shared/gallery/common.py
index 0eccadd00d1..8b7d9fb330b 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/gallery/common.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/gallery/common.py
@@ -162,6 +162,7 @@ def extended_gallery_grid_item(
                 rx.el.div(
                     rx.image(
                         src=app_image,
+                        alt=f"{app_name} app preview",
                         class_name="group-hover:scale-105 duration-200 ease-out object-center object-cover absolute inset-0 size-full blur-in transition-all z-10",
                     ),
                     rx.el.div(
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/gallery/gallery.py b/packages/reflex-site-shared/src/reflex_site_shared/gallery/gallery.py
index 52070736621..53aa7acafc5 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/gallery/gallery.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/gallery/gallery.py
@@ -163,6 +163,7 @@ def extended_gallery_grid_item(
                 rx.el.div(
                     rx.image(
                         src=app_image,
+                        alt=f"{app_name} app preview",
                         class_name="group-hover:scale-105 duration-200 ease-out object-center object-cover absolute inset-0 size-full blur-in transition-all z-10",
                     ),
                     rx.el.div(

From be90818934ae5a013f78ca7b50e7c1b0efa69c32 Mon Sep 17 00:00:00 2001
From: Alek <alek@reflex.dev>
Date: Fri, 26 Jun 2026 17:29:27 -0700
Subject: [PATCH 8/8] SEO: eliminate remaining multiple-H1 and redirect-link
 sources
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Multiple H1: demote demo rx.heading() to as_=h2 across 57 docs (164 calls), demote section-level markdown '# ' headings to '##' in 18 docs, and render the component 'API Reference' heading as h2 — each docs page now has a single H1. Redirect links: make all top-level internal links in the shared footer/navbar/sidebar trailing-slash (/docs/, /blog/, /pricing/, ...) so they no longer hit 301s. Alt text: add descriptive alt to ui.avatar.image logos/avatars in docs-landing, integration gallery, and shared gallery.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 docs/advanced_onboarding/code_structure.md    |  2 +-
 docs/api-reference/browser_javascript.md      |  2 +-
 docs/api-reference/browser_storage.md         |  6 +-
 docs/api-reference/event_triggers.md          |  6 +-
 docs/api-reference/utils.md                   |  2 +-
 docs/app/reflex_docs/pages/docs/component.py  |  6 +-
 .../pages/docs_landing/views/ai_builder.py    |  1 +
 .../pages/integrations/integration_gallery.py |  1 +
 docs/enterprise/ag_grid/pivot-mode.md         |  2 +-
 docs/enterprise/drag-and-drop.md              |  2 +-
 docs/enterprise/mantine/pill.md               |  2 +-
 docs/enterprise/react_flow/edges.md           |  2 +-
 docs/enterprise/react_flow/interactivity.md   |  2 +-
 docs/enterprise/react_flow/nodes.md           |  2 +-
 docs/events/background_events.md              |  2 +-
 docs/events/decentralized_event_handlers.md   |  2 +-
 docs/events/event_actions.md                  |  8 +--
 docs/events/event_arguments.md                |  4 +-
 docs/events/events_overview.md                |  3 +-
 docs/getting_started/basics.md                | 21 +++---
 docs/getting_started/installation.md          |  4 +-
 docs/getting_started/introduction.md          |  4 +-
 docs/library/data-display/data_list.md        |  2 +-
 docs/library/data-display/icon.md             |  2 +-
 docs/library/dynamic-rendering/foreach.md     |  2 +-
 docs/library/forms/button.md                  |  2 +-
 docs/library/forms/checkbox.md                |  6 +-
 docs/library/forms/form.md                    |  6 +-
 docs/library/forms/input-ll.md                |  4 +-
 docs/library/forms/input.md                   |  8 +--
 docs/library/forms/radio_group.md             |  4 +-
 docs/library/forms/select-ll.md               |  6 +-
 docs/library/forms/select.md                  |  4 +-
 docs/library/forms/slider.md                  | 12 ++--
 docs/library/forms/switch.md                  |  4 +-
 docs/library/forms/text_area.md               |  2 +-
 docs/library/graphing/charts/radarchart.md    |  2 +-
 docs/library/layout/card.md                   |  2 +-
 docs/library/layout/section.md                |  4 +-
 docs/library/layout/stack.md                  |  4 +-
 docs/library/other/memo.md                    |  6 +-
 docs/library/other/theme.md                   |  2 +-
 docs/library/overlay/alert_dialog.md          |  5 +-
 docs/library/overlay/context_menu.md          |  4 +-
 docs/library/overlay/dialog.md                |  7 +-
 docs/library/overlay/drawer.md                |  4 +-
 docs/library/overlay/dropdown_menu.md         |  9 ++-
 docs/library/overlay/hover_card.md            |  5 +-
 docs/library/overlay/popover.md               |  5 +-
 docs/library/overlay/tooltip.md               |  5 +-
 .../tables-and-data-grids/data_editor.md      |  2 +-
 docs/library/tables-and-data-grids/table.md   |  8 +--
 docs/library/typography/heading.md            | 65 ++++++++++++-------
 docs/library/typography/link.md               |  2 +-
 docs/library/typography/markdown.md           |  6 +-
 docs/library/typography/text.md               |  3 +-
 docs/pages/dynamic_routing.md                 |  2 +-
 docs/recipes/content/forms.md                 |  4 +-
 docs/recipes/content/stats.md                 |  4 +-
 docs/recipes/layout/footer.md                 |  2 +-
 docs/recipes/layout/navbar.md                 | 24 +++----
 docs/recipes/layout/sidebar.md                |  4 +-
 docs/recipes/others/chips.md                  |  6 +-
 docs/recipes/others/speed_dial.md             | 10 +--
 docs/state/overview.md                        |  7 +-
 docs/state_structure/mixins.md                | 10 +--
 docs/state_structure/overview.md              |  2 +-
 docs/ui/overview.md                           |  2 +-
 docs/vars/base_vars.md                        |  4 +-
 docs/vars/computed_vars.md                    |  6 +-
 docs/vars/var-operations.md                   | 16 ++---
 docs/wrapping-react/library-and-tags.md       |  6 +-
 docs/wrapping-react/local-packages.md         |  6 +-
 docs/wrapping-react/overview.md               |  4 +-
 .../src/reflex_site_shared/gallery/common.py  |  1 +
 .../src/reflex_site_shared/gallery/gallery.py |  1 +
 .../src/reflex_site_shared/views/footer.py    | 12 ++--
 .../views/marketing_navbar.py                 | 10 +--
 .../views/sidebar/__init__.py                 | 12 ++--
 79 files changed, 251 insertions(+), 204 deletions(-)

diff --git a/docs/advanced_onboarding/code_structure.md b/docs/advanced_onboarding/code_structure.md
index 892046a19c6..025f79837d7 100644
--- a/docs/advanced_onboarding/code_structure.md
+++ b/docs/advanced_onboarding/code_structure.md
@@ -9,7 +9,7 @@ The main app module is responsible for importing all other modules that make up
 
 **All other modules containing pages, state, and models MUST be imported by the main app module or package** for Reflex to include them in the compiled output.
 
-# Breaking the App into Smaller Pieces
+## Breaking the App into Smaller Pieces
 
 As applications scale, effective organization is crucial. This is achieved by breaking the application down into smaller, manageable modules and organizing them into logical packages that avoid circular dependencies.
 
diff --git a/docs/api-reference/browser_javascript.md b/docs/api-reference/browser_javascript.md
index 203ae0b2e87..bd719855b60 100644
--- a/docs/api-reference/browser_javascript.md
+++ b/docs/api-reference/browser_javascript.md
@@ -219,7 +219,7 @@ def global_key_demo():
             ),
         ),
         rx.text("Press a, s, d or w to trigger an event"),
-        rx.heading(f"Last watched key pressed: {GlobalHotkeyState.key}"),
+        rx.heading(f"Last watched key pressed: {GlobalHotkeyState.key}", as_="h2"),
     )
 ```
 
diff --git a/docs/api-reference/browser_storage.md b/docs/api-reference/browser_storage.md
index 6cc6e1cc6da..0e9f831964b 100644
--- a/docs/api-reference/browser_storage.md
+++ b/docs/api-reference/browser_storage.md
@@ -204,7 +204,7 @@ rx.button(
 )
 ```
 
-# Serialization Strategies
+## Serialization Strategies
 
 If a non-trivial data structure should be stored in a `Cookie`, `LocalStorage`, or `SessionStorage` var it needs to be serialized before and after storing it. It is recommended to use a pydantic class for the data which provides simple serialization helpers and works recursively in complex object structures.
 
@@ -298,7 +298,7 @@ def app_settings_example():
     )
 ```
 
-# Comparison of Storage Types
+## Comparison of Storage Types
 
 Here's a comparison of the different client-side storage options in Reflex:
 
@@ -313,7 +313,7 @@ Here's a comparison of the different client-side storage options in Reflex:
 | Syncing Across Tabs | No                                | Yes (with sync=True)        | No                          |
 | Use Case            | Authentication, Server-side state | User preferences, App state | Temporary session data      |
 
-# When to Use Each Storage Type
+## When to Use Each Storage Type
 
 ## Use rx.Cookie When:
 
diff --git a/docs/api-reference/event_triggers.md b/docs/api-reference/event_triggers.md
index 19d82c43898..6c8c3a53978 100644
--- a/docs/api-reference/event_triggers.md
+++ b/docs/api-reference/event_triggers.md
@@ -75,7 +75,7 @@ def protected_page():
 
 For more details on page load events, see the [page load events documentation](/docs/events/page-load-events).
 
-# Event Reference
+## Event Reference
 
 ---
 
@@ -225,7 +225,7 @@ class MountState(rx.State):
 
 def mount_example():
     return rx.vstack(
-        rx.heading("Component Lifecycle Demo"),
+        rx.heading("Component Lifecycle Demo", as_="h2"),
         rx.foreach(MountState.events, rx.text),
         rx.cond(
             MountState.loading,
@@ -261,7 +261,7 @@ class UnmountState(rx.State):
 
 def unmount_example():
     return rx.vstack(
-        rx.heading("Unmount Demo"),
+        rx.heading("Unmount Demo", as_="h2"),
         rx.foreach(UnmountState.events, rx.text),
         rx.text(UnmountState.status),
         rx.link(
diff --git a/docs/api-reference/utils.md b/docs/api-reference/utils.md
index 5ab69d621b9..4666e42aea0 100644
--- a/docs/api-reference/utils.md
+++ b/docs/api-reference/utils.md
@@ -103,7 +103,7 @@ class RunInThreadState(rx.State):
 
 def run_in_thread_example():
     return rx.vstack(
-        rx.heading("run_in_thread Example", size="3"),
+        rx.heading("run_in_thread Example", as_="h2", size="3"),
         rx.hstack(
             rx.button(
                 "Run Quick Task",
diff --git a/docs/app/reflex_docs/pages/docs/component.py b/docs/app/reflex_docs/pages/docs/component.py
index 31954f6bcf8..c2439ab5969 100644
--- a/docs/app/reflex_docs/pages/docs/component.py
+++ b/docs/app/reflex_docs/pages/docs/component.py
@@ -26,7 +26,7 @@
     render_inline_markdown,
     render_markdown,
 )
-from reflex_docs.templates.docpage import docpage, h1_comp, h2_comp
+from reflex_docs.templates.docpage import docpage, h2_comp
 
 
 def get_code_style(color: str):
@@ -991,7 +991,7 @@ def out():
             toc.append((2, component_tuple[1]))
         api_ref_section = (
             [
-                h1_comp(text="API Reference"),
+                h2_comp(text="API Reference"),
                 rx.box(*components, class_name="flex flex-col"),
             ]
             if components
@@ -1019,7 +1019,7 @@ def ll():
             toc.append((2, component_tuple[1]))
         api_ref_section = (
             [
-                h1_comp(text="API Reference"),
+                h2_comp(text="API Reference"),
                 rx.box(*ll_components, class_name="flex flex-col"),
             ]
             if ll_components
diff --git a/docs/app/reflex_docs/pages/docs_landing/views/ai_builder.py b/docs/app/reflex_docs/pages/docs_landing/views/ai_builder.py
index caf5a28c6dd..caed0932ec5 100644
--- a/docs/app/reflex_docs/pages/docs_landing/views/ai_builder.py
+++ b/docs/app/reflex_docs/pages/docs_landing/views/ai_builder.py
@@ -100,6 +100,7 @@ def integration_icon_marquee(integration_name: str) -> rx.Component:
                 get_integration_logo_url(integration_name, "light"),
                 get_integration_logo_url(integration_name, "dark"),
             ),
+            alt=f"{integration_name} logo",
             unstyled=True,
             class_name="size-full",
         ),
diff --git a/docs/app/reflex_docs/pages/integrations/integration_gallery.py b/docs/app/reflex_docs/pages/integrations/integration_gallery.py
index c3e71ecbd56..8bf4c41c2c6 100644
--- a/docs/app/reflex_docs/pages/integrations/integration_gallery.py
+++ b/docs/app/reflex_docs/pages/integrations/integration_gallery.py
@@ -54,6 +54,7 @@ def integration_gallery_cards(data):
                             get_integration_logo_url(integration_name, "light"),
                             get_integration_logo_url(integration_name, "dark"),
                         ),
+                        alt=f"{integration_name} logo",
                         unstyled=True,
                         class_name="size-full",
                     ),
diff --git a/docs/enterprise/ag_grid/pivot-mode.md b/docs/enterprise/ag_grid/pivot-mode.md
index 57d345a4ed9..171f5248484 100644
--- a/docs/enterprise/ag_grid/pivot-mode.md
+++ b/docs/enterprise/ag_grid/pivot-mode.md
@@ -55,7 +55,7 @@ def pivot_page():
     )
 ```
 
-# Pivot using State
+## Pivot using State
 
 ```python demo exec
 import pandas as pd
diff --git a/docs/enterprise/drag-and-drop.md b/docs/enterprise/drag-and-drop.md
index a89b5ea08cc..6a21d86314f 100644
--- a/docs/enterprise/drag-and-drop.md
+++ b/docs/enterprise/drag-and-drop.md
@@ -355,7 +355,7 @@ Access real-time drag/drop state:
 - `is_over`: Boolean indicating if draggable is hovering
 - `can_drop`: Boolean indicating if drop is allowed
 
-# API Reference
+## API Reference
 
 ### rxe.dnd.draggable
 
diff --git a/docs/enterprise/mantine/pill.md b/docs/enterprise/mantine/pill.md
index 9512fe87dab..d7a74b28850 100644
--- a/docs/enterprise/mantine/pill.md
+++ b/docs/enterprise/mantine/pill.md
@@ -46,7 +46,7 @@ def pill_group_page():
 ```
 
 
-# PillsInput
+## PillsInput
 
 `rxe.mantine.pills_input` is a wrapping of the mantine component [PillsInput](https://mantine.dev/core/pills-input/). It is an utility component that can be used to display a list of tags or labels. It can be used in various contexts, such as in a form or as a standalone component.
 By itself it does not include any logic, it only renders given children.
diff --git a/docs/enterprise/react_flow/edges.md b/docs/enterprise/react_flow/edges.md
index dd48b047236..a4308f94674 100644
--- a/docs/enterprise/react_flow/edges.md
+++ b/docs/enterprise/react_flow/edges.md
@@ -95,7 +95,7 @@ edges: list[Edge] = [
 ]
 ```
 
-# Custom Edges
+## Custom Edges
 
 React Flow in Reflex also allows you to define custom edge types. This is useful when you want edges to carry extra functionality (like buttons, labels, or dynamic styling) beyond the default straight or bezier connectors.
 
diff --git a/docs/enterprise/react_flow/interactivity.md b/docs/enterprise/react_flow/interactivity.md
index 744dab04f77..18af2460dcb 100644
--- a/docs/enterprise/react_flow/interactivity.md
+++ b/docs/enterprise/react_flow/interactivity.md
@@ -39,7 +39,7 @@ class FlowState(rx.State):
     ]
 ```
 
-# Add Event Handlers
+## Add Event Handlers
 
 Event handlers allow the flow to respond to user interactions such as dragging nodes, updating edges, or creating new connections.
 
diff --git a/docs/enterprise/react_flow/nodes.md b/docs/enterprise/react_flow/nodes.md
index c9a97a96289..ff34b941f2a 100644
--- a/docs/enterprise/react_flow/nodes.md
+++ b/docs/enterprise/react_flow/nodes.md
@@ -99,7 +99,7 @@ node_with_handles = {
 }
 ```
 
-# Custom Nodes
+## Custom Nodes
 
 Creating custom nodes is as easy as building a regular React component and passing it to the `node_types`. Since they’re standard React components, you can display any content and implement any functionality you need. Plus, you’ll have access to a range of props that allow you to extend and customize the default node behavior.
 
diff --git a/docs/events/background_events.md b/docs/events/background_events.md
index dfea85baabc..4676870b646 100644
--- a/docs/events/background_events.md
+++ b/docs/events/background_events.md
@@ -87,7 +87,7 @@ class MyTaskState(rx.State):
 
 def background_task_example():
     return rx.hstack(
-        rx.heading(MyTaskState.counter, " /"),
+        rx.heading(MyTaskState.counter, " /", as_="h2"),
         rx.input(
             value=MyTaskState.max_counter,
             on_change=MyTaskState.set_max_counter,
diff --git a/docs/events/decentralized_event_handlers.md b/docs/events/decentralized_event_handlers.md
index df71a6682b7..5898b164a4d 100644
--- a/docs/events/decentralized_event_handlers.md
+++ b/docs/events/decentralized_event_handlers.md
@@ -33,7 +33,7 @@ def increment(state: MyState, amount: int):
 
 def decentralized_event_example():
     return rx.vstack(
-        rx.heading(f"Count: {MyState.count}"),
+        rx.heading(f"Count: {MyState.count}", as_="h2"),
         rx.hstack(
             rx.button("Increment by 1", on_click=increment(1)),
             rx.button("Increment by 5", on_click=increment(5)),
diff --git a/docs/events/event_actions.md b/docs/events/event_actions.md
index 9875132a853..1c812111291 100644
--- a/docs/events/event_actions.md
+++ b/docs/events/event_actions.md
@@ -43,7 +43,7 @@ class LinkPreventDefaultState(rx.State):
 
 def prevent_default_example():
     return rx.vstack(
-        rx.heading(f"The value is {LinkPreventDefaultState.status}"),
+        rx.heading(f"The value is {LinkPreventDefaultState.status}", as_="h2"),
         rx.link(
             "Toggle Value",
             href="https://reflex.dev/",
@@ -133,7 +133,7 @@ class ThrottleState(rx.State):
 
 def scroll_box():
     return rx.scroll_area(
-        rx.heading("Scroll Me"),
+        rx.heading("Scroll Me", as_="h2"),
         *[rx.text(f"Item {i}") for i in range(100)],
         height="75px",
         width="50%",
@@ -249,8 +249,8 @@ class TemporalState(rx.State):
 
 def temporal_example():
     return rx.vstack(
-        rx.heading("Current Time:"),
-        rx.heading(TemporalState.current_time),
+        rx.heading("Current Time:", as_="h2"),
+        rx.heading(TemporalState.current_time, as_="h2"),
         rx.moment(
             interval=1000,
             on_change=TemporalState.update_time.temporal,
diff --git a/docs/events/event_arguments.md b/docs/events/event_arguments.md
index cb6b7cd03f5..8a0620d0390 100644
--- a/docs/events/event_arguments.md
+++ b/docs/events/event_arguments.md
@@ -19,7 +19,7 @@ class EventArgStateSlider(rx.State):
 
 def slider_max_min_step():
     return rx.vstack(
-        rx.heading(EventArgStateSlider.value),
+        rx.heading(EventArgStateSlider.value, as_="h2"),
         rx.slider(
             default_value=40,
             on_value_commit=EventArgStateSlider.set_end,
@@ -57,7 +57,7 @@ def event_arg_example():
             reset_on_submit=True,
         ),
         rx.divider(),
-        rx.heading("Results"),
+        rx.heading("Results", as_="h2"),
         rx.text(EventArgState.form_data.to_string()),
     )
 ```
diff --git a/docs/events/events_overview.md b/docs/events/events_overview.md
index 80019b5c1f3..2b02ef75b54 100644
--- a/docs/events/events_overview.md
+++ b/docs/events/events_overview.md
@@ -35,6 +35,7 @@ class WordCycleState(rx.State):
 def event_triggers_example():
     return rx.heading(
         WordCycleState.get_text,
+        as_="h2",
         on_mouse_over=WordCycleState.next_word,
         color="green",
     )
@@ -45,6 +46,6 @@ Whenever the user hovers over the heading, the `next_word` **event handler** wil
 
 Adding the `@rx.event` decorator above the event handler is strongly recommended. This decorator enables proper static type checking, which ensures event handlers receive the correct number and types of arguments.
 
-# What's in this section?
+## What's in this section?
 
 In the event section of the documentation, you will explore the different types of events supported by Reflex, along with the different ways to call them.
diff --git a/docs/getting_started/basics.md b/docs/getting_started/basics.md
index c28bd91158a..703be5d7bd8 100644
--- a/docs/getting_started/basics.md
+++ b/docs/getting_started/basics.md
@@ -123,9 +123,9 @@ class MyState(rx.State):
 def counter():
     return rx.hstack(
         # The heading `color` prop is set to the `color` var in MyState.
-        rx.heading("Count: ", color=MyState.color),
+        rx.heading("Count: ", as_="h2", color=MyState.color),
         # The `count` var in `MyState` is passed as a child to the heading component.
-        rx.heading(MyState.count),
+        rx.heading(MyState.count, as_="h2"),
     )
 ```
 
@@ -152,7 +152,7 @@ class CounterState(rx.State):
 
 def counter_increment():
     return rx.hstack(
-        rx.heading(CounterState.count),
+        rx.heading(CounterState.count, as_="h2"),
         rx.button("Increment", on_click=CounterState.increment),
     )
 ```
@@ -180,7 +180,7 @@ class CounterState2(rx.State):
 
 def counter_variable():
     return rx.hstack(
-        rx.heading(CounterState2.count),
+        rx.heading(CounterState2.count, as_="h2"),
         rx.button("Increment by 1", on_click=lambda: CounterState2.increment(1)),
         rx.button("Increment by 5", on_click=lambda: CounterState2.increment(5)),
     )
@@ -199,7 +199,7 @@ class TextState(rx.State):
 
 def text_input():
     return rx.vstack(
-        rx.heading(TextState.text),
+        rx.heading(TextState.text, as_="h2"),
         rx.input(default_value=TextState.text, on_blur=TextState.update_text),
     )
 ```
@@ -246,7 +246,8 @@ class MyState3(rx.State):
 
 def count_and_check():
     return rx.box(
-        rx.heading(MyState3.text), rx.button("Increment", on_click=MyState3.increment)
+        rx.heading(MyState3.text, as_="h2"),
+        rx.button("Increment", on_click=MyState3.increment),
     )
 ```
 
@@ -268,7 +269,7 @@ class BadState(rx.State):
 
 def count_if_even():
     return rx.box(
-        rx.heading("Count: "),
+        rx.heading("Count: ", as_="h2"),
         # This will raise a compile error, as BadState.count is a var and not known at compile time.
         rx.text(BadState.count if BadState.count % 2 == 0 else "Odd"),
         # Using an if statement with a var as a prop will NOT work either.
@@ -323,8 +324,8 @@ def show_login():
     return rx.box(
         rx.cond(
             LoginState.logged_in,
-            rx.heading("Logged In"),
-            rx.heading("Not Logged In"),
+            rx.heading("Logged In", as_="h2"),
+            rx.heading("Not Logged In", as_="h2"),
         ),
         rx.button("Toggle Login", on_click=LoginState.toggle_login),
     )
@@ -372,7 +373,7 @@ class CountEvenState(rx.State):
 
 def count_if_even():
     return rx.box(
-        rx.heading("Count: "),
+        rx.heading("Count: ", as_="h2"),
         rx.cond(
             # Here we use the `%` and `==` var operations to check if the count is even.
             CountEvenState.count % 2 == 0,
diff --git a/docs/getting_started/installation.md b/docs/getting_started/installation.md
index 69797ec3838..1a5d1d1e5a8 100644
--- a/docs/getting_started/installation.md
+++ b/docs/getting_started/installation.md
@@ -56,7 +56,7 @@ After installation, restart your terminal or run `source ~/.bashrc` (or `source
 Alternatively, install via [Homebrew, PyPI, or other methods](https://docs.astral.sh/uv/getting-started/installation/).
 
 ```md alert warning
-# macOS (Apple Silicon) users: install Rosetta 2
+## macOS (Apple Silicon) users: install Rosetta 2
 
 Run `/usr/sbin/softwareupdate --install-rosetta --agree-to-license`. See [Apple's instructions](https://support.apple.com/en-us/HT211861) for details.
 ```
@@ -101,7 +101,7 @@ uv run reflex init
 ```
 
 ```md alert warning
-# Error `Install Failed - You are missing a DLL required to run bun.exe` Windows
+## Error `Install Failed - You are missing a DLL required to run bun.exe` Windows
 
 Bun requires runtime components of Visual C++ libraries to run on Windows. This issue is fixed by installing [Microsoft Visual C++ 2015 Redistributable](https://www.microsoft.com/en-us/download/details.aspx?id=53840).
 ```
diff --git a/docs/getting_started/introduction.md b/docs/getting_started/introduction.md
index aad9221a1eb..d6a9f5850bb 100644
--- a/docs/getting_started/introduction.md
+++ b/docs/getting_started/introduction.md
@@ -123,7 +123,7 @@ rx.hstack(
         color_scheme="ruby",
         on_click=CounterExampleState.decrement,
     ),
-    rx.heading(CounterExampleState.count, font_size="2em"),
+    rx.heading(CounterExampleState.count, as_="h2", font_size="2em"),
     rx.button(
         "Increment",
         color_scheme="grass",
@@ -234,7 +234,7 @@ def index():
             color_scheme="ruby",
             on_click=State.decrement,
         ),
-        rx.heading(State.count, font_size="2em"),
+        rx.heading(State.count, as_="h2", font_size="2em"),
         rx.button(
             "Increment",
             color_scheme="grass",
diff --git a/docs/library/data-display/data_list.md b/docs/library/data-display/data_list.md
index d9560ec1bca..5e4a57e4086 100644
--- a/docs/library/data-display/data_list.md
+++ b/docs/library/data-display/data_list.md
@@ -21,7 +21,7 @@ DataListItem: |
       ),
       rx.data_list.item(
           rx.data_list.label("Name"),
-          rx.data_list.value(rx.heading("Developer Success", size="4")),
+          rx.data_list.value(rx.heading("Developer Success", as_="h2", size="4")),
           **props,
       ),
       rx.data_list.item(
diff --git a/docs/library/data-display/icon.md b/docs/library/data-display/icon.md
index 3c799467358..24038fcf8df 100644
--- a/docs/library/data-display/icon.md
+++ b/docs/library/data-display/icon.md
@@ -130,7 +130,7 @@ class DynamicIconState(rx.State):
 
 ```python demo
 rx.vstack(
-    rx.heading("Dynamic Icon Example"),
+    rx.heading("Dynamic Icon Example", as_="h2"),
     rx.icon(DynamicIconState.current_icon, size=30, color="red"),
     rx.button("Change Icon", on_click=DynamicIconState.change_icon),
     spacing="4",
diff --git a/docs/library/dynamic-rendering/foreach.md b/docs/library/dynamic-rendering/foreach.md
index 6b0a3ca345b..3d0252a6398 100644
--- a/docs/library/dynamic-rendering/foreach.md
+++ b/docs/library/dynamic-rendering/foreach.md
@@ -142,7 +142,7 @@ def get_item(item: rx.Var[TodoItem]):
 
 def todo_example():
     return rx.vstack(
-        rx.heading("Todos"),
+        rx.heading("Todos", as_="h2"),
         rx.input(
             on_blur=ListState.set_new_item, placeholder="Add a todo...", bg="white"
         ),
diff --git a/docs/library/forms/button.md b/docs/library/forms/button.md
index db231a99bd7..4bb7b7cf1fa 100644
--- a/docs/library/forms/button.md
+++ b/docs/library/forms/button.md
@@ -38,7 +38,7 @@ def counter():
             color_scheme="red",
             on_click=CountState.decrement,
         ),
-        rx.heading(CountState.count),
+        rx.heading(CountState.count, as_="h2"),
         rx.button(
             "Increment",
             color_scheme="grass",
diff --git a/docs/library/forms/checkbox.md b/docs/library/forms/checkbox.md
index 29cdd79474e..1a941c649fa 100644
--- a/docs/library/forms/checkbox.md
+++ b/docs/library/forms/checkbox.md
@@ -27,7 +27,7 @@ class CheckboxState(rx.State):
 
 def checkbox_example():
     return rx.vstack(
-        rx.heading(CheckboxState.checked),
+        rx.heading(CheckboxState.checked, as_="h2"),
         rx.checkbox(on_change=CheckboxState.set_checked),
     )
 ```
@@ -48,7 +48,7 @@ class FormCheckboxState(rx.State):
 def form_checkbox_example():
     return rx.card(
         rx.vstack(
-            rx.heading("Example Form"),
+            rx.heading("Example Form", as_="h2"),
             rx.form.root(
                 rx.hstack(
                     rx.checkbox(
@@ -63,7 +63,7 @@ def form_checkbox_example():
             ),
             rx.divider(),
             rx.hstack(
-                rx.heading("Results:"),
+                rx.heading("Results:", as_="h2"),
                 rx.badge(FormCheckboxState.form_data.to_string()),
             ),
             align_items="left",
diff --git a/docs/library/forms/form.md b/docs/library/forms/form.md
index d2d7331666b..16ece928eca 100644
--- a/docs/library/forms/form.md
+++ b/docs/library/forms/form.md
@@ -149,7 +149,7 @@ def form_example():
             reset_on_submit=True,
         ),
         rx.divider(),
-        rx.heading("Results"),
+        rx.heading("Results", as_="h2"),
         rx.text(FormState.form_data.to_string()),
     )
 ```
@@ -221,7 +221,7 @@ def typed_form_example():
             reset_on_submit=True,
         ),
         rx.divider(),
-        rx.heading("Results"),
+        rx.heading("Results", as_="h2"),
         rx.text(TypedFormState.form_data.to_string()),
     )
 ```
@@ -335,7 +335,7 @@ def dynamic_form():
             reset_on_submit=True,
         ),
         rx.divider(),
-        rx.heading("Results"),
+        rx.heading("Results", as_="h2"),
         rx.text(DynamicFormState.form_data.to_string()),
     )
 ```
diff --git a/docs/library/forms/input-ll.md b/docs/library/forms/input-ll.md
index 24212117a83..26f49aa128d 100644
--- a/docs/library/forms/input-ll.md
+++ b/docs/library/forms/input-ll.md
@@ -39,7 +39,7 @@ class TextfieldBlur1(rx.State):
 
 def blur_example1():
     return rx.vstack(
-        rx.heading(TextfieldBlur1.text),
+        rx.heading(TextfieldBlur1.text, as_="h2"),
         rx.input(
             rx.input.slot(
                 rx.icon(tag="search"),
@@ -63,7 +63,7 @@ class TextfieldControlled1(rx.State):
 
 def controlled_example1():
     return rx.vstack(
-        rx.heading(TextfieldControlled1.text),
+        rx.heading(TextfieldControlled1.text, as_="h2"),
         rx.input(
             rx.input.slot(
                 rx.icon(tag="search"),
diff --git a/docs/library/forms/input.md b/docs/library/forms/input.md
index c1291fb9d0b..08026236fae 100644
--- a/docs/library/forms/input.md
+++ b/docs/library/forms/input.md
@@ -42,7 +42,7 @@ class TextfieldBlur(rx.State):
 
 def blur_example():
     return rx.vstack(
-        rx.heading(TextfieldBlur.text),
+        rx.heading(TextfieldBlur.text, as_="h2"),
         rx.input(
             placeholder="Search here...",
             on_blur=TextfieldBlur.set_text,
@@ -63,7 +63,7 @@ class TextfieldControlled(rx.State):
 
 def controlled_example():
     return rx.vstack(
-        rx.heading(TextfieldControlled.text),
+        rx.heading(TextfieldControlled.text, as_="h2"),
         rx.input(
             placeholder="Search here...",
             value=TextfieldControlled.text,
@@ -123,7 +123,7 @@ class FormInputState(rx.State):
 def form_input1():
     return rx.card(
         rx.vstack(
-            rx.heading("Example Form"),
+            rx.heading("Example Form", as_="h2"),
             rx.form.root(
                 rx.hstack(
                     rx.input(
@@ -140,7 +140,7 @@ def form_input1():
             ),
             rx.divider(),
             rx.hstack(
-                rx.heading("Results:"),
+                rx.heading("Results:", as_="h2"),
                 rx.badge(FormInputState.form_data.to_string()),
             ),
             align_items="left",
diff --git a/docs/library/forms/radio_group.md b/docs/library/forms/radio_group.md
index bbd7e12bc75..c2e4a63285c 100644
--- a/docs/library/forms/radio_group.md
+++ b/docs/library/forms/radio_group.md
@@ -73,7 +73,7 @@ class FormRadioState(rx.State):
 def radio_form_example():
     return rx.card(
         rx.vstack(
-            rx.heading("Example Form"),
+            rx.heading("Example Form", as_="h2"),
             rx.form.root(
                 rx.vstack(
                     rx.radio_group(
@@ -90,7 +90,7 @@ def radio_form_example():
             ),
             rx.divider(),
             rx.hstack(
-                rx.heading("Results:"),
+                rx.heading("Results:", as_="h2"),
                 rx.badge(FormRadioState.form_data.to_string()),
             ),
             align_items="left",
diff --git a/docs/library/forms/select-ll.md b/docs/library/forms/select-ll.md
index 7a63b29fb02..ffd9aefe353 100644
--- a/docs/library/forms/select-ll.md
+++ b/docs/library/forms/select-ll.md
@@ -233,7 +233,7 @@ def form_select():
             reset_on_submit=True,
         ),
         rx.divider(size="4"),
-        rx.heading("Results"),
+        rx.heading("Results", as_="h2"),
         rx.text(FormSelectState.form_data.to_string()),
         width="100%",
         direction="column",
@@ -253,8 +253,8 @@ rx.card(
             height="auto",
         ),
         rx.flex(
-            rx.heading("Reflex Swag", size="4", margin_bottom="4px"),
-            rx.heading("$99", size="6", margin_bottom="4px"),
+            rx.heading("Reflex Swag", as_="h2", size="4", margin_bottom="4px"),
+            rx.heading("$99", as_="h2", size="6", margin_bottom="4px"),
             direction="row",
             justify="between",
             width="100%",
diff --git a/docs/library/forms/select.md b/docs/library/forms/select.md
index 044c46797ca..8bc430cb619 100644
--- a/docs/library/forms/select.md
+++ b/docs/library/forms/select.md
@@ -218,7 +218,7 @@ class SelectFormState(rx.State):
 def select_form():
     return rx.card(
         rx.vstack(
-            rx.heading("Order Form", size="4"),
+            rx.heading("Order Form", as_="h2", size="4"),
             rx.form.root(
                 rx.vstack(
                     rx.text("Favorite fruit"),
@@ -243,7 +243,7 @@ def select_form():
             ),
             rx.divider(),
             rx.hstack(
-                rx.heading("Results:"),
+                rx.heading("Results:", as_="h2"),
                 rx.badge(SelectFormState.form_data.to_string()),
             ),
             spacing="3",
diff --git a/docs/library/forms/slider.md b/docs/library/forms/slider.md
index 39da0c2f8ad..e559fae8e11 100644
--- a/docs/library/forms/slider.md
+++ b/docs/library/forms/slider.md
@@ -29,7 +29,7 @@ class SliderState(rx.State):
 
 def slider_intro():
     return rx.vstack(
-        rx.heading(SliderState.value),
+        rx.heading(SliderState.value, as_="h2"),
         rx.slider(on_value_commit=SliderState.set_end),
         width="100%",
     )
@@ -53,8 +53,8 @@ class RangeSliderState(rx.State):
 def range_slider_intro():
     return rx.vstack(
         rx.hstack(
-            rx.heading(RangeSliderState.value_start),
-            rx.heading(RangeSliderState.value_end),
+            rx.heading(RangeSliderState.value_start, as_="h2"),
+            rx.heading(RangeSliderState.value_end, as_="h2"),
         ),
         rx.slider(
             default_value=[25, 75],
@@ -84,7 +84,7 @@ class LiveSliderState(rx.State):
 
 def live_slider_intro():
     return rx.vstack(
-        rx.heading(LiveSliderState.value),
+        rx.heading(LiveSliderState.value, as_="h2"),
         rx.slider(
             default_value=50,
             min_=0,
@@ -112,7 +112,7 @@ class FormSliderState(rx.State):
 def slider_form_example():
     return rx.card(
         rx.vstack(
-            rx.heading("Example Form"),
+            rx.heading("Example Form", as_="h2"),
             rx.form.root(
                 rx.hstack(
                     rx.slider(default_value=40, name="slider"),
@@ -124,7 +124,7 @@ def slider_form_example():
             ),
             rx.divider(),
             rx.hstack(
-                rx.heading("Results:"),
+                rx.heading("Results:", as_="h2"),
                 rx.badge(FormSliderState.form_data.to_string()),
             ),
             align_items="left",
diff --git a/docs/library/forms/switch.md b/docs/library/forms/switch.md
index 15ba7b73511..f4553721d71 100644
--- a/docs/library/forms/switch.md
+++ b/docs/library/forms/switch.md
@@ -83,7 +83,7 @@ class FormSwitchState(rx.State):
 def switch_form_example():
     return rx.card(
         rx.vstack(
-            rx.heading("Example Form"),
+            rx.heading("Example Form", as_="h2"),
             rx.form.root(
                 rx.hstack(
                     rx.switch(name="switch"),
@@ -95,7 +95,7 @@ def switch_form_example():
             ),
             rx.divider(),
             rx.hstack(
-                rx.heading("Results:"),
+                rx.heading("Results:", as_="h2"),
                 rx.badge(FormSwitchState.form_data.to_string()),
             ),
             align_items="left",
diff --git a/docs/library/forms/text_area.md b/docs/library/forms/text_area.md
index 5ba21f9505b..cc71e84a336 100644
--- a/docs/library/forms/text_area.md
+++ b/docs/library/forms/text_area.md
@@ -29,7 +29,7 @@ class TextAreaBlur(rx.State):
 
 def blur_example():
     return rx.vstack(
-        rx.heading(TextAreaBlur.text),
+        rx.heading(TextAreaBlur.text, as_="h2"),
         rx.text_area(
             placeholder="Type here...",
             on_blur=TextAreaBlur.set_text,
diff --git a/docs/library/graphing/charts/radarchart.md b/docs/library/graphing/charts/radarchart.md
index 36674411b47..6b64c384515 100644
--- a/docs/library/graphing/charts/radarchart.md
+++ b/docs/library/graphing/charts/radarchart.md
@@ -124,7 +124,7 @@ def radar_start_end():
     )
 ```
 
-# Dynamic Data
+## Dynamic Data
 
 Chart data tied to a State var causes the chart to automatically update when the
 state changes, providing a nice way to visualize data in response to user
diff --git a/docs/library/layout/card.md b/docs/library/layout/card.md
index 844a542be22..34cd90bf742 100644
--- a/docs/library/layout/card.md
+++ b/docs/library/layout/card.md
@@ -45,7 +45,7 @@ rx.card(
         rx.flex(
             rx.avatar(src="https://web.reflex-assets.dev/other/reflex_banner.png"),
             rx.box(
-                rx.heading("Quick Start"),
+                rx.heading("Quick Start", as_="h2"),
                 rx.text("Get started with Reflex in 5 minutes."),
             ),
             spacing="2",
diff --git a/docs/library/layout/section.md b/docs/library/layout/section.md
index e7ed0779051..a3e6f7a1c83 100644
--- a/docs/library/layout/section.md
+++ b/docs/library/layout/section.md
@@ -32,14 +32,14 @@ Primarily this is a semantic component that is used to group related textual con
 ```python demo
 rx.box(
     rx.section(
-        rx.heading("First"),
+        rx.heading("First", as_="h2"),
         rx.text("This is the first content section"),
         padding_left="12px",
         padding_right="12px",
         background_color="var(--gray-2)",
     ),
     rx.section(
-        rx.heading("Second"),
+        rx.heading("Second", as_="h2"),
         rx.text("This is the second content section"),
         padding_left="12px",
         padding_right="12px",
diff --git a/docs/library/layout/stack.md b/docs/library/layout/stack.md
index 5fd55d2be8c..423ccc1802e 100644
--- a/docs/library/layout/stack.md
+++ b/docs/library/layout/stack.md
@@ -171,7 +171,7 @@ rx.vstack(
 ```python demo
 rx.hstack(
     rx.box(
-        rx.heading("Saving Money"),
+        rx.heading("Saving Money", as_="h2"),
         rx.text(
             "Saving money is an art that combines discipline, strategic planning, and the wisdom to foresee future needs and emergencies. It begins with the simple act of setting aside a portion of one's income, creating a buffer that can grow over time through interest or investments.",
             margin_top="0.5em",
@@ -180,7 +180,7 @@ rx.hstack(
         border_width="1px",
     ),
     rx.box(
-        rx.heading("Spending Money"),
+        rx.heading("Spending Money", as_="h2"),
         rx.text(
             "Spending money is a balancing act between fulfilling immediate desires and maintaining long-term financial health. It's about making choices, sometimes indulging in the pleasures of the moment, and at other times, prioritizing essential expenses.",
             margin_top="0.5em",
diff --git a/docs/library/other/memo.md b/docs/library/other/memo.md
index 4897955723f..a1a7ea10e4c 100644
--- a/docs/library/other/memo.md
+++ b/docs/library/other/memo.md
@@ -31,7 +31,7 @@ class DemoState(rx.State):
 @rx.memo
 def expensive_component(label: rx.Var[str]) -> rx.Component:
     return rx.vstack(
-        rx.heading(label),
+        rx.heading(label, as_="h2"),
         rx.text("This component only re-renders when props change."),
         rx.divider(),
     )
@@ -58,7 +58,7 @@ class AppState(rx.State):
 
 @rx.memo
 def greeting(name: rx.Var[str]) -> rx.Component:
-    return rx.heading("Hello, " + name)
+    return rx.heading("Hello, " + name, as_="h2")
 
 
 def index():
@@ -128,7 +128,7 @@ def card(
     title: rx.Var[str],
 ) -> rx.Component:
     return rx.box(
-        rx.heading(title),
+        rx.heading(title, as_="h2"),
         children,
         class_name="border border-secondary-5 rounded-lg p-4",
     )
diff --git a/docs/library/other/theme.md b/docs/library/other/theme.md
index 3683b2cc061..8e9871c2069 100644
--- a/docs/library/other/theme.md
+++ b/docs/library/other/theme.md
@@ -16,7 +16,7 @@ app = rx.App(
 )
 ```
 
-# Theme Panel
+## Theme Panel
 
 The `ThemePanel` component is a container for the `Theme` component. It provides a way to change the theme of the application.
 
diff --git a/docs/library/overlay/alert_dialog.md b/docs/library/overlay/alert_dialog.md
index 414a4857063..4f53b2df12d 100644
--- a/docs/library/overlay/alert_dialog.md
+++ b/docs/library/overlay/alert_dialog.md
@@ -206,9 +206,10 @@ class AlertDialogState(rx.State):
 def alert_dialog():
     return rx.flex(
         rx.heading(
-            f"Number of times alert dialog opened or closed: {AlertDialogState.num_opens}"
+            f"Number of times alert dialog opened or closed: {AlertDialogState.num_opens}",
+            as_="h2",
         ),
-        rx.heading(f"Alert Dialog open: {AlertDialogState.opened}"),
+        rx.heading(f"Alert Dialog open: {AlertDialogState.opened}", as_="h2"),
         rx.alert_dialog.root(
             rx.alert_dialog.trigger(
                 rx.button("Revoke access", color_scheme="red"),
diff --git a/docs/library/overlay/context_menu.md b/docs/library/overlay/context_menu.md
index 16e26c99fae..60181fb4cbc 100644
--- a/docs/library/overlay/context_menu.md
+++ b/docs/library/overlay/context_menu.md
@@ -362,7 +362,9 @@ def context_menu_call_dialog() -> rx.Component:
         ),
         rx.cond(
             ContextMenuState.which_dialog_open,
-            rx.heading(f"{ContextMenuState.which_dialog_open} dialog is open"),
+            rx.heading(
+                f"{ContextMenuState.which_dialog_open} dialog is open", as_="h2"
+            ),
         ),
         delete_dialog(),
         settings_dialog(),
diff --git a/docs/library/overlay/dialog.md b/docs/library/overlay/dialog.md
index 9fa39ce0bd5..8c5d092a734 100644
--- a/docs/library/overlay/dialog.md
+++ b/docs/library/overlay/dialog.md
@@ -169,8 +169,11 @@ class DialogState(rx.State):
 
 def dialog_example():
     return rx.flex(
-        rx.heading(f"Number of times dialog opened or closed: {DialogState.num_opens}"),
-        rx.heading(f"Dialog open: {DialogState.opened}"),
+        rx.heading(
+            f"Number of times dialog opened or closed: {DialogState.num_opens}",
+            as_="h2",
+        ),
+        rx.heading(f"Dialog open: {DialogState.opened}", as_="h2"),
         rx.dialog.root(
             rx.dialog.trigger(rx.button("Open Dialog")),
             rx.dialog.content(
diff --git a/docs/library/overlay/drawer.md b/docs/library/overlay/drawer.md
index 009272c2a67..9c9b7b7e07e 100644
--- a/docs/library/overlay/drawer.md
+++ b/docs/library/overlay/drawer.md
@@ -104,12 +104,12 @@ def drawer_sidebar():
     return rx.vstack(
         lateral_menu(),
         rx.section(
-            rx.heading("Test1", size="8"),
+            rx.heading("Test1", as_="h2", size="8"),
             id="test1",
             height="400px",
         ),
         rx.section(
-            rx.heading("Test2", size="8"),
+            rx.heading("Test2", as_="h2", size="8"),
             id="test2",
             height="400px",
         ),
diff --git a/docs/library/overlay/dropdown_menu.md b/docs/library/overlay/dropdown_menu.md
index f4213dd8099..6e0bda1c10e 100644
--- a/docs/library/overlay/dropdown_menu.md
+++ b/docs/library/overlay/dropdown_menu.md
@@ -221,9 +221,10 @@ class DropdownMenuState(rx.State):
 def dropdown_menu_example():
     return rx.flex(
         rx.heading(
-            f"Number of times Dropdown Menu opened or closed: {DropdownMenuState.num_opens}"
+            f"Number of times Dropdown Menu opened or closed: {DropdownMenuState.num_opens}",
+            as_="h2",
         ),
-        rx.heading(f"Dropdown Menu open: {DropdownMenuState.opened}"),
+        rx.heading(f"Dropdown Menu open: {DropdownMenuState.opened}", as_="h2"),
         rx.menu.root(
             rx.menu.trigger(
                 rx.button("Options", variant="soft", size="2"),
@@ -344,7 +345,9 @@ def menu_call_dialog() -> rx.Component:
         ),
         rx.cond(
             DropdownMenuState2.which_dialog_open,
-            rx.heading(f"{DropdownMenuState2.which_dialog_open} dialog is open"),
+            rx.heading(
+                f"{DropdownMenuState2.which_dialog_open} dialog is open", as_="h2"
+            ),
         ),
         delete_dialog(),
         settings_dialog(),
diff --git a/docs/library/overlay/hover_card.md b/docs/library/overlay/hover_card.md
index 26a347c5aa3..5b634528bda 100644
--- a/docs/library/overlay/hover_card.md
+++ b/docs/library/overlay/hover_card.md
@@ -107,9 +107,10 @@ class HovercardState(rx.State):
 def hovercard_example():
     return rx.flex(
         rx.heading(
-            f"Number of times hovercard opened or closed: {HovercardState.num_opens}"
+            f"Number of times hovercard opened or closed: {HovercardState.num_opens}",
+            as_="h2",
         ),
-        rx.heading(f"Hovercard open: {HovercardState.opened}"),
+        rx.heading(f"Hovercard open: {HovercardState.opened}", as_="h2"),
         rx.text(
             "Hover over the text to see the hover card. ",
             rx.hover_card.root(
diff --git a/docs/library/overlay/popover.md b/docs/library/overlay/popover.md
index 4fce94027e4..9bc0b830e08 100644
--- a/docs/library/overlay/popover.md
+++ b/docs/library/overlay/popover.md
@@ -188,9 +188,10 @@ class PopoverState(rx.State):
 def popover_example():
     return rx.flex(
         rx.heading(
-            f"Number of times popover opened or closed: {PopoverState.num_opens}"
+            f"Number of times popover opened or closed: {PopoverState.num_opens}",
+            as_="h2",
         ),
-        rx.heading(f"Popover open: {PopoverState.opened}"),
+        rx.heading(f"Popover open: {PopoverState.opened}", as_="h2"),
         rx.popover.root(
             rx.popover.trigger(
                 rx.button("Popover"),
diff --git a/docs/library/overlay/tooltip.md b/docs/library/overlay/tooltip.md
index c41bd5d39fc..a7b928be2a5 100644
--- a/docs/library/overlay/tooltip.md
+++ b/docs/library/overlay/tooltip.md
@@ -45,9 +45,10 @@ class TooltipState(rx.State):
 def index():
     return rx.flex(
         rx.heading(
-            f"Number of times tooltip opened or closed: {TooltipState.num_opens}"
+            f"Number of times tooltip opened or closed: {TooltipState.num_opens}",
+            as_="h2",
         ),
-        rx.heading(f"Tooltip open: {TooltipState.opened}"),
+        rx.heading(f"Tooltip open: {TooltipState.opened}", as_="h2"),
         rx.text(
             "Hover over the button to see the tooltip.",
             rx.tooltip(
diff --git a/docs/library/tables-and-data-grids/data_editor.md b/docs/library/tables-and-data-grids/data_editor.md
index 364cbc7125c..a8258a0537a 100644
--- a/docs/library/tables-and-data-grids/data_editor.md
+++ b/docs/library/tables-and-data-grids/data_editor.md
@@ -222,7 +222,7 @@ class DataEditorState_HP(rx.State):
 Here we define a State, as shown below, that allows us to print the location of the cell as a heading when we click on it, using the `on_cell_clicked` `event trigger`. Check out all the other `event triggers` that you can use with datatable at the bottom of this page. We also define a `group` with a label `Data`. This groups all the columns with this `group` label under a larger group `Data` as seen in the table below.
 
 ```python demo box
-rx.heading(DataEditorState_HP.clicked_data)
+rx.heading(DataEditorState_HP.clicked_data, as_="h2")
 ```
 
 ```python demo box
diff --git a/docs/library/tables-and-data-grids/table.md b/docs/library/tables-and-data-grids/table.md
index 99f6446a0ec..5e43294f733 100644
--- a/docs/library/tables-and-data-grids/table.md
+++ b/docs/library/tables-and-data-grids/table.md
@@ -464,7 +464,7 @@ def in_memory_table_example():
 
 Both approaches provide the same user experience with filtering and sorting functionality.
 
-# Database
+## Database
 
 The more common use case for building an `rx.table` is to use data from a database.
 
@@ -1047,7 +1047,7 @@ def loading_data_table_example3():
 
 The real power of the `rx.table` comes where you are able to visualise, add and edit data live in your app. Check out these apps and code to see how this is done: app: https://customer-data-app.reflex.run code: https://github.com/reflex-dev/templates/tree/main/customer_data_app and code: https://github.com/reflex-dev/templates/tree/main/sales.
 
-# Download
+## Download
 
 Most users will want to download their data after they have got the subset that they would like in their table.
 
@@ -1260,11 +1260,11 @@ def download_data_table_example():
     )
 ```
 
-# Real World Example UI
+## Real World Example UI
 
 ```python demo
 rx.flex(
-    rx.heading("Your Team"),
+    rx.heading("Your Team", as_="h2"),
     rx.text("Invite and manage your team members"),
     rx.flex(
         rx.input(placeholder="Email Address"),
diff --git a/docs/library/typography/heading.md b/docs/library/typography/heading.md
index 26132ecbf66..4c85e6da2d7 100644
--- a/docs/library/typography/heading.md
+++ b/docs/library/typography/heading.md
@@ -10,7 +10,7 @@ import reflex as rx
 # Heading
 
 ```python demo
-rx.heading("The quick brown fox jumps over the lazy dog.")
+rx.heading("The quick brown fox jumps over the lazy dog.", as_="h2")
 ```
 
 ## As another element
@@ -33,15 +33,15 @@ Use the `size` prop to control the size of the heading. The prop also provides c
 
 ```python demo
 rx.flex(
-    rx.heading("The quick brown fox jumps over the lazy dog.", size="1"),
-    rx.heading("The quick brown fox jumps over the lazy dog.", size="2"),
-    rx.heading("The quick brown fox jumps over the lazy dog.", size="3"),
-    rx.heading("The quick brown fox jumps over the lazy dog.", size="4"),
-    rx.heading("The quick brown fox jumps over the lazy dog.", size="5"),
-    rx.heading("The quick brown fox jumps over the lazy dog.", size="6"),
-    rx.heading("The quick brown fox jumps over the lazy dog.", size="7"),
-    rx.heading("The quick brown fox jumps over the lazy dog.", size="8"),
-    rx.heading("The quick brown fox jumps over the lazy dog.", size="9"),
+    rx.heading("The quick brown fox jumps over the lazy dog.", as_="h2", size="1"),
+    rx.heading("The quick brown fox jumps over the lazy dog.", as_="h2", size="2"),
+    rx.heading("The quick brown fox jumps over the lazy dog.", as_="h2", size="3"),
+    rx.heading("The quick brown fox jumps over the lazy dog.", as_="h2", size="4"),
+    rx.heading("The quick brown fox jumps over the lazy dog.", as_="h2", size="5"),
+    rx.heading("The quick brown fox jumps over the lazy dog.", as_="h2", size="6"),
+    rx.heading("The quick brown fox jumps over the lazy dog.", as_="h2", size="7"),
+    rx.heading("The quick brown fox jumps over the lazy dog.", as_="h2", size="8"),
+    rx.heading("The quick brown fox jumps over the lazy dog.", as_="h2", size="9"),
     direction="column",
     spacing="3",
 )
@@ -53,10 +53,16 @@ Use the `weight` prop to set the text weight.
 
 ```python demo
 rx.flex(
-    rx.heading("The quick brown fox jumps over the lazy dog.", weight="light"),
-    rx.heading("The quick brown fox jumps over the lazy dog.", weight="regular"),
-    rx.heading("The quick brown fox jumps over the lazy dog.", weight="medium"),
-    rx.heading("The quick brown fox jumps over the lazy dog.", weight="bold"),
+    rx.heading(
+        "The quick brown fox jumps over the lazy dog.", as_="h2", weight="light"
+    ),
+    rx.heading(
+        "The quick brown fox jumps over the lazy dog.", as_="h2", weight="regular"
+    ),
+    rx.heading(
+        "The quick brown fox jumps over the lazy dog.", as_="h2", weight="medium"
+    ),
+    rx.heading("The quick brown fox jumps over the lazy dog.", as_="h2", weight="bold"),
     direction="column",
     spacing="3",
 )
@@ -68,9 +74,9 @@ Use the `align` prop to set text alignment.
 
 ```python demo
 rx.flex(
-    rx.heading("Left-aligned", align="left"),
-    rx.heading("Center-aligned", align="center"),
-    rx.heading("Right-aligned", align="right"),
+    rx.heading("Left-aligned", as_="h2", align="left"),
+    rx.heading("Center-aligned", as_="h2", align="center"),
+    rx.heading("Right-aligned", as_="h2", align="right"),
     direction="column",
     spacing="3",
     width="100%",
@@ -85,6 +91,7 @@ Use the `trim` prop to trim the leading space at the start, end, or both sides o
 rx.flex(
     rx.heading(
         "Without Trim",
+        as_="h2",
         trim="normal",
         style={
             "background": "var(--gray-a2)",
@@ -94,6 +101,7 @@ rx.flex(
     ),
     rx.heading(
         "With Trim",
+        as_="h2",
         trim="both",
         style={
             "background": "var(--gray-a2)",
@@ -113,6 +121,7 @@ rx.flex(
     rx.box(
         rx.heading(
             "Without trim",
+            as_="h2",
             margin_bottom="4px",
             size="3",
         ),
@@ -126,7 +135,7 @@ rx.flex(
         padding="16px",
     ),
     rx.box(
-        rx.heading("With trim", margin_bottom="4px", size="3", trim="start"),
+        rx.heading("With trim", as_="h2", margin_bottom="4px", size="3", trim="start"),
         rx.text(
             "The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant."
         ),
@@ -147,10 +156,18 @@ Use the `color_scheme` prop to assign a specific color, ignoring the global them
 
 ```python demo
 rx.flex(
-    rx.heading("The quick brown fox jumps over the lazy dog.", color_scheme="indigo"),
-    rx.heading("The quick brown fox jumps over the lazy dog.", color_scheme="cyan"),
-    rx.heading("The quick brown fox jumps over the lazy dog.", color_scheme="crimson"),
-    rx.heading("The quick brown fox jumps over the lazy dog.", color_scheme="orange"),
+    rx.heading(
+        "The quick brown fox jumps over the lazy dog.", as_="h2", color_scheme="indigo"
+    ),
+    rx.heading(
+        "The quick brown fox jumps over the lazy dog.", as_="h2", color_scheme="cyan"
+    ),
+    rx.heading(
+        "The quick brown fox jumps over the lazy dog.", as_="h2", color_scheme="crimson"
+    ),
+    rx.heading(
+        "The quick brown fox jumps over the lazy dog.", as_="h2", color_scheme="orange"
+    ),
     direction="column",
 )
 ```
@@ -163,21 +180,25 @@ Use the `high_contrast` prop to increase color contrast with the background.
 rx.flex(
     rx.heading(
         "The quick brown fox jumps over the lazy dog.",
+        as_="h2",
         color_scheme="indigo",
         high_contrast=True,
     ),
     rx.heading(
         "The quick brown fox jumps over the lazy dog.",
+        as_="h2",
         color_scheme="cyan",
         high_contrast=True,
     ),
     rx.heading(
         "The quick brown fox jumps over the lazy dog.",
+        as_="h2",
         color_scheme="crimson",
         high_contrast=True,
     ),
     rx.heading(
         "The quick brown fox jumps over the lazy dog.",
+        as_="h2",
         color_scheme="orange",
         high_contrast=True,
     ),
diff --git a/docs/library/typography/link.md b/docs/library/typography/link.md
index a537b369830..e4e609dec58 100644
--- a/docs/library/typography/link.md
+++ b/docs/library/typography/link.md
@@ -48,7 +48,7 @@ rx.link("Example", href="/docs/library/typography/link#example")
 It is also possible to redirect the user to a new path within the application, using `rx.redirect()`. Check out the docs [here](/docs/api-reference/special-events).
 ```
 
-# Style
+## Style
 
 ## Size
 
diff --git a/docs/library/typography/markdown.md b/docs/library/typography/markdown.md
index e19aab2f5f7..b6a40736af9 100644
--- a/docs/library/typography/markdown.md
+++ b/docs/library/typography/markdown.md
@@ -161,9 +161,9 @@ The `pre` and `a` tags are special cases. In addition to the `text`, they also r
 
 ````python demo exec
 component_map = {
-    "h1": lambda text: rx.heading(text, size="5", margin_y="1em"),
-    "h2": lambda text: rx.heading(text, size="3", margin_y="1em"),
-    "h3": lambda text: rx.heading(text, size="1", margin_y="1em"),
+    "h1": lambda text: rx.heading(text, as_="h2", size="5", margin_y="1em"),
+    "h2": lambda text: rx.heading(text, as_="h2", size="3", margin_y="1em"),
+    "h3": lambda text: rx.heading(text, as_="h2", size="1", margin_y="1em"),
     "p": lambda text: rx.text(text, color="green", margin_y="1em"),
     "code": lambda text: rx.code(text, color="purple"),
     "pre": lambda text, **props: rx.code_block(
diff --git a/docs/library/typography/text.md b/docs/library/typography/text.md
index 5160b796480..da00e7ed54f 100644
--- a/docs/library/typography/text.md
+++ b/docs/library/typography/text.md
@@ -119,6 +119,7 @@ rx.flex(
     rx.box(
         rx.heading(
             "Without trim",
+            as_="h2",
             margin_bottom="4px",
             size="3",
         ),
@@ -132,7 +133,7 @@ rx.flex(
         padding="16px",
     ),
     rx.box(
-        rx.heading("With trim", margin_bottom="4px", size="3", trim="start"),
+        rx.heading("With trim", as_="h2", margin_bottom="4px", size="3", trim="start"),
         rx.text(
             "The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant."
         ),
diff --git a/docs/pages/dynamic_routing.md b/docs/pages/dynamic_routing.md
index 0d969789e8c..5484c0e3323 100644
--- a/docs/pages/dynamic_routing.md
+++ b/docs/pages/dynamic_routing.md
@@ -25,7 +25,7 @@ Example:
 def post():
     """A page that updates based on the route."""
     # Displays the dynamic part of the URL, the post ID
-    return rx.heading(rx.State.pid)
+    return rx.heading(rx.State.pid, as_="h2")
 
 
 app = rx.App()
diff --git a/docs/recipes/content/forms.md b/docs/recipes/content/forms.md
index 709f0d9b3b3..12beb494bd0 100644
--- a/docs/recipes/content/forms.md
+++ b/docs/recipes/content/forms.md
@@ -38,7 +38,7 @@ def event_form() -> rx.Component:
                     padding="0.65rem",
                 ),
                 rx.vstack(
-                    rx.heading("Create an event", size="4", weight="bold"),
+                    rx.heading("Create an event", as_="h2", size="4", weight="bold"),
                     rx.text("Fill the form to create a custom event", size="2"),
                     spacing="1",
                     height="100%",
@@ -108,7 +108,7 @@ def contact_form() -> rx.Component:
                     padding="0.65rem",
                 ),
                 rx.vstack(
-                    rx.heading("Send us a message", size="4", weight="bold"),
+                    rx.heading("Send us a message", as_="h2", size="4", weight="bold"),
                     rx.text("Fill the form to contact us", size="2"),
                     spacing="1",
                     height="100%",
diff --git a/docs/recipes/content/stats.md b/docs/recipes/content/stats.md
index 09d9becbed2..72c04775330 100644
--- a/docs/recipes/content/stats.md
+++ b/docs/recipes/content/stats.md
@@ -39,7 +39,7 @@ def stats(
                     padding="0.7rem",
                 ),
                 rx.vstack(
-                    rx.heading(f"{value:,}", size="6", weight="bold"),
+                    rx.heading(f"{value:,}", as_="h2", size="6", weight="bold"),
                     rx.text(stat_name, size="4", weight="medium"),
                     spacing="1",
                     height="100%",
@@ -130,7 +130,7 @@ def stats_2(
                     width="100%",
                 ),
                 rx.hstack(
-                    rx.heading(f"{value:,}", size="7", weight="bold"),
+                    rx.heading(f"{value:,}", as_="h2", size="7", weight="bold"),
                     rx.text(
                         f"from {prev_value:,}", size="3", color=rx.color("gray", 10)
                     ),
diff --git a/docs/recipes/layout/footer.md b/docs/recipes/layout/footer.md
index 87587c8f974..93ef9236966 100644
--- a/docs/recipes/layout/footer.md
+++ b/docs/recipes/layout/footer.md
@@ -70,7 +70,7 @@ def footer() -> rx.Component:
                             height="auto",
                             border_radius="25%",
                         ),
-                        rx.heading("Reflex", size="7", weight="bold"),
+                        rx.heading("Reflex", as_="h2", size="7", weight="bold"),
                         align_items="center",
                     ),
                     rx.text(
diff --git a/docs/recipes/layout/navbar.md b/docs/recipes/layout/navbar.md
index 0817dd97306..b2cd402df7b 100644
--- a/docs/recipes/layout/navbar.md
+++ b/docs/recipes/layout/navbar.md
@@ -33,7 +33,7 @@ def navbar() -> rx.Component:
                         height="auto",
                         border_radius="25%",
                     ),
-                    rx.heading("Reflex", size="7", weight="bold"),
+                    rx.heading("Reflex", as_="h2", size="7", weight="bold"),
                     align_items="center",
                 ),
                 rx.hstack(
@@ -58,7 +58,7 @@ def navbar() -> rx.Component:
                         height="auto",
                         border_radius="25%",
                     ),
-                    rx.heading("Reflex", size="6", weight="bold"),
+                    rx.heading("Reflex", as_="h2", size="6", weight="bold"),
                     align_items="center",
                 ),
                 rx.menu.root(
@@ -103,7 +103,7 @@ def navbar_dropdown() -> rx.Component:
                         height="auto",
                         border_radius="25%",
                     ),
-                    rx.heading("Reflex", size="7", weight="bold"),
+                    rx.heading("Reflex", as_="h2", size="7", weight="bold"),
                     align_items="center",
                 ),
                 rx.hstack(
@@ -143,7 +143,7 @@ def navbar_dropdown() -> rx.Component:
                         height="auto",
                         border_radius="25%",
                     ),
-                    rx.heading("Reflex", size="6", weight="bold"),
+                    rx.heading("Reflex", as_="h2", size="6", weight="bold"),
                     align_items="center",
                 ),
                 rx.menu.root(
@@ -192,7 +192,7 @@ def navbar_searchbar() -> rx.Component:
                         height="auto",
                         border_radius="25%",
                     ),
-                    rx.heading("Reflex", size="7", weight="bold"),
+                    rx.heading("Reflex", as_="h2", size="7", weight="bold"),
                     align_items="center",
                 ),
                 rx.input(
@@ -216,7 +216,7 @@ def navbar_searchbar() -> rx.Component:
                         height="auto",
                         border_radius="25%",
                     ),
-                    rx.heading("Reflex", size="6", weight="bold"),
+                    rx.heading("Reflex", as_="h2", size="6", weight="bold"),
                     align_items="center",
                 ),
                 rx.input(
@@ -267,7 +267,7 @@ def navbar_icons() -> rx.Component:
                         height="auto",
                         border_radius="25%",
                     ),
-                    rx.heading("Reflex", size="7", weight="bold"),
+                    rx.heading("Reflex", as_="h2", size="7", weight="bold"),
                     align_items="center",
                 ),
                 rx.hstack(
@@ -291,7 +291,7 @@ def navbar_icons() -> rx.Component:
                         height="auto",
                         border_radius="25%",
                     ),
-                    rx.heading("Reflex", size="6", weight="bold"),
+                    rx.heading("Reflex", as_="h2", size="6", weight="bold"),
                     align_items="center",
                 ),
                 rx.menu.root(
@@ -336,7 +336,7 @@ def navbar_buttons() -> rx.Component:
                         height="auto",
                         border_radius="25%",
                     ),
-                    rx.heading("Reflex", size="7", weight="bold"),
+                    rx.heading("Reflex", as_="h2", size="7", weight="bold"),
                     align_items="center",
                 ),
                 rx.hstack(
@@ -366,7 +366,7 @@ def navbar_buttons() -> rx.Component:
                         height="auto",
                         border_radius="25%",
                     ),
-                    rx.heading("Reflex", size="6", weight="bold"),
+                    rx.heading("Reflex", as_="h2", size="6", weight="bold"),
                     align_items="center",
                 ),
                 rx.menu.root(
@@ -414,7 +414,7 @@ def navbar_user() -> rx.Component:
                         height="auto",
                         border_radius="25%",
                     ),
-                    rx.heading("Reflex", size="7", weight="bold"),
+                    rx.heading("Reflex", as_="h2", size="7", weight="bold"),
                     align_items="center",
                 ),
                 rx.hstack(
@@ -450,7 +450,7 @@ def navbar_user() -> rx.Component:
                         height="auto",
                         border_radius="25%",
                     ),
-                    rx.heading("Reflex", size="6", weight="bold"),
+                    rx.heading("Reflex", as_="h2", size="6", weight="bold"),
                     align_items="center",
                 ),
                 rx.menu.root(
diff --git a/docs/recipes/layout/sidebar.md b/docs/recipes/layout/sidebar.md
index cb3bf4b7294..351f1c83aa3 100644
--- a/docs/recipes/layout/sidebar.md
+++ b/docs/recipes/layout/sidebar.md
@@ -91,7 +91,7 @@ def sidebar() -> rx.Component:
                         height="auto",
                         border_radius="25%",
                     ),
-                    rx.heading("Reflex", size="7", weight="bold"),
+                    rx.heading("Reflex", as_="h2", size="7", weight="bold"),
                     align="center",
                     justify="start",
                     padding_x="0.5rem",
@@ -193,7 +193,7 @@ def sidebar_bottom_profile() -> rx.Component:
                         height="auto",
                         border_radius="25%",
                     ),
-                    rx.heading("Reflex", size="7", weight="bold"),
+                    rx.heading("Reflex", as_="h2", size="7", weight="bold"),
                     align="center",
                     justify="start",
                     padding_x="0.5rem",
diff --git a/docs/recipes/others/chips.md b/docs/recipes/others/chips.md
index a38675fc234..04a1567c309 100644
--- a/docs/recipes/others/chips.md
+++ b/docs/recipes/others/chips.md
@@ -91,7 +91,7 @@ def item_selector() -> rx.Component:
     return rx.vstack(
         rx.hstack(
             rx.icon("clock", size=20),
-            rx.heading("Select your reservation time:", size="4"),
+            rx.heading("Select your reservation time:", as_="h2", size="4"),
             spacing="2",
             align="center",
             width="100%",
@@ -205,7 +205,9 @@ def items_selector() -> rx.Component:
             rx.hstack(
                 rx.icon("lightbulb", size=20),
                 rx.heading(
-                    "Skills" + f" ({BasicChipsState.selected_items.length()})", size="4"
+                    "Skills" + f" ({BasicChipsState.selected_items.length()})",
+                    as_="h2",
+                    size="4",
                 ),
                 spacing="1",
                 align="center",
diff --git a/docs/recipes/others/speed_dial.md b/docs/recipes/others/speed_dial.md
index 0e56ef7fd3e..23e0026f9f2 100644
--- a/docs/recipes/others/speed_dial.md
+++ b/docs/recipes/others/speed_dial.md
@@ -6,7 +6,7 @@ import reflex as rx
 
 A speed dial is a component that allows users to quickly access frequently used actions or pages. It is often used in the bottom right corner of the screen.
 
-# Vertical
+## Vertical
 
 ```python demo exec toggle
 class SpeedDialVertical(rx.ComponentState):
@@ -93,7 +93,7 @@ def render_vertical():
     )
 ```
 
-# Horizontal
+## Horizontal
 
 ```python demo exec toggle
 class SpeedDialHorizontal(rx.ComponentState):
@@ -181,7 +181,7 @@ def render_horizontal():
     )
 ```
 
-# Vertical with text
+## Vertical with text
 
 ```python demo exec toggle
 class SpeedDialVerticalText(rx.ComponentState):
@@ -275,7 +275,7 @@ def render_vertical_text():
     )
 ```
 
-# Reveal animation
+## Reveal animation
 
 ```python demo exec toggle
 class SpeedDialReveal(rx.ComponentState):
@@ -378,7 +378,7 @@ def render_reveal():
     )
 ```
 
-# Menu
+## Menu
 
 ```python demo exec toggle
 class SpeedDialMenu(rx.ComponentState):
diff --git a/docs/state/overview.md b/docs/state/overview.md
index b766dc01a95..e5e040a5aee 100644
--- a/docs/state/overview.md
+++ b/docs/state/overview.md
@@ -5,7 +5,11 @@ import reflex as rx
 def definition(title, *children):
     return rx.vstack(
         rx.heading(
-            title, font_size="1em", font_weight="bold", color=rx.color("mauve", 12)
+            title,
+            as_="h2",
+            font_size="1em",
+            font_weight="bold",
+            color=rx.color("mauve", 12),
         ),
         *children,
         color=rx.color("mauve", 10),
@@ -134,6 +138,7 @@ class ExampleState(rx.State):
 def index():
     return rx.heading(
         "Welcome to Reflex!",
+        as_="h2",
         # Event handlers can be bound to event triggers.
         on_click=ExampleState.next_color,
         # State vars can be bound to component props.
diff --git a/docs/state_structure/mixins.md b/docs/state_structure/mixins.md
index 19e087a9dec..7d2aa9fd471 100644
--- a/docs/state_structure/mixins.md
+++ b/docs/state_structure/mixins.md
@@ -38,7 +38,7 @@ class MyState(CounterMixin, rx.State):
 
 def counter_example():
     return rx.vstack(
-        rx.heading(MyState.name),
+        rx.heading(MyState.name, as_="h2"),
         rx.text(MyState.count_display),
         rx.button("Increment", on_click=MyState.increment),
         spacing="4",
@@ -83,7 +83,7 @@ class CombinedState(CounterMixin, TimestampMixin, LoggingMixin, rx.State):
 
 def multi_mixin_example():
     return rx.vstack(
-        rx.heading(CombinedState.app_name),
+        rx.heading(CombinedState.app_name, as_="h2"),
         rx.text(CombinedState.count_display),
         rx.text(f"Last updated: {CombinedState.last_updated}"),
         rx.button("Increment & Log", on_click=CombinedState.increment_with_log),
@@ -120,7 +120,7 @@ class AppState(DatabaseMixin, rx.State):
 
 def database_example():
     return rx.vstack(
-        rx.heading(AppState.app_title),
+        rx.heading(AppState.app_title, as_="h2"),
         rx.text(f"User count: {AppState.user_count}"),
         rx.button("Fetch Users", on_click=AppState.fetch_user_count),
         spacing="4",
@@ -160,7 +160,7 @@ class PriceState(FormattingMixin, rx.State):
 
 def formatting_example():
     return rx.vstack(
-        rx.heading(f"Product: {PriceState.product_name}"),
+        rx.heading(f"Product: {PriceState.product_name}", as_="h2"),
         rx.text(f"Price: {PriceState.formatted_value}"),
         rx.text(f"Positive: {PriceState.is_positive}"),
         rx.input(
@@ -297,7 +297,7 @@ class ContactFormState(ValidationMixin, rx.State):
 
 def validation_example():
     return rx.vstack(
-        rx.heading("Contact Form"),
+        rx.heading("Contact Form", as_="h2"),
         rx.input(
             placeholder="Name",
             value=ContactFormState.name,
diff --git a/docs/state_structure/overview.md b/docs/state_structure/overview.md
index 4f0f73ab253..e93cd09b134 100644
--- a/docs/state_structure/overview.md
+++ b/docs/state_structure/overview.md
@@ -200,7 +200,7 @@ class DisplayState(rx.State):
 
 def var_value_example():
     return rx.vstack(
-        rx.heading("Get Var Value Example"),
+        rx.heading("Get Var Value Example", as_="h2"),
         rx.hstack(
             # This button calls DisplayState.show_count to display the current count
             rx.button("Get Count Value", on_click=DisplayState.show_count),
diff --git a/docs/ui/overview.md b/docs/ui/overview.md
index f2802356eca..d22e9c4c94e 100644
--- a/docs/ui/overview.md
+++ b/docs/ui/overview.md
@@ -40,7 +40,7 @@ Now let's take a look at a more complex component, which has other components ne
 
 ```python demo
 rx.vstack(
-    rx.heading("Sample Form"),
+    rx.heading("Sample Form", as_="h2"),
     rx.input(placeholder="Name"),
     rx.checkbox("Subscribe to Newsletter"),
 )
diff --git a/docs/vars/base_vars.md b/docs/vars/base_vars.md
index 226ee93a6f8..c0a0d791d15 100644
--- a/docs/vars/base_vars.md
+++ b/docs/vars/base_vars.md
@@ -30,7 +30,7 @@ class TickerState(rx.State):
 def ticker_example():
     return rx.center(
         rx.vstack(
-            rx.heading(TickerState.ticker, size="3"),
+            rx.heading(TickerState.ticker, as_="h2", size="3"),
             rx.text(f"Current Price: {TickerState.price}", font_size="md"),
             rx.text("Change: 4%", color="green"),
         ),
@@ -66,7 +66,7 @@ from .state import TickerState
 def ticker_example():
     return rx.center(
         rx.vstack(
-            rx.heading(TickerState.ticker, size="3"),
+            rx.heading(TickerState.ticker, as_="h2", size="3"),
             rx.text(f"Current Price: {TickerState.price}", font_size="md"),
             rx.text("Change: 4%", color="green"),
         ),
diff --git a/docs/vars/computed_vars.md b/docs/vars/computed_vars.md
index e8574fa078a..36a048e8187 100644
--- a/docs/vars/computed_vars.md
+++ b/docs/vars/computed_vars.md
@@ -28,7 +28,7 @@ class UppercaseState(rx.State):
 
 def uppercase_example():
     return rx.vstack(
-        rx.heading(UppercaseState.upper_text),
+        rx.heading(UppercaseState.upper_text, as_="h2"),
         rx.input(on_blur=UppercaseState.set_text, placeholder="Type here..."),
     )
 ```
@@ -124,7 +124,7 @@ class AsyncVarState(rx.State):
 
 def async_var_example():
     return rx.vstack(
-        rx.heading("Async Computed Var Example"),
+        rx.heading("Async Computed Var Example", as_="h2"),
         rx.text(f"Count: {AsyncVarState.count}"),
         rx.text(f"Delayed count (x2): {AsyncVarState.delayed_count}"),
         rx.button("Increment", on_click=AsyncVarState.increment),
@@ -172,7 +172,7 @@ class AsyncCachedVarState(rx.State):
 
 def async_cached_var_example():
     return rx.vstack(
-        rx.heading("Cached Async Computed Var Example"),
+        rx.heading("Cached Async Computed Var Example", as_="h2"),
         rx.text(f"User ID: {AsyncCachedVarState.user_id}"),
         rx.text(f"User Name: {AsyncCachedVarState.user_data['name']}"),
         rx.text(f"User Email: {AsyncCachedVarState.user_data['email']}"),
diff --git a/docs/vars/var-operations.md b/docs/vars/var-operations.md
index 5ac27068b5e..17d40be40b3 100644
--- a/docs/vars/var-operations.md
+++ b/docs/vars/var-operations.md
@@ -46,7 +46,7 @@ class VarSelectState(rx.State):
 def var_operations_example():
     return rx.vstack(
         # Using a var operation to concatenate a string with a var.
-        rx.heading("I just bought a bunch of " + VarSelectState.selected),
+        rx.heading("I just bought a bunch of " + VarSelectState.selected, as_="h2"),
         # Using an f-string to interpolate a var.
         rx.text(f"{VarSelectState.selected} is going to the moon!"),
         rx.select(
@@ -117,7 +117,7 @@ class OperState(rx.State):
 
 def var_operation_example():
     return rx.vstack(
-        rx.heading(f"The number: {OperState.number}", size="3"),
+        rx.heading(f"The number: {OperState.number}", as_="h2", size="3"),
         rx.hstack(
             rx.text(
                 "Negated:",
@@ -383,15 +383,15 @@ class ListsState(rx.State):
 def var_list_example():
     return rx.hstack(
         rx.vstack(
-            rx.heading(f"List 1: {ListsState.list_1}", size="3"),
+            rx.heading(f"List 1: {ListsState.list_1}", as_="h2", size="3"),
             rx.text(f"List 1 Contains 3: {ListsState.list_1.contains(3)}"),
         ),
         rx.vstack(
-            rx.heading(f"List 2: {ListsState.list_2}", size="3"),
+            rx.heading(f"List 2: {ListsState.list_2}", as_="h2", size="3"),
             rx.text(f"Reverse List 2: {ListsState.list_2.reverse()}"),
         ),
         rx.vstack(
-            rx.heading(f"List 3: {ListsState.list_3}", size="3"),
+            rx.heading(f"List 3: {ListsState.list_3}", as_="h2", size="3"),
             rx.text(f"List 3 Joins: {ListsState.list_3.join()}"),
         ),
     )
@@ -410,11 +410,11 @@ class StringState(rx.State):
 def var_string_example():
     return rx.hstack(
         rx.vstack(
-            rx.heading(f"List 1: {StringState.string_1}", size="3"),
+            rx.heading(f"List 1: {StringState.string_1}", as_="h2", size="3"),
             rx.text(f"List 1 Lower Case: {StringState.string_1.lower()}"),
         ),
         rx.vstack(
-            rx.heading(f"List 2: {StringState.string_2}", size="3"),
+            rx.heading(f"List 2: {StringState.string_2}", as_="h2", size="3"),
             rx.text(f"List 2 Upper Case: {StringState.string_2.upper()}"),
             rx.text(f"Split String 2: {StringState.string_2.split()}"),
         ),
@@ -588,7 +588,7 @@ class VarNumberState(rx.State):
 
 def var_number_example():
     return rx.vstack(
-        rx.heading(f"The number is {VarNumberState.number}", size="5"),
+        rx.heading(f"The number is {VarNumberState.number}", as_="h2", size="5"),
         # Var operations can be composed for more complex expressions.
         rx.cond(
             VarNumberState.number % 2 == 0,
diff --git a/docs/wrapping-react/library-and-tags.md b/docs/wrapping-react/library-and-tags.md
index 1e82843b4c8..ede1303e6b9 100644
--- a/docs/wrapping-react/library-and-tags.md
+++ b/docs/wrapping-react/library-and-tags.md
@@ -12,7 +12,7 @@ There are two ways to find a component to wrap:
 
 In both cases, the process of wrapping the component is the same except for the `library` field.
 
-# Wrapping the Component
+## Wrapping the Component
 
 To start wrapping your React component, the first step is to create a new component in your Reflex app. This is done by creating a new class that inherits from `rx.Component` or `rx.NoSSRComponent`.
 
@@ -66,7 +66,7 @@ class MyBaseComponent(rx.Component):
         return super().create(*children, **props)
 ```
 
-# Wrapping a Dynamic Component
+## Wrapping a Dynamic Component
 
 When wrapping some libraries, you may want to use dynamic imports. This is because they may not be compatible with Server-Side Rendering (SSR).
 
@@ -111,7 +111,7 @@ The reason for this is that it does not make sense for your server to render the
 
 In addition, if in the component documentation it mentions nextJS compatibility or server side rendering compatibility, it is a good sign that it requires dynamic imports.
 
-# Advanced - Parsing a state Var with a JS Function
+## Advanced - Parsing a state Var with a JS Function
 
 When wrapping a component, you may need to parse a state var by applying a JS function to it.
 
diff --git a/docs/wrapping-react/local-packages.md b/docs/wrapping-react/local-packages.md
index 86e9e1968e8..6b7fb832321 100644
--- a/docs/wrapping-react/local-packages.md
+++ b/docs/wrapping-react/local-packages.md
@@ -33,12 +33,12 @@ class Hello(rx.Component):
                 width="50px",
                 height="50px",
             ),
-            rx.heading("Hello ", *children),
+            rx.heading("Hello ", *children, as_="h2"),
             **props,
         )
 ```
 
-# Local Components
+## Local Components
 
 You can also wrap components that you have written yourself. For local components (when the code source is directly in the project), we recommend putting it beside the files that is wrapping it.
 
@@ -104,7 +104,7 @@ simpler or more performant when implemented directly in Javascript, such as:
   - For application-specific use, it may be easier to wrap a local component that
     provides the needed subset of the library's functionality in a simpler API for use in Reflex.
 
-# Local Packages
+## Local Packages
 
 If the component is part of a local package, available on Github, or
 downloadable via a web URL, it can also be wrapped in Reflex. Specify the path
diff --git a/docs/wrapping-react/overview.md b/docs/wrapping-react/overview.md
index 8f148aa456e..453c38d47fe 100644
--- a/docs/wrapping-react/overview.md
+++ b/docs/wrapping-react/overview.md
@@ -78,7 +78,7 @@ ColorPickerState = ClientStateVar.create(default="#db114b", var_name="color")
 rx.box(
     ColorPickerState,
     rx.vstack(
-        rx.heading(ColorPickerState.value, color="white"),
+        rx.heading(ColorPickerState.value, as_="h2", color="white"),
         color_picker(on_change=ColorPickerState.set_value),
     ),
     background_color=ColorPickerState.value,
@@ -113,7 +113,7 @@ class ColorPickerState(rx.State):
 def index():
     return rx.box(
         rx.vstack(
-            rx.heading(ColorPickerState.color, color="white"),
+            rx.heading(ColorPickerState.color, as_="h2", color="white"),
             color_picker(on_change=ColorPickerState.set_color),
         ),
         background_color=ColorPickerState.color,
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/gallery/common.py b/packages/reflex-site-shared/src/reflex_site_shared/gallery/common.py
index 8b7d9fb330b..c3db2d063bf 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/gallery/common.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/gallery/common.py
@@ -100,6 +100,7 @@ def integration_image(integration: str, class_name: str = ""):
                 get_integration_logo_url(integration, "light"),
                 get_integration_logo_url(integration, "dark"),
             ),
+            alt=f"{integration} logo",
             unstyled=True,
             class_name="size-full",
         ),
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/gallery/gallery.py b/packages/reflex-site-shared/src/reflex_site_shared/gallery/gallery.py
index 53aa7acafc5..062021584f9 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/gallery/gallery.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/gallery/gallery.py
@@ -101,6 +101,7 @@ def integration_image(integration: str, class_name: str = ""):
                 get_integration_logo_url(integration, "light"),
                 get_integration_logo_url(integration, "dark"),
             ),
+            alt=f"{integration} logo",
             unstyled=True,
             class_name="size-full",
         ),
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/views/footer.py b/packages/reflex-site-shared/src/reflex_site_shared/views/footer.py
index 9e265526339..8549fa5d604 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/views/footer.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/views/footer.py
@@ -270,14 +270,14 @@ def footer_index(
                                     "Enterprise",
                                     "/docs/enterprise/overview/",
                                 ),
-                                footer_link("App Management", "/hosting"),
-                                footer_link("Pricing", "/pricing"),
+                                footer_link("App Management", "/hosting/"),
+                                footer_link("Pricing", "/pricing/"),
                             ],
                         ),
                         footer_link_flex(
                             "Solutions",
                             [
-                                footer_link("Enterprise", "/use-cases"),
+                                footer_link("Enterprise", "/use-cases/"),
                                 footer_link("Finance", "/use-cases/finance"),
                                 footer_link("Healthcare", "/use-cases/healthcare"),
                                 footer_link("Consulting", "/use-cases/consulting"),
@@ -288,7 +288,7 @@ def footer_index(
                             "Resources",
                             [
                                 footer_link("Blog", "/blog/"),
-                                footer_link("Templates", "/templates"),
+                                footer_link("Templates", "/templates/"),
                                 footer_link(
                                     "Integrations",
                                     "/docs/ai/integrations/overview/",
@@ -315,13 +315,13 @@ def footer_index(
                             [
                                 footer_link("Documentation", "/docs/"),
                                 footer_link("Changelog", CHANGELOG_URL),
-                                footer_link("Common Errors", "/errors"),
+                                footer_link("Common Errors", "/errors/"),
                             ],
                         ),
                         footer_link_flex(
                             "Company",
                             [
-                                footer_link("About", "/about"),
+                                footer_link("About", "/about/"),
                                 footer_link(
                                     "Careers",
                                     "https://www.ycombinator.com/companies/reflex/jobs",
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/views/marketing_navbar.py b/packages/reflex-site-shared/src/reflex_site_shared/views/marketing_navbar.py
index 61439999972..99b17971ec0 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/views/marketing_navbar.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/views/marketing_navbar.py
@@ -479,7 +479,7 @@ def case_studies_column() -> rx.Component:
                 class_name="relative z-10",
             ),
             rx.el.elements.a(
-                href="/customers",
+                href="/customers/",
                 class_name="absolute inset-0",
                 custom_attrs={"aria-label": "View Autodesk case study"},
             ),
@@ -687,8 +687,8 @@ def resources_content() -> rx.Component:
                             solutions_column(
                                 "Learn",
                                 [
-                                    ("Documentation", "File02Icon", "/docs"),
-                                    ("Templates", "Layout02Icon", "/templates"),
+                                    ("Documentation", "File02Icon", "/docs/"),
+                                    ("Templates", "Layout02Icon", "/templates/"),
                                     ("Changelog", "Clock02Icon", CHANGELOG_URL),
                                 ],
                             ),
@@ -739,7 +739,7 @@ def navigation_menu() -> rx.Component:
                         variant="ghost",
                         native_button=False,
                     ),
-                    href="/pricing",
+                    href="/pricing/",
                 ),
                 class_name="xl:flex hidden px-1",
                 custom_attrs={"role": "menuitem"},
@@ -751,7 +751,7 @@ def navigation_menu() -> rx.Component:
                         size="sm",
                         variant="ghost",
                     ),
-                    href="/docs",
+                    href="/docs/",
                 ),
                 class_name="xl:flex hidden px-1",
                 custom_attrs={"role": "menuitem"},
diff --git a/packages/reflex-site-shared/src/reflex_site_shared/views/sidebar/__init__.py b/packages/reflex-site-shared/src/reflex_site_shared/views/sidebar/__init__.py
index 8a293b6f046..2f28c8f52b6 100644
--- a/packages/reflex-site-shared/src/reflex_site_shared/views/sidebar/__init__.py
+++ b/packages/reflex-site-shared/src/reflex_site_shared/views/sidebar/__init__.py
@@ -252,10 +252,10 @@ def resources_panel() -> rx.Component:
         drawer_card(
             drawer_category(
                 "Learn",
-                drawer_panel_item(nav_icon("File02Icon"), "Documentation", "/docs"),
-                drawer_panel_item(nav_icon("Layout02Icon"), "Templates", "/templates"),
+                drawer_panel_item(nav_icon("File02Icon"), "Documentation", "/docs/"),
+                drawer_panel_item(nav_icon("Layout02Icon"), "Templates", "/templates/"),
                 drawer_panel_item(nav_icon("Clock02Icon"), "Changelog", CHANGELOG_URL),
-                drawer_panel_item(nav_icon("News01Icon"), "Blog", "/blog"),
+                drawer_panel_item(nav_icon("News01Icon"), "Blog", "/blog/"),
             ),
             drawer_category(
                 "Agent onboarding",
@@ -349,7 +349,7 @@ def solutions_panel() -> rx.Component:
             drawer_panel_item(
                 custom_nav_icon("feather_pen"),
                 "Read customer stories",
-                "/customers",
+                "/customers/",
             ),
             demo_form_dialog(
                 trigger=rx.el.div(
@@ -463,8 +463,8 @@ def navbar_sidebar_drawer(trigger: rx.Component) -> rx.Component:
                         drawer_collapsible("Resources", resources_panel()),
                         drawer_collapsible("Solutions", solutions_panel()),
                         drawer_link("Enterprise", "/docs/enterprise/overview/"),
-                        drawer_link("Pricing", "/pricing"),
-                        drawer_link("Docs", "/docs"),
+                        drawer_link("Pricing", "/pricing/"),
+                        drawer_link("Docs", "/docs/"),
                         class_name="flex flex-col flex-1 w-full overflow-y-auto min-h-0",
                     ),
                     drawer_footer(),