diff --git a/docs/advanced_onboarding/code_structure.md b/docs/advanced_onboarding/code_structure.md
index f400bb498a7..368effa5536 100644
--- a/docs/advanced_onboarding/code_structure.md
+++ b/docs/advanced_onboarding/code_structure.md
@@ -1,4 +1,8 @@
 
+```python exec
+from reflex_docs.pages.docs import custom_components
+```
+
 # Project Structure (Advanced)
 
 ## App Module
@@ -255,7 +259,7 @@ component.
 
 ### External Components
 
-Reflex 0.4.3 introduced support for the [`reflex component` CLI commands](/docs/custom-components/overview), which makes it easy
+Reflex 0.4.3 introduced support for the [`reflex component` CLI commands]({custom_components.overview.path}), which makes it easy
 to bundle up common functionality to publish on PyPI as a standalone Python package
 that can be installed and used in any Reflex app.
 
diff --git a/docs/advanced_onboarding/configuration.md b/docs/advanced_onboarding/configuration.md
index d538c8b7c75..3874343422b 100644
--- a/docs/advanced_onboarding/configuration.md
+++ b/docs/advanced_onboarding/configuration.md
@@ -1,4 +1,8 @@
 
+```python exec
+from reflex_docs.pages.docs import api_reference
+```
+
 # Configuration
 
 Reflex apps can be configured using a configuration file, environment variables, and command line arguments.
@@ -42,7 +46,7 @@ Finally, you can override the configuration file and environment variables by pa
 uv run reflex run --frontend-port 3001
 ```
 
-See the [CLI reference](/docs/api-reference/cli) for all the arguments available.
+See the [CLI reference]({api_reference.cli.path}) for all the arguments available.
 
 ## Customizable App Data Directory
 
diff --git a/docs/advanced_onboarding/how-reflex-works.md b/docs/advanced_onboarding/how-reflex-works.md
index 98952e23fa9..506e25c339c 100644
--- a/docs/advanced_onboarding/how-reflex-works.md
+++ b/docs/advanced_onboarding/how-reflex-works.md
@@ -1,3 +1,7 @@
+
+```python exec
+from reflex_docs.pages.docs import custom_components, events, styling, wrapping_react
+```
 # How Reflex Works
 
 We'll use the following basic app that displays Github profile images as an example to explain the different parts of the architecture.
@@ -114,15 +118,15 @@ Many of our core components are based on [Radix](https://radix-ui.com/), a popul
 
 We chose React because it is a popular library with a huge ecosystem. Our goal isn't to recreate the web ecosystem, but to make it accessible to Python developers.
 
-This also lets our users bring their own components if we don't have a component they need. Users can [wrap their own React components](/docs/wrapping-react/overview) and then [publish them](/docs/custom-components/overview) for others to use. Over time we will build out our [third party component ecosystem](/docs/custom-components/overview) so that users can easily find and use components that others have built.
+This also lets our users bring their own components if we don't have a component they need. Users can [wrap their own React components]({wrapping_react.overview.path}) and then [publish them]({custom_components.overview.path}) for others to use. Over time we will build out our [third party component ecosystem]({custom_components.overview.path}) so that users can easily find and use components that others have built.
 
 ### Styling
 
 We wanted to make sure Reflex apps look good out of the box, while still giving developers full control over the appearance of their app.
 
-We have a core [theming system](/docs/styling/theming) that lets you set high level styling options such as dark mode and accent color throughout your app to give it a unified look and feel.
+We have a core [theming system]({styling.theming.path}) that lets you set high level styling options such as dark mode and accent color throughout your app to give it a unified look and feel.
 
-Beyond this, Reflex components can be styled using the full power of CSS. We leverage the [Emotion](https://emotion.sh/docs/introduction) library to allow "CSS-in-Python" styling, so you can pass any CSS prop as a keyword argument to a component. This includes [responsive props](/docs/styling/responsive) by passing a list of values.
+Beyond this, Reflex components can be styled using the full power of CSS. We leverage the [Emotion](https://emotion.sh/docs/introduction) library to allow "CSS-in-Python" styling, so you can pass any CSS prop as a keyword argument to a component. This includes [responsive props]({styling.responsive.path}) by passing a list of values.
 
 ## Backend
 
@@ -197,7 +201,7 @@ On the frontend, we maintain an event queue of all pending events.
 When an event is triggered, it is added to the queue. We have a `processing` flag to make sure only one event is processed at a time. This ensures that the state is always consistent and there aren't any race conditions with two event handlers modifying the state at the same time.
 
 ```md alert info
-# There are exceptions to this, such as [background events](/docs/events/background_events) which allow you to run events in the background without blocking the UI.
+# There are exceptions to this, such as [background events]({events.background_events.path}) which allow you to run events in the background without blocking the UI.
 ```
 
 Once the event is ready to be processed, it is sent to the backend through a WebSocket connection.
@@ -225,7 +229,7 @@ In our example, the `set_profile` event handler is run on the user's state. This
 
 ### State Updates
 
-Every time an event handler returns (or [yields](/docs/events/yield_events)), we save the state in the state manager and send the **state updates** to the frontend to update the UI.
+Every time an event handler returns (or [yields]({events.yield_events.path})), we save the state in the state manager and send the **state updates** to the frontend to update the UI.
 
 To maintain performance as your state grows, internally Reflex keeps track of vars that were updated during the event handler (**dirty vars**). When the event handler is done processing, we find all the dirty vars and create a state update to send to the frontend.
 
diff --git a/docs/ai_builder/files.md b/docs/ai_builder/files.md
index 3c313e8b5c1..4906afd7093 100644
--- a/docs/ai_builder/files.md
+++ b/docs/ai_builder/files.md
@@ -1,8 +1,12 @@
+
+```python exec
+from reflex_docs.pages.docs import ai_builder
+```
 # Files
 
 To upload a file to the AI Builder click the `📎 Attach` button and select the file you want to upload from your computer. You can also drag and drop files directly into the chat window.
 
-This section does not cover uploading images. Check out [Images](/docs/ai-builder/images/) to learn more about uploading images.
+This section does not cover uploading images. Check out [Images]({ai_builder.images.path}) to learn more about uploading images.
 
 ```md alert
 ## Supported File Types
diff --git a/docs/api-reference/browser_javascript.md b/docs/api-reference/browser_javascript.md
index 203ae0b2e87..7fe4e7639b5 100644
--- a/docs/api-reference/browser_javascript.md
+++ b/docs/api-reference/browser_javascript.md
@@ -2,6 +2,8 @@
 import asyncio
 from typing import Any
 import reflex as rx
+
+from reflex_docs.pages.docs import library, wrapping_react
 ```
 
 # Browser Javascript
@@ -23,7 +25,7 @@ Prefer to use the Python API whenever possible and file an issue if you need add
 
 There are four ways to execute custom Javascript code into your Reflex app:
 
-- `rx.script` - Injects the script via `next/script` for efficient loading of inline and external Javascript code. Described further in the [component library](/docs/library/other/script).
+- `rx.script` - Injects the script via `next/script` for efficient loading of inline and external Javascript code. Described further in the [component library]({library.other.script.path}).
   - These components can be directly included in the body of a page, or they may
     be passed to `rx.App(head_components=[rx.script(...)])` to be included in
     the `<Head>` tag of all pages.
@@ -34,7 +36,7 @@ These previous two methods can work in tandem to load external scripts and then
 call functions defined within them in response to user events.
 
 The following two methods are geared towards wrapping components and are
-described with examples in the [Wrapping React](/docs/wrapping-react/overview)
+described with examples in the [Wrapping React]({wrapping_react.overview.path})
 section.
 
 - `_get_hooks` and `_get_custom_code` in an `rx.Component` subclass
diff --git a/docs/api-reference/event_triggers.md b/docs/api-reference/event_triggers.md
index 67606f06805..f716ee237c7 100644
--- a/docs/api-reference/event_triggers.md
+++ b/docs/api-reference/event_triggers.md
@@ -2,6 +2,8 @@
 from datetime import datetime
 
 import reflex as rx
+
+from reflex_docs.pages.docs import events
 ```
 
 # Event Triggers
@@ -73,7 +75,7 @@ def protected_page():
     return rx.text("Protected content")
 ```
 
-For more details on page load events, see the [page load events documentation](/docs/events/page_load_events).
+For more details on page load events, see the [page load events documentation]({events.page_load_events.path}).
 
 # Event Reference
 
diff --git a/docs/api-reference/special_events.md b/docs/api-reference/special_events.md
index e6068dcf2b9..c2a371edc68 100644
--- a/docs/api-reference/special_events.md
+++ b/docs/api-reference/special_events.md
@@ -1,5 +1,7 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import api_reference
 ```
 
 # Special Events
