use no ssr image zoom (#1807)

carlosabadia · web-flow · commit 31795b578c8a · 2026-04-02T20:54:09.000+02:00
* use no ssr image zoom

* ruff

* bump
diff --git a/blog/build-python-admin-panels-internal-tools-guide.md b/blog/build-python-admin-panels-internal-tools-guide.md
@@ -20,7 +20,7 @@ faq: [
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 Most Python developers hit the same wall when [building internal tools](https://blog.tooljet.com/build-internal-apps-without-frontend-developers/). You finish the backend logic, then face rebuilding the interface in a JavaScript framework you'd rather avoid. Now you can [build approval workflows in Python](https://reflex.dev/) and skip the context switching. We'll show you how to create complete admin panels with forms, tables, authentication, and business process automation using Python alone.
diff --git a/blog/custom-components.md b/blog/custom-components.md
@@ -49,7 +49,7 @@ And use it right away like any other Reflex component.
 ```python demo exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 
 def zoom():
     src = f"{REFLEX_ASSETS_CDN}blog/custom_components.webp"
diff --git a/blog/enterprise-ready-ai-app-builder.md b/blog/enterprise-ready-ai-app-builder.md
@@ -20,7 +20,7 @@ faq: [
 
 ```python exec
 import reflex as rx
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 from pcweb.constants import REFLEX_ASSETS_CDN
 ```
 
diff --git a/blog/how-to-build-python-web-app-complete-tutorial.md b/blog/how-to-build-python-web-app-complete-tutorial.md
@@ -19,7 +19,7 @@ faq: [
 
 ```python exec
 import reflex as rx
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 from pcweb.constants import REFLEX_ASSETS_CDN
 ```
 
diff --git a/blog/internal-tool-builders.md b/blog/internal-tool-builders.md
@@ -17,7 +17,7 @@ faq: [
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 
diff --git a/blog/on-premises-deployment.md b/blog/on-premises-deployment.md
@@ -40,7 +40,7 @@ faq: [
 import reflex as rx
 import reflex_ui as ui
 from pcweb import pages, constants
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 from reflex_ui.blocks.demo_form import demo_form_dialog
 ```
 
diff --git a/blog/python-comparison.md b/blog/python-comparison.md
@@ -19,7 +19,7 @@ faq: [
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 
diff --git a/blog/reflex-architecture.md b/blog/reflex-architecture.md
@@ -95,7 +95,7 @@ Under the hood, Reflex apps compile down to a [React](https://react.dev) fronten
 The diagram below provides a detailed overview of how a Reflex app works. We'll go through each part in more detail in the following sections.
 
 ```python exec
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 ```python eval
diff --git a/blog/reflex-dash.md b/blog/reflex-dash.md
@@ -18,7 +18,7 @@ meta: [
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 
diff --git a/blog/reflex-jupyter.md b/blog/reflex-jupyter.md
@@ -95,7 +95,7 @@ for feature, importance in zip(features, rf.feature_importances_):
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 
 def render_image():
     return rx.el.div(
diff --git a/blog/reflex-streamlit.md b/blog/reflex-streamlit.md
@@ -21,7 +21,7 @@ faq: [
 
 ```python exec
 import reflex as rx
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 
diff --git a/blog/top-10-data-visualization-libraries.md b/blog/top-10-data-visualization-libraries.md
@@ -19,7 +19,7 @@ faq: [
 
 ```python exec
 import reflex as rx
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 
diff --git a/blog/top-5-ai-app-builders.md b/blog/top-5-ai-app-builders.md
@@ -19,7 +19,7 @@ faq: [
 
 ```python exec
 import reflex as rx
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 
diff --git a/blog/top-python-web-frameworks.md b/blog/top-python-web-frameworks.md
@@ -22,7 +22,7 @@ faq: [
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 
diff --git a/case-studies/bayesline.md b/case-studies/bayesline.md
@@ -46,7 +46,7 @@ meta: [
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 from pcweb.pages.docs import enterprise
 from pcweb.pages.customers.views.app_preview_card import app_preview_card
 ```
diff --git a/docs/ai_builder/app_lifecycle/copy_app.md b/docs/ai_builder/app_lifecycle/copy_app.md
@@ -7,7 +7,7 @@ This is useful when you want to experiment with changes without affecting the or
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 
 def render_image():
     return rx.el.div(
diff --git a/docs/ai_builder/app_lifecycle/deploy_app.md b/docs/ai_builder/app_lifecycle/deploy_app.md
@@ -13,7 +13,7 @@ Simply click the `Deploy` button in the top right corner of Reflex Build, as sho
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 
 def render_image():
     return rx.el.div(
diff --git a/docs/ai_builder/app_lifecycle/download_app.md b/docs/ai_builder/app_lifecycle/download_app.md
@@ -8,7 +8,7 @@ You can download your Reflex Build project if you want to work on it locally or
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 
 def render_image():
     return rx.el.div(
diff --git a/docs/ai_builder/app_lifecycle/fork_app.md b/docs/ai_builder/app_lifecycle/fork_app.md
@@ -5,7 +5,7 @@ The **Fork App** feature lets you take an existing app and create your own versi
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 ```python eval
diff --git a/docs/ai_builder/app_lifecycle/general.md b/docs/ai_builder/app_lifecycle/general.md
@@ -6,7 +6,7 @@ The **General App Settings** section lets you manage key aspects of your app, in
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 
 def render_image():
     return rx.el.div(
diff --git a/docs/ai_builder/app_lifecycle/share_app.md b/docs/ai_builder/app_lifecycle/share_app.md
@@ -6,7 +6,7 @@ When you share, Reflex Build generates a unique link that points to the current
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 
 def render_image():
     return rx.el.div(
diff --git a/docs/ai_builder/features/automated_testing.md b/docs/ai_builder/features/automated_testing.md
@@ -8,7 +8,7 @@ The Testing feature allows you to automatically test your generated applications
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 ```python eval
diff --git a/docs/ai_builder/features/connect_to_github.md b/docs/ai_builder/features/connect_to_github.md
@@ -8,7 +8,7 @@ description: Integrate with GitHub to automate workflows and interact with your
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 The Github integration is important to make sure that you don't lose your progress. It also allows you to revert to previous versions of your app.
diff --git a/docs/ai_builder/features/customization.md b/docs/ai_builder/features/customization.md
@@ -16,7 +16,7 @@ The App Style feature allows you to customize the visual appearance of your AI-g
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 ```python eval
diff --git a/docs/ai_builder/features/editor_modes.md b/docs/ai_builder/features/editor_modes.md
@@ -6,7 +6,7 @@ The AI Builder includes a powerful dual-mode editor that lets you view and edit
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 
 def render_image():
     return rx.el.div(
diff --git a/docs/ai_builder/features/image_as_prompt.md b/docs/ai_builder/features/image_as_prompt.md
@@ -3,7 +3,7 @@
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 Uploading an image (screenshot) of a website (web) app of what you are looking to build gives the AI really good context. 
diff --git a/docs/ai_builder/features/installing_external_packages.md b/docs/ai_builder/features/installing_external_packages.md
@@ -3,7 +3,7 @@
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 Reflex Build allows you to install external python packages to use in your app. This is useful if you want to use a package that is not included in the default Reflex Build environment. Examples might include `openai`, `langsmith`, `requests`, etc.
diff --git a/docs/ai_builder/features/integration_shortcut.md b/docs/ai_builder/features/integration_shortcut.md
@@ -9,7 +9,7 @@ Once in your app, you can access your integrations by clicking the flow or cog i
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 ```python eval
diff --git a/docs/ai_builder/features/knowledge.md b/docs/ai_builder/features/knowledge.md
@@ -5,7 +5,7 @@ The **Knowledge** feature lets you add context or rules that the AI Builder can
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 
 def render_image():
     return rx.el.div(
diff --git a/docs/ai_builder/features/restore_checkpoint.md b/docs/ai_builder/features/restore_checkpoint.md
@@ -5,7 +5,7 @@ The **Restore Checkpoint** feature allows you to roll back your app to any previ
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 ```python eval
diff --git a/docs/ai_builder/features/secrets.md b/docs/ai_builder/features/secrets.md
@@ -6,7 +6,7 @@ The **Secrets** feature allows you to securely store environment-specific values
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 
 def render_image():
     return rx.el.div(
@@ -50,7 +50,7 @@ OPENAI_API_KEY=sk-xxxxxx
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 ```python eval
diff --git a/docs/ai_builder/images.md b/docs/ai_builder/images.md
@@ -27,7 +27,7 @@ If you want to upload an image to be used within the app, such as a company logo
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 ```python eval
diff --git a/docs/ai_builder/overview/templates.md b/docs/ai_builder/overview/templates.md
@@ -5,7 +5,7 @@ Reflex has many certified templates, seen on the `Trending` tab of the Reflex Bu
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 ```python eval
diff --git a/docs/ai_builder/overview/tutorial.md b/docs/ai_builder/overview/tutorial.md
@@ -28,7 +28,7 @@ This will create your main dashboard page with both tabular and visual represent
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 ```python eval
diff --git a/docs/ai_builder/overview/what_is_reflex_build.md b/docs/ai_builder/overview/what_is_reflex_build.md
@@ -4,7 +4,7 @@ Reflex Build is an AI-powered platform that lets anyone create full-stack web ap
 
 ```python exec
 import reflex as rx
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 
 from pcweb.constants import REFLEX_ASSETS_CDN
 
diff --git a/docs/hosting/adding-members.md b/docs/hosting/adding-members.md
@@ -1,7 +1,7 @@
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 # Project
diff --git a/docs/hosting/app-management.md b/docs/hosting/app-management.md
@@ -1,7 +1,7 @@
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 from pcweb.pages.docs import hosting 
 from pcweb.pages import docs
 from pcweb.styles.styles import get_code_style, cell_style
diff --git a/docs/hosting/billing.md b/docs/hosting/billing.md
@@ -1,6 +1,6 @@
 ```python exec
 import reflex as rx
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 from pcweb.pages.pricing.calculator import compute_table_base
 from pcweb.pages.docs import hosting 
 ```
diff --git a/docs/hosting/compute.md b/docs/hosting/compute.md
@@ -1,6 +1,6 @@
 ```python exec
 import reflex as rx
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 from pcweb.pages.pricing.calculator import compute_table_base
 ```
 
diff --git a/docs/hosting/config_file.md b/docs/hosting/config_file.md
@@ -1,6 +1,6 @@
 ```python exec
 import reflex as rx
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 from pcweb import constants
 from pcweb.pages.docs import hosting
 from pcweb.pages import docs
diff --git a/docs/hosting/custom-domains.md b/docs/hosting/custom-domains.md
@@ -1,7 +1,7 @@
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 ```
 
 # Custom Domains
diff --git a/docs/hosting/deploy-quick-start.md b/docs/hosting/deploy-quick-start.md
@@ -3,7 +3,7 @@
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 from pcweb.pages import docs
 ```
 
diff --git a/docs/hosting/logs.md b/docs/hosting/logs.md
@@ -1,7 +1,7 @@
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.components.image_zoom import image_zoom
 from pcweb.pages.docs import hosting 
 from pcweb.pages import docs
 from pcweb.styles.styles import get_code_style, cell_style
diff --git a/docs/hosting/machine-types.md b/docs/hosting/machine-types.md
diff --git a/docs/hosting/regions.md b/docs/hosting/regions.md
diff --git a/docs/hosting/secrets-environment-vars.md b/docs/hosting/secrets-environment-vars.md
diff --git a/docs/hosting/tokens.md b/docs/hosting/tokens.md
diff --git a/pcweb/components/image_zoom.py b/pcweb/components/image_zoom.py
diff --git a/pcweb/pages/customers/views/app_preview_card.py b/pcweb/pages/customers/views/app_preview_card.py
diff --git a/pcweb/pages/databricks/databricks.md b/pcweb/pages/databricks/databricks.md
diff --git a/pcweb/pages/use_cases/use_cases.md b/pcweb/pages/use_cases/use_cases.md
diff --git a/pyproject.toml b/pyproject.toml
diff --git a/uv.lock b/uv.lock