@@ -40,9 +42,7 @@ Redirect the user to a new path within the application.
 
 ```python demo
 rx.vstack(
-    rx.button(
-        "open in tab", on_click=rx.redirect("/docs/api-reference/special-events")
-    ),
+    rx.button("open in tab", on_click=rx.redirect(api_reference.special_events.path)),
     rx.button(
         "open in new tab",
         on_click=rx.redirect("https://github.com/reflex-dev/reflex/", is_external=True),
diff --git a/docs/app/reflex_docs/docgen_pipeline.py b/docs/app/reflex_docs/docgen_pipeline.py
index 8a567b9fe65..5003fd303fb 100644
--- a/docs/app/reflex_docs/docgen_pipeline.py
+++ b/docs/app/reflex_docs/docgen_pipeline.py
@@ -1,5 +1,6 @@
 """Pipeline for rendering reflex-shipped docs via reflex_docgen.markdown."""
 
+import re
 import sys
 import types
 from pathlib import Path
@@ -145,35 +146,47 @@ def _exec_code(content: str, env: dict, filename: str) -> None:
 # Span → rx.Component helpers
 # ---------------------------------------------------------------------------
 
+_BRACE_RE = re.compile(r"\{([^{}]+)\}")
 
-def _render_spans(spans: tuple[Span, ...]) -> list[rx.Component | str]:
-    """Convert a sequence of spans into a list of Reflex children."""
-    out: list[rx.Component | str] = []
-    for span in spans:
-        match span:
-            case TextSpan(text=text):
-                out.append(text)
-            case BoldSpan(children=children):
-                out.append(rx.el.strong(*_render_spans(children)))
-            case ItalicSpan(children=children):
-                out.append(rx.el.em(*_render_spans(children)))
-            case StrikethroughSpan(children=children):
-                inner = "".join(
-                    c if isinstance(c, str) else "" for c in _render_spans(children)
-                )
-                out.append(rx.text("~" + inner + "~", as_="span"))
-            case CodeSpan(code=code):
-                out.append(code_comp(text=code))
-            case LinkSpan(children=children, target=target):
-                inner = "".join(
-                    c if isinstance(c, str) else "" for c in _render_spans(children)
-                )
-                out.append(doclink2(text=inner, href=target))
-            case ImageSpan(src=src):
-                out.append(img_comp_xd(src=src))
-            case LineBreakSpan(soft=soft):
-                out.append("\n" if soft else rx.el.br())
-    return out
+
+def _resolve_link_target(target: str, env: dict) -> str:
+    """Resolve ``{a.b.c}`` dotted-path substrings in a markdown link href.
+
+    Supports composition like ``{enterprise.overview.path}#section``. The
+    head name is looked up in *env*; subsequent segments are ``getattr``
+    walks. No ``eval`` — only attribute access is permitted.
+
+    Args:
+        target: Raw href from the markdown source.
+        env: Doc exec environment (the transformer's accumulated namespace).
+
+    Returns:
+        Resolved href.
+
+    Raises:
+        ValueError: If a brace expression cannot be resolved against *env*.
+        TypeError: If a brace expression resolves to a non-string.
+    """
+
+    def _sub(match: re.Match[str]) -> str:
+        expr = match.group(1).strip()
+        parts = expr.split(".")
+        try:
+            value = env[parts[0]]
+            for part in parts[1:]:
+                value = getattr(value, part)
+        except (KeyError, AttributeError) as e:
+            msg = f"Link {target!r}: cannot resolve {match.group(0)!r} ({e})"
+            raise ValueError(msg) from e
+        if not isinstance(value, str):
+            msg = (
+                f"Link {target!r}: {match.group(0)!r} must resolve to str, "
+                f"got {type(value).__name__}"
+            )
+            raise TypeError(msg)
+        return value
+
+    return _BRACE_RE.sub(_sub, target.strip())
 
 
 def _spans_to_plaintext(spans: tuple[Span, ...]) -> str:
@@ -233,6 +246,42 @@ def transform(self, document: Document) -> rx.Component:
 
         return rx.fragment(*children)
 
+    def _render_spans(self, spans: tuple[Span, ...]) -> list[rx.Component | str]:
+        """Convert a sequence of spans into a list of Reflex children.
+
+        Link hrefs are resolved against ``self.env`` so markdown can reference
+        Python paths like ``[…]({enterprise.overview.path})``.
+        """
+        out: list[rx.Component | str] = []
+        for span in spans:
+            match span:
+                case TextSpan(text=text):
+                    out.append(text)
+                case BoldSpan(children=children):
+                    out.append(rx.el.strong(*self._render_spans(children)))
+                case ItalicSpan(children=children):
+                    out.append(rx.el.em(*self._render_spans(children)))
+                case StrikethroughSpan(children=children):
+                    inner = "".join(
+                        c if isinstance(c, str) else ""
+                        for c in self._render_spans(children)
+                    )
+                    out.append(rx.text("~" + inner + "~", as_="span"))
+                case CodeSpan(code=code):
+                    out.append(code_comp(text=code))
+                case LinkSpan(children=children, target=target):
+                    inner = "".join(
+                        c if isinstance(c, str) else ""
+                        for c in self._render_spans(children)
+                    )
+                    href = _resolve_link_target(target, self.env)
+                    out.append(doclink2(text=inner, href=href))
+                case ImageSpan(src=src):
+                    out.append(img_comp_xd(src=src))
+                case LineBreakSpan(soft=soft):
+                    out.append("\n" if soft else rx.el.br())
+        return out
+
     # ------------------------------------------------------------------
     # Blocks
     # ------------------------------------------------------------------
@@ -253,7 +302,7 @@ def heading(self, block: HeadingBlock) -> rx.Component:
                 return h4_comp_xd(text=text)
 
     def text_block(self, block: TextBlock) -> rx.Component:
-        children = _render_spans(block.children)
+        children = self._render_spans(block.children)
         if len(children) == 1 and isinstance(children[0], str):
             return text_comp(text=children[0])
         return rx.text(
@@ -310,13 +359,12 @@ def list_block(self, block: ListBlock) -> rx.Component:
             return rx.list.ordered(*items, class_name="mb-6")
         return rx.list.unordered(*items, class_name="mb-6")
 
-    @staticmethod
-    def _list_item_from_spans(spans: tuple[Span, ...]) -> rx.Component:
+    def _list_item_from_spans(self, spans: tuple[Span, ...]) -> rx.Component:
         """Render a list item, preserving inline code/links when present."""
         if all(isinstance(s, TextSpan) for s in spans):
             return list_comp(text=_spans_to_plaintext(spans))
         return rx.list_item(
-            *_render_spans(spans),
+            *self._render_spans(spans),
             class_name="font-[475] text-secondary-11 mb-4",
         )
 
@@ -342,7 +390,7 @@ def quote(self, block: QuoteBlock) -> rx.Component:
     def table(self, block: TableBlock) -> rx.Component:
         header_cells = [
             rx.table.column_header_cell(
-                *_render_spans(cell.children),
+                *self._render_spans(cell.children),
                 class_name="font-small text-slate-12 font-bold",
             )
             for cell in block.header.cells
@@ -351,7 +399,7 @@ def table(self, block: TableBlock) -> rx.Component:
         for row in block.rows:
             cells = [
                 rx.table.cell(
-                    *_render_spans(cell.children),
+                    *self._render_spans(cell.children),
                     class_name="font-small text-slate-11",
                 )
                 for cell in row.cells
@@ -371,7 +419,7 @@ def transform_table_row(self, row: TableRow) -> rx.Component:
         return rx.table.row(*cells)
 
     def transform_table_cell(self, cell: TableCell) -> rx.Component:
-        return rx.table.cell(*_render_spans(cell.children))
+        return rx.table.cell(*self._render_spans(cell.children))
 
     def thematic_break(self, block: ThematicBreakBlock) -> rx.Component:
         return rx.separator(class_name="my-6")
@@ -398,7 +446,7 @@ def code_span(self, span: CodeSpan) -> rx.Component:
 
     def link(self, span: LinkSpan) -> rx.Component:
         inner = _spans_to_plaintext(span.children)
-        return doclink2(text=inner, href=span.target)
+        return doclink2(text=inner, href=_resolve_link_target(span.target, self.env))
 
     def image(self, span: ImageSpan) -> rx.Component:
         return img_comp_xd(src=span.src)
@@ -546,7 +594,7 @@ def _render_alert(self, block: DirectiveBlock) -> rx.Component:
 
         def title_comp() -> rx.Component:
             return rx.box(
-                *_render_spans(title_spans),
+                *self._render_spans(title_spans),
                 class_name="font-[475]",
                 color=f"{rx.color(color, 11)}",
             )
@@ -583,7 +631,7 @@ def title_comp() -> rx.Component:
             spans: list[rx.Component | str] = []
             for child in children:
                 if isinstance(child, TextBlock):
-                    spans.extend(_render_spans(child.children))
+                    spans.extend(self._render_spans(child.children))
                 else:
                     spans.append(self.transform_block(child))
             trigger.append(
@@ -642,7 +690,7 @@ def _render_quote_directive(self, block: DirectiveBlock) -> rx.Component:
         role = ""
         for child in block.children:
             if isinstance(child, TextBlock):
-                quote_parts.extend(_render_spans(child.children))
+                quote_parts.extend(self._render_spans(child.children))
             elif isinstance(child, ListBlock):
                 for item in child.items:
                     for sub in item.children:
diff --git a/docs/app/reflex_docs/pages/docs/__init__.py b/docs/app/reflex_docs/pages/docs/__init__.py
index 61b1230093c..5d7030443b6 100644
--- a/docs/app/reflex_docs/pages/docs/__init__.py
+++ b/docs/app/reflex_docs/pages/docs/__init__.py
@@ -299,5 +299,10 @@ def register_doc(virtual_doc: str, comp):
         get_component_docgen(_virtual, _actual, doc_title_from_path(_virtual)),
     )
 
+# Top-level pages get shadowed by the subpage SimpleNamespace below; copy
+# their .path across so markdown can reference {library.path} etc.
+docs_ns.library.path = library.path  # type: ignore[attr-defined]
+docs_ns.custom_components.path = custom_components.path  # type: ignore[attr-defined]
+
 for name, ns in docs_ns.__dict__.items():
     globals()[name] = ns
diff --git a/docs/app/tests/test_docgen_link_targets.py b/docs/app/tests/test_docgen_link_targets.py
new file mode 100644
index 00000000000..e24554ed2fb
--- /dev/null
+++ b/docs/app/tests/test_docgen_link_targets.py
@@ -0,0 +1,54 @@
+"""Tests for dynamic ``{expr}`` markdown link targets."""
+
+import sys
+from pathlib import Path
+from types import SimpleNamespace
+
+import pytest
+
+sys.path.insert(0, str(Path(__file__).parent.parent))
+
+from reflex_docs.docgen_pipeline import _resolve_link_target
+
+
+def test_resolve_link_target_brace_expr():
+    """``{expr}`` is resolved against the doc exec environment and must yield str."""
+    env = {
+        "enterprise": SimpleNamespace(
+            overview=SimpleNamespace(path="/enterprise/overview/")
+        )
+    }
+    assert _resolve_link_target("{enterprise.overview.path}", env) == (
+        "/enterprise/overview/"
+    )
+
+
+def test_resolve_link_target_plain_url_unchanged():
+    """Normal hrefs are returned as-is (after strip)."""
+    assert _resolve_link_target("  /docs/foo/  ", {}) == "/docs/foo/"
+
+
+def test_resolve_link_target_with_anchor():
+    """Brace expressions compose with surrounding url fragments."""
+    env = {"page": SimpleNamespace(path="/docs/page/")}
+    assert _resolve_link_target("{page.path}#section", env) == "/docs/page/#section"
+
+
+def test_resolve_link_target_unknown_name_raises_value_error():
+    """Missing head name surfaces with target + expr in the message."""
+    with pytest.raises(ValueError, match=r"bogus\.path"):
+        _resolve_link_target("{bogus.path}", {})
+
+
+def test_resolve_link_target_unknown_attribute_raises_value_error():
+    """Typo in a dotted segment surfaces with target + expr in the message."""
+    env = {"page": SimpleNamespace(path="/docs/page/")}
+    with pytest.raises(ValueError, match=r"page\.pth"):
+        _resolve_link_target("{page.pth}", env)
+
+
+def test_resolve_link_target_non_string_raises_type_error():
+    """A brace expression resolving to a non-string raises TypeError."""
+    env = {"obj": SimpleNamespace(path=42)}
+    with pytest.raises(TypeError, match="must resolve to str"):
+        _resolve_link_target("{obj.path}", env)
diff --git a/docs/assets/upload_and_download_files.md b/docs/assets/upload_and_download_files.md
index 7347ff3b047..5e08f5e028d 100644
--- a/docs/assets/upload_and_download_files.md
+++ b/docs/assets/upload_and_download_files.md
@@ -1,5 +1,7 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import api_reference, assets, library
 ```
 
 # Files
@@ -115,7 +117,7 @@ rx.table.root(
 )
 ```
 
-For more information about assets, see the [Assets Overview](/docs/assets/overview/).
+For more information about assets, see the [Assets Overview]({assets.overview.path}).
 
 ## Download
 
@@ -174,7 +176,7 @@ def download_random_data_button():
 
 The `data` arg accepts `str` or `bytes` data, a `data:` URI, `PIL.Image`, or any state Var. If the Var is not already a string, it will be converted to a string using `JSON.stringify`. This allows complex state structures to be offered as JSON downloads.
 
-Reference page for `rx.download` [here](/docs/api-reference/special_events#rx.download).
+Reference page for `rx.download` [here]({api_reference.special_events.path}#rx.download).
 
 ## Upload
 
@@ -192,4 +194,4 @@ def index():
     )
 ```
 
-For detailed information, see the reference page of the component [here](/docs/library/forms/upload).
+For detailed information, see the reference page of the component [here]({library.forms.upload.path}).
diff --git a/docs/authentication/authentication_overview.md b/docs/authentication/authentication_overview.md
index 68d97ce78b5..b411f368ef9 100644
--- a/docs/authentication/authentication_overview.md
+++ b/docs/authentication/authentication_overview.md
@@ -1,4 +1,8 @@
 
+```python exec
+from reflex_docs.pages.docs import ai_builder, vars
+```
+
 # Authentication Overview
 
 Many apps require authentication to manage users. There are a few different ways to accomplish this in Reflex:
@@ -12,11 +16,11 @@ We have solutions that currently exist outside of the core framework:
 5. Clerk Auth: A community member wrapped this component and hooked it up in this app: https://github.com/TimChild/reflex-clerk-api
 6. Descope Auth: Enables authentication with Descope, supporting passwordless, social login, SSO, and MFA: https://github.com/descope-sample-apps/reflex-descope-auth
 
-If you're using the AI Builder, you can also use the built-in [Authentication Integrations](/docs/ai-builder/integrations/overview) which include Azure Auth, Google Auth, Okta Auth, and Descope.
+If you're using the AI Builder, you can also use the built-in [Authentication Integrations]({ai_builder.integrations.overview.path}) which include Azure Auth, Google Auth, Okta Auth, and Descope.
 
 ## Guidance for Implementing Authentication
 
-- Store sensitive user tokens and information in [backend-only vars](/docs/vars/base_vars#backend-only-vars).
+- Store sensitive user tokens and information in [backend-only vars]({vars.base_vars.path}#backend-only-vars).
 - Validate user session and permissions for each event handler that performs an authenticated action and all computed vars or loader events that access private data.
 - All content that is statically rendered in the frontend (for example, data hardcoded or loaded at compile time in the UI) will be publicly available, even if the page redirects to a login or uses `rx.cond` to hide content.
 - Only data that originates from state can be truly private and protected.
diff --git a/docs/client_storage/overview.md b/docs/client_storage/overview.md
index b3f941d7288..bbec7eaced8 100644
--- a/docs/client_storage/overview.md
+++ b/docs/client_storage/overview.md
@@ -1,5 +1,7 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import api_reference
 ```
 
 # Client-storage
@@ -13,7 +15,7 @@ default value is either `rx.Cookie` or `rx.LocalStorage` depending on where the
 value should be stored. The key name will be based on the var name, but this
 can be overridden by passing `name="my_custom_name"` as a keyword argument.
 
-For more information see [Browser Storage](/docs/api-reference/browser-storage/).
+For more information see [Browser Storage]({api_reference.browser_storage.path}).
 
 Try entering some values in the text boxes below and then load the page in a separate
 tab or check the storage section of browser devtools to see the values saved in the browser.
diff --git a/docs/components/conditional_rendering.md b/docs/components/conditional_rendering.md
index fe32aea3cd7..642c4ebb847 100644
--- a/docs/components/conditional_rendering.md
+++ b/docs/components/conditional_rendering.md
@@ -1,17 +1,19 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import getting_started, library, vars
 ```
 
 # Conditional Rendering
 
-Recall from the [basics](/docs/getting_started/basics) that we cannot use Python `if/else` statements when referencing state vars in Reflex. Instead, use the `rx.cond` component to conditionally render components or set props based on the value of a state var.
+Recall from the [basics]({getting_started.basics.path}) that we cannot use Python `if/else` statements when referencing state vars in Reflex. Instead, use the `rx.cond` component to conditionally render components or set props based on the value of a state var.
 
 ```md video https://youtube.com/embed/ITOZkzjtjUA?start=6040&end=6463
 # Video: Conditional Rendering
 ```
 
 ```md alert
-# Check out the API reference for [cond docs](/docs/library/dynamic-rendering/cond).
+# Check out the API reference for [cond docs]({library.dynamic_rendering.cond.path}).
 ```
 
 ```python eval
@@ -66,11 +68,11 @@ def cond_prop():
 
 ## Var Operations
 
-You can use [var operations](/docs/vars/var-operations) with the `cond` component for more complex conditions. See the full [cond reference](/docs/library/dynamic-rendering/cond) for more details.
+You can use [var operations]({vars.var_operations.path}) with the `cond` component for more complex conditions. See the full [cond reference]({library.dynamic_rendering.cond.path}) for more details.
 
 ## Multiple Conditional Statements
 
-The [`rx.match`](/docs/library/dynamic-rendering/match) component in Reflex provides a powerful alternative to`rx.cond` for handling multiple conditional statements and structural pattern matching. This component allows you to handle multiple conditions and their associated components in a cleaner and more readable way compared to nested `rx.cond` structures.
+The [`rx.match`]({library.dynamic_rendering.match.path}) component in Reflex provides a powerful alternative to`rx.cond` for handling multiple conditional statements and structural pattern matching. This component allows you to handle multiple conditions and their associated components in a cleaner and more readable way compared to nested `rx.cond` structures.
 
 ```python demo exec
 from typing import List
diff --git a/docs/components/props.md b/docs/components/props.md
index e53330284b3..0ded2e8b518 100644
--- a/docs/components/props.md
+++ b/docs/components/props.md
@@ -1,5 +1,7 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import library, state, styling
 ```
 
 # Props
@@ -19,7 +21,7 @@ rx.image(
 )
 ```
 
-Check the docs for the component you are using to see what props are available and how they affect the component (see the `rx.image` [reference](/docs/library/media/image#api-reference) page for example).
+Check the docs for the component you are using to see what props are available and how they affect the component (see the `rx.image` [reference]({library.media.image.path}#api-reference) page for example).
 
 ## Common Props
 
@@ -54,15 +56,15 @@ rx.button(
 )
 ```
 
-See the [styling docs](/docs/styling/overview) to learn more about customizing the appearance of your app.
+See the [styling docs]({styling.overview.path}) to learn more about customizing the appearance of your app.
 
 ## Binding Props to State
 
 ```md alert warning
-# Optional: Learn all about [State](/docs/state/overview) first.
+# Optional: Learn all about [State]({state.overview.path}) first.
 ```
 
-Reflex apps define [State](/docs/state/overview) classes that hold variables that can change over time.
+Reflex apps define [State]({state.overview.path}) classes that hold variables that can change over time.
 
 State may be modified in response to things like user input like clicking a button, or in response to events like loading a page.
 
diff --git a/docs/components/rendering_iterables.md b/docs/components/rendering_iterables.md
index 7c1088d6ea9..1ed4eca75ae 100644
--- a/docs/components/rendering_iterables.md
+++ b/docs/components/rendering_iterables.md
@@ -1,12 +1,14 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import getting_started, library, vars
 ```
 
 # Rendering Iterables
 
-Recall again from the [basics](/docs/getting_started/basics) that we cannot use Python `for` loops when referencing state vars in Reflex. Instead, use the `rx.foreach` component to render components from a collection of data.
+Recall again from the [basics]({getting_started.basics.path}) that we cannot use Python `for` loops when referencing state vars in Reflex. Instead, use the `rx.foreach` component to render components from a collection of data.
 
-For dynamic content that should automatically scroll to show the newest items, consider using the [auto scroll](/docs/library/dynamic-rendering/auto_scroll) component together with `rx.foreach`.
+For dynamic content that should automatically scroll to show the newest items, consider using the [auto scroll]({library.dynamic_rendering.auto_scroll.path}) component together with `rx.foreach`.
 
 ```python demo exec
 class IterState(rx.State):
@@ -231,7 +233,7 @@ def projects_example() -> rx.Component:
     return rx.box(rx.foreach(NestedStateFE.projects, project_item))
 ```
 
-If you want an example where not all of the values in the dict are the same type then check out the example on [var operations using foreach](/docs/vars/var-operations).
+If you want an example where not all of the values in the dict are the same type then check out the example on [var operations using foreach]({vars.var_operations.path}).
 
 Here is a further example of how to use `foreach` with a nested data structure.
 
diff --git a/docs/custom-components/command-reference.md b/docs/custom-components/command-reference.md
index 989312feb64..9e71a2c42bf 100644
--- a/docs/custom-components/command-reference.md
+++ b/docs/custom-components/command-reference.md
@@ -1,4 +1,8 @@
 
+```python exec
+from reflex_docs.pages.docs import wrapping_react
+```
+
 # Command Reference
 
 The custom component commands are under `reflex component` subcommand. To see the list of available commands, run `reflex component --help`. To see the manual on a specific command, run `reflex component <command> --help`, for example, `reflex component init --help`.
@@ -82,7 +86,7 @@ The `custom_components` folder is where the actual implementation is. Do not wor
 
 `reflex_google_auth` is the top folder for importable code. The `reflex_google_auth/__init__.py` imports everything from the `reflex_google_auth/google_auth.py`. For the user of the package, the import looks like `from reflex_google_auth import ABC, XYZ`.
 
-`reflex_google_auth/google_auth.py` is prefilled with code example and instructions from the [wrapping react guide](/docs/wrapping-react/overview).
+`reflex_google_auth/google_auth.py` is prefilled with code example and instructions from the [wrapping react guide]({wrapping_react.overview.path}).
 
 ### Demo App Folder
 
diff --git a/docs/custom-components/overview.md b/docs/custom-components/overview.md
index 3d0c36fa668..10c1dfc4f04 100644
--- a/docs/custom-components/overview.md
+++ b/docs/custom-components/overview.md
@@ -2,13 +2,15 @@
 
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import custom_components
 ```
 
 Reflex users create many components of their own: ready to use high level components, or nicely wrapped React components. With **Custom Components**, the community can easily share these components now.
 
 Release **0.4.3** introduces a series of `reflex component` commands that help developers wrap react components, test, and publish them as python packages. As shown in the image below, there are already a few custom components published on PyPI, such as `reflex-spline`, `reflex-webcam`.
 
-Check out the custom components gallery [here](/docs/custom-components/overview).
+Check out the custom components gallery [here]({custom_components.overview.path}).
 
 ```python eval
 rx.center(
@@ -23,7 +25,7 @@ rx.center(
 
 ## Prerequisites for Publishing
 
-In order to publish a Python package, an account is required with a python package index, for example, PyPI. The documentation to create accounts and generate API tokens can be found on their websites. For a quick reference, check out our [Prerequisites for Publishing](/docs/custom-components/prerequisites-for-publishing) page.
+In order to publish a Python package, an account is required with a python package index, for example, PyPI. The documentation to create accounts and generate API tokens can be found on their websites. For a quick reference, check out our [Prerequisites for Publishing]({custom_components.prerequisites_for_publishing.path}) page.
 
 ## Steps to Publishing
 
diff --git a/docs/enterprise/components.md b/docs/enterprise/components.md
index ae1d3944194..526dacbee7d 100644
--- a/docs/enterprise/components.md
+++ b/docs/enterprise/components.md
@@ -5,63 +5,65 @@ title: Enterprise Components
 ```python exec
 import reflex as rx
 
+from reflex_docs.pages.docs import enterprise
+
 
 def enterprise_component_grid():
     sections = [
         {
             "title": "AG Grid",
             "description": "Advanced data grid with sorting, filtering, editing, and pagination",
-            "link": "/docs/enterprise/ag-grid/",
+            "link": enterprise.ag_grid.index.path,
             "components": [
-                ("Overview", "/docs/enterprise/ag-grid/"),
-                ("Column Definitions", "/docs/enterprise/ag-grid/column-defs/"),
-                ("Aligned Grids", "/docs/enterprise/ag-grid/aligned-grids/"),
-                ("Model Wrapper", "/docs/enterprise/ag-grid/model-wrapper/"),
-                ("Pivot Mode", "/docs/enterprise/ag-grid/pivot-mode/"),
-                ("Theme", "/docs/enterprise/ag-grid/theme/"),
-                ("Value Transformers", "/docs/enterprise/ag-grid/value-transformers/"),
+                ("Overview", enterprise.ag_grid.index.path),
+                ("Column Definitions", enterprise.ag_grid.column_defs.path),
+                ("Aligned Grids", enterprise.ag_grid.aligned_grids.path),
+                ("Model Wrapper", enterprise.ag_grid.model_wrapper.path),
+                ("Pivot Mode", enterprise.ag_grid.pivot_mode.path),
+                ("Theme", enterprise.ag_grid.theme.path),
+                ("Value Transformers", enterprise.ag_grid.value_transformers.path),
             ],
         },
         {
             "title": "AG Chart",
             "description": "Interactive charts and data visualization",
-            "link": "/docs/enterprise/ag-chart/",
+            "link": enterprise.ag_chart.path,
             "components": [
-                ("Overview", "/docs/enterprise/ag-chart/"),
+                ("Overview", enterprise.ag_chart.path),
             ],
         },
         {
             "title": "Interactive Components",
             "description": "Drag-and-drop and mapping functionality",
-            "link": "/docs/enterprise/drag-and-drop/",
+            "link": enterprise.drag_and_drop.path,
             "components": [
-                ("Drag and Drop", "/docs/enterprise/drag-and-drop/"),
-                ("Mapping", "/docs/enterprise/map/"),
+                ("Drag and Drop", enterprise.drag_and_drop.path),
+                ("Mapping", enterprise.map.index.path),
             ],
         },
         {
             "title": "Mantine",
             "description": "Rich UI components from Mantine library",
-            "link": "/docs/enterprise/mantine/",
+            "link": enterprise.mantine.index.path,
             "components": [
-                ("Overview", "/docs/enterprise/mantine/"),
-                ("Autocomplete", "/docs/enterprise/mantine/autocomplete/"),
-                ("Collapse", "/docs/enterprise/mantine/collapse/"),
-                ("Combobox", "/docs/enterprise/mantine/combobox/"),
-                ("JSON Input", "/docs/enterprise/mantine/json-input/"),
-                ("Loading Overlay", "/docs/enterprise/mantine/loading-overlay/"),
-                ("Multi Select", "/docs/enterprise/mantine/multi-select/"),
-                ("Number Formatter", "/docs/enterprise/mantine/number-formatter/"),
-                ("Pill", "/docs/enterprise/mantine/pill/"),
-                ("Ring Progress", "/docs/enterprise/mantine/ring-progress/"),
+                ("Overview", enterprise.mantine.index.path),
+                ("Autocomplete", enterprise.mantine.autocomplete.path),
+                ("Collapse", enterprise.mantine.collapse.path),
+                ("Combobox", enterprise.mantine.combobox.path),
+                ("JSON Input", enterprise.mantine.json_input.path),
+                ("Loading Overlay", enterprise.mantine.loading_overlay.path),
+                ("Multi Select", enterprise.mantine.multi_select.path),
+                ("Number Formatter", enterprise.mantine.number_formatter.path),
+                ("Pill", enterprise.mantine.pill.path),
+                ("Ring Progress", enterprise.mantine.ring_progress.path),
                 (
                     "Semi Circle Progress",
-                    "/docs/enterprise/mantine/semi-circle-progress/",
+                    enterprise.mantine.semi_circle_progress.path,
                 ),
-                ("Spoiler", "/docs/enterprise/mantine/spoiler/"),
-                ("Tags Input", "/docs/enterprise/mantine/tags-input/"),
-                ("Timeline", "/docs/enterprise/mantine/timeline/"),
-                ("Tree", "/docs/enterprise/mantine/tree/"),
+                ("Spoiler", enterprise.mantine.spoiler.path),
+                ("Tags Input", enterprise.mantine.tags_input.path),
+                ("Timeline", enterprise.mantine.timeline.path),
+                ("Tree", enterprise.mantine.tree.path),
             ],
         },
     ]
diff --git a/docs/enterprise/drag-and-drop.md b/docs/enterprise/drag-and-drop.md
index 58c59243c54..e37724b2cad 100644
--- a/docs/enterprise/drag-and-drop.md
+++ b/docs/enterprise/drag-and-drop.md
@@ -5,6 +5,8 @@ title: Drag and Drop
 ```python exec
 import reflex as rx
 import reflex_enterprise as rxe
+
+from reflex_docs.pages.docs import enterprise
 ```
 
 # Drag and Drop
@@ -577,4 +579,4 @@ def app():
 
 ---
 
-[← Back to main documentation](/docs/enterprise/overview/)
+[← Back to main documentation]({enterprise.overview.path})
diff --git a/docs/enterprise/mantine/pill.md b/docs/enterprise/mantine/pill.md
index 9512fe87dab..84ee3cfe5e4 100644
--- a/docs/enterprise/mantine/pill.md
+++ b/docs/enterprise/mantine/pill.md
@@ -5,6 +5,9 @@ title: Pill
 ```python exec
 import reflex as rx
 import reflex_enterprise as rxe
+
+from reflex_site_shared.components.blocks.collapsible import collapsible_box
+from reflex_docs.pages.docs import enterprise
 ```
 
 # Pill
@@ -52,7 +55,7 @@ def pill_group_page():
 By itself it does not include any logic, it only renders given children.
 
 ```md alert info
-# For a fully functional out-of-the-box component, consider using [`rxe.mantine.tags_input`](/docs/enterprise/mantine/tags-input/) instead.
+# For a fully functional out-of-the-box component, consider using [`rxe.mantine.tags_input`]({enterprise.mantine.tags_input.path}) instead.
 ```
 
 ## Example
diff --git a/docs/enterprise/map/index.md b/docs/enterprise/map/index.md
index 01ffa584757..9c9ed473312 100644
--- a/docs/enterprise/map/index.md
+++ b/docs/enterprise/map/index.md
@@ -7,6 +7,8 @@ title: Interactive Maps
 ```python exec
 import reflex as rx
 import reflex_enterprise as rxe
+
+from reflex_docs.pages.docs import enterprise
 ```
 
 The map components in Reflex Enterprise provide interactive mapping capabilities built on top of **Leaflet**, one of the most popular open-source JavaScript mapping libraries. These components enable you to create rich, interactive maps with markers, layers, controls, and event handling.
@@ -578,4 +580,4 @@ def dynamic_markers():
 
 ---
 
-[← Back to main documentation](/docs/enterprise/overview/)
+[← Back to main documentation]({enterprise.overview.path})
diff --git a/docs/enterprise/overview.md b/docs/enterprise/overview.md
index 0f6bd61f800..c730a5b9163 100644
--- a/docs/enterprise/overview.md
+++ b/docs/enterprise/overview.md
@@ -7,6 +7,8 @@ title: Reflex Enterprise
 ```python exec
 import reflex as rx
 
+from reflex_docs.pages.docs import enterprise
+
 try:
     import reflex_enterprise as rxe
     from reflex_enterprise.components.ag_grid.resource import RendererParams
@@ -21,7 +23,7 @@ The full [End-User License Agreement (EULA)](https://raw.githubusercontent.com/r
 
 ```md alert info
 # Despite being an enterprise package, free users can use the components from this package. A badge "Built with Reflex" will be shown in the bottom right corner of the app.
-For more information on the badge, visit [Built with Reflex](/docs/enterprise/built-with-reflex/).
+For more information on the badge, visit [Built with Reflex]({enterprise.built_with_reflex.path}).
 ```
 
 ## Installation
@@ -49,14 +51,14 @@ categories_data = [
                 "description": "Toggle the 'Built with Reflex' badge in your app",
                 "cloud_tier": "Enterprise",
                 "self_hosted_tier": "Enterprise",
-                "link": "/docs/enterprise/built-with-reflex",
+                "link": enterprise.built_with_reflex.path,
             },
             {
                 "feature": "use_single_port",
                 "description": "Enable single-port deployment by proxying backend to frontend",
                 "cloud_tier": "Free",
                 "self_hosted_tier": "Free",
-                "link": "/docs/enterprise/single-port-proxy",
+                "link": enterprise.single_port_proxy.path,
             },
         ],
     },
@@ -70,14 +72,14 @@ categories_data = [
                 "description": "Advanced data grid with enterprise features (sorting, filtering, grouping)",
                 "cloud_tier": "Free",
                 "self_hosted_tier": "Free",
-                "link": "/docs/enterprise/ag-grid",
+                "link": enterprise.ag_grid.index.path,
             },
             {
                 "feature": "AGCharts",
                 "description": "Interactive charts and data visualization components",
                 "cloud_tier": "Free",
                 "self_hosted_tier": "Free",
-                "link": "/docs/enterprise/ag-chart",
+                "link": enterprise.ag_chart.path,
             },
         ],
     },
@@ -91,14 +93,14 @@ categories_data = [
                 "description": "Drag and drop functionality for interactive UI elements",
                 "cloud_tier": "Free",
                 "self_hosted_tier": "Free",
-                "link": "/docs/enterprise/drag-and-drop",
+                "link": enterprise.drag_and_drop.path,
             },
             {
                 "feature": "Mapping",
                 "description": "Interactive maps with markers, layers, and controls",
                 "cloud_tier": "Free",
                 "self_hosted_tier": "Free",
-                "link": "/docs/enterprise/map",
+                "link": enterprise.map.index.path,
             },
         ],
     },
@@ -112,98 +114,98 @@ categories_data = [
                 "description": "Auto-completing text input with dropdown suggestions",
                 "cloud_tier": "Free",
                 "self_hosted_tier": "Free",
-                "link": "/docs/enterprise/mantine/autocomplete",
+                "link": enterprise.mantine.autocomplete.path,
             },
             {
                 "feature": "Combobox",
                 "description": "Searchable dropdown with custom options and filtering",
                 "cloud_tier": "Free",
                 "self_hosted_tier": "Free",
-                "link": "/docs/enterprise/mantine/combobox",
+                "link": enterprise.mantine.combobox.path,
             },
             {
                 "feature": "Multi Select",
                 "description": "Multi-selection dropdown with tags and search",
                 "cloud_tier": "Free",
                 "self_hosted_tier": "Free",
-                "link": "/docs/enterprise/mantine/multi-select",
+                "link": enterprise.mantine.multi_select.path,
             },
             {
                 "feature": "Tags Input",
                 "description": "Input field for creating and managing tags",
                 "cloud_tier": "Free",
                 "self_hosted_tier": "Free",
-                "link": "/docs/enterprise/mantine/tags-input",
+                "link": enterprise.mantine.tags_input.path,
             },
             {
                 "feature": "Json Input",
                 "description": "JSON editor with syntax highlighting and validation",
                 "cloud_tier": "Free",
                 "self_hosted_tier": "Free",
-                "link": "/docs/enterprise/mantine/json-input",
+                "link": enterprise.mantine.json_input.path,
             },
             {
                 "feature": "Pill",
                 "description": "Small rounded elements for tags, badges, and labels",
                 "cloud_tier": "Free",
                 "self_hosted_tier": "Free",
-                "link": "/docs/enterprise/mantine/pill",
+                "link": enterprise.mantine.pill.path,
             },
             {
                 "feature": "Tree",
                 "description": "Hierarchical tree view with expandable nodes",
                 "cloud_tier": "Free",
                 "self_hosted_tier": "Free",
-                "link": "/docs/enterprise/mantine/tree",
+                "link": enterprise.mantine.tree.path,
             },
             {
                 "feature": "Timeline",
                 "description": "Timeline component for displaying chronological events",
                 "cloud_tier": "Free",
                 "self_hosted_tier": "Free",
-                "link": "/docs/enterprise/mantine/timeline",
+                "link": enterprise.mantine.timeline.path,
             },
             {
                 "feature": "Number Formatter",
                 "description": "Format and display numbers with customizable formatting",
                 "cloud_tier": "Free",
                 "self_hosted_tier": "Free",
-                "link": "/docs/enterprise/mantine/number-formatter",
+                "link": enterprise.mantine.number_formatter.path,
             },
             {
                 "feature": "Ring Progress",
                 "description": "Circular progress indicator with customizable styling",
                 "cloud_tier": "Free",
                 "self_hosted_tier": "Free",
-                "link": "/docs/enterprise/mantine/ring-progress",
+                "link": enterprise.mantine.ring_progress.path,
             },
             {
                 "feature": "Semi Circle Progress",
                 "description": "Semi-circular progress indicator for dashboards",
                 "cloud_tier": "Free",
                 "self_hosted_tier": "Free",
-                "link": "/docs/enterprise/mantine/semi-circle-progress",
+                "link": enterprise.mantine.semi_circle_progress.path,
             },
             {
                 "feature": "Loading Overlay",
                 "description": "Loading overlay with spinner for async operations",
                 "cloud_tier": "Free",
                 "self_hosted_tier": "Free",
-                "link": "/docs/enterprise/mantine/loading-overlay",
+                "link": enterprise.mantine.loading_overlay.path,
             },
             {
                 "feature": "Spoiler",
                 "description": "Collapsible content container with show/hide toggle",
                 "cloud_tier": "Free",
                 "self_hosted_tier": "Free",
-                "link": "/docs/enterprise/mantine/spoiler",
+                "link": enterprise.mantine.spoiler.path,
             },
             {
                 "feature": "Collapse",
                 "description": "Animated collapsible content with smooth transitions",
                 "cloud_tier": "Free",
                 "self_hosted_tier": "Free",
-                "link": "/docs/enterprise/mantine/collapse",
+                "link": enterprise.mantine.collapse.path,
             },
         ],
     },
diff --git a/docs/events/events_overview.md b/docs/events/events_overview.md
index 80019b5c1f3..bda60d02497 100644
--- a/docs/events/events_overview.md
+++ b/docs/events/events_overview.md
@@ -1,5 +1,7 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import library
 ```
 
 # Events Overview
@@ -9,7 +11,7 @@ Events are composed of two parts: Event Triggers and Event Handlers.
 - **Events Handlers** are how the State of a Reflex application is updated. They are triggered by user interactions with the UI, such as clicking a button or hovering over an element. Events can also be triggered by the page loading or by other events.
 
 - **Event triggers** are component props that create an event to be sent to an event handler.
-  Each component supports a set of events triggers. They are described in each [component's documentation](/docs/library) in the event trigger section.
+  Each component supports a set of events triggers. They are described in each [component's documentation]({library.path}) in the event trigger section.
 
 ## Example
 
diff --git a/docs/events/special_events.md b/docs/events/special_events.md
index a10ecc6d1b1..56203eb4744 100644
--- a/docs/events/special_events.md
+++ b/docs/events/special_events.md
@@ -1,10 +1,12 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import api_reference
 ```
 
 # Special Events
 
-Reflex also has built-in special events can be found in the [reference](/docs/api-reference/special_events).
+Reflex also has built-in special events can be found in the [reference]({api_reference.special_events.path}).
 
 For example, an event handler can trigger an alert on the browser.
 
diff --git a/docs/getting_started/basics.md b/docs/getting_started/basics.md
index fa55f27282f..8d037a0d04e 100644
--- a/docs/getting_started/basics.md
+++ b/docs/getting_started/basics.md
@@ -1,5 +1,20 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import (
+    advanced_onboarding,
+    components,
+    custom_components,
+    events,
+    getting_started,
+    library,
+    pages,
+    state,
+    styling,
+    ui,
+    vars,
+    wrapping_react,
+)
 ```
 
 # Basics
@@ -18,7 +33,7 @@ import reflex as rx
 - Create pages and navigate between them
 ```
 
-If you haven't yet, [install Reflex](/docs/getting_started/installation) before continuing. Every example below imports the library as `rx`:
+If you haven't yet, [install Reflex]({getting_started.installation.path}) before continuing. Every example below imports the library as `rx`:
 
 ```python
 import reflex as rx
@@ -26,7 +41,7 @@ import reflex as rx
 
 ## Creating and nesting components
 
-[Components](/docs/ui/overview) are the building blocks for your app's user interface (UI). They are the visual elements that make up your app, like buttons, text, and images. Reflex has a wide selection of [built-in components](/docs/library) to get you started quickly.
+[Components]({ui.overview.path}) are the building blocks for your app's user interface (UI). They are the visual elements that make up your app, like buttons, text, and images. Reflex has a wide selection of [built-in components]({library.path}) to get you started quickly.
 
 Components are created using functions that return a component object.
 
@@ -48,7 +63,7 @@ def my_container():
     )
 ```
 
-You can also use any base HTML element through the [rx.el](/docs/library/other/html) namespace. This allows you to use standard HTML elements directly in your Reflex app when you need more control or when a specific component isn't available in the Reflex component library.
+You can also use any base HTML element through the [rx.el]({library.other.html.path}) namespace. This allows you to use standard HTML elements directly in your Reflex app when you need more control or when a specific component isn't available in the Reflex component library.
 
 ```python demo exec
 def my_div():
@@ -57,11 +72,11 @@ def my_div():
     )
 ```
 
-If you need a component not provided by Reflex, you can check the [3rd party ecosystem](/docs/custom-components) or [wrap your own React component](/docs/wrapping-react/library-and-tags).
+If you need a component not provided by Reflex, you can check the [3rd party ecosystem]({custom_components.path}) or [wrap your own React component]({wrapping_react.library_and_tags.path}).
 
 ## Customizing and styling components
 
-Components can be customized using [props](/docs/components/props), which are passed in as keyword arguments to the component function.
+Components can be customized using [props]({components.props.path}), which are passed in as keyword arguments to the component function.
 
 Each component has props that are specific to that component. Check the docs for the component you are using to see what props are available.
 
@@ -81,7 +96,7 @@ def round_button():
 Use the `snake_case` version of the CSS property name as the prop name.
 ```
 
-See the [styling guide](/docs/styling/overview) for more information on how to style components
+See the [styling guide]({styling.overview.path}) for more information on how to style components
 
 In summary, components are made up of children and props.
 
@@ -99,9 +114,9 @@ In summary, components are made up of children and props.
 
 ## Displaying data that changes over time
 
-Apps need to store and display data that changes over time. Reflex handles this through [State](/docs/state/overview), which is a Python class that stores variables that can change when the app is running, as well as the functions that can change those variables.
+Apps need to store and display data that changes over time. Reflex handles this through [State]({state.overview.path}), which is a Python class that stores variables that can change when the app is running, as well as the functions that can change those variables.
 
-To define a state class, subclass `rx.State` and define fields that store the state of your app. The state variables ([vars](/docs/vars/base_vars)) should have a type annotation, and can be initialized with a default value.
+To define a state class, subclass `rx.State` and define fields that store the state of your app. The state variables ([vars]({vars.base_vars.path})) should have a type annotation, and can be initialized with a default value.
 
 ```python
 class MyState(rx.State):
@@ -133,7 +148,7 @@ Vars can be referenced in multiple components, and will automatically update whe
 
 ## Responding to events and updating the screen
 
-So far, we've defined state vars but we haven't shown how to change them. All state changes are handled through functions in the state class, called [event handlers](/docs/events/events_overview).
+So far, we've defined state vars but we haven't shown how to change them. All state changes are handled through functions in the state class, called [event handlers]({events.events_overview.path}).
 
 ```md alert
 Event handlers are the **only** way to change state in Reflex.
@@ -308,7 +323,7 @@ In the next sections, we will show how to handle these cases.
 
 ## Conditional rendering
 
-As mentioned above, you cannot use Python `if/else` statements with state vars in components. Instead, use the [rx.cond](/docs/components/conditional_rendering) function to conditionally render components.
+As mentioned above, you cannot use Python `if/else` statements with state vars in components. Instead, use the [rx.cond]({components.conditional_rendering.path}) function to conditionally render components.
 
 ```python demo exec
 class LoginState(rx.State):
@@ -332,7 +347,7 @@ def show_login():
 
 ## Rendering lists
 
-To iterate over a var that is a list, use the [rx.foreach](/docs/components/rendering_iterables) function to render a list of components.
+To iterate over a var that is a list, use the [rx.foreach]({components.rendering_iterables.path}) function to render a list of components.
 
 Pass the list var and a function that returns a component as arguments to `rx.foreach`.
 
@@ -357,7 +372,7 @@ The function that renders each item takes in a `Var`, since this will get compil
 
 ## Var Operations
 
-You can't use arbitrary Python operations on state vars in components, but Reflex has [var operations](/docs/vars/var-operations) that you can use to manipulate state vars.
+You can't use arbitrary Python operations on state vars in components, but Reflex has [var operations]({vars.var_operations.path}) that you can use to manipulate state vars.
 
 For example, to check if a var is even, you can use the `%` and `==` var operations.
 
@@ -403,15 +418,15 @@ You've got the core pieces — components, state, events, compile-time vs. runti
 ```md alert info
 # Build something real →
 
-- [Dashboard tutorial](/docs/getting_started/dashboard_tutorial) — a data app with tables, forms, and state.
-- [Chatapp tutorial](/docs/getting_started/chatapp_tutorial) — streaming AI responses end-to-end.
-- [Open-source templates](/docs/getting_started/open_source_templates) — full apps to fork.
+- [Dashboard tutorial]({getting_started.dashboard_tutorial.path}) — a data app with tables, forms, and state.
+- [Chatapp tutorial]({getting_started.chatapp_tutorial.path}) — streaming AI responses end-to-end.
+- [Open-source templates]({getting_started.open_source_templates.path}) — full apps to fork.
 ```
 
 ```md alert info
 # Go deeper →
 
-- [Vars](/docs/vars/base_vars) and [var operations](/docs/vars/var-operations) — the full API.
-- [Events](/docs/events/events_overview) and [pages](/docs/pages/overview) — routing, triggers, handlers.
-- [How Reflex works](/docs/advanced_onboarding/how-reflex-works) — what runs where, and why.
+- [Vars]({vars.base_vars.path}) and [var operations]({vars.var_operations.path}) — the full API.
+- [Events]({events.events_overview.path}) and [pages]({pages.overview.path}) — routing, triggers, handlers.
+- [How Reflex works]({advanced_onboarding.how_reflex_works.path}) — what runs where, and why.
 ```
diff --git a/docs/getting_started/chatapp_tutorial.md b/docs/getting_started/chatapp_tutorial.md
index 5fa623fcf62..dac1c449af7 100644
--- a/docs/getting_started/chatapp_tutorial.md
+++ b/docs/getting_started/chatapp_tutorial.md
@@ -10,6 +10,15 @@ from docs.getting_started.chat_tutorial_utils import ChatappState
 # If it's in environment, no need to hardcode (openai SDK will pick it up)
 if "OPENAI_API_KEY" not in os.environ:
     openai.api_key = "YOUR_OPENAI_KEY"
+
+from reflex_docs.pages.docs import (
+    components,
+    events,
+    getting_started,
+    library,
+    state,
+    styling,
+)
 ```
 
 # AI Chat App
@@ -90,7 +99,7 @@ In this tutorial you'll learn how to:
 # Video: Example of Setting up the Chat App
 ```
 
-We will start by creating a new project and setting up our development environment. If you haven't installed [uv](https://docs.astral.sh/uv/) yet, see the [installation guide](/docs/getting_started/installation). Then create a new project directory and scaffold a Reflex app:
+We will start by creating a new project and setting up our development environment. If you haven't installed [uv](https://docs.astral.sh/uv/) yet, see the [installation guide]({getting_started.installation.path}). Then create a new project directory and scaffold a Reflex app:
 
 ```bash
 mkdir chatapp
@@ -112,13 +121,13 @@ uv run reflex run
 
 You should see your app running at [http://localhost:3000](http://localhost:3000).
 
-Reflex also starts the backend server which handles all the state management and communication with the frontend. You can test the backend server is running by navigating to [http://localhost:8000/ping]({"http://localhost:8000/ping"}).
+Reflex also starts the backend server which handles all the state management and communication with the frontend. You can test the backend server is running by navigating to [http://localhost:8000/ping](http://localhost:8000/ping).
 
 Now that we have our project set up, in the next section we will start building our app!
 
 ## Basic Frontend
 
-Let's start with defining the frontend for our chat app. In Reflex, the frontend can be broken down into independent, reusable components. See the [components docs](/docs/components/props) for more information.
+Let's start with defining the frontend for our chat app. In Reflex, the frontend can be broken down into independent, reusable components. See the [components docs]({components.props.path}) for more information.
 
 ### Display Q&A
 
@@ -167,7 +176,7 @@ app.add_page(index)
 
 Components can be nested inside each other to create complex layouts. Here we create a parent container that contains two boxes for the question and answer.
 
-We also add some basic styling to the components. Components take in keyword arguments, called [props](/docs/components/props), that modify the appearance and functionality of the component. We use the `text_align` prop to align the text to the left and right.
+We also add some basic styling to the components. Components take in keyword arguments, called [props]({components.props.path}), that modify the appearance and functionality of the component. We use the `text_align` prop to align the text to the left and right.
 
 ### Reusing Components
 
@@ -232,7 +241,7 @@ def index() -> rx.Component:
 
 ### Chat Input
 
-Now we want a way for the user to input a question. For this, we will use the [input](/docs/library/forms/input) component to have the user add text and a [button](/docs/library/forms/button) component to submit the question.
+Now we want a way for the user to input a question. For this, we will use the [input]({library.forms.input.path}) component to have the user add text and a [button]({library.forms.button.path}) component to submit the question.
 
 ```python exec
 def action_bar() -> rx.Component:
@@ -266,7 +275,7 @@ def index() -> rx.Component:
 
 ### Styling
 
-Let's add some styling to the app. More information on styling can be found in the [styling docs](/docs/styling/overview). To keep our code clean, we will move the styling to a separate file `chatapp/style.py`.
+Let's add some styling to the app. More information on styling can be found in the [styling docs]({styling.overview.path}). To keep our code clean, we will move the styling to a separate file `chatapp/style.py`.
 
 ```python
 # style.py
@@ -391,7 +400,7 @@ The app is looking good, but it's not very useful yet! In the next section, we w
 
 ## State
 
-Now let’s make the chat app interactive by adding state. The state is where we define all the variables that can change in the app and all the functions that can modify them. You can learn more about state in the [state docs](/docs/state/overview).
+Now let’s make the chat app interactive by adding state. The state is where we define all the variables that can change in the app and all the functions that can modify them. You can learn more about state in the [state docs]({state.overview.path}).
 
 ### Defining State
 
@@ -478,9 +487,9 @@ def action_bar() -> rx.Component:
     )
 ```
 
-Normal Python `for` loops don't work for iterating over state vars because these values can change and aren't known at compile time. Instead, we use the [foreach](/docs/library/dynamic-rendering/foreach) component to iterate over the chat history.
+Normal Python `for` loops don't work for iterating over state vars because these values can change and aren't known at compile time. Instead, we use the [foreach]({library.dynamic_rendering.foreach.path}) component to iterate over the chat history.
 
-We also bind the input's `on_change` event to the `set_question` event handler, which will update the `question` state var while the user types in the input. We bind the button's `on_click` event to the `answer` event handler, which will process the question and add the answer to the chat history. The `set_question` event handler is a built-in implicitly defined event handler. Every base var has one. Learn more in the [events docs](/docs/events/setters) under the Setters section.
+We also bind the input's `on_change` event to the `set_question` event handler, which will update the `question` state var while the user types in the input. We bind the button's `on_click` event to the `answer` event handler, which will process the question and add the answer to the chat history. The `set_question` event handler is a built-in implicitly defined event handler. Every base var has one. Learn more in the [events docs]({events.setters.path}) under the Setters section.
 
 ### Clearing the Input
 
@@ -532,7 +541,7 @@ def answer(self):
 
 ### Streaming Text
 
-Normally state updates are sent to the frontend when an event handler returns. However, we want to stream the text from the chatbot as it is generated. We can do this by yielding from the event handler. See the [yield events docs](/docs/events/yield_events) for more info.
+Normally state updates are sent to the frontend when an event handler returns. However, we want to stream the text from the chatbot as it is generated. We can do this by yielding from the event handler. See the [yield events docs]({events.yield_events.path}) for more info.
 
 ```python exec
 def action_bar3() -> rx.Component:
diff --git a/docs/getting_started/dashboard_tutorial.md b/docs/getting_started/dashboard_tutorial.md
index 8bbd3305ebe..82602283b73 100644
--- a/docs/getting_started/dashboard_tutorial.md
+++ b/docs/getting_started/dashboard_tutorial.md
@@ -1,12 +1,22 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import (
+    advanced_onboarding,
+    components,
+    events,
+    getting_started,
+    library,
+    state,
+    styling,
+)
 ```
 
 # Data Dashboard
 
 **~20 min hands-on** · Build a small data dashboard where users can input data that renders in a table and a graph.
 
-This tutorial does not assume any existing Reflex knowledge, but we do recommend checking out the quick [Basics Guide](/docs/getting_started/basics) first. The techniques you'll learn are fundamental to any Reflex app.
+This tutorial does not assume any existing Reflex knowledge, but we do recommend checking out the quick [Basics Guide]({getting_started.basics.path}) first. The techniques you'll learn are fundamental to any Reflex app.
 
 This tutorial is divided into several sections:
 
@@ -216,7 +226,7 @@ rx.box(
 
 ## Setup
 
-1. [Install Reflex](/docs/getting_started/installation) if you haven't already.
+1. [Install Reflex]({getting_started.installation.path}) if you haven't already.
 2. Create a folder called `dashboard_tutorial` and `cd` into it.
 3. Run `uv init` and `uv add reflex`.
 4. Run `uv run reflex init` and choose template `0` (the blank template).
@@ -226,7 +236,7 @@ rx.box(
 
 ### Starter code
 
-The `reflex init` command scaffolds an `rxconfig.py` (app [config](/docs/advanced_onboarding/configuration)), an `assets/` folder for static files, and a `dashboard_tutorial/dashboard_tutorial.py` module containing your app. Open that module and replace its contents — we'll build the app up from scratch.
+The `reflex init` command scaffolds an `rxconfig.py` (app [config]({advanced_onboarding.configuration.path})), an `assets/` folder for static files, and a `dashboard_tutorial/dashboard_tutorial.py` module containing your app. Open that module and replace its contents — we'll build the app up from scratch.
 
 A minimal Reflex page is just a component function plus an app that registers it:
 
@@ -310,7 +320,7 @@ def index() -> rx.Component:
 
 ## Dynamic data with State
 
-The table above is static — the rows are hardcoded. To make it dynamic, we move the data onto **state**: a Python class whose fields ([state vars](/docs/state/overview)) hold the app's data and whose methods ([event handlers](/docs/events/events_overview)) mutate them.
+The table above is static — the rows are hardcoded. To make it dynamic, we move the data onto **state**: a Python class whose fields ([state vars]({state.overview.path})) hold the app's data and whose methods ([event handlers]({events.events_overview.path})) mutate them.
 
 We'll model each row as a `User` dataclass so we can access fields by name (`user.name`) instead of by index:
 
@@ -332,7 +342,7 @@ class State(rx.State):
     ]
 ```
 
-To iterate a list state var, use [`rx.foreach`](/docs/components/rendering_iterables) — it takes an iterable and a function that renders each item. Here `show_user` receives a `User` and returns a `table.row`:
+To iterate a list state var, use [`rx.foreach`]({components.rendering_iterables.path}) — it takes an iterable and a function that renders each item. Here `show_user` receives a `User` and returns a `table.row`:
 
 ```python
 def show_user(user: User) -> rx.Component:
@@ -363,7 +373,7 @@ def index() -> rx.Component:
 ```md alert info
 # Why not a `for` loop?
 
-A regular `for` loop runs at compile time, but state vars change at runtime — so the rendered rows wouldn't update. `rx.foreach` tells the compiler to re-render when the state var changes. See [compile-time vs runtime](/docs/getting_started/basics#compile-time-vs.-runtime).
+A regular `for` loop runs at compile time, but state vars change at runtime — so the rendered rows wouldn't update. `rx.foreach` tells the compiler to re-render when the state var changes. See [compile-time vs runtime]({getting_started.basics.path}#compile-time-vs.-runtime).
 ```
 
 ```python exec
@@ -421,7 +431,7 @@ The table looks the same, but the rows now come from state — next we'll add a
 
 ## Add data with a form
 
-We build a form using `rx.form`, which takes several components such as `rx.input` and `rx.select`, which represent the form fields that allow you to add information to submit with the form. Check out the [form](/docs/library/forms/form) docs for more information on form components.
+We build a form using `rx.form`, which takes several components such as `rx.input` and `rx.select`, which represent the form fields that allow you to add information to submit with the form. Check out the [form]({library.forms.form.path}) docs for more information on form components.
 
 The `rx.input` component takes in several props. The `placeholder` prop is the text that is displayed in the input field when it is empty. The `name` prop is the name of the input field, which gets passed through in the dictionary when the form is submitted. The `required` prop is a boolean that determines if the input field is required.
 
@@ -442,7 +452,7 @@ rx.form(
 )
 ```
 
-This form is all very compact as you can see from the example, so we need to add some styling to make it look better. We can do this by adding a `vstack` component around the form fields. The `vstack` component stacks the form fields vertically. Check out the [layout](/docs/styling/layout) docs for more information on how to layout your app.
+This form is all very compact as you can see from the example, so we need to add some styling to make it look better. We can do this by adding a `vstack` component around the form fields. The `vstack` component stacks the form fields vertically. Check out the [layout]({styling.layout.path}) docs for more information on how to layout your app.
 
 ```python demo
 rx.form(
@@ -463,7 +473,7 @@ rx.form(
 
 Now you have probably realised that we have all the form fields, but we have no way to submit the form. We can add a submit button to the form by adding a `rx.button` component to the `vstack` component. The `rx.button` component takes in the text that is displayed on the button and the `type` prop which is the type of button. The `type` prop is set to `submit` so that the form is submitted when the button is clicked.
 
-In addition to this we need a way to update the `users` state variable when the form is submitted. All state changes are handled through functions in the state class, called [event handlers](/docs/events/events_overview).
+In addition to this we need a way to update the `users` state variable when the form is submitted. All state changes are handled through functions in the state class, called [event handlers]({events.events_overview.path}).
 
 Components have special props called event triggers, such as `on_submit`, that can be used to make components interactive. Event triggers connect components to event handlers, which update the state. Different event triggers expect the event handler that you hook them up to, to take in different arguments (and some do not take in any arguments).
 
@@ -1263,9 +1273,9 @@ The most important one is `theme` which allows you to customize the look and fee
 
 The `radius` prop sets the global radius value for the app that is inherited by all components that have a `radius` prop. It can be overwritten locally for a specific component by manually setting the `radius` prop.
 
-The `accent_color` prop sets the accent color of the app. See the [theme docs](/docs/library/other/theme) for the full list of options.
+The `accent_color` prop sets the accent color of the app. See the [theme docs]({library.other.theme.path}) for the full list of options.
 
-To see other props that can be set at the app level check out this [documentation](/docs/styling/theming)
+To see other props that can be set at the app level check out this [documentation]({styling.theming.path})
 
 ```python
 app = rx.App(
diff --git a/docs/getting_started/installation.md b/docs/getting_started/installation.md
index 441f9e4e1a5..55d8cd6c753 100644
--- a/docs/getting_started/installation.md
+++ b/docs/getting_started/installation.md
@@ -1,3 +1,7 @@
+
+```python exec
+from reflex_docs.pages.docs import getting_started
+```
 # Installation
 
 ~3 minutes · Requires Python 3.10+.
@@ -108,5 +112,5 @@ uv run reflex run --loglevel debug
 ```md alert info
 # Next: Build your first app →
 
-Reflex is installed. The [Introduction](/docs/getting-started/introduction) walks through a working counter app in pure Python — the shortest path from "it runs" to "I understand it."
+Reflex is installed. The [Introduction]({getting_started.introduction.path}) walks through a working counter app in pure Python — the shortest path from "it runs" to "I understand it."
 ```
diff --git a/docs/getting_started/introduction.md b/docs/getting_started/introduction.md
index 98db68866b0..16f200174e1 100644
--- a/docs/getting_started/introduction.md
+++ b/docs/getting_started/introduction.md
@@ -1,5 +1,15 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import (
+    advanced_onboarding,
+    getting_started,
+    library,
+    pages,
+    styling,
+    vars,
+    wrapping_react,
+)
 ```
 
 # Introduction
@@ -81,7 +91,7 @@ def tabs():
         ),
         rx.tabs.content(
             rx.markdown(
-                """Each page is a Python function returning a Reflex component. Add as many as you want and link between them — see [Routing](/docs/pages/overview) for details.
+                """Each page is a Python function returning a Reflex component. Add as many as you want and link between them — see [Routing]({pages.overview.path}) for details.
                 """,
             ),
             value="tab3",
@@ -212,7 +222,7 @@ class State(rx.State):
     count: int = 0
 ```
 
-State holds the app's mutable data. Variables declared here are called **[vars](/docs/vars/base_vars)**. Our counter has one: `count`, starting at `0`.
+State holds the app's mutable data. Variables declared here are called **[vars]({vars.base_vars.path})**. Our counter has one: `count`, starting at `0`.
 
 ### Event Handlers
 
@@ -249,7 +259,7 @@ def index():
     )
 ```
 
-The UI is built from components (`rx.hstack`, `rx.button`, `rx.heading`) that can be nested and styled with CSS or [Tailwind](/docs/styling/tailwind). Reflex ships with [50+ built-in components](/docs/library), and you can [wrap any React component](/docs/wrapping-react/overview).
+The UI is built from components (`rx.hstack`, `rx.button`, `rx.heading`) that can be nested and styled with CSS or [Tailwind]({styling.tailwind.path}). Reflex ships with [50+ built-in components]({library.path}), and you can [wrap any React component]({wrapping_react.overview.path}).
 
 Components reference state vars (`rx.heading(State.count, …)`) and reactively re-render when state changes. Event triggers (`on_click=State.decrement`) wire UI to handlers.
 
@@ -277,9 +287,9 @@ Create the app and register the page at the base route.
 ```md alert info
 # Keep learning →
 
-- [Dashboard tutorial](/docs/getting_started/dashboard_tutorial) — build a real data app.
-- [Chatapp tutorial](/docs/getting_started/chatapp_tutorial) — wire up streaming AI responses.
-- [How Reflex works](/docs/advanced_onboarding/how-reflex-works) — what happens under the hood.
+- [Dashboard tutorial]({getting_started.dashboard_tutorial.path}) — build a real data app.
+- [Chatapp tutorial]({getting_started.chatapp_tutorial.path}) — wire up streaming AI responses.
+- [How Reflex works]({advanced_onboarding.how_reflex_works.path}) — what happens under the hood.
 ```
 
 ```md alert info
@@ -289,4 +299,4 @@ Create the app and register the page at the base route.
 - [Reflex Cloud](https://reflex.dev/docs/hosting/deploy-quick-start/) — one-command deploy.
 ```
 
-Browse our [open-source templates](/docs/getting_started/open_source_templates), or press `Cmd+K` / `Ctrl+K` to search the docs.
+Browse our [open-source templates]({getting_started.open_source_templates.path}), or press `Cmd+K` / `Ctrl+K` to search the docs.
diff --git a/docs/getting_started/project-structure.md b/docs/getting_started/project-structure.md
index b4e38f8a663..8ce1f623ea4 100644
--- a/docs/getting_started/project-structure.md
+++ b/docs/getting_started/project-structure.md
@@ -5,6 +5,8 @@
 
 ```python exec
 app_name = "hello"
+
+from reflex_docs.pages.docs import advanced_onboarding
 ```
 
 Let's create a new app called `{app_name}`
@@ -83,4 +85,4 @@ config = rx.Config(
 )
 ```
 
-We will discuss project structure and configuration in more detail in the [advanced project structure](/docs/advanced_onboarding/code_structure) documentation.
+We will discuss project structure and configuration in more detail in the [advanced project structure]({advanced_onboarding.code_structure.path}) documentation.
diff --git a/docs/hosting/app-management.md b/docs/hosting/app-management.md
index d4be82c800e..7e74d119a9b 100644
--- a/docs/hosting/app-management.md
+++ b/docs/hosting/app-management.md
@@ -1,5 +1,7 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import hosting
 ```
 
 # App
@@ -52,4 +54,4 @@ Here there is a `Delete app` button. Pressing this button will delete the app an
 
 Clicking on the `Settings` tab in the Cloud UI on the app page also allows a user to change the `app name`, change the `app description` and check the `app id`.
 
-The other app settings also allows users to edit and add secrets (environment variables) to the app. For more information on secrets, see the [Secrets (Environment Variables)](/docs/hosting/secrets-environment-vars/) page.
+The other app settings also allows users to edit and add secrets (environment variables) to the app. For more information on secrets, see the [Secrets (Environment Variables)]({hosting.secrets_environment_vars.path}) page.
diff --git a/docs/hosting/billing.md b/docs/hosting/billing.md
index aae00a7b829..a0c67d1693b 100644
--- a/docs/hosting/billing.md
+++ b/docs/hosting/billing.md
@@ -1,5 +1,7 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import hosting
 ```
 
 ## Overview 
@@ -18,7 +20,7 @@ Each additional collaborator is considered a `seat` and is charged on a flat mon
 
 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. 
 
-For more information on compute pricing, please see the [compute](/docs/hosting/compute/) page.
+For more information on compute pricing, please see the [compute]({hosting.compute.path}) page.
 
 ## Manage Billing
 
diff --git a/docs/hosting/config_file.md b/docs/hosting/config_file.md
index d4791a8c783..573ca5c05c4 100644
--- a/docs/hosting/config_file.md
+++ b/docs/hosting/config_file.md
@@ -1,5 +1,7 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import hosting
 ```
 
 ## What is reflex cloud config?
@@ -86,14 +88,14 @@ rx.table.root(
                 "object",
                 "sjc: 1",
                 "Region deployment mapping",
-                "/docs/hosting/regions",
+                hosting.regions.path,
             ),
             (
                 "vmtype",
                 "string",
                 "c1m1",
                 "Virtual machine specifications",
-                "/docs/hosting/machine-types",
+                hosting.machine_types.path,
             ),
             ("hostname", "string", "null", "Custom subdomain", None),
             (
@@ -101,7 +103,7 @@ rx.table.root(
                 "string",
                 ".env",
                 "Environment variables file path",
-                "/docs/hosting/secrets-environment-vars",
+                hosting.secrets_environment_vars.path,
             ),
             ("project", "uuid", "null", "Project uuid", None),
             ("projectname", "string", "null", "Project name", None),
diff --git a/docs/hosting/deploy-quick-start.md b/docs/hosting/deploy-quick-start.md
index c97f1e2a716..91ed40a3aec 100644
--- a/docs/hosting/deploy-quick-start.md
+++ b/docs/hosting/deploy-quick-start.md
@@ -2,6 +2,8 @@
 
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import hosting
 ```
 
 So far, we have been running our apps locally on our own machines.
@@ -64,7 +66,7 @@ The command is by default interactive. It asks you a few questions for informati
 
 That’s it! You should receive some feedback on the progress of your deployment and in a few minutes your app should be up. 🎉
 
-For detailed information about the deploy command and its options, see the [Deploy API Reference](/docs/hosting/deploy-quick-start/) and the [CLI Reference](https://reflex.dev/docs/api-reference/cli/).
+For detailed information about the deploy command and its options, see the [Deploy API Reference]({hosting.deploy_quick_start.path}) and the [CLI Reference](https://reflex.dev/docs/api-reference/cli/).
 
 
 ```md alert info
@@ -76,7 +78,7 @@ If you go back to the Cloud UI you should be able to see your deployed app and o
 
 ```md alert info
 # Setup a Cloud Config File
-To create a `config.yml` file for your app to set your app configuration check out the [Cloud Config Docs](/docs/hosting/config-file/).
+To create a `config.yml` file for your app to set your app configuration check out the [Cloud Config Docs]({hosting.config_file.path}).
 ```
 
 ```md alert info
diff --git a/docs/hosting/deploy-with-github-actions.md b/docs/hosting/deploy-with-github-actions.md
index ec299ca82fb..a7918d6fff8 100644
--- a/docs/hosting/deploy-with-github-actions.md
+++ b/docs/hosting/deploy-with-github-actions.md
@@ -50,6 +50,8 @@ github_actions_configs = [
         "default": "3.12",
     },
 ]
+
+from reflex_docs.pages.docs import hosting
 ```
 
 # Deploy with Github Actions
@@ -99,7 +101,7 @@ Store your Reflex authentication token securely in your repository's secrets:
 2. Navigate to Settings > Secrets and variables > Actions > New repository secret.
 3. Create new secrets for `REFLEX_AUTH_TOKEN` and `REFLEX_PROJECT_ID`. 
 
-(Create a `REFLEX_AUTH_TOKEN` in the tokens tab of your UI, check out these [docs](/docs/hosting/tokens/#tokens). 
+(Create a `REFLEX_AUTH_TOKEN` in the tokens tab of your UI, check out these [docs]({hosting.tokens.path}#tokens). 
 
 The `REFLEX_PROJECT_ID` can be found in the UI when you click on the How to deploy button on the top right when inside a project and copy the ID after the `--project` flag.)
 
diff --git a/docs/hosting/self-hosting.md b/docs/hosting/self-hosting.md
index aa985b235cd..37cc28be8a6 100644
--- a/docs/hosting/self-hosting.md
+++ b/docs/hosting/self-hosting.md
@@ -1,12 +1,14 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import getting_started
 ```
 
 # Self Hosting
 
 We recommend using `reflex deploy`, but if this does not fit your use case then you can also host your apps yourself.
 
-Clone your code to a server and install the [requirements](/docs/getting-started/installation/).
+Clone your code to a server and install the [requirements]({getting_started.installation.path}).
 
 ## API URL
 
diff --git a/docs/library/data-display/callout-ll.md b/docs/library/data-display/callout-ll.md
index c6addc07333..96ed6c86714 100644
--- a/docs/library/data-display/callout-ll.md
+++ b/docs/library/data-display/callout-ll.md
@@ -7,6 +7,8 @@ components:
 
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import library
 ```
 
 # Callout
@@ -24,7 +26,7 @@ rx.callout.root(
 
 The `callout` component is made up of a `callout.root`, which groups `callout.icon` and `callout.text` parts. This component is based on the `div` element and supports common margin props.
 
-The `callout.icon` provides width and height for the `icon` associated with the `callout`. This component is based on the `div` element. See the [**icon** component for all icons that are available.](/docs/library/data-display/icon/)
+The `callout.icon` provides width and height for the `icon` associated with the `callout`. This component is based on the `div` element. See the [**icon** component for all icons that are available.]({library.data_display.icon.path})
 
 The `callout.text` renders the callout text. This component is based on the `p` element.
 
diff --git a/docs/library/data-display/callout.md b/docs/library/data-display/callout.md
index a9b3933a198..99a958ab53b 100644
--- a/docs/library/data-display/callout.md
+++ b/docs/library/data-display/callout.md
@@ -18,6 +18,8 @@ CalloutRoot: |
 
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import library
 ```
 
 # Callout
@@ -31,7 +33,7 @@ rx.callout(
 )
 ```
 
-The `icon` prop allows an icon to be passed to the `callout` component. See the [**icon** component for all icons that are available.](/docs/library/data-display/icon)
+The `icon` prop allows an icon to be passed to the `callout` component. See the [**icon** component for all icons that are available.]({library.data_display.icon.path})
 
 ## As alert
 
diff --git a/docs/library/forms/input.md b/docs/library/forms/input.md
index a26ddc9ad87..c7b96b78f77 100644
--- a/docs/library/forms/input.md
+++ b/docs/library/forms/input.md
@@ -18,6 +18,8 @@ TextFieldSlot: |
 
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import library
 ```
 
 # Input
@@ -151,7 +153,7 @@ def form_input1():
     )
 ```
 
-To learn more about how to use forms in the [Form](/docs/library/forms/form) docs.
+To learn more about how to use forms in the [Form]({library.forms.form.path}) docs.
 
 ## Setting a value without using a State var
 
diff --git a/docs/library/forms/select.md b/docs/library/forms/select.md
index 25f1951dbc7..10c05d76d7d 100644
--- a/docs/library/forms/select.md
+++ b/docs/library/forms/select.md
@@ -70,6 +70,8 @@ SelectItem: |
 ```python exec
 import random
 import reflex as rx
+
+from reflex_docs.pages.docs import library
 ```
 
 # Select
@@ -181,7 +183,7 @@ def select_form_example():
 
 ### Using Select within a Drawer component
 
-If using within a [Drawer](/docs/library/overlay/drawer) component, set the `position` prop to `"popper"` to ensure the select menu is displayed correctly.
+If using within a [Drawer]({library.overlay.drawer.path}) component, set the `position` prop to `"popper"` to ensure the select menu is displayed correctly.
 
 ```python demo
 rx.drawer.root(
diff --git a/docs/library/graphing/charts/barchart.md b/docs/library/graphing/charts/barchart.md
index 336de918164..80481e74520 100644
--- a/docs/library/graphing/charts/barchart.md
+++ b/docs/library/graphing/charts/barchart.md
@@ -9,6 +9,8 @@ components:
 ```python exec
 import reflex as rx
 import random
+
+from reflex_docs.pages.docs import library
 ```
 
 A bar chart presents categorical data with rectangular bars with heights or lengths proportional to the values that they represent.
@@ -224,4 +226,4 @@ def bar_vertical():
     )
 ```
 
-To learn how to use the `sync_id`, `stack_id`,`x_axis_id` and `y_axis_id` props check out the of the area chart [documentation](/docs/library/graphing/charts/areachart), where these props are all described with examples.
+To learn how to use the `sync_id`, `stack_id`,`x_axis_id` and `y_axis_id` props check out the of the area chart [documentation]({library.graphing.charts.areachart.path}), where these props are all described with examples.
diff --git a/docs/library/graphing/charts/composedchart.md b/docs/library/graphing/charts/composedchart.md
index bfa4a44a441..ee97814bb97 100644
--- a/docs/library/graphing/charts/composedchart.md
+++ b/docs/library/graphing/charts/composedchart.md
@@ -5,6 +5,8 @@ components:
 
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import library
 ```
 
 # Composed Chart
@@ -12,7 +14,7 @@ import reflex as rx
 A `composed_chart` is a higher-level component chart that is composed of multiple charts, where other charts are the children of the `composed_chart`. The charts are placed on top of each other in the order they are provided in the `composed_chart` function.
 
 ```md alert info
-# To learn more about individual charts, checkout: **[area_chart](/docs/library/graphing/charts/areachart)**, **[line_chart](/docs/library/graphing/charts/linechart)**, or **[bar_chart](/docs/library/graphing/charts/barchart)**.
+# To learn more about individual charts, checkout: **[area_chart]({library.graphing.charts.areachart.path})**, **[line_chart]({library.graphing.charts.linechart.path})**, or **[bar_chart]({library.graphing.charts.barchart.path})**.
 ```
 
 ```python demo graphing
diff --git a/docs/library/graphing/charts/linechart.md b/docs/library/graphing/charts/linechart.md
index a9b9cef0e41..306220c9db9 100644
--- a/docs/library/graphing/charts/linechart.md
+++ b/docs/library/graphing/charts/linechart.md
@@ -10,6 +10,8 @@ components:
 import random
 from typing import Any
 import reflex as rx
+
+from reflex_docs.pages.docs import library
 ```
 
 A line chart is a type of chart used to show information that changes over time. Line charts are created by plotting a series of several points and connecting them with a straight line.
@@ -194,4 +196,4 @@ def line_dynamic():
     )
 ```
 
-To learn how to use the `sync_id`, `x_axis_id` and `y_axis_id` props check out the of the area chart [documentation](/docs/library/graphing/charts/areachart), where these props are all described with examples.
+To learn how to use the `sync_id`, `x_axis_id` and `y_axis_id` props check out the of the area chart [documentation]({library.graphing.charts.areachart.path}), where these props are all described with examples.
diff --git a/docs/library/graphing/charts/scatterchart.md b/docs/library/graphing/charts/scatterchart.md
index c4dc2f21c2f..4e007c3ce07 100644
--- a/docs/library/graphing/charts/scatterchart.md
+++ b/docs/library/graphing/charts/scatterchart.md
@@ -8,6 +8,8 @@ components:
 
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import library
 ```
 
 A scatter chart always has two value axes to show one set of numerical data along a horizontal (value) axis and another set of numerical values along a vertical (value) axis. The chart displays points at the intersection of an x and y numerical value, combining these values into single data points.
@@ -79,7 +81,7 @@ def scatter_double():
     )
 ```
 
-To learn how to use the `x_axis_id` and `y_axis_id` props, check out the Multiple Axis section of the area chart [documentation](/docs/library/graphing/charts/areachart).
+To learn how to use the `x_axis_id` and `y_axis_id` props, check out the Multiple Axis section of the area chart [documentation]({library.graphing.charts.areachart.path}).
 
 ## Dynamic Data
 
diff --git a/docs/library/media/audio.md b/docs/library/media/audio.md
index cd7b02f12f3..20c71421b93 100644
--- a/docs/library/media/audio.md
+++ b/docs/library/media/audio.md
@@ -7,6 +7,8 @@ components:
 
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import library
 ```
 
 The audio component can display an audio given an src path as an argument. This could either be a local path from the assets folder or an external link.
@@ -24,5 +26,5 @@ If we had a local file in the `assets` folder named `test.mp3` we could set `src
 ```md alert info
 # How to let your user upload an audio file
 
-To let a user upload an audio file to your app check out the [upload docs](/docs/library/forms/upload).
+To let a user upload an audio file to your app check out the [upload docs]({library.forms.upload.path}).
 ```
diff --git a/docs/library/media/image.md b/docs/library/media/image.md
index c699fb97ae2..480a04626dc 100644
--- a/docs/library/media/image.md
+++ b/docs/library/media/image.md
@@ -5,6 +5,8 @@ components:
 
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import library
 ```
 
 # Image
@@ -59,5 +61,5 @@ A cv2 image must be converted to a PIL image to be passed directly to `rx.image`
 ```md alert info
 # How to let your user upload an image
 
-To let a user upload an image to your app check out the [upload docs](/docs/library/forms/upload).
+To let a user upload an image to your app check out the [upload docs]({library.forms.upload.path}).
 ```
diff --git a/docs/library/media/video.md b/docs/library/media/video.md
index 1579cf724e8..fac068db3db 100644
--- a/docs/library/media/video.md
+++ b/docs/library/media/video.md
@@ -7,6 +7,8 @@ components:
 
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import library
 ```
 
 The video component can display a video given an src path as an argument. This could either be a local path from the assets folder or an external link.
@@ -20,5 +22,5 @@ If we had a local file in the `assets` folder named `test.mp4` we could set `url
 ```md alert info
 # How to let your user upload a video
 
-To let a user upload a video to your app check out the [upload docs](/docs/library/forms/upload).
+To let a user upload a video to your app check out the [upload docs]({library.forms.upload.path}).
 ```
diff --git a/docs/library/other/html_embed.md b/docs/library/other/html_embed.md
index 2e54677fc31..af3322c13f4 100644
--- a/docs/library/other/html_embed.md
+++ b/docs/library/other/html_embed.md
@@ -5,6 +5,8 @@ components:
 
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import styling
 ```
 
 # HTML Embed
@@ -28,7 +30,7 @@ rx.vstack(
 # Missing Styles?
 
 Reflex uses Radix-UI and tailwind for styling, both of which reset default styles for headings.
-If you are using the html component and want pretty default styles, consider setting `class_name='prose'`, adding `@tailwindcss/typography` package to `frontend_packages` and enabling it via `tailwind` config in `rxconfig.py`. See the [Tailwind docs](/docs/styling/overview) for an example of adding this plugin.
+If you are using the html component and want pretty default styles, consider setting `class_name='prose'`, adding `@tailwindcss/typography` package to `frontend_packages` and enabling it via `tailwind` config in `rxconfig.py`. See the [Tailwind docs]({styling.overview.path}) for an example of adding this plugin.
 ```
 
 In this example, we render an image.
diff --git a/docs/library/overlay/dialog.md b/docs/library/overlay/dialog.md
index 3aa6a029fa1..6142c246067 100644
--- a/docs/library/overlay/dialog.md
+++ b/docs/library/overlay/dialog.md
@@ -43,6 +43,8 @@ DialogContent: |
 
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import library
 ```
 
 # Dialog
@@ -189,7 +191,7 @@ def dialog_example():
     )
 ```
 
-Check out the [menu docs](/docs/library/overlay/dropdown_menu) for an example of opening a dialog from within a dropdown menu.
+Check out the [menu docs]({library.overlay.dropdown_menu.path}) for an example of opening a dialog from within a dropdown menu.
 
 ## Form Submission to a Database from a Dialog
 
diff --git a/docs/library/tables-and-data-grids/data_editor.md b/docs/library/tables-and-data-grids/data_editor.md
index c7009218f9a..f0293981308 100644
--- a/docs/library/tables-and-data-grids/data_editor.md
+++ b/docs/library/tables-and-data-grids/data_editor.md
@@ -33,9 +33,11 @@ data: list[list[Any]] = [
     ["E", 5, True],
     ["F", 6, False],
 ]
+
+from reflex_docs.pages.docs import library
 ```
 
-This component is introduced as an alternative to the [datatable](/docs/library/tables-and-data-grids/data_table) to support editing the displayed data.
+This component is introduced as an alternative to the [datatable]({library.tables_and_data_grids.data_table.path}) to support editing the displayed data.
 
 ## Columns
 
diff --git a/docs/library/tables-and-data-grids/data_table.md b/docs/library/tables-and-data-grids/data_table.md
index 95fa4b94d3d..c4ce2dc8668 100644
--- a/docs/library/tables-and-data-grids/data_table.md
+++ b/docs/library/tables-and-data-grids/data_table.md
@@ -5,6 +5,8 @@ components:
 
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import library
 ```
 
 # Data Table
@@ -16,7 +18,7 @@ In this example we will read data from a csv file, convert it to a pandas datafr
 
 We will also add a search, pagination, sorting to the data_table to make it more accessible.
 
-If you want to [add, edit or remove data](/docs/library/tables-and-data-grids/table) in your app or deal with anything but static data then the [`rx.table`](/docs/library/tables-and-data-grids/table) might be a better fit for your use case.
+If you want to [add, edit or remove data]({library.tables_and_data_grids.table.path}) in your app or deal with anything but static data then the [`rx.table`]({library.tables_and_data_grids.table.path}) might be a better fit for your use case.
 
 ```python demo box
 rx.data_table(
diff --git a/docs/library/tables-and-data-grids/table.md b/docs/library/tables-and-data-grids/table.md
index 23a7b9bef4b..53f9d3f47a4 100644
--- a/docs/library/tables-and-data-grids/table.md
+++ b/docs/library/tables-and-data-grids/table.md
@@ -145,13 +145,16 @@ class Customer(rx.Model, table=True):
     email: str
     phone: str
     address: str
+
+
+from reflex_docs.pages.docs import components, database, library
 ```
 
 # Table
 
 A semantic table for presenting tabular data.
 
-If you just want to [represent static data](/docs/library/tables-and-data-grids/data_table) then the [`rx.data_table`](/docs/library/tables-and-data-grids/data_table) might be a better fit for your use case as it comes with in-built pagination, search and sorting.
+If you just want to [represent static data]({library.tables_and_data_grids.data_table.path}) then the [`rx.data_table`]({library.tables_and_data_grids.data_table.path}) might be a better fit for your use case as it comes with in-built pagination, search and sorting.
 
 ## Basic Example
 
@@ -193,7 +196,7 @@ rx.table.root(
 
 Many times there is a need for the data we represent in our table to be dynamic. Dynamic data must be in `State`. Later we will show an example of how to access data from a database and how to load data from a source file.
 
-In this example there is a `people` data structure in `State` that is [iterated through using `rx.foreach`](/docs/components/rendering_iterables).
+In this example there is a `people` data structure in `State` that is [iterated through using `rx.foreach`]({components.rendering_iterables.path}).
 
 ```python demo exec
 class TableForEachState(rx.State):
@@ -472,9 +475,9 @@ The code below shows how to load data from a database and place it in an `rx.tab
 
 ## Loading data into table
 
-A `Customer` [model](/docs/database/tables) is defined that inherits from `rx.Model`.
+A `Customer` [model]({database.tables.path}) is defined that inherits from `rx.Model`.
 
-The `load_entries` event handler executes a [query](/docs/database/queries) that is used to request information from a database table. This `load_entries` event handler is called on the `on_mount` event trigger of the `rx.table.root`.
+The `load_entries` event handler executes a [query]({database.queries.path}) that is used to request information from a database table. This `load_entries` event handler is called on the `on_mount` event trigger of the `rx.table.root`.
 
 If you want to load the data when the page in the app loads you can set `on_load` in `app.add_page()` to equal this event handler, like `app.add_page(page_name, on_load=State.load_entries)`.
 
diff --git a/docs/library/typography/link.md b/docs/library/typography/link.md
index 0c56ec15f3b..63f036b6856 100644
--- a/docs/library/typography/link.md
+++ b/docs/library/typography/link.md
@@ -5,6 +5,8 @@ components:
 
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import api_reference, library
 ```
 
 # Link
@@ -20,7 +22,7 @@ You can also provide local links to other pages in your project without writing
 ```python demo
 rx.link(
     "Example",
-    href="/docs/library",
+    href=library.path,
 )
 ```
 
@@ -39,13 +41,13 @@ rx.box("Example", id="example")
 To reference an anchor, you can use the `href` prop of the `link` component. The `href` should be in the format of the page you want to link to followed by a # and the id of the anchor.
 
 ```python demo
-rx.link("Example", href="/docs/library/typography/link#example")
+rx.link("Example", href=f"{library.typography.link.path}#example")
 ```
 
 ```md alert info
 # Redirecting the user using State
 
-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).
+It is also possible to redirect the user to a new path within the application, using `rx.redirect()`. Check out the docs [here]({api_reference.special_events.path}).
 ```
 
 # Style
diff --git a/docs/pages/overview.md b/docs/pages/overview.md
index 439151a5f24..a55deae186c 100644
--- a/docs/pages/overview.md
+++ b/docs/pages/overview.md
@@ -1,5 +1,7 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import api_reference, library, pages, utility_methods
 ```
 
 # Pages
@@ -69,7 +71,7 @@ You can directly import the module or import another module that imports the dec
 
 ### Links
 
-[Links](/docs/library/typography/link) are accessible elements used primarily for navigation. Use the `href` prop to specify the location for the link to navigate to.
+[Links]({library.typography.link.path}) are accessible elements used primarily for navigation. Use the `href` prop to specify the location for the link to navigate to.
 
 ```python demo
 rx.link("Reflex Home Page.", href="https://reflex.dev/")
@@ -78,7 +80,7 @@ rx.link("Reflex Home Page.", href="https://reflex.dev/")
 You can also provide local links to other pages in your project without writing the full url.
 
 ```python demo
-rx.link("Example", href="/docs/library")
+rx.link("Example", href=library.path)
 ```
 
 To open the link in a new tab, set the `is_external` prop to `True`.
@@ -87,7 +89,7 @@ To open the link in a new tab, set the `is_external` prop to `True`.
 rx.link("Open in new tab", href="https://reflex.dev/", is_external=True)
 ```
 
-Check out the [link docs](/docs/library/typography/link) to learn more.
+Check out the [link docs]({library.typography.link.path}) to learn more.
 
 ```md video https://youtube.com/embed/ITOZkzjtjUA?start=4083&end=4423
 # Video: Link-based Navigation
@@ -102,9 +104,7 @@ Redirect the user to a new path within the application using `rx.redirect()`.
 
 ```python demo
 rx.vstack(
-    rx.button(
-        "open in tab", on_click=rx.redirect("/docs/api-reference/special_events")
-    ),
+    rx.button("open in tab", on_click=rx.redirect(api_reference.special_events.path)),
     rx.button(
         "open in new tab",
         on_click=rx.redirect("https://github.com/reflex-dev/reflex/", is_external=True),
@@ -209,7 +209,7 @@ You can add page metadata such as:
 
 ## Getting the Current Page
 
-You can access the current page from the `router` attribute in any state. See the [router docs](/docs/utility_methods/router_attributes) for all available attributes.
+You can access the current page from the `router` attribute in any state. See the [router docs]({utility_methods.router_attributes.path}) for all available attributes.
 
 ```python
 class State(rx.State):
@@ -220,7 +220,7 @@ class State(rx.State):
 ```
 
 The `router.page.path` attribute allows you to obtain the path of the current page from the router data,
-for [dynamic pages](/docs/pages/dynamic_routing) this will contain the slug rather than the actual value used to load the page.
+for [dynamic pages]({pages.dynamic_routing.path}) this will contain the slug rather than the actual value used to load the page.
 
 To get the actual URL displayed in the browser, use `router.page.raw_path`. This
 will contain all query parameters and dynamic path segments.
diff --git a/docs/recipes/content/forms.md b/docs/recipes/content/forms.md
index 709f0d9b3b3..2f1558d733b 100644
--- a/docs/recipes/content/forms.md
+++ b/docs/recipes/content/forms.md
@@ -1,12 +1,14 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import library
 ```
 
 ## Forms
 
 Forms are a common way to gather information from users. Below are some examples.
 
-For more details, see the [form docs page](/docs/library/forms/form).
+For more details, see the [form docs page]({library.forms.form.path}).
 
 ## Event creation
 
diff --git a/docs/recipes/content/grid.md b/docs/recipes/content/grid.md
index 54a92234772..3cec6165432 100644
--- a/docs/recipes/content/grid.md
+++ b/docs/recipes/content/grid.md
@@ -1,12 +1,14 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import styling
 ```
 
 # Grid
 
 A simple responsive grid layout. We specify the number of columns to the `grid_template_columns` property as a list. The grid will automatically adjust the number of columns based on the screen size.
 
-For details, see the [responsive docs page](/docs/styling/responsive).
+For details, see the [responsive docs page]({styling.responsive.path}).
 
 ## Cards
 
diff --git a/docs/recipes/content/multi_column_row.md b/docs/recipes/content/multi_column_row.md
index a6b0f78a3a6..cf84327d560 100644
--- a/docs/recipes/content/multi_column_row.md
+++ b/docs/recipes/content/multi_column_row.md
@@ -1,12 +1,14 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import styling
 ```
 
 # Multi-column and row layout
 
 A simple responsive multi-column and row layout. We specify the number of columns/rows to the `flex_direction` property as a list. The layout will automatically adjust the number of columns/rows based on the screen size.
 
-For details, see the [responsive docs page](/docs/styling/responsive).
+For details, see the [responsive docs page]({styling.responsive.path}).
 
 ## Column
 
diff --git a/docs/state_structure/component_state.md b/docs/state_structure/component_state.md
index 45e78824fab..194b3bf0a01 100644
--- a/docs/state_structure/component_state.md
+++ b/docs/state_structure/component_state.md
@@ -1,5 +1,7 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import events, ui, vars
 ```
 
 # Component State
@@ -8,8 +10,8 @@ _New in version 0.4.6_.
 
 Defining a subclass of `rx.ComponentState` creates a special type of state that is tied to an
 instance of a component, rather than existing globally in the app. A Component State combines
-[UI code](/docs/ui/overview) with state [Vars](/docs/vars/base_vars) and
-[Event Handlers](/docs/events/events_overview),
+[UI code]({ui.overview.path}) with state [Vars]({vars.base_vars.path}) and
+[Event Handlers]({events.events_overview.path}),
 and is useful for creating reusable components which operate independently of each other.
 
 ```md alert warning
diff --git a/docs/styling/custom-stylesheets.md b/docs/styling/custom-stylesheets.md
index 5f2fafa8544..284e4ff4699 100644
--- a/docs/styling/custom-stylesheets.md
+++ b/docs/styling/custom-stylesheets.md
@@ -1,5 +1,7 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import assets
 ```
 
 # Custom Stylesheets
@@ -16,7 +18,7 @@ app = rx.App(
 
 ## Local Stylesheets
 
-You can also add local stylesheets. Just put the stylesheet under [`assets/`](/docs/assets/upload_and_download_files) and pass the path to the stylesheet to `rx.App`:
+You can also add local stylesheets. Just put the stylesheet under [`assets/`]({assets.upload_and_download_files.path}) and pass the path to the stylesheet to `rx.App`:
 
 ```python
 app = rx.App(
diff --git a/docs/styling/overview.md b/docs/styling/overview.md
index 6a86c934470..273f01a4898 100644
--- a/docs/styling/overview.md
+++ b/docs/styling/overview.md
@@ -1,5 +1,7 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import library, styling
 ```
 
 # Styling
@@ -73,7 +75,7 @@ Using style dictionaries like this, you can easily create a consistent theme for
 ```md alert warning
 # Watch out for underscores in class names and IDs
 
-Reflex automatically converts `snake_case` identifiers into `camelCase` format when applying styles. To ensure consistency, it is recommended to use the dash character or camelCase identifiers in your own class names and IDs. To style third-party libraries relying on underscore class names, an external stylesheet should be used. See [custom stylesheets](/docs/styling/custom-stylesheets) for how to reference external CSS files.
+Reflex automatically converts `snake_case` identifiers into `camelCase` format when applying styles. To ensure consistency, it is recommended to use the dash character or camelCase identifiers in your own class names and IDs. To style third-party libraries relying on underscore class names, an external stylesheet should be used. See [custom stylesheets]({styling.custom_stylesheets.path}) for how to reference external CSS files.
 ```
 
 ## Inline Styles
@@ -157,7 +159,7 @@ The style dictionaries are applied in the order they are passed in. This means t
 
 ## Theming
 
-As of Reflex 'v0.4.0', you can now theme your Reflex web apps. To learn more checkout the [Theme docs](/docs/styling/theming).
+As of Reflex 'v0.4.0', you can now theme your Reflex web apps. To learn more checkout the [Theme docs]({styling.theming.path}).
 
 The `Theme` component is used to change the theme of the application. The `Theme` can be set directly in your rx.App.
 
@@ -169,7 +171,7 @@ app = rx.App(
 )
 ```
 
-Additionally you can modify the theme of your app through using the `Theme Panel` component which can be found in the [Theme Panel docs](/docs/library/other/theme).
+Additionally you can modify the theme of your app through using the `Theme Panel` component which can be found in the [Theme Panel docs]({library.other.theme.path}).
 
 ## Special Styles
 
diff --git a/docs/styling/tailwind.md b/docs/styling/tailwind.md
index ff9974c3080..a040dce5297 100644
--- a/docs/styling/tailwind.md
+++ b/docs/styling/tailwind.md
@@ -1,5 +1,7 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import library
 ```
 
 # Tailwind
@@ -254,4 +256,4 @@ def tailwind_dynamic_class_demo():
 
 Reflex core components are built on Radix Themes, which means they come with pre-defined styling. When you apply Tailwind classes to these components, you may encounter styling conflicts or unexpected behavior as the Tailwind styles compete with the built-in Radix styles.
 
-For the best experience when using Tailwind CSS in your Reflex application, we recommend using the lower-level `rx.el` components. These components don't have pre-applied styles, giving you complete control over styling with Tailwind classes without any conflicts. Check the list of HTML components [here](/docs/library/other/html).
+For the best experience when using Tailwind CSS in your Reflex application, we recommend using the lower-level `rx.el` components. These components don't have pre-applied styles, giving you complete control over styling with Tailwind classes without any conflicts. Check the list of HTML components [here]({library.other.html.path}).
diff --git a/docs/styling/theming.md b/docs/styling/theming.md
index aab8e43b877..d3e526c4ccb 100644
--- a/docs/styling/theming.md
+++ b/docs/styling/theming.md
@@ -10,6 +10,8 @@ cell_style = {
     "letter_spacing": "-0.0125em",
     "color": "var(--c-slate-11)",
 }
+
+from reflex_docs.pages.docs import library
 ```
 
 # Theming
@@ -252,7 +254,7 @@ rx.table.root(
 )
 ```
 
-Additionally you can modify the theme of your app through using the `Theme Panel` component which can be found in the [Theme Panel docs](/docs/library/other/theme).
+Additionally you can modify the theme of your app through using the `Theme Panel` component which can be found in the [Theme Panel docs]({library.other.theme.path}).
 
 ## Colors
 
diff --git a/docs/ui/overview.md b/docs/ui/overview.md
index f2802356eca..4f34f3588c8 100644
--- a/docs/ui/overview.md
+++ b/docs/ui/overview.md
@@ -1,5 +1,7 @@
 ```python exec
 import reflex as rx
+
+from reflex_docs.pages.docs import library
 ```
 
 # UI Overview
@@ -51,7 +53,7 @@ Some props are specific to a component. For example, the `header` and `content`
 Styling props like `color` are shared across many components.
 
 ```md alert info
-# You can find all the props for a component by checking its documentation page in the [component library](/docs/library).
+# You can find all the props for a component by checking its documentation page in the [component library]({library.path}).
 ```
 
 ## Pages
diff --git a/docs/vars/base_vars.md b/docs/vars/base_vars.md
index 53f97552908..255cf060209 100644
--- a/docs/vars/base_vars.md
+++ b/docs/vars/base_vars.md
@@ -3,6 +3,8 @@ import random
 import time
 
 import reflex as rx
+
+from reflex_docs.pages.docs import vars
 ```
 
 # Base Vars
@@ -42,7 +44,7 @@ In this example `ticker` and `price` are base vars in the app, which can be modi
 ```md alert warning
 # Vars must be JSON serializable.
 
-Vars are used to communicate between the frontend and backend. They must be primitive Python types, Plotly figures, Pandas dataframes, or [a custom defined type](/docs/vars/custom_vars).
+Vars are used to communicate between the frontend and backend. They must be primitive Python types, Plotly figures, Pandas dataframes, or [a custom defined type]({vars.custom_vars.path}).
 ```
 
 ## Accessing state variables on different pages
diff --git a/docs/vars/custom_vars.md b/docs/vars/custom_vars.md
index 3eebc9cd88d..e68a01a79ea 100644
--- a/docs/vars/custom_vars.md
+++ b/docs/vars/custom_vars.md
@@ -2,11 +2,13 @@
 import reflex as rx
 import dataclasses
 from typing import TypedDict
+
+from reflex_docs.pages.docs import vars
 ```
 
 # Custom Vars
 
-As mentioned in the [vars page](/docs/vars/base_vars), Reflex vars must be JSON serializable.
+As mentioned in the [vars page]({vars.base_vars.path}), Reflex vars must be JSON serializable.
 
 This means we can support any Python primitive types, as well as lists, dicts, and tuples. However, you can also create more complex var types using dataclasses (recommended), TypedDict, or Pydantic models.
 
diff --git a/docs/wrapping-react/more-wrapping-examples.md b/docs/wrapping-react/more-wrapping-examples.md
index afbf5282b34..58fe5bb9645 100644
--- a/docs/wrapping-react/more-wrapping-examples.md
+++ b/docs/wrapping-react/more-wrapping-examples.md
@@ -1,3 +1,7 @@
+
+```python exec
+from reflex_docs.pages.docs import wrapping_react
+```
 # More React Libraries
 
 ## AG Charts
@@ -105,7 +109,7 @@ app.add_page(index)
 
 In this example we are wrapping the React Leaflet library from the NPM package [react-leaflet](https://www.npmjs.com/package/react-leaflet).
 
-On line `1` we import the `dynamic` function from Next.js and on line `21` we set `ssr: false`. Lines `4` and `6` use the `dynamic` function to import the `MapContainer` and `TileLayer` components from the `react-leaflet` library. This is used to dynamically import the `MapContainer` and `TileLayer` components from the `react-leaflet` library. This is done in Reflex by using the `NoSSRComponent` class when defining the component. There is more information of when this is needed on the `Dynamic Imports` section of this [page](/docs/wrapping-react/library-and-tags).
+On line `1` we import the `dynamic` function from Next.js and on line `21` we set `ssr: false`. Lines `4` and `6` use the `dynamic` function to import the `MapContainer` and `TileLayer` components from the `react-leaflet` library. This is used to dynamically import the `MapContainer` and `TileLayer` components from the `react-leaflet` library. This is done in Reflex by using the `NoSSRComponent` class when defining the component. There is more information of when this is needed on the `Dynamic Imports` section of this [page]({wrapping_react.library_and_tags.path}).
 
 It mentions in the documentation that it is necessary to include the Leaflet CSS file, which is added on line `2` in the React code below. This can be done in Reflex by using the `add_imports` method in the `MapContainer` component. We can add a relative path from within the React library or a full URL to the CSS file.
 
@@ -207,7 +211,7 @@ app.add_page(index)
 
 In this example we are wrapping the React renderer for creating PDF files on the browser and server from the NPM package [@react-pdf/renderer](https://www.npmjs.com/package/@react-pdf/renderer).
 
-This example is similar to the previous examples, and again Dynamic Imports are required for this library. This is done in Reflex by using the `NoSSRComponent` class when defining the component. There is more information on why this is needed on the `Dynamic Imports` section of this [page](/docs/wrapping-react/library-and-tags).
+This example is similar to the previous examples, and again Dynamic Imports are required for this library. This is done in Reflex by using the `NoSSRComponent` class when defining the component. There is more information on why this is needed on the `Dynamic Imports` section of this [page]({wrapping_react.library_and_tags.path}).
 
 The main difference with this example is that the `style` prop, used on lines `20`, `21` and `24` in React code, is a reserved name in Reflex so can not be wrapped. A different name must be used when wrapping this prop and then this name must be changed back to the original with the `rename_props` method. In this example we name the prop `theme` in our Reflex code and then change it back to `style` with the `rename_props` method in both the `Page` and `View` components.
 
diff --git a/docs/wrapping-react/overview.md b/docs/wrapping-react/overview.md
index 452197fe85d..b2e6b141013 100644
--- a/docs/wrapping-react/overview.md
+++ b/docs/wrapping-react/overview.md
@@ -1,6 +1,8 @@
 ```python exec
 import reflex as rx
 from typing import Any
+
+from reflex_docs.pages.docs import custom_components
 ```
 
 # Wrapping React
@@ -9,7 +11,7 @@ One of Reflex's most powerful features is the ability to wrap React components a
 
 If you want a specific component for your app but Reflex doesn't provide it, there's a good chance it's available as a React component. Search for it on [npm](https://www.npmjs.com/), and if it's there, you can use it in your Reflex app. You can also create your own local React components and wrap them in Reflex.
 
-Once you wrap your component, you [publish it](/docs/custom-components/overview) to the Reflex library so that others can use it.
+Once you wrap your component, you [publish it]({custom_components.overview.path}) to the Reflex library so that others can use it.
 
 ## Simple Example