diff --git a/docs/ai_builder/apis.md b/docs/ai_builder/apis.md
deleted file mode 100644
index a859a3d25..000000000
--- a/docs/ai_builder/apis.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# API Integration
-
-Not every service has a first-class integration — but your app can connect to **any external API** directly. By using standard HTTP requests, you can integrate with virtually any platform, fetch or send data, and trigger workflows without needing a prebuilt connector.
-
-This gives you full flexibility to work with modern REST, GraphQL, or other web APIs.
-
-## What You Can Do
-
-With custom API calls, your app can:
-- Connect to **any REST or GraphQL API** on the web.
-- **Send and receive data** from external services.
-- Trigger actions like creating records, sending messages, or fetching analytics.
-- Build **custom automations** and workflows around APIs.
-- Chain API calls with other integrations or AI actions for powerful flows.
-
-## Step 1: Get API Access
-
-1. Identify the service you want to connect to.
-2. Check its developer documentation for API access requirements.
-3. Obtain the necessary credentials (e.g., **API key**, **token**, or **OAuth**).
-4. Store credentials securely using environment variables — **never** hardcode secrets.
-
- *Example:*
- - **API Key:** `sk-xxxxxxxxxxxxxxxx`
- - **Base URL:** `https://api.example.com/v1/`
-
-## Step 2: Hook up with your App
-
-1. In the AI Builder navigate to the `secrets` tab and add your API credentials as secrets.
-2. Then prompt the AI to use these secrets to do what you want and it will install the necessary libraries and set up the API calls for you.
-
-## Step 3: Notes
-
-* **Keep secrets safe:** Use environment variables or secret storage for API keys.
-* **Check rate limits:** Many APIs have request limits — build accordingly.
-* **Combine with AI or other integrations:** For example, fetch data via API and summarize it using an LLM.
-
-
-With API integrations, you can connect your app to **almost any modern platform or service**, giving you unlimited extensibility beyond native integrations.
-
-
diff --git a/docs/ai_builder/app_lifecycle/copy_app.md b/docs/ai_builder/app_lifecycle/copy_app.md
deleted file mode 100644
index 7c794b030..000000000
--- a/docs/ai_builder/app_lifecycle/copy_app.md
+++ /dev/null
@@ -1,56 +0,0 @@
-# Copy App
-
-The **Copy** feature lets you duplicate an existing app inside Reflex Build.
-This is useful when you want to experiment with changes without affecting the original project, or when you want to use an app as a starting point for a new idea.
-
-
-```python exec
-import reflex as rx
-from pcweb.constants import REFLEX_ASSETS_CDN
-from pcweb.components.image_zoom import image_zoom
-
-def render_image():
- return rx.el.div(
- image_zoom(
- rx.image(
- src=f"{REFLEX_ASSETS_CDN}ai_builder/app_lifecycle/copy_light.avif",
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
- )
-```
-
-```python eval
-
-rx.el.div(render_image())
-
-```
-
-## How to Copy an App
-
-1. In the Reflex Build workspace, click on the arrow down icon next to the deploy button and click on the **Copy** button. You can also do this in the Settings tab.
-2. Reflex Build will create a new app in your workspace with the same:
- - Code files and components
- - State and configuration
- - Dependencies
-
-The copied app will appear as a separate project, independent from the original.
-
-
-## Common Use Cases
-
-- **Experiment Safely**
- Try out new components, layouts, or integrations without risking your working app.
-
-- **Create Variations**
- Use the original app as a base to quickly spin up a different version (e.g., a light and dark theme version).
-
-- **Template Reuse**
- Turn an app into a personal template and copy it each time you start a new project.
-
-## Best Practices
-
-- Rename your copied app immediately so it’s easy to distinguish from the original.
diff --git a/docs/ai_builder/app_lifecycle/deploy_app.md b/docs/ai_builder/app_lifecycle/deploy_app.md
deleted file mode 100644
index f168a8a77..000000000
--- a/docs/ai_builder/app_lifecycle/deploy_app.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# Deploy App
-
-```python exec
-import reflex as rx
-```
-
-It is easy to deploy your app into production from Reflex Build to Reflex Cloud.
-
-Simply click the `Deploy` button in the top right corner of Reflex Build, as shown below:
-
-
-
-```python exec
-import reflex as rx
-from pcweb.constants import REFLEX_ASSETS_CDN
-from pcweb.components.image_zoom import image_zoom
-
-def render_image():
- return rx.el.div(
- image_zoom(
- rx.image(
- src=f"{REFLEX_ASSETS_CDN}ai_builder/app_lifecycle/deploy_light.avif",
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
- )
-```
-
-```python eval
-
-rx.el.div(render_image())
-
-```
-
-When deploying you can set the following options:
-- **App Name**: The name of your app
-- **Hostname**: Set your url by setting your hostname, i.e. if you set `myapp` as your hostname, your app will be available at `myapp.reflex.run`
-- **Region**: The regions where your app will be deployed
-- **VM Size**: The size of the VM where your app will be deployed
-- **Secrets**: The environment variables that will be set for your app, you can load the variables currently being used by your app by clicking the `Load from settings` button
-
-Note: Hostname customization, region selection, and VM sizing are only available on paid plans.
diff --git a/docs/ai_builder/app_lifecycle/download_app.md b/docs/ai_builder/app_lifecycle/download_app.md
deleted file mode 100644
index c011c2bf9..000000000
--- a/docs/ai_builder/app_lifecycle/download_app.md
+++ /dev/null
@@ -1,39 +0,0 @@
-# Download App
-
-You can download your Reflex Build project if you want to work on it locally or self-host it outside the AI Builder.
-
-**Tip:** The recommended workflow is to use the GitHub integration, which keeps your code version-controlled and in sync. Downloading is useful if GitHub integration isn’t available or you just want a one-time export.
-
-
-```python exec
-import reflex as rx
-from pcweb.constants import REFLEX_ASSETS_CDN
-from pcweb.components.image_zoom import image_zoom
-
-def render_image():
- return rx.el.div(
- image_zoom(
- rx.image(
- src=f"{REFLEX_ASSETS_CDN}ai_builder/app_lifecycle/download_light.avif",
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
- )
-```
-
-```python eval
-
-rx.el.div(render_image())
-
-```
-
-## How to Download
-
-1. In the AI Builder workspace, click on the arrow down icon next to the deploy button and click on the **Download** button. You can also do this in the Settings tab.
-2. A `.zip` file will be generated containing your entire Reflex app, including:
- - Source code (`.py` files, components, state, etc.)
- - `requirements.txt` with dependencies
- - Config files (`rxconfig.py`, `.env`, etc.)
diff --git a/docs/ai_builder/app_lifecycle/fork_app.md b/docs/ai_builder/app_lifecycle/fork_app.md
deleted file mode 100644
index 2b049a39c..000000000
--- a/docs/ai_builder/app_lifecycle/fork_app.md
+++ /dev/null
@@ -1,48 +0,0 @@
-# Fork App
-
-The **Fork App** feature lets you take an existing app and create your own version of it. This is perfect for **experimenting, customizing, or building on top of someone else’s work** without affecting the original app.
-
-```python exec
-import reflex as rx
-from pcweb.constants import REFLEX_ASSETS_CDN
-from pcweb.components.image_zoom import image_zoom
-```
-
-```python eval
-rx.el.div(
- image_zoom(
- rx.image(
- src=f"{REFLEX_ASSETS_CDN}ai_builder/overview/fork_template_light.avif",
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
-)
-```
-
-
-## How to Fork an App
-
-1. Browse or open an app you’d like to use as a starting point.
-2. Click the **Fork** button in the app’s top right corner.
-3. The AI Builder will create a **copy of the app** in your workspace.
-4. You can now **edit, customize, and expand** your forked app independently of the original.
-
-## What Happens When You Fork
-
-- You get a **full copy** of the original app, including all pages, components, and configurations.
-- The forked app is **completely separate**, so changes you make do not affect the original.
-- You can **rename, deploy, or share** your forked app like any other app in your workspace.
-
-## Common Use Cases
-
-- **Start From an Example**
- Use a sample or shared app as a foundation to save time and learn best practices.
-
-- **Experiment Safely**
- Try new ideas or features without risking changes to the original app.
-
-- **Collaborate and Customize**
- Fork a teammate’s app to tailor it to your needs while keeping the original intact.
diff --git a/docs/ai_builder/app_lifecycle/general.md b/docs/ai_builder/app_lifecycle/general.md
deleted file mode 100644
index 757773ca2..000000000
--- a/docs/ai_builder/app_lifecycle/general.md
+++ /dev/null
@@ -1,55 +0,0 @@
-# General App Settings
-
-The **General App Settings** section lets you manage key aspects of your app, including its name, ID, and deletion. This is your central place to view and update your app’s core information.
-
-
-```python exec
-import reflex as rx
-from pcweb.constants import REFLEX_ASSETS_CDN
-from pcweb.components.image_zoom import image_zoom
-
-def render_image():
- return rx.el.div(
- image_zoom(
- rx.image(
- src=f"{REFLEX_ASSETS_CDN}ai_builder/app_lifecycle/general_light.avif",
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
- )
-```
-
-```python eval
-
-rx.el.div(render_image())
-
-```
-
-
-## How to Access Settings
-
-1. In the AI Builder workspace, on the top bar click the more 3 dots icon and then click the **Settings** tab.
-2. This will open the **Settings** tab to see your app’s main settings.
-
-## What You Can Do
-
-- **Change App Name**
- Update the name of your app to reflect its purpose or version.
-
-- **Change App Visibility**
- Update the visibility of your app to public or private.
-
-- **View App ID**
- Find the unique identifier for your app, which can be used for integrations or support.
-
-- **Fork App**
- Fork your app to create a copy of it.
-
--- **Download App**
- Download your app to your local machine.
-
-- **Delete App**
- Permanently remove an app you no longer need. **Warning:** This action cannot be undone.
diff --git a/docs/ai_builder/app_lifecycle/share_app.md b/docs/ai_builder/app_lifecycle/share_app.md
deleted file mode 100644
index 7bee644f7..000000000
--- a/docs/ai_builder/app_lifecycle/share_app.md
+++ /dev/null
@@ -1,54 +0,0 @@
-# Share App
-
-The **Share** feature makes it easy to show your app to others without deploying it.
-When you share, Reflex Build generates a unique link that points to the current version of your project in the builder.
-
-```python exec
-import reflex as rx
-from pcweb.constants import REFLEX_ASSETS_CDN
-from pcweb.components.image_zoom import image_zoom
-
-def render_image():
- return rx.el.div(
- image_zoom(
- rx.image(
- src=f"{REFLEX_ASSETS_CDN}ai_builder/app_lifecycle/share_light.avif",
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
- )
-```
-
-```python eval
-
-rx.el.div(render_image())
-
-```
-
-## How to Share
-
-1. In the AI Builder workspace, click on the arrow down icon next to the deploy button and click on the **Share** button.
-2. A popup will appear with a **shareable link**.
-3. Copy the link and send it to teammates, collaborators, or stakeholders.
-
-
-## What Others See
-
-- The link opens a **read-only view** of your app generation.
-- Recipients can see the app preview but cannot make edits.
-- This makes it safe to share work-in-progress versions for quick feedback.
-
-
-## Common Use Cases
-
-- **Get Feedback Quickly**
- Share a work-in-progress version with your team before deploying.
-
-- **Demo Features**
- Send a link to showcase a new component, layout, or integration.
-
-- **Collaboration**
- Share context with another developer before handing off to GitHub or download.
diff --git a/docs/ai_builder/features/automated_testing.md b/docs/ai_builder/features/automated_testing.md
deleted file mode 100644
index 3ebf60e2e..000000000
--- a/docs/ai_builder/features/automated_testing.md
+++ /dev/null
@@ -1,60 +0,0 @@
-# AI Testing Feature
-
-## Overview
-
-The Testing feature allows you to automatically test your generated applications for common issues and functionality problems. The AI will analyze your app and identify potential bugs, broken links, navigation issues, and other problems.
-
-
-```python exec
-import reflex as rx
-from pcweb.constants import REFLEX_ASSETS_CDN
-from pcweb.components.image_zoom import image_zoom
-```
-
-```python eval
-rx.el.div(
- image_zoom(
- rx.image(
- src=rx.color_mode_cond(
- f"{REFLEX_ASSETS_CDN}ai_builder/features/test_light.webp",
- f"{REFLEX_ASSETS_CDN}ai_builder/features/test_dark.webp",
- ),
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
-)
-```
-
-## How to Use
-
-1. **Start Testing**: Type "test this app" or similar command to activate testing mode
-2. **AI Analysis**: The AI will automatically switch to testing mode and begin analyzing your application
-3. **Review Results**: The preview tab switches to "Testing" mode to show the testing process and results
-
-## What Gets Tested
-
-The AI automatically checks for:
-
-- **Broken Navigation**: Links that don't work or lead to missing pages
-- **Non-functional Buttons**: Buttons that don't respond or trigger errors
-- **Broken Links**: External or internal links that return errors
-- **UI/UX Issues**: Interface elements that don't function as expected
-- **Data Flow Problems**: Issues with forms, inputs, and data handling
-- **Layout Issues**: Visual or structural problems with the interface
-
-## Testing Interface
-
-When testing is active:
-- The preview tab changes to "Testing" mode
-- You can see the AI interact with your application in real-time
-- Issues and results are reported as they're discovered
-- The testing process is visual and interactive
-
-## Benefits
-
-- **Quality Assurance**: Catch issues before deployment
-- **Time Saving**: Automated testing is faster than manual checking
-- **Comprehensive Coverage**: Tests multiple aspects of your application
diff --git a/docs/ai_builder/features/connect_to_github.md b/docs/ai_builder/features/connect_to_github.md
deleted file mode 100644
index f97c6a7e2..000000000
--- a/docs/ai_builder/features/connect_to_github.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-tags: DevTools
-description: Integrate with GitHub to automate workflows and interact with your code repositories.
----
-
-# Connecting to Github
-
-```python exec
-import reflex as rx
-from pcweb.constants import REFLEX_ASSETS_CDN
-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.
-
-
-```python eval
-rx.el.div(
- image_zoom(
- rx.image(
- src=f"{REFLEX_ASSETS_CDN}ai_builder/connecting_to_github.avif",
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- ),
-)
-```
-
-The GitHub integration allows you to:
-
-- Save your app progress
-- Work on your code locally and push your local changes back to Reflex.Build
-
-
-## Github Commit History
-
-The commit history is a great way to see the changes that you have made to your app. You can also revert to previous versions of your app from here.
-
-```python eval
-rx.el.div(
- image_zoom(
- rx.image(
- src=f"{REFLEX_ASSETS_CDN}ai_builder/github_commit_history.avif",
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- ),
-)
-```
-
diff --git a/docs/ai_builder/features/customization.md b/docs/ai_builder/features/customization.md
deleted file mode 100644
index 17a93efd5..000000000
--- a/docs/ai_builder/features/customization.md
+++ /dev/null
@@ -1,72 +0,0 @@
-# App Style Customization
-
-## Overview
-
-The App Style feature allows you to customize the visual appearance of your AI-generated applications. You can choose from predefined design themes or create custom styling to match your brand and preferences.
-
-## How to Use
-
-1. **Access the Feature**: Click on the App Style option to open the customization panel
-2. **Choose Your Approach**:
- - **Custom**: Manually configure individual design elements
- - **Themes**: Select from professionally designed templates
-
-## Custom Styling Options
-
-```python exec
-import reflex as rx
-from pcweb.constants import REFLEX_ASSETS_CDN
-from pcweb.components.image_zoom import image_zoom
-```
-
-```python eval
-rx.el.div(
- image_zoom(
- rx.image(
- src=rx.color_mode_cond(
- f"{REFLEX_ASSETS_CDN}ai_builder/features/style_light.webp",
- f"{REFLEX_ASSETS_CDN}ai_builder/features/style_dark.webp",
- ),
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
-)
-```
-
-When using Custom mode, you can adjust:
-
-- **Primary Color**: Choose your main brand color from 20+ preset options
-- **Secondary Color**: Select a complementary color for accents
-- **Typography**: Pick a font family for your app
-- **Border Radius**: Control how rounded corners appear
-- **Shadows**: Add depth with shadow effects
-- **Spacing**: Adjust the spacing between elements
-
-## Themes
-
-These options are predefined popular themes you can choose for your app. Below are some of the available themes you can choose from
-
-```python eval
-rx.el.div(
- image_zoom(
- rx.image(
- src=rx.color_mode_cond(
- f"{REFLEX_ASSETS_CDN}ai_builder/features/theme_light.webp",
- f"{REFLEX_ASSETS_CDN}ai_builder/features/theme_dark.webp",
- ),
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
-)
-```
-
-- **Minimal Design**: Clean, geometric design with no shadows or gradients
-- **Modern UI**: Sleek, contemporary interface optimized for performance
-- **Carbon Design**: Enterprise-grade design following IBM's Carbon system
-- **Material Design**: Google's design language with elevation and semantic colors
diff --git a/docs/ai_builder/features/editor_modes.md b/docs/ai_builder/features/editor_modes.md
deleted file mode 100644
index a5bd7d0f9..000000000
--- a/docs/ai_builder/features/editor_modes.md
+++ /dev/null
@@ -1,90 +0,0 @@
-# Editor Modes
-
-The AI Builder includes a powerful dual-mode editor that lets you view and edit your application code while tracking changes made by the AI. You can seamlessly switch between **Editor Mode** for manual code editing and **Diff Mode** for reviewing AI-generated changes.
-
-
-```python exec
-import reflex as rx
-from pcweb.constants import REFLEX_ASSETS_CDN
-from pcweb.components.image_zoom import image_zoom
-
-def render_image():
- return rx.el.div(
- image_zoom(
- rx.image(
- src=f"{REFLEX_ASSETS_CDN}ai_builder/features/diff_light.avif",
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
- )
-```
-
-```python eval
-
-rx.el.div(render_image())
-
-```
-## Modes: Editor vs Diff
-
-### Editor Mode
-The standard code editor where you can:
-- **Write and modify code** directly in the interface
-- **Navigate through files** using the file tree
-- **Make manual changes** to your application
-- **Save your modifications** which persist across sessions
-
-### Diff Mode
-A specialized view that highlights changes from the last AI prompt:
-- **Green highlights** show code additions made by the AI
-- **Red highlights** show code deletions made by the AI
-- **Side-by-side comparison** of what changed
-- **Line-by-line tracking** of modifications
-
-## Switching Between Modes
-
-### Toggle Controls
-Located in the editor toolbar, you'll find:
-- **Editor** button - Switch to normal editing mode
-- **Diff** button - Switch to change tracking mode
-
-### When to Use Each Mode
-- **Use Editor Mode when:**
- - Making manual code changes
- - Writing new functionality
- - Debugging or fixing issues
- - General code development
-
-- **Use Diff Mode when:**
- - Reviewing what the AI changed after a prompt
- - Understanding modifications before accepting them
- - Tracking the impact of AI suggestions
- - Learning from AI-generated code patterns
-
-## Understanding Diff Visualizations
-
-### Code Highlighting
-**Additions (Green):**
-- New code lines added by the AI
-- New functions, components, or logic
-- Enhanced features and improvements
-
-**Deletions (Red):**
-- Code removed by the AI
-- Replaced or refactored sections
-- Deprecated functionality
-
-### File Tree Indicators
-The file tree shows change statistics for each modified file:
-
-**Change Indicators:**
-- **`+5`** - 5 lines added to this file
-- **`-3`** - 3 lines removed from this file
-- **`+12 -8`** - 12 lines added, 8 lines removed
-- **No indicator** - File unchanged
-
-**Visual Cues:**
-- **Green `+` symbol** indicates files with additions
-- **Red `-` symbol** indicates files with deletions
diff --git a/docs/ai_builder/features/file_tree.md b/docs/ai_builder/features/file_tree.md
deleted file mode 100644
index e09f76cda..000000000
--- a/docs/ai_builder/features/file_tree.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# File Tree
-
-The **File Tree** in Reflex Build lets you **view, organize, and manage all files and folders** in your project directly from the browser. It’s your central hub for navigating your app’s structure.
-
-## Key Features
-
-### Creating Folders
-- Click the **New Folder** button to create a folder inside the currently selected directory.
-- Enter a name and press **Enter** to confirm.
-- Folders can be nested to organize your project hierarchically.
-
-### Creating Files
-- Click the **New File** button to create a file inside the current folder.
-- Enter a file name and extension (e.g., `main.py`) and press **Enter**.
-- Files are immediately visible in the tree and ready for editing in the code editor.
-
-### Renaming Files or Folders
-- Right-click on a file or folder and select **Rename**.
-- Type the new name and press **Enter** to confirm.
-- Renaming automatically updates references in your project where applicable.
-
-### Deleting Files or Folders
-- Right-click on a file or folder and select **Delete**.
-- Deleted items are permanently removed, so be careful when deleting important files.
-
-### Drag-and-Drop from System
-- Drag files or folders from your computer directly into the File Tree.
-- The editor will automatically import them into the selected folder.
-- This works for individual files or entire folder structures, making adding assets or scripts quick and easy.
diff --git a/docs/ai_builder/features/ide.md b/docs/ai_builder/features/ide.md
deleted file mode 100644
index 46a8fc63f..000000000
--- a/docs/ai_builder/features/ide.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# Reflex Build IDE
-
-Reflex Build includes a **powerful, in-browser IDE** built on **Monaco Editor**, designed to make coding fast, efficient, and enjoyable—all without leaving your browser.
-
-
- VIDEO
-
-
-
-## Features
-
-### Real-Time Editing
-Edit your code and see changes reflected immediately in your project. No manual saves or rebuilds—stay focused and iterate faster.
-
-### Syntax Highlighting & Error Detection
-Write code confidently with **syntax highlighting**, **inline error alerts**, and **linting**. Catch issues as you type, reducing bugs and speeding up development.
-
-### Code Snippets & Autocomplete
-Speed up development with **autocomplete** for functions, variables, and imports, as well as reusable **code snippets** for common patterns.
-
-### Integrated Preview
-Quickly preview your changes directly in the editor without switching contexts, ensuring your app behaves as expected as you code.
-
-### Built-In Terminal for Debugging
-Use the integrated terminal to run commands, debug issues, and inspect logs—all within the IDE. No need to switch tools or tabs.
diff --git a/docs/ai_builder/features/image_as_prompt.md b/docs/ai_builder/features/image_as_prompt.md
deleted file mode 100644
index 30141dc09..000000000
--- a/docs/ai_builder/features/image_as_prompt.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# Use Images as a prompt
-
-```python exec
-import reflex as rx
-from pcweb.constants import REFLEX_ASSETS_CDN
-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.
-
-*This is the recommended way to start an app generation.*
-
-
-Below is an image showing how to upload an image to the AI Builder, you can click on the "Attach" button to upload an image, drag and drop an image, or paste an image from the clipboard:
-
-```python eval
-rx.el.div(
- image_zoom(
- rx.image(
- src=f"{REFLEX_ASSETS_CDN}ai_builder/image_upload.avif",
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
-)
-```
-
-The advised prompt to use is:
-
-`Build an app from a reference image`
\ No newline at end of file
diff --git a/docs/ai_builder/features/installing_external_packages.md b/docs/ai_builder/features/installing_external_packages.md
deleted file mode 100644
index 8950fb6e4..000000000
--- a/docs/ai_builder/features/installing_external_packages.md
+++ /dev/null
@@ -1,51 +0,0 @@
-# Installing External Packages
-
-```python exec
-import reflex as rx
-from pcweb.constants import REFLEX_ASSETS_CDN
-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.
-
-There are two ways to install external packages:
-
-1. **Through the Chat Interface**: You can ask the AI to install a package for you.
-2. **Add to the `requirements.txt` file**: You can add the package to the `requirements.txt` file and then save the app. This will install the package in your app's environment.
-
-## Installing through the Chat Interface
-
-Enter the name of the package you want to install in the chat interface. The AI will then install the package for you.
-
-
-```python eval
-rx.el.div(
- image_zoom(
- rx.image(
- src=f"{REFLEX_ASSETS_CDN}ai_builder/external_packages_input.avif",
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
-)
-```
-
-## Installing through the requirements.txt file
-
-Add the package to the `requirements.txt` file and then save the app. This will install the package in your app's environment and recompile your app.
-
-```python eval
-rx.el.div(
- image_zoom(
- rx.image(
- src=f"{REFLEX_ASSETS_CDN}ai_builder/external_packages_requirements.avif",
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
-)
-```
\ No newline at end of file
diff --git a/docs/ai_builder/features/integration_shortcut.md b/docs/ai_builder/features/integration_shortcut.md
deleted file mode 100644
index 30a6915c8..000000000
--- a/docs/ai_builder/features/integration_shortcut.md
+++ /dev/null
@@ -1,52 +0,0 @@
-# Integrations Shortcut
-
-Reflex Build supports powerful integrations like databases, OpenAI, and Databricks, allowing you to connect external services to your app without complex setup. These integrations help you add advanced functionality—like AI-powered features, data analytics, or persistent storage—while speeding up development.
-
-The **Add Integrations** button makes it easy to connect external services to your app while chatting with the AI Builder. A panel with a list of available integrations will appear, you can quickly add integrations that your app can reference and connect to.
-
-Once in your app, you can access your integrations by clicking the flow or cog icon in the bottom left inside the chat area.
-
-```python exec
-import reflex as rx
-from pcweb.constants import REFLEX_ASSETS_CDN
-from pcweb.components.image_zoom import image_zoom
-```
-
-```python eval
-rx.el.div(
- image_zoom(
- rx.image(
- src=rx.color_mode_cond(
- f"{REFLEX_ASSETS_CDN}ai_builder/features/shortcut_light.webp",
- f"{REFLEX_ASSETS_CDN}ai_builder/features/shortcut_dark.webp",
- ),
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
-)
-```
-
-## How to Use
-
-1. In the AI Builder home, click the **Add Integrations** button. And if you're already in an app, click the flow or cog icon in the bottom left inside the chat area.
-2. A list of available integrations will appear (e.g. Database, Databricks, OpenAI, etc.).
-3. Click the Add button next to an integration to select it.
-4. The integration will be added to your app and becomes available for connection. Then you can fill the required fields for the integration.
-5. The AI Builder now knows your app has access to this integration and can generate code that uses it.
-
-## What It Does
-
-- **Quick Access** – Easily browse and select from available integrations.
-- **Automatic Connection** – Integrations are added to your app and become available for the AI to use in generated code.
-- **No Manual Setup** – Skip complex configuration—the AI Builder handles the integration setup for you.
-
-## Common Use Cases
-
-- **Database Queries**
- Show me the top 10 users ordered by signup date from my database.
-
-- **AI Features**
- Create a chat application that uses OpenAI to generate responses.
diff --git a/docs/ai_builder/features/knowledge.md b/docs/ai_builder/features/knowledge.md
deleted file mode 100644
index 8bddca4ad..000000000
--- a/docs/ai_builder/features/knowledge.md
+++ /dev/null
@@ -1,51 +0,0 @@
-# Knowledge
-
-The **Knowledge** feature lets you add context or rules that the AI Builder can reference when generating apps. This ensures your apps follow your guidelines, standards, or specific business logic.
-
-```python exec
-import reflex as rx
-from pcweb.constants import REFLEX_ASSETS_CDN
-from pcweb.components.image_zoom import image_zoom
-
-def render_image():
- return rx.el.div(
- image_zoom(
- rx.image(
- src=f"{REFLEX_ASSETS_CDN}ai_builder/features/knowledge_light.avif",
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
- )
-```
-
-```python eval
-
-rx.el.div(render_image())
-
-```
-
-## How to Add Knowledge
-
-1. In the AI Builder top bar, click the more 3 dots icon and then click the **`Knowledge`** tab.
-2. Enter your rule, guideline, or context description.
-3. Save the entry. The AI Builder will automatically use it when generating apps.
-
-## How It Works
-
-- The AI Builder references your knowledge entries as rules or guidelines.
-- Rules can define naming conventions, component usage, layout preferences, or other custom logic.
-- Multiple rules can be added to cover different aspects of app generation.
-
-## Common Use Cases
-
-- **Maintain Consistency**
- Ensure all generated apps follow your company’s design or naming standards.
-
-- **Enforce Business Logic**
- Guide the AI Builder to follow specific workflows, validations, or feature requirements.
-
-- **Quickly Adapt AI Behavior**
- Add or update rules to influence new app generations without manual edits.
diff --git a/docs/ai_builder/features/restore_checkpoint.md b/docs/ai_builder/features/restore_checkpoint.md
deleted file mode 100644
index 6eff95c8b..000000000
--- a/docs/ai_builder/features/restore_checkpoint.md
+++ /dev/null
@@ -1,53 +0,0 @@
-# Restore Checkpoint
-
-The **Restore Checkpoint** feature allows you to roll back your app to any previous state during your AI Builder conversation. This is useful when you want to undo recent changes and return to an earlier version of your app.
-
-```python exec
-import reflex as rx
-from pcweb.constants import REFLEX_ASSETS_CDN
-from pcweb.components.image_zoom import image_zoom
-```
-
-```python eval
-rx.el.div(
- image_zoom(
- rx.image(
- src=f"{REFLEX_ASSETS_CDN}ai_builder/features/restore_light.avif",
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
-)
-```
-
-## How It Works
-
-Every time the AI agent makes changes to your app, a checkpoint is automatically created. You can restore to any of these checkpoints at any time, effectively undoing all changes made after that point.
-
-## Using Restore Checkpoint
-
-1. **Locate the Restore Icon**: At the end of each AI agent message that made changes to your app, you'll see a circular arrow icon (↻).
-
-2. **Click to Restore**: Click the circular arrow icon next to the message you want to restore to.
-
-3. **Confirm the Action**: The app will restore to the exact state it was in after that specific message was processed.
-
-4. **Continue Building**: After restoring, you can continue the conversation and make new changes from that point.
-
-## When to Use Restore Checkpoint
-
-- **Undo Unwanted Changes**: When the AI made changes you don't like
-- **Try Different Approaches**: Restore and ask the AI to implement a feature differently
-- **Fix Broken Functionality**: Roll back when new changes break existing features
-- **Experiment Safely**: Test different solutions knowing you can always restore to a checkpoint
-
-## Important Notes
-
-- Restoring will **permanently delete** all changes made after the selected message
-- You cannot undo a restore operation - choose your restore point carefully
-- The conversation history remains intact, but code changes after the restore point are lost
-- Restore checkpoint only affects your current building session
-
-> **Tip:** Before making major changes, note which message represents your last stable checkpoint so you can easily restore if needed.
diff --git a/docs/ai_builder/features/secrets.md b/docs/ai_builder/features/secrets.md
deleted file mode 100644
index 8f807b2c8..000000000
--- a/docs/ai_builder/features/secrets.md
+++ /dev/null
@@ -1,71 +0,0 @@
-# Secrets
-
-The **Secrets** feature allows you to securely store environment-specific values that your app can use, such as API keys, tokens, or other sensitive information.
-
-
-```python exec
-import reflex as rx
-from pcweb.constants import REFLEX_ASSETS_CDN
-from pcweb.components.image_zoom import image_zoom
-
-def render_image():
- return rx.el.div(
- image_zoom(
- rx.image(
- src=f"{REFLEX_ASSETS_CDN}ai_builder/features/secrets_light.avif",
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
- )
-```
-
-```python eval
-
-rx.el.div(render_image())
-
-```
-
-## Adding Secrets
-
-### 1. Add Individually
-- **Description:** Set a single secret by providing a key and value.
-- **Example:**
- - Key: `OPENAI_API_KEY`
- - Value: `sk-xxxxxx`
-- **Behavior:** The secret is encrypted and accessible to your app at runtime.
-
-### 2. Add in Bulk (Raw Editor)
-- **Description:** Upload multiple secrets at once using a simple `VAR=VALUE` format.
-- **Example:**
-
-```text
-DATABASE_URL=postgresql://user:pass@host:5432/db
-STRIPE_SECRET_KEY=sk_test_xxxxx
-OPENAI_API_KEY=sk-xxxxxx
-```
-
-```python exec
-import reflex as rx
-from pcweb.constants import REFLEX_ASSETS_CDN
-from pcweb.components.image_zoom import image_zoom
-```
-
-```python eval
-rx.el.div(
- image_zoom(
- rx.image(
- src=f"{REFLEX_ASSETS_CDN}ai_builder/features/secret_bulk_light.avif",
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
-)
-```
-
-
-- **Behavior:** Each secret is securely stored and immediately available in the app environment.
diff --git a/docs/ai_builder/figma.md b/docs/ai_builder/figma.md
deleted file mode 100644
index 36f159736..000000000
--- a/docs/ai_builder/figma.md
+++ /dev/null
@@ -1 +0,0 @@
-Integration Coming Soon!
\ No newline at end of file
diff --git a/docs/ai_builder/files.md b/docs/ai_builder/files.md
deleted file mode 100644
index 232819be3..000000000
--- a/docs/ai_builder/files.md
+++ /dev/null
@@ -1,37 +0,0 @@
-```python exec
-from pcweb.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]({ai_builder.images.path}) to learn more about uploading images.
-
-```md alert
-## Supported File Types
-The AI Builder currently supports the following file types for upload and processing:
-1. `.pdf`
-2. `.doc`
-3. `.docx`
-4. `.xls`
-5. `.xlsx`
-6. `.ppt`
-7. `.pptx`
-8. `.odt`
-9. `.ods`
-10. `.odp`
-11. `.rtf`
-12. `.csv`
-13. `.txt`
-14. `.md`
-15. `.markdown`
-16. `.json`
-17. `.xml`
-18. `.yaml`
-19. `.yml`
-20. `.tsv`
-```
-
-The files you upload will automatically be added to the `assets/` folder of your app, and the AI Builder will be able to read and process their contents as part of your prompts.
-
-The maximum number of files you can upload at a time is `5`. The maximum file size for uploads is `5MB`. If you need to work with larger files, consider breaking them into smaller chunks or using external storage solutions and linking to them via APIs.
\ No newline at end of file
diff --git a/docs/ai_builder/images.md b/docs/ai_builder/images.md
deleted file mode 100644
index 0400762cd..000000000
--- a/docs/ai_builder/images.md
+++ /dev/null
@@ -1,48 +0,0 @@
-# Images
-
-## Upload an image as context for AI Builder
-
-To upload an image to the AI Builder that will be used as context for the AI builder to build an app that is similar to the image 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.
-
-```md alert
-## Supported Image Types
-The AI Builder currently supports the following image types for upload and processing:
-1. `.png`
-2. `.jpg`
-3. `.jpeg`
-4. `.webp`
-5. `.gif`
-6. `.svg`
-7. `.bmp`
-8. `.tiff`
-9. `.tif`
-10. `.ico`
-```
-
-
-## Upload an image to be used within the app
-
-If you want to upload an image to be used within the app, such as a company logo, then you can manually upload it to the `assets/` folder within the `code` tab. Drag and drop the image into the `assets/` folder.
-
-```python exec
-import reflex as rx
-from pcweb.constants import REFLEX_ASSETS_CDN
-from pcweb.components.image_zoom import image_zoom
-```
-
-```python eval
-rx.el.div(
- image_zoom(
- rx.image(
- src=f"{REFLEX_ASSETS_CDN}ai_builder/add_images_to_assets.avif",
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
-)
-```
-
-
-Video uploads are not currently supported but are coming soon!
\ No newline at end of file
diff --git a/docs/ai_builder/integrations/mcp_installation.md b/docs/ai_builder/integrations/mcp_installation.md
deleted file mode 100644
index 41fb1d216..000000000
--- a/docs/ai_builder/integrations/mcp_installation.md
+++ /dev/null
@@ -1,75 +0,0 @@
-# Installation
-
-```python exec
-import reflex as rx
-```
-
-```md alert warning
-# The Reflex MCP integration is currently only available for enterprise customers. Please [book a demo](https://reflex.dev/pricing/) to discuss access.
-```
-
-To use the Reflex MCP integration, you'll need to configure your AI assistant or coding tool to connect to the Reflex MCP server. No additional Python packages are required on your local machine - the server is hosted and ready to use.
-
-## Prerequisites
-
-- An MCP-compatible AI tool (Claude Desktop, Windsurf, Codex, etc.)
-- Internet connection to access the hosted MCP server
-- Valid Reflex account for OAuth 2.1 authentication
-
-## Authentication
-
-The Reflex MCP server uses OAuth 2.1 protocol for secure authentication. You'll need a valid Reflex account, and authentication is handled automatically through your MCP client configuration when you provide your Reflex credentials.
-
-## IDE and Coding Assistant Integration
-
-### Claude Code
-
-Add the Reflex MCP server to Claude Code by running:
-
-```bash
-claude mcp add --transport http reflex https://mcp.reflex.dev/mcp
-```
-
-Then authenticate by running the `/mcp` command inside Claude Code and following the login steps in your browser. Authentication tokens are stored securely and refreshed automatically. See the [Claude Code MCP documentation](https://code.claude.com/docs/en/mcp) for more details.
-
-### Claude Desktop
-
-Add the Reflex MCP server to your Claude Desktop configuration by editing your configuration file:
-
-```json
-{
- "mcpServers": {
- "reflex": {
- "command": "npx",
- "args": ["-y", "mcp-remote", "https://mcp.reflex.dev/mcp"]
- }
- }
-}
-```
-
-### Windsurf/Cascade
-
-Create a `.vscode/mcp.json` file in your project root:
-
-```json
-{
- "mcpServers": {
- "reflex": {
- "serverType": "http",
- "url": "https://mcp.reflex.dev/mcp"
- }
- }
-}
-```
-
-### Codex
-
-Add this configuration to your `~/.codex/config.toml` file:
-
-```toml
-[mcp_servers.reflex]
-command = "npx"
-args = ["-y", "mcp-remote", "https://mcp.reflex.dev/mcp"]
-```
-
-Note: Codex requires MCP servers to communicate over stdio. The `mcp-remote` package bridges the connection to the HTTP-based Reflex MCP server.
diff --git a/docs/ai_builder/integrations/mcp_overview.md b/docs/ai_builder/integrations/mcp_overview.md
deleted file mode 100644
index f75b97cf9..000000000
--- a/docs/ai_builder/integrations/mcp_overview.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Overview
-
-```python exec
-import reflex as rx
-```
-
-```md alert warning
-# The Reflex MCP integration is currently only available for enterprise customers. Please [book a demo](https://reflex.dev/pricing/) to discuss access.
-```
-
-The Reflex [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) integration provides AI assistants and coding tools with structured access to Reflex framework documentation and component information. This enables intelligent assistance while developing Reflex applications.
-
-The Reflex MCP server is deployed at `https://mcp.reflex.dev/mcp` and provides access to component documentation and Reflex documentation through standardized MCP tools.
-
-## Available Tools
-
-The Reflex MCP server provides tools for accessing component documentation and Reflex documentation through standardized MCP capabilities.
-
-## Enterprise Use
-
-For enterprise customers requiring on-premises deployment of the Reflex MCP server, please [book a demo](https://reflex.dev/pricing/) to discuss your requirements.
diff --git a/docs/ai_builder/overview/best_practices.md b/docs/ai_builder/overview/best_practices.md
deleted file mode 100644
index 0c0eeb2fe..000000000
--- a/docs/ai_builder/overview/best_practices.md
+++ /dev/null
@@ -1,188 +0,0 @@
-# Reflex Build: Best Practices
-
-> A comprehensive guide to working effectively with AI Builder. This guide outlines how to get the most reliable and efficient results when working with the AI Builder inside Reflex Build. The key to success is clarity, structure, and iteration.
-
----
-
-## Core Workflow
-
-### Foundation: Planning Before You Build
-
-Before jumping into the AI Builder, take time to plan your approach. Good preparation leads to better results and fewer iterations.
-
-- **Define your core purpose and users** — Write a 2-3 sentence app description and identify your target users and their needs.
-- **Prioritize 3-5 key features** — Focus on the most important functionality first, then expand from there.
-- **Gather visual references** — Collect screenshots, wireframes, or sketches of layouts you want to emulate.
-- **Structure your data** — List what information each page needs to display and how users will interact with it.
-- **Start with your most important page** — Usually your main dashboard, home screen, or primary workflow. Get this right first.
-
-### Auto-Generate Prompts from App Specs
-
-To save time and get higher-quality prompts, you can feed your full app spec into the AI Builder and ask it to break the spec into structured, build-ready prompts.
-
-The AI Builder can translate your vision into:
-
-- Layout instructions
-- UI component definitions
-- Data model requirements
-- Styling preferences
-- Follow-up test plans
-
-**Example workflow:**
-
-1. Paste your full app specification into the AI Builder
-2. Ask **"Break this into a series of buildable prompts."**
-3. Execute each generated prompt in sequence
-4. Build iteratively using the structured prompts
-
-### Working with Text Specifications
-
-If you have a structured app specification, don't paste the entire document into the builder at once. Break it down into logical sections and feed them in sequence.
-
-**Pro tip:** Let the AI Builder help prepare prompts:
-
-Paste your full app spec and ask:
-
- - **"Break this into buildable prompts."**
- - **"Write one prompt per feature/page to build this app."**
-
-This approach — planning first, then building iteratively — lets you move faster and build smarter.
-
-### Writing Clear, Task-Oriented Prompts
-
-The AI performs best when it receives **specific, outcome-driven instructions**. Avoid vague, broad prompts.
-
-
-```diff
-- Build me an admin dashboard. # <- Bad
-+ Create a 2-column layout with a sidebar for navigation and a top navbar. # <- Good
-```
-
-Whenever possible, split large tasks into smaller steps:
-
-- Define the layout first (columns, rows, sidebar)
-- Add UI components (buttons, inputs, modals)
-- Handle data models and states later
-- Use follow-ups to style and polish
-
-Use precise styling language, for example:
-
-```diff
-- Grid items have small spacing and sharp corners.
-+ Add medium spacing between grid items and use large rounded corners on cards.
-```
-
-Avoid subjective terms like "**nice**," "**modern**," or "**clean**." Treat your prompt as interface documentation for the builder.
-
-### Working with Images and Visual References
-
-You can drop in screenshots of websites, dashboards, apps, or even hand-drawn wireframes. The builder will extract layout, design, and functionality ideas from these images.
-
-**Tips for images:**
-
-- Clear screenshots work best
-- Include any elements you want: forms, tables, nav, charts
-- You can annotate them with arrows, notes, or labels
-
-**Get UI/UX feedback:**
-
-Upload a screenshot and ask: **"What are 5 things I could do to improve the UI/UX of this?"**
-
-Follow up with: **Implement items 1, 2, and 4.**
-
-Or request specific improvements: **Make this more minimal and mobile-first.**
-
----
-
-## Optimizing Your Workflow
-
-### Building Iteratively
-
-Trying to generate your full app in a single prompt almost never works well. Instead, approach your build in clear stages:
-
-1. **Layout** — Grid, Flex, responsive columns/rows
-2. **Components** — Tables, buttons, modals, charts, etc.
-3. **State** — Bindings, stores, mock data
-4. **Refinement** — Tweaks, visual polish, edge case handling
-
-At each stage, give feedback and iterate. If the AI builder makes something close, you can say:
-
-```diff
-- Modal is included and sidebar is static.
-+ Remove modal and make sidebar collapsible.
-
-- Buttons vary across pages.
-+ Use same button style from home page.
-
-- Card layout differs across sections.
-+ Repeat card layout from dashboard section.
-```
-
-
-### Improving UI/UX
-
-To improve your design, ask the builder for more polished layouts, better structure, or more modern styles.
-
-```diff
-- Layout feels cluttered with small headings and dense sections.
-+ Increase heading sizes and spacing between sections for better hierarchy.
-
-- Navigation buttons are inconsistent.
-+ Standardize button sizes and colors for consistent UX.
-```
-
-**Suggested workflow:**
-
-1. Upload an image or describe the layout.
-2. Ask: **"Tell me 5 things that would improve the UI/UX of this page."**
-3. Review the suggestions and decide which ones you want to apply.
-4. Implement: **"Improve visual hierarchy by increasing heading sizes and adding more spacing between sections."**
-
-### Using Knowledge to Guide the Build
-
-The **Knowledge** panel lets you provide long-form references that influence how the agent builds your app. Add design systems, style guides, brand guidelines, or architecture rules.
-
-Once added, the builder will try to honor these rules throughout the session, ensuring consistency without repeating instructions.
-
-Try combining Knowledge with your prompts:
-
- - **Use the style guide in Knowledge to improve this page.**
-
- - **Is the current layout aligned with our design system in Knowledge?**
-
-
-### Local Development Integration
-
-We have an MCP server available for enterprise customers to connect local AI development tools such as Claude Desktop, Windsurf, or Codex.
-
-This enables a hybrid workflow: generate your app and make major changes in the App Builder, then move to local development for detailed refinements and custom functionality.
-
-> **Enterprise Feature:** The Reflex MCP integration is currently only available for enterprise customers. [Book a demo](https://reflex.dev/pricing/) to discuss access.
-
-#### Quick Setup
-
-**Prerequisites:**
-
-- MCP-compatible AI tool (Claude Desktop, Windsurf, Codex)
-- Valid Reflex account for OAuth authentication
-- Internet connection to the hosted MCP server
-
-**Benefits:**
-
-- **Seamless handoff** — Move between web builder and local development
-- **AI-powered local development** — Use your preferred AI tools with Reflex projects
-- **No local installation** — Hosted MCP server requires no additional Python packages
-- **Secure authentication** — OAuth 2.1 integration with your Reflex account
-
-For complete setup instructions for Claude Desktop, Windsurf, Codex, and other MCP clients, visit our [MCP integration](https://reflex.dev/docs/ai-builder/integrations/mcp-installation/) documentation.
-
----
-
-## Key Takeaways
-
-- **Plan before you build**. A few minutes of preparation saves hours of iteration.
-- **Think modularly**. Focus on atomic parts before the full system.
-- **Write like a designer-developer**. Clear, structural, and functional language wins.
-- **Iterate continuously**. Let each prompt get you 80% there, then refine.
-
-With these techniques, the AI Builder becomes a reliable extension of your creative and technical intent.
diff --git a/docs/ai_builder/overview/templates.md b/docs/ai_builder/overview/templates.md
deleted file mode 100644
index 3a7bb09f6..000000000
--- a/docs/ai_builder/overview/templates.md
+++ /dev/null
@@ -1,43 +0,0 @@
-# Templates
-
-Reflex has many certified templates, seen on the `Trending` tab of the Reflex Build, that can be used to kickstart your app.
-
-```python exec
-import reflex as rx
-from pcweb.constants import REFLEX_ASSETS_CDN
-from pcweb.components.image_zoom import image_zoom
-```
-
-```python eval
-rx.el.div(
- image_zoom(
- rx.image(
- src=f"{REFLEX_ASSETS_CDN}ai_builder/overview/templates_light.avif",
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
-)
-```
-
-## Using a Template
-
-To use a template, simply click the template and then in the bottom right corner of the app click the `Fork` button. This will create a copy of the template in your own account. You can then edit the app as you like with further prompting.
-
-```python eval
-rx.el.div(
- image_zoom(
- rx.image(
- src=f"{REFLEX_ASSETS_CDN}ai_builder/overview/fork_template_light.avif",
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
-)
-```
-
-Templates are great to get started if they have similar UI to what you are looking to build. You can then add your own data to the app.
diff --git a/docs/ai_builder/overview/tutorial.md b/docs/ai_builder/overview/tutorial.md
deleted file mode 100644
index 701e6580a..000000000
--- a/docs/ai_builder/overview/tutorial.md
+++ /dev/null
@@ -1,145 +0,0 @@
-# Your First Reflex Build App
-
-In this tutorial, you'll build a data dashboard application that displays employee information in both table and chart formats, with interactive features for filtering and adding new data. We'll also add a simple chatbot page to demonstrate multi-page navigation.
-
-## What You'll Build
-
-By the end of this tutorial, you'll have created:
-- A dashboard displaying employee data in a table and bar chart
-- Interactive filtering to search through your data
-- A modal form for adding new employees
-- A separate page with a simple chatbot interface
-
-This tutorial assumes you're starting with a new project in AI Builder.
-
----
-
-## Creating Your Dashboard
-
-Let's start by building the core of our application - a dashboard that displays employee data.
-
-**Prompt:**
-```
-Create a dashboard page with a table showing sample employee data with columns: Name, Department, and Salary. Below the table, add a bar chart that visualizes the salary data. Include at least 5 sample employees with different departments and salary ranges.
-```
-
-This will create your main dashboard page with both tabular and visual representations of your data. The AI will generate sample employee records and create a bar chart that makes it easy to compare salaries across your team.
-
-```python exec
-import reflex as rx
-from pcweb.constants import REFLEX_ASSETS_CDN
-from pcweb.components.image_zoom import image_zoom
-```
-
-```python eval
-rx.el.div(
- image_zoom(
- rx.image(
- src=f"{REFLEX_ASSETS_CDN}ai_builder/overview/tutorial_1_light.avif",
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
-)
-```
-
-## Adding Interactive Filtering
-
-Now that you have your basic dashboard, let's make it more interactive by adding the ability to filter and search through your employee data.
-
-**Prompt:**
-```
-Add filtering functionality to the employee table. Include a search input above the table that filters rows based on name, and dropdown filters for department. Make sure the filters work together and update the table in real-time.
-```
-
-Your dashboard now becomes much more useful with real-time filtering. Users can quickly find specific employees by name or narrow down results by department. The filters work together, so you can combine a department filter with a name search.
-
-```python eval
-rx.el.div(
- image_zoom(
- rx.image(
- src=f"{REFLEX_ASSETS_CDN}ai_builder/overview/tutorial_2_light.avif",
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
-)
-```
-
-
-## Enabling Data Entry
-
-A static dashboard is useful, but being able to add new data makes your app much more practical. Let's add the ability to create new employee records.
-
-**Prompt:**
-```
-Add an "Add Employee" button above the table. When clicked, open a modal with input fields for Name, Department, and Salary. When the form is submitted, add the new employee to the table and update the bar chart. Include form validation for required fields.
-```
-
-Your app now has full CRUD capability for employee records. The modal form provides a clean interface for data entry, and both your table and chart update immediately when new employees are added.
-
-
-```python eval
-rx.el.div(
- image_zoom(
- rx.image(
- src=f"{REFLEX_ASSETS_CDN}ai_builder/overview/tutorial_3_light.avif",
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
-)
-```
-
-
-## Building a Multi-Page App
-
-Most real applications have multiple pages. Let's add a chatbot page to demonstrate navigation and create a more complete user experience.
-
-**Prompt:**
-```
-Create a new page called "Chat" and add it to the navigation. Build a simple chatbot interface with a message input field, send button, and chat history display. For now, make the bot echo back the user's messages with "Bot says: [user message]".
-```
-
-Your app now has proper navigation between the dashboard and chat functionality. The chatbot page demonstrates how easy it is to add new features and pages to your AI Builder application.
-
-
-```python eval
-rx.el.div(
- image_zoom(
- rx.image(
- src=f"{REFLEX_ASSETS_CDN}ai_builder/overview/tutorial_4_light.avif",
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
-)
-```
-
-## What's Next?
-
-You've successfully built a complete web application with data visualization, interactive filtering, data entry, and multi-page navigation. Your app demonstrates many common patterns used in modern web applications:
-
-- **Data presentation** with tables and charts
-- **User interaction** through filtering and forms
-- **Real-time updates** when data changes
-- **Multi-page architecture** with navigation
-
-## Exploring Further
-
-Now that you have a working foundation, try experimenting with these ideas:
-
-- **Customize the data model** - change the employee fields or add new columns
-- **Enhance the visualizations** - try different chart types or add more charts
-- **Improve the chatbot** - give it more sophisticated responses or integrate it with your employee data
-- **Add more pages** - create additional features like employee profiles or reporting dashboards
-
-The power of AI Builder is that you can iterate quickly with natural language prompts. Each new feature is just a conversation away!
diff --git a/docs/ai_builder/overview/what_is_reflex_build.md b/docs/ai_builder/overview/what_is_reflex_build.md
deleted file mode 100644
index effe63413..000000000
--- a/docs/ai_builder/overview/what_is_reflex_build.md
+++ /dev/null
@@ -1,242 +0,0 @@
-# What Is Reflex Build
-
-Reflex Build is an AI-powered platform that lets anyone create full-stack web apps just by describing ideas in plain English—no coding needed. It includes a full-fledged built-in IDE, real-time collaboration, and project sharing—all in your browser, no installation required.
-
-```python exec
-import reflex as rx
-from pcweb.components.image_zoom import image_zoom
-
-from pcweb.constants import REFLEX_ASSETS_CDN
-
-
-landing_features = [
- {
- "title": "Database Integration",
- "description": "Automatically integrate your database\ninto your application with ease",
- "icon": "database",
- },
- {
- "title": "Secure Secrets",
- "description": "Safely manage your API keys and tokens\nwith a built in secrets manager",
- "icon": "shield",
- },
- {
- "title": "Live Preview",
- "description": "See all application changes in real-time\nwith our interactive preview tab",
- "icon": "eye",
- },
- {
- "title": "Quick Download",
- "description": "Download your complete project files\nwith just a single click operation",
- "icon": "download",
- },
- {
- "title": "Easy Deployment",
- "description": "Deploy your application to production\nwith just a single click process",
- "icon": "rocket",
- },
- {
- "title": "Manual File Editing",
- "description": "Edit your project files directly\nwith our intuitive code editor",
- "icon": "code",
- },
- {
- "title": "AI Package Manager",
- "description": "Let AI handle your package installations\nvia natural prompting",
- "icon": "sparkles",
- },
- {
- "title": "Smart Prompting",
- "description": "Get better development results\nwith AI-optimized prompt templates",
- "icon": "message-circle",
- },
-]
-
-
-features_data = [
- {
- "title": "Project Menu Bar",
- "subtitle": "Browse previously built applications, create new sessions, store database variables, and much more!",
- "img": f"{REFLEX_ASSETS_CDN}ai_builder/what_is_reflex_build/project_bar_light.avif",
- },
- {
- "title": "Chat Area",
- "subtitle": "See your prompts in action with visual cues, editing notifications, and file generations every step of the way.",
- "img": f"{REFLEX_ASSETS_CDN}ai_builder/what_is_reflex_build/chat_light.avif",
- },
- {
- "title": "Application Workspace",
- "subtitle": "Your workspace contains all the folders and files of your application. You can add new files and folders as well!",
- "img": f"{REFLEX_ASSETS_CDN}ai_builder/what_is_reflex_build/file_tree_light.avif",
- },
- {
- "title": "Code Editor",
- "subtitle": "The code editor displays the current selected file. You can edit the code directly and save it instantly.",
- "img": f"{REFLEX_ASSETS_CDN}ai_builder/what_is_reflex_build/code_light.avif",
- },
- {
- "title": "Integrations",
- "subtitle": "Easily connect with the tools your team already uses or extend your app with any Python SDK, library, or API.",
- "img": f"{REFLEX_ASSETS_CDN}ai_builder/what_is_reflex_build/integrations_light.avif",
- },
- {
- "title": "Plan",
- "subtitle": "Plan your application's development with the AI Builder. You can add or remove phases and tasks as you go.",
- "img": f"{REFLEX_ASSETS_CDN}ai_builder/what_is_reflex_build/plan_light.avif",
- },
- {
- "title": "Top Menu Bar",
- "subtitle": "This menu contains the main views of the application. Preview, Code, Plan, Integrations, Knowledge, Secrets and Settings. You can also see the current workspace RAM and CPU usage. Deploy, copy or share your application with the buttons in the top right corner.",
- "img": f"{REFLEX_ASSETS_CDN}ai_builder/what_is_reflex_build/top_light.avif",
- },
- {
- "title": "Preview Tab",
- "subtitle": "The preview tab showcases a live application. You can navigate to other applications directly from this tab, refresh the app, and even view it in full screen.",
- "img": f"{REFLEX_ASSETS_CDN}ai_builder/what_is_reflex_build/preview_light.avif",
- },
-]
-
-
-def feature_card(feature: dict) -> rx.Component:
- return rx.el.div(
- rx.el.div(
- rx.el.span(
- rx.icon(
- tag=feature["icon"],
- size=15,
- class_name="inline-block mr-2 text-primary-11"
- ),
- rx.el.span(f"{feature['title']}"),
- class_name="text-sm font-semibold flex flex-row items-center pt-5 px-2 text-secondary-12",
- ),
- rx.el.span(
- feature["description"],
- class_name="text-sm font-medium block align-center px-2 text-secondary-11",
- ),
- class_name="flex flex-col gap-2",
- ),
- class_name="w-full rounded-md",
- )
-
-
-def _docs_features() -> rx.Component:
- return rx.el.div(
- rx.el.div(
- rx.foreach(landing_features, feature_card),
- class_name="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 gap-4",
- ),
- class_name="flex flex-col w-full h-full justify-start align-start items-start py-4 gap-x-4 z-[99]",
- )
-
-
-def _docs_app_section_features_small_screen(feature: dict):
- return rx.el.div(
- image_zoom(
- rx.image(
- src=feature["img"],
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- rx.el.div(
- rx.el.label(feature["title"], class_name="text-sm font-bold cursor-pointer"),
- rx.el.label(feature["subtitle"], class_name="text-sm font-light cursor-pointer"),
- class_name="flex flex-col px-1 py-2",
- ),
- class_name="w-full flex flex-col rounded-md cursor-pointer",
- )
-
-
-def _docs_app_section_toggles(feature: dict):
- return rx.el.div(
- rx.el.label(feature["title"], class_name="text-sm font-bold"),
- rx.el.label(
- feature["subtitle"], class_name="text-sm font-light"
- ),
- class_name="w-full flex flex-col max-w-md rounded-md p-4",
- )
-
-
-def _docs_app_sections():
- return rx.el.div(
- rx.el.div(
- rx.el.div(
- rx.el.label(
- "Small details, big impact", class_name="text-sm font-light"
- ),
- rx.el.label(
- "Made With Exceptional Care", class_name="text-3xl font-bold"
- ),
- rx.el.label(
- "Every feature in Reflex Build is carefully crafted to set new standards. Mediocre isn't an option.",
- class_name="text-md font-regular",
- ),
- class_name="flex flex-col w-full max-w-lg gap-y-1",
- ),
- rx.foreach(
- features_data[:5],
- lambda feature: _docs_app_section_toggles(feature),
- ),
- class_name="flex flex-col gap-y-4 justify-start max-w-sm",
- ),
- rx.el.div(
- image_zoom(
- rx.image(
- src=features_data[0]["img"],
- class_name="p-2 rounded-md h-auto",
- border=f"0.81px solid {rx.color('slate', 5)}",
- ),
- class_name="rounded-md overflow-hidden",
- ),
- class_name="w-full max-w-4xl",
- ),
- class_name="flex flex-row w-full h-full justify-between align-center items-center py-4 gap-x-4 z-[99]",
- display=["none" if i <= 4 else "flex" for i in range(6)],
- )
-
-
-def _docs_app_sections_small_screen():
- return rx.el.div(
- rx.el.div(
- rx.grid(
- rx.foreach(
- features_data,
- lambda feature: _docs_app_section_features_small_screen(feature),
- ),
- class_name="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-10 w-full",
- ),
- class_name="flex flex-col gap-y-4 justify-start py-4",
- ),
- )
-
-
-
-
-
-
-screen_normalization = (
- "z-[99] w-full"
- )
-```
-
-
-## Feature Overview
-
-Reflex Build provides a streamlined interface for building AI applications. The **Project Menu Bar** helps you manage sessions and stored variables, while the **Chat Area** displays real-time prompts, edits, and file generations. The **Application Workspace** organizes your project structure, and the **Code Editor** allows direct, instant code editing. Key actions like deploy and share are accessible via the **Bottom Menu Bar**, and the **Preview Tab** lets you view and interact with your live app at any time.
-
-```python eval
-rx.el.div(
- _docs_app_sections_small_screen(),
-)
-```
-
-## Interface Highlights
-
-Reflex Build’s interface is designed for clarity and efficiency. The **Project Menu Bar** helps you manage sessions, apps, and variables. The **Chat Area** shows prompts in action with visual feedback and file generation. In the **Application Workspace**, you can view and organize your project files. The **Code Editor** allows quick, direct edits with instant saving. Use the **Bottom Menu Bar** for key actions like deploy and download. The **Preview Tab** lets you interact with a live version of your app, including refresh and full-screen options.
-
-```python eval
-rx.el.div(
- rx.el.div(_docs_features(), class_name=screen_normalization),
-)
-```
diff --git a/docs/ai_builder/python_libraries.md b/docs/ai_builder/python_libraries.md
deleted file mode 100644
index 92200518f..000000000
--- a/docs/ai_builder/python_libraries.md
+++ /dev/null
@@ -1,43 +0,0 @@
-# Python Libraries
-
-
-Not every service or tool has a first-class integration — but your app can still connect to **any Python library** directly. By leveraging the built-in Python runtime, the AI Builder can install packages, import libraries, and call their functions from workflows or components. This gives you maximum flexibility to extend your app with the broader Python ecosystem.
-
-When you ask for a certain functionality the AI Builder will first check if there is a `first-class integration` available. If not, it will `search the web` to try and find a relevant Python library to fulfill your request. If it finds one, it will install the package and ask you to set any `API keys` that are required.
-
-
-## Example Use Cases
-
-### Slack
-
-There is no built-in integration for Slack. But if you ask the AI Builder to send a message to a Slack channel, it will research itself the best implementation and then use the `slack_sdk` Python package to send the message.
-
-
-### Scikit-learn
-
-There is no built-in integration for Scikit-learn. But if you ask the AI Builder to classify some text using scikit-learn, it will research itself the best implementation and then use the `scikit-learn` Python package to load a pre-trained model and classify the text.
-
-
-
-
-## Adding Custom Knowledge
-
-If you are working with a specialized / less well-known library, you can add custom knowledge to help the AI Builder understand how to use it. Simply provide a brief description of the library, its purpose, and example usage in the **Knowledge** section of your app settings. This will guide the AI Builder when it attempts to call functions from that library.
-
-```python exec
-import reflex as rx
-from pcweb.constants import REFLEX_ASSETS_CDN
-```
-
-```md alert warning
-# Where to find the Knowledge Section
-```
-
-```python eval
-rx.image(src=f"{REFLEX_ASSETS_CDN}ai_builder/features/knowledge_light.avif", alt="Where to find the Knowledge Section", class_name="rounded-lg border border-secondary-a4 mb-2")
-```
-
-
-## What is Not Supported
-
-There are a very small number of libraries that are not supported due to their size. For example, large machine learning frameworks like `torch` or `tensorflow` are not supported directly. In these cases, we recommend using a first-class integration that can emulate similar functionality (e.g., the Replicate integration for running ML models in the cloud).
\ No newline at end of file
diff --git a/docs/ai_builder/urls.md b/docs/ai_builder/urls.md
deleted file mode 100644
index 2341dd1b6..000000000
--- a/docs/ai_builder/urls.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# URLs
-
-When you **paste a URL directly into the AI Builder chat**, the AI will automatically decide how to handle it depending on your prompt.
-
-You can use URLs to **copy a page’s design** or **extract its content**, without needing to set up any integration.
-
-## How It Works
-
-* If you say something like **“copy the design”** or **“use this layout”**, the AI will:
-
- * Take a **screenshot** of the page.
- * Use it as a **visual reference** to recreate the UI in your app.
- * Allow you to **customize** the generated design afterward.
-
-* 🪄 If you say something like **“get the content”**, **“scrape this page”**, or just paste the URL without mentioning design, the AI will:
-
- * **Scrape the content** of the page (text, links, images, metadata).
- * Return it as structured data that can be used in components, workflows, or AI actions.
-
-## Example Prompts
-
-* “Copy the design of this page.”
-* “Scrape the content from this blog post.”
-* “Get all the product details from this URL.”
-* (Paste the URL alone) → AI will assume content scraping by default.
-
-## Notes
-
-* **Public pages only:** The AI can only process URLs that are publicly accessible.
-* **Editable:** Both the generated design and scraped content can be modified after processing.
-
diff --git a/docs/ai_builder/webhooks.md b/docs/ai_builder/webhooks.md
deleted file mode 100644
index 7a64a70f2..000000000
--- a/docs/ai_builder/webhooks.md
+++ /dev/null
@@ -1,44 +0,0 @@
-# Webhooks
-
-Webhooks allow your app to **send data to external services** in real time. You provide the AI Builder with a **webhook URL** created in another platform, and it can **automatically send payloads** to that URL when workflows are triggered.
-
-This is a simple and powerful way to integrate with services that support incoming webhooks, even if there’s no first-class integration.
-
-## What You Can Do
-
-With outgoing webhooks, your app can:
-
-* **Send structured payloads** to any service that supports incoming webhooks (e.g., Slack, Zapier, Make, Discord).
-* **Trigger external workflows** when events happen in your app.
-* **Push real-time updates** to third-party systems without writing custom backend code.
-* Chain webhook calls with other integrations or AI actions.
-
-## Step 1: Create a Webhook in the External Service
-
-1. Go to the external service you want to connect (e.g., Slack, Zapier, Discord, Make).
-2. Create a new **incoming webhook** in that service.
-3. Copy the **webhook URL** it provides.
-
-
-## Step 2: Add the Webhook URL to AI Builder
-
-1. In the AI Builder chat paste the **webhook URL** you created in the external service.
-2. You can then instruct the AI to **send data to this URL** whenever a workflow is triggered.
-3. Optionally define the **payload structure** (e.g., JSON body) and when it should be sent.
-
-> 💡 Example: “Send user signup data to this webhook whenever a user signs up.”
-
-## Step 3: Sending Payloads
-
-* The AI Builder will write the code to send a `POST` request to the webhook URL with the payload you define.
-* The payload can include **dynamic data** from your app — such as user info, state variables, or model outputs.
-* You can trigger these webhook calls from buttons, events, workflows, or automations.
-
-
-## Step 4: Notes
-
-* **Security:** Only use webhook URLs from trusted services — they will receive your data as-is.
-* **Formatting:** Make sure the payload matches the expected format of the external service.
-* **Chaining:** You can use multiple webhooks or combine them with other integrations.
-* **Use cases:** Slack alerts, CRM updates, triggering automations in Zapier or Make, notifying custom systems.
-
diff --git a/docs/enterprise/ag_chart.md b/docs/enterprise/ag_chart.md
deleted file mode 100644
index 30fdc4b53..000000000
--- a/docs/enterprise/ag_chart.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# AG Chart
-
-AG Chart is a powerful charting library that provides interactive charts and data visualization components for enterprise applications.
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-def basic_chart():
- return rxe.ag_chart(
- options={
- "data": [
- {"month": "Jan", "value": 10},
- {"month": "Feb", "value": 20},
- {"month": "Mar", "value": 15},
- ],
- "series": [
- {
- "type": "line",
- "xKey": "month",
- "yKey": "value",
- }
- ],
- },
- width="100%",
- height="400px",
- )
-```
-
-For more detailed documentation, see the [AG Chart Documentation](https://charts.ag-grid.com/).
diff --git a/docs/enterprise/ag_grid/aligned-grids.md b/docs/enterprise/ag_grid/aligned-grids.md
deleted file mode 100644
index da63bef7f..000000000
--- a/docs/enterprise/ag_grid/aligned-grids.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: Aligned Grids
----
-
-AgGrid provides a way to align multiple grids together. This is useful when you want to display related data in a synchronized manner.
-
-You can do so through the `aligned_grids` prop. This prop takes a list of grid IDs that you want to align.
-
-```python demo exec
-import pandas as pd
-import reflex as rx
-import reflex_enterprise as rxe
-
-# Olympic winners data (originally from https://www.ag-grid.com/example-assets/olympic-winners.json)
-df = pd.read_json("data/olympic-winners.json")
-
-row_data = df.to_dict("records")
-
-column_defs = [
- {"field": "athlete"},
- {"field": "age"},
- {"field": "country"},
- {"field": "year"},
- {"field": "sport"},
- {
- "header_name": "Medals",
- "children": [
- {
- "field": "total",
- "column_group_show": "closed",
- "col_id": "total",
- "value_getter": "params.data.gold + params.data.silver + params.data.bronze",
- "width": 100,
- },
- {"field": "gold", "column_group_show": "open", "width": 100},
- {"field": "silver", "column_group_show": "open", "width": 100},
- {"field": "bronze", "column_group_show": "open", "width": 100},
- ],
- },
-]
-
-def aligned_grids_page():
- """Aligned grids demo."""
- return rx.el.div(
- rxe.ag_grid(
- id="grid1",
- column_defs=column_defs,
- row_data=row_data,
- aligned_grids=["grid2"],
- width="100%",
- ), rxe.ag_grid(
- id="grid2",
- column_defs=column_defs,
- row_data=row_data,
- aligned_grids=["grid1"],
- width="100%",
- ),
- class_name="flex flex-col gap-y-6 w-full"
- )
-
-```
-
-```md alert warning
-# The pivot functionality does not work with aligned grids. This is because pivoting data changes the columns, which would make the aligned grids incompatible, as they are no longer sharing the same set of columns.
-```
diff --git a/docs/enterprise/ag_grid/cell-selection.md b/docs/enterprise/ag_grid/cell-selection.md
deleted file mode 100644
index c428d46fd..000000000
--- a/docs/enterprise/ag_grid/cell-selection.md
+++ /dev/null
@@ -1,288 +0,0 @@
----
-title: "Cell Selection"
-order: 8
----
-
-```python exec
-from pcweb.pages.docs import enterprise
-```
-
-# Cell Selection
-
-AG Grid provides powerful cell selection capabilities that allow users to select individual cells or ranges of cells. This feature is essential for data manipulation, copying, and advanced interactions like fill handle operations.
-
-## Range Selection
-
-To enable cell selection in your AG Grid, set the `cell_selection` prop to `True`. This automatically enables both single cell selection and range selection capabilities.
-
-### Basic Selection Example
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-import pandas as pd
-
-class CellSelectionState(rx.State):
- data: list[dict] = []
-
- @rx.event
- def load_data(self):
- df = pd.read_json("https://www.ag-grid.com/example-assets/olympic-winners.json")
- self.data = df.head(10).to_dict("records")
-
- @rx.event
- def echo_selection(self, ranges: list[dict], started: bool, finished: bool):
- if finished:
- yield rx.toast(f"Selected ranges: {ranges}")
-
-column_defs = [
- {"field": "athlete", "width": 150},
- {"field": "age", "width": 90},
- {"field": "country", "width": 120},
- {"field": "year", "width": 90},
- {"field": "sport", "width": 120},
- {"field": "gold", "width": 100},
- {"field": "silver", "width": 100},
- {"field": "bronze", "width": 100},
-]
-
-def basic_cell_selection():
- return rx.vstack(
- rx.text("Click and drag to select cells. Selection info will appear in a toast.", size="2"),
- rxe.ag_grid(
- id="basic_cell_selection_grid",
- column_defs=column_defs,
- row_data=CellSelectionState.data,
- cell_selection=True,
- on_cell_selection_changed=CellSelectionState.echo_selection,
- width="100%",
- height="400px",
- ),
- on_mount=CellSelectionState.load_data,
- width="100%",
- )
-```
-
-### Advanced Selection Event Handling
-
-For more sophisticated selection handling, you can process the selection ranges to calculate detailed information:
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-import pandas as pd
-
-class AdvancedSelectionState(rx.State):
- data: list[dict] = []
-
- @rx.event
- def load_data(self):
- df = pd.DataFrame({
- "name": ["Alice", "Bob", "Charlie", "Diana", "Eve"],
- "score": [85, 92, 78, 96, 88],
- "grade": ["B", "A", "C", "A", "B"],
- "attempts": [3, 2, 4, 1, 3]
- })
- self.data = df.to_dict("records")
-
- @rx.event
- def handle_selection(self, ranges: list[dict], started: bool, finished: bool):
- if finished and ranges:
- total_cells = sum(
- (r.get("endRow", 0) - r.get("startRow", 0) + 1) *
- len(r.get("columns", []))
- for r in ranges
- )
- yield rx.toast(f"Selected {total_cells} cells across {len(ranges)} ranges")
-
-editable_column_defs = [
- {"field": "name", "width": 120},
- {"field": "score", "width": 100, "editable": True},
- {"field": "grade", "width": 100, "editable": True},
- {"field": "attempts", "width": 120, "editable": True},
-]
-
-def advanced_selection_example():
- return rx.vstack(
- rx.text("Select ranges of cells. Try selecting multiple ranges by holding Ctrl/Cmd.", size="2"),
- rxe.ag_grid(
- id="advanced_selection_grid",
- column_defs=editable_column_defs,
- row_data=AdvancedSelectionState.data,
- cell_selection=True,
- on_cell_selection_changed=AdvancedSelectionState.handle_selection,
- width="100%",
- height="300px",
- ),
- on_mount=AdvancedSelectionState.load_data,
- width="100%",
- )
-```
-
-## Fill Handle
-
-The fill handle is a powerful feature that allows users to quickly fill cells by dragging from a selected cell or range. When enabled, a small square appears at the bottom-right corner of the selection that users can drag to fill adjacent cells.
-
-### Enabling Fill Handle
-
-To enable the fill handle, configure the `cell_selection` prop with a dictionary containing the handle configuration:
-
-```python
-cell_selection={
- "handle": {
- "mode": "fill", # Enable fill handle
- }
-}
-```
-
-### Fill Handle Events
-
-When using the fill handle, it will trigger `on_cell_value_changed` for each cell receiving a fill value. This allows your backend to handle the data changes appropriately.
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-import pandas as pd
-
-class FillHandleState(rx.State):
- data: list[dict] = []
- change_log: list[str] = []
-
- @rx.event
- def load_data(self):
- df = pd.DataFrame({
- "item": ["Apple", "Banana", "Cherry", "Date", "Elderberry"],
- "quantity": [10, 15, 8, 12, 20],
- "price": [1.50, 0.75, 2.00, 3.00, 4.50],
- "total": [15.00, 11.25, 16.00, 36.00, 90.00]
- })
- self.data = df.to_dict("records")
-
- @rx.event
- def handle_cell_change(self, data: dict):
- row_index = data.get("rowIndex", 0)
- field = data.get("colId", "")
- new_value = data.get("newValue", "")
- old_value = data.get("oldValue", "")
-
- change_msg = f"Row {row_index + 1}, {field}: '{old_value}' → '{new_value}'"
- self.change_log = [change_msg] + self.change_log[:9] # Keep last 10 changes
-
- # Update the data
- if 0 <= row_index < len(self.data):
- self.data[row_index][field] = new_value
-
-fill_column_defs = [
- {"field": "item", "width": 120},
- {"field": "quantity", "width": 100, "editable": True, "type": "numericColumn"},
- {"field": "price", "width": 100, "editable": True, "type": "numericColumn"},
- {"field": "total", "width": 100, "editable": True, "type": "numericColumn"},
-]
-
-def fill_handle_example():
- return rx.vstack(
- rx.text("Select a cell and drag the fill handle (small square at bottom-right) to fill adjacent cells.", size="2"),
- rxe.ag_grid(
- id="fill_handle_grid",
- column_defs=fill_column_defs,
- row_data=FillHandleState.data,
- cell_selection={
- "handle": {
- "mode": "fill", # Enable fill handle
- }
- },
- on_cell_value_changed=FillHandleState.handle_cell_change,
- width="100%",
- height="300px",
- ),
- rx.divider(),
- rx.text("Recent Changes:", weight="bold", size="3"),
- rx.cond(
- FillHandleState.change_log,
- rx.vstack(
- rx.foreach(
- FillHandleState.change_log,
- lambda change: rx.text(change, size="1", color="gray")
- ),
- spacing="1",
- ),
- rx.text("No changes yet", size="2", color="gray")
- ),
- on_mount=FillHandleState.load_data,
- width="100%",
- spacing="4",
- )
-```
-
-## Advanced Configuration Options
-
-You can further customize cell selection behavior using additional configuration options:
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-import pandas as pd
-
-class ConfigurationState(rx.State):
- data: list[dict] = []
-
- @rx.event
- def load_data(self):
- df = pd.DataFrame({
- "id": range(1, 8),
- "name": ["Product A", "Product B", "Product C", "Product D", "Product E", "Product F", "Product G"],
- "category": ["Electronics", "Clothing", "Electronics", "Books", "Clothing", "Electronics", "Books"],
- "price": [299.99, 49.99, 199.99, 24.99, 79.99, 399.99, 19.99],
- "stock": [15, 32, 8, 45, 23, 12, 67]
- })
- self.data = df.to_dict("records")
-
-configuration_column_defs = [
- {"field": "id", "width": 80},
- {"field": "name", "width": 150, "editable": True},
- {"field": "category", "width": 120},
- {"field": "price", "width": 100, "editable": True, "type": "numericColumn"},
- {"field": "stock", "width": 100, "editable": True, "type": "numericColumn"},
-]
-
-def configuration_example():
- return rx.vstack(
- rx.text("Cell selection with additional configuration options", size="2"),
- rxe.ag_grid(
- id="configuration_grid",
- column_defs=configuration_column_defs,
- row_data=ConfigurationState.data,
- cell_selection={
- "handle": {
- "mode": "fill",
- }
- },
- enable_cell_text_selection=True, # Allow text selection within cells
- suppress_cell_focus=False, # Allow cell focus
- width="100%",
- height="350px",
- ),
- on_mount=ConfigurationState.load_data,
- width="100%",
- )
-```
-
-## Key Features
-
-- **Cell Selection**: Enable with `cell_selection=True` for both single cell and range selection capabilities
-- **Fill Handle**: Configure with `cell_selection={"handle": {"mode": "fill"}}` for drag-to-fill functionality
-- **Event Handling**: Use `on_cell_selection_changed` to respond to selection changes
-- **Value Changes**: Use `on_cell_value_changed` to handle individual cell edits and fill operations
-- **Text Selection**: Enable `enable_cell_text_selection=True` to allow text selection within cells
-
-## Best Practices
-
-1. **Use cell_selection configuration**: Both single cell and range selection are automatically enabled with `cell_selection=True`, providing all necessary selection capabilities for fill operations.
-
-2. **Handle cell value changes**: When using fill handle, implement `on_cell_value_changed` to process the data updates in your backend.
-
-3. **Provide user feedback**: Use toasts or other UI elements to confirm selection actions and data changes.
-
-4. **Consider performance**: For large datasets, be mindful of the performance impact of frequent cell value change events.
-
-5. **Validate fill operations**: Implement validation logic in your `on_cell_value_changed` handler to ensure data integrity.
diff --git a/docs/enterprise/ag_grid/column-defs.md b/docs/enterprise/ag_grid/column-defs.md
deleted file mode 100644
index a1dea0181..000000000
--- a/docs/enterprise/ag_grid/column-defs.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-order: 1
----
-
-```python exec
-from pcweb.pages.docs import enterprise
-```
-
-# Column Definitions
-
-## Basic Columns
-
-AgGrid allows you to define the columns of your grid, passed to the prop `column_defs`. Each dictionary represents a column.
-
-```md alert warning
-# If you are converting from other AG Grid implementation, we also support camelCase for the name of the properties.
-```
-
-Here we define a grid with 3 columns:
-```python
-column_defs = [
- {"field": "direction"},
- {"field": "strength"},
- {"field": "frequency"},
-]
-```
-
-To set default properties for all your columns, you can define `default_col_def` in your grid:
-```python
-default_col_def = {
- "sortable": True,
- "filter": True,
- "resizable": True,
-}
-```
\ No newline at end of file
diff --git a/docs/enterprise/ag_grid/index.md b/docs/enterprise/ag_grid/index.md
deleted file mode 100644
index a6ed8c25b..000000000
--- a/docs/enterprise/ag_grid/index.md
+++ /dev/null
@@ -1,681 +0,0 @@
----
-title: "AgGrid Overview"
-order: 3
----
-
-```python exec
-from pcweb.pages.docs import enterprise
-```
-
-# AG Grid
-
-AG Grid is a powerful, feature-rich data grid component that brings enterprise-grade table functionality to your Reflex applications. With support for sorting, filtering, pagination, row selection, and much more, AG Grid transforms how you display and interact with tabular data.
-
-[Explore the full AG Grid showcase and examples](https://aggrid.reflex.run/)
-
-## Your First Reflex AG Grid
-
-A basic Reflex AG Grid contains column definitions `column_defs`, which define the columns to be displayed in the grid, and `row_data`, which contains the data to be displayed in the grid.
-
-Each grid also requires a unique `id`, which is needed to uniquely identify the Ag-Grid instance on the page. If you have multiple grids on the same page, each grid must have a unique `id` so that it can be correctly rendered and managed.
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-import pandas as pd
-
-
-df = pd.read_csv("data/wind_dataset.csv")
-
-column_defs = [
- {"field": "direction"},
- {"field": "strength"},
- {"field": "frequency"},
-]
-
-def ag_grid_simple():
- return rxe.ag_grid(
- id="ag_grid_basic_1",
- row_data=df.to_dict("records"),
- column_defs=column_defs,
- width="100%",
- )
-```
-
-📊 **Dataset source:** [wind_dataset.csv](https://raw.githubusercontent.com/plotly/datasets/master/wind_dataset.csv)
-
-The format of the data passed to the `row_data` prop is a list of dictionaries. Each dictionary represents a row in the grid as seen below.
-
-```python
-[
- \{"direction": "N", "strength": "0-1", "frequency": 0.5\},
- \{"direction": "NNE", "strength": "0-1", "frequency": 0.6\},
- \{"direction": "NE", "strength": "0-1", "frequency": 0.5\},
-]
-```
-
-The previous example showed the `column_defs` written out in full. You can also extract the required information from the dataframe's column names:
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-import pandas as pd
-
-df = pd.read_csv("data/wind_dataset.csv")
-
-
-def ag_grid_simple_2():
- return rxe.ag_grid(
- id="ag_grid_basic_2",
- row_data=df.to_dict("records"),
- column_defs=[{"field": i} for i in df.columns],
- width="100%",
- height="40vh",
- )
-```
-
-📊 **Dataset source:** [wind_dataset.csv](https://raw.githubusercontent.com/plotly/datasets/master/wind_dataset.csv)
-
-## Headers
-
-In the above example, the first letter of the field names provided are capitalized when displaying the header name. You can customize the header names by providing a `header_name` key in the column definition. In this example, the `header_name` is customized for the second and third columns.
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-import pandas as pd
-
-
-df = pd.read_csv("data/gapminder2007.csv")
-
-column_defs = [
- {"field": "country"},
- {"field": "pop", "headerName": "Population"},
- {"field": "lifeExp", "headerName": "Life Expectancy"},
-]
-
-def ag_grid_simple_headers():
- return rxe.ag_grid(
- id="ag_grid_basic_headers",
- row_data=df.to_dict("records"),
- column_defs=column_defs,
- width="100%",
- height="40vh",
- )
-```
-
-📊 **Dataset source:** [gapminder2007.csv](https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv)
-
-## Column Filtering
-
-Allow a user to filter a column by setting the `filter` key to `True` in the column definition. In this example we enable filtering for the first and last columns.
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-import pandas as pd
-
-
-df = pd.read_csv("data/gapminder2007.csv")
-
-column_defs = [
- {"field": "country", "headerName": "Country", "filter": True},
- {"field": "pop", "headerName": "Population"},
- {"field": "lifeExp", "headerName": "Life Expectancy", "filter": True},
-]
-
-def ag_grid_simple_column_filtering():
- return rxe.ag_grid(
- id="ag_grid_basic_column_filtering",
- row_data=df.to_dict("records"),
- column_defs=column_defs,
- width="100%",
- height="40vh",
- )
-```
-
-### Filter Types
-
-You can set `filter=True` to enable the default filter for a column.
-
-You can also set the filter type using the `filter` key. The following filter types are available: `ag_grid.filters.date`, `ag_grid.filters.number` and `ag_grid.filters.text`. These ensure that the input you enter to the filter is of the correct type.
-
-(`ag_grid.filters.set` and `ag_grid.filters.multi` are available with AG Grid Enterprise)
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-import pandas as pd
-
-
-df = pd.read_csv("data/GanttChart-updated.csv")
-
-column_defs = [
- {"field": "Task", "filter": True},
- {"field": "Start", "filter": rxe.ag_grid.filters.date},
- {"field": "Duration", "filter": rxe.ag_grid.filters.number},
- {"field": "Resource", "filter": rxe.ag_grid.filters.text},
-]
-
-def ag_grid_simple_column_filtering():
- return rxe.ag_grid(
- id="ag_grid_basic_column_filtering",
- row_data=df.to_dict("records"),
- column_defs=column_defs,
- width="100%",
- height="40vh",
- )
-```
-
-📊 **Dataset source:** [GanttChart-updated.csv](https://raw.githubusercontent.com/plotly/datasets/master/GanttChart-updated.csv)
-
-## Row Sorting
-
-By default, the rows can be sorted by any column by clicking on the column header. You can disable sorting of the rows for a column by setting the `sortable` key to `False` in the column definition.
-
-In this example, we disable sorting for the first column.
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-import pandas as pd
-
-
-df = pd.read_csv("data/gapminder2007.csv")
-
-column_defs = [
- {"field": "country", "sortable": False},
- {"field": "pop", "headerName": "Population"},
- {"field": "lifeExp", "headerName": "Life Expectancy"},
-]
-
-def ag_grid_simple_row_sorting():
- return rxe.ag_grid(
- id="ag_grid_basic_row_sorting",
- row_data=df.to_dict("records"),
- column_defs=column_defs,
- width="100%",
- height="40vh",
- )
-```
-
-📊 **Dataset source:** [gapminder2007.csv](https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv)
-
-## Row Selection
-
-Row Selection is enabled using the `row_selection` attribute. Setting it to `multiple` allows users to select multiple rows at a time. You can use the `checkbox_selection` column definition attribute to render checkboxes for selection.
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-import pandas as pd
-
-
-df = pd.read_csv("data/gapminder2007.csv")
-
-column_defs = [
- {"field": "country", "checkboxSelection": True},
- {"field": "pop", "headerName": "Population"},
- {"field": "continent"},
-]
-
-def ag_grid_simple_row_selection():
- return rxe.ag_grid(
- id="ag_grid_basic_row_selection",
- row_data=df.to_dict("records"),
- column_defs=column_defs,
- row_selection={"mode":"multiple"},
- width="100%",
- height="40vh",
- )
-```
-
-📊 **Dataset source:** [gapminder2007.csv](https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv)
-
-## Editing
-
-Enable Editing by setting the `editable` attribute to `True`. The cell editor is inferred from the cell data type. Set the cell editor type using the `cell_editor` attribute.
-
-There are 7 provided cell editors in AG Grid:
-
-1. `ag_grid.editors.text`
-2. `ag_grid.editors.large_text`
-3. `ag_grid.editors.select`
-4. `ag_grid.editors.rich_select`
-5. `ag_grid.editors.number`
-6. `ag_grid.editors.date`
-7. `ag_grid.editors.checkbox`
-
-In this example, we enable editing for the second and third columns. The second column uses the `number` cell editor, and the third column uses the `select` cell editor.
-
-The `on_cell_value_changed` event trigger is linked to the `cell_value_changed` event handler in the state. This event handler is called whenever a cell value is changed and changes the value of the backend var `_data_df` and the state var `data`.
-
-```python
-import reflex as rx
-import reflex_enterprise as rxe
-import pandas as pd
-
-class AGGridEditingState(rx.State):
- data: list[dict] = []
- _data_df: pd.DataFrame
-
- @rx.event
- def load_data(self):
- self._data_df = pd.read_csv("data/gapminder2007.csv")
- self.data = self._data_df.to_dict("records")
-
- @rx.event
- def cell_value_changed(self, row, col_field, new_value):
- self._data_df.at[row, col_field] = new_value
- self.data = self._data_df.to_dict("records")
- yield rx.toast(f"Cell value changed, Row: {row}, Column: {col_field}, New Value: {new_value}")
-
-
-column_defs = [
- \{"field": "country"\},
- \{"field": "pop", "headerName": "Population", "editable": True, "cellEditor": rxe.ag_grid.editors.number\},
- \{"field": "continent", "editable": True, "cellEditor": rxe.ag_grid.editors.select, "cellEditorParams": \{"values": ['Asia', 'Europe', 'Africa', 'Americas', 'Oceania']\}\},
-]
-
-def ag_grid_simple_editing():
- return rxe.ag_grid(
- id="ag_grid_basic_editing",
- row_data=AGGridEditingState.data,
- column_defs=column_defs,
- on_cell_value_changed=AGGridEditingState.cell_value_changed,
- on_mount=AGGridEditingState.load_data,
- width="100%",
- height="40vh",
- )
-```
-
-## Pagination
-
-By default, the grid uses a vertical scroll. You can reduce the amount of scrolling required by adding pagination. To add pagination, set `pagination=True`. You can set the `pagination_page_size` to the number of rows per page and `pagination_page_size_selector` to a list of options for the user to select from.
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-import pandas as pd
-
-df = pd.read_csv("data/gapminder2007.csv")
-
-column_defs = [
- {"field": "country"},
- {"field": "pop", "headerName": "Population"},
- {"field": "lifeExp", "headerName": "Life Expectancy"},
-]
-
-def ag_grid_simple_pagination():
- return rxe.ag_grid(
- id="ag_grid_basic_pagination",
- row_data=df.to_dict("records"),
- column_defs=column_defs,
- pagination=True,
- pagination_page_size=10,
- pagination_page_size_selector=[10, 40, 100],
- width="100%",
- height="40vh",
- )
-```
-
-📊 **Dataset source:** [gapminder2007.csv](https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv)
-
-## AG Grid with State
-
-### Putting Data in State
-
-Assuming you want to make any edit to your data, you can put the data in State. This allows you to update the grid based on user input. Whenever the `data` var is updated, the grid will be re-rendered with the new data.
-
-```python
-from typing import Any
-import reflex as rx
-import reflex_enterprise as rxe
-import pandas as pd
-
-class AGGridState2(rx.State):
- data: list[dict] = []
-
- @rx.event
- def load_data(self):
- _df = pd.read_csv("data/gapminder2007.csv")
- self.data = _df.to_dict("records")
-
-column_defs = [
- \{"field": "country"\},
- \{"field": "pop", "headerName": "Population"\},
- \{"field": "continent"\},
-]
-
-def ag_grid_state_2():
- return rxe.ag_grid(
- id="ag_grid_state_2",
- row_data=AGGridState2.data,
- column_defs=column_defs,
- on_mount=AGGridState2.load_data,
- width="100%",
- height="40vh",
- )
-```
-
-### Updating the Grid with State
-
-You can use State to update the grid based on a users input. In this example, we update the `column_defs` of the grid when a user clicks a button.
-
-```python
-import reflex as rx
-import reflex_enterprise as rxe
-import pandas as pd
-
-class AgGridState(rx.State):
- """The app state."""
- all_columns: list = []
-
- two_columns: list = []
- column_defs: list = all_columns
- n_clicks = 0
-
- @rx.event
- def init_columns(self):
- self.all_columns = [
- \{"field": "country"\},
- \{"field": "pop"\},
- \{"field": "continent"\},
- \{"field": "lifeExp"\},
- \{"field": "gdpPercap"\},
- ]
- self.two_columns = [
- \{"field": "country"\},
- \{"field": "pop"\},
- ]
- self.column_defs = self.all_columns
-
- @rx.event
- def update_columns(self):
- self.n_clicks += 1
- if self.n_clicks % 2 != 0:
- self.column_defs = self.two_columns
- else:
- self.column_defs = self.all_columns
-
-
-df = pd.read_csv("data/gapminder2007.csv")
-
-
-def ag_grid_simple_with_state():
- return rx.box(
- rx.button("Toggle Columns", on_click=AgGridState.update_columns),
- rxe.ag_grid(
- id="ag_grid_basic_with_state",
- row_data=df.to_dict("records"),
- column_defs=AgGridState.column_defs,
- on_mount=AgGridState.init_columns,
- width="100%",
- height="40vh",
- ),
- width="100%",
- )
-```
-
-📊 **Dataset source:** [gapminder2007.csv](https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv)
-
-## AG Grid with Data from a Database
-
-In this example, we will use a database to store the data. The data is loaded from a csv file and inserted into the database when the page is loaded using the `insert_dataframe_to_db` event handler.
-
-The data is then fetched from the database and displayed in the grid using the `data` computed var.
-
-When a cell value is changed, the data is updated in the database using the `cell_value_changed` event handler.
-
-```python
-import reflex as rx
-import reflex_enterprise as rxe
-import pandas as pd
-from sqlmodel import select
-
-class Country(rx.Model, table=True):
- country: str
- population: int
- continent: str
-
-
-class AGGridDatabaseState(rx.State):
-
- countries: list[Country]
-
- # Insert data from a csv loaded dataframe to the database (Do this on the page load)
- @rx.event
- def insert_dataframe_to_db(self):
- data = pd.read_csv("data/gapminder2007.csv")
- with rx.session() as session:
- for _, row in data.iterrows():
- db_record = Country(
- country=row['country'],
- population=row['pop'],
- continent=row['continent'],
- )
- session.add(db_record)
- session.commit()
-
- # Fetch data from the database using a computed variable
- @rx.var
- def data(self) -> list[dict]:
- with rx.session() as session:
- results = session.exec(select(Country)).all()
- self.countries = [result.dict() for result in results]
- return self.countries
-
- # Update the database when a cell value is changed
- @rx.event
- def cell_value_changed(self, row, col_field, new_value):
- self.countries[row][col_field] = new_value
- with rx.session() as session:
- country = Country(**self.countries[row])
- session.merge(country)
- session.commit()
- yield rx.toast(f"Cell value changed, Row: \{row}, Column: \{col_field}, New Value: \{new_value}")
-
-
-column_defs = [
- \{"field": "country"\},
- \{"field": "population", "headerName": "Population", "editable": True, "cellEditor": rxe.ag_grid.editors.number\},
- \{"field": "continent", "editable": True, "cellEditor": rxe.ag_grid.editors.select, "cellEditorParams": \{"values": ['Asia', 'Europe', 'Africa', 'Americas', 'Oceania']\}\},
-]
-
-def index():
- return rxe.ag_grid(
- id="ag_grid_basic_editing",
- row_data=AGGridDatabaseState.data,
- column_defs=column_defs,
- on_cell_value_changed=AGGridDatabaseState.cell_value_changed,
- width="100%",
- height="40vh",
- )
-
-# Add state and page to the app.
-app = rx.App()
-app.add_page(index, on_load=AGGridDatabaseState.insert_dataframe_to_db)
-```
-
-## Using AG Grid Enterprise
-
-AG Grid offers both community and enterprise versions. See the [AG Grid docs](https://www.ag-grid.com/archive/31.2.0/react-data-grid/licensing/) for details on purchasing a license key.
-
-To use an AG Grid Enterprise license key with Reflex AG Grid set the environment variable `AG_GRID_LICENSE_KEY`:
-
-```bash
-export AG_GRID_LICENSE_KEY="your_license_key"
-```
-
-## column_def props
-
-The following props are available for `column_defs` as well as many others that can be found here: [AG Grid Column Def Docs](https://www.ag-grid.com/react-data-grid/column-properties/). (it is necessary to use snake_case for the keys in Reflex, unlike in the AG Grid docs where camelCase is used)
-
-- `field`: `str`: The field of the row object to get the cell's data from.
-- `col_id`: `str | None`: The unique ID to give the column. This is optional. If missing, the ID will default to the field.
-- `type`: `str | None`: The type of the column.
-- `cell_data_type`: `bool | str | None`: The data type of the cell values for this column. Can either infer the data type from the row data (true - the default behaviour), define a specific data type (string), or have no data type (false).
-- `hide`: `bool`: Set to true for this column to be hidden.
-- `editable`: `bool | None`: Set to true if this column is editable, otherwise false.
-- `filter`: `AGFilters | str | None`: Filter component to use for this column. Set to true to use the default filter. Set to the name of a provided filter to use that filter. (Check out the Filter Types section of this page for more information)
-- `floating_filter`: `bool`: Whether to display a floating filter for this column.
-- `header_name`: `str | None`: The name to render in the column header. If not specified and field is specified, the field name will be used as the header name.
-- `header_tooltip`: `str | None`: Tooltip for the column header.
-- `checkbox_selection`: `bool | None`: Set to true to render a checkbox for row selection.
-- `cell_editor`: `AGEditors | str | None`: Provide your own cell editor component for this column's cells. (Check out the Editing section of this page for more information)
-- `cell_editor_params`: `dict[str, list[Any]] | None`: Params to be passed to the cellEditor component.
-
-
-
-## Functionality you need is not available/working in Reflex
-
-All AGGrid options found in this [documentation](https://www.ag-grid.com/react-data-grid/reference/) are mapped in rxe.ag_grid, but some features might not have been fully tested, due to the sheer number of existing features in the underlying AG Grid library.
-
-If one of the ag_grid props does not import the expected module, you can pass it manually via the props `community_modules` or `enterprise_modules`, which expect a `set[str]` of the module names. You will get a warning in the browser console if a module is missing, so you can check there if a feature is not working as expected.
-
-You can also report the missing module on our discord or GitHub issues page of the main Reflex repository.
-
-Best practice is to create a single instance of `ag_grid.api()` with the same `id` as the `id` of the `ag_grid` component that is to be referenced, `"ag_grid_basic_row_selection"` in this first example.
-
-The example below uses the `select_all()` and `deselect_all()` methods of the AG Grid API to select and deselect all rows in the grid. This method is not available in Reflex directly. Check out this [documentation](https://www.ag-grid.com/react-data-grid/grid-api/#reference-selection-selectAll) to see what the methods look like in the AG Grid docs.
-
-```md alert info
-# Ensure that the docs are set to React tab in AG Grid
-```
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-import pandas as pd
-
-df = pd.read_csv(
- "data/gapminder2007.csv"
-)
-
-column_defs = [
- {"field": "country", "checkboxSelection": True},
- {"field": "pop"},
- {"field": "continent"},
-]
-
-def ag_grid_api_simple():
- my_api = rxe.ag_grid.api(id="ag_grid_basic_row_selection")
- return rx.vstack(
- rxe.ag_grid(
- id="ag_grid_basic_row_selection",
- row_data=df.to_dict("records"),
- column_defs=column_defs,
- row_selection="single",
- width="100%",
- height="40vh",
- ),
- rx.button("Select All", on_click=my_api.select_all()),
- rx.button("Deselect All", on_click=my_api.deselect_all()),
- spacing="4",
- width="100%",
- )
-```
-
-📊 **Dataset source:** [gapminder2007.csv](https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv)
-
-The react code for the `select_all()` event handler is `selectAll = (source?: SelectionEventSourceType) => void;`.
-
-To use this in Reflex as you can see, it should be called in snake case rather than camel case. The `void` means it doesn't return anything. The `source?` indicates that it takes an optional `source` argument.
-
-
-```md alert info
-# Another way to use the AG Grid API
-It is also possible to use the AG Grid API directly with the event trigger (`on_click`) of the component. This removes the need to create a variable `my_api`. This is shown in the example below. It is necessary to use the `id` of the `ag_grid` component that is to be referenced.
-
-```python
-rx.button("Select all", on_click=rxe.ag_grid.api(id="ag_grid_basic_row_selection").select_all()),
-```
-
-### More examples
-
-The following example lets a user [export the data as a csv](https://www.ag-grid.com/javascript-data-grid/grid-api/#reference-export-exportDataAsCsv) and [adjust the size of columns to fit the available horizontal space](https://www.ag-grid.com/javascript-data-grid/grid-api/#reference-columnSizing-sizeColumnsToFit). (Try resizing the screen and then clicking the resize columns button)
-
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-import pandas as pd
-
-df = pd.read_csv(
- "data/gapminder2007.csv"
-)
-
-column_defs = [
- {"field": "country", "checkboxSelection": True},
- {"field": "pop"},
- {"field": "continent"},
-]
-
-def ag_grid_api_simple2():
- my_api = rxe.ag_grid.api(id="ag_grid_export_and_resize")
- return rx.vstack(
- rxe.ag_grid(
- id="ag_grid_export_and_resize",
- row_data=df.to_dict("records"),
- column_defs=column_defs,
- width="100%",
- height="40vh",
- ),
- rx.button("Export", on_click=my_api.export_data_as_csv()),
- rx.button("Resize Columns", on_click=my_api.size_columns_to_fit()),
- spacing="4",
- width="100%",
- )
-```
-
-📊 **Dataset source:** [gapminder2007.csv](https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv)
-
-The react code for both of these is shown below. The key point to see is that both of these functions return `void` and therefore does not return anything.
-
-`exportDataAsCsv = (params?: CsvExportParams) => void;`
-
-`sizeColumnsToFit = (paramsOrGridWidth?: ISizeColumnsToFitParams | number) => void;`
-
-
-### Example with a Return Value
-
-This example shows how to get the data from `ag_grid` as a [csv on the backend](https://www.ag-grid.com/javascript-data-grid/grid-api/#reference-export-getDataAsCsv). The data that was passed to the backend is then displayed as a toast with the data.
-
-```python
-import reflex as rx
-import reflex_enterprise as rxe
-import pandas as pd
-
-class AGGridStateAPI(rx.State):
- def handle_get_data(self, data: str):
- yield rx.toast(f"Got CSV data: {data}")
-
-df = pd.read_csv(
- "data/gapminder2007.csv"
-)
-
-column_defs = [
- \{"field": "country", "checkboxSelection": True\},
- \{"field": "pop"\},
- \{"field": "continent"\},
-]
-
-def ag_grid_api_argument():
- my_api = rxe.ag_grid.api(id="ag_grid_get_data_as_csv")
- return rx.vstack(
- rxe.ag_grid(
- id="ag_grid_get_data_as_csv",
- row_data=df.to_dict("records"),
- column_defs=column_defs,
- width="100%",
- height="40vh",
- ),
- rx.button("Get CSV data on backend", on_click=my_api.get_data_as_csv(callback=AGGridStateAPI.handle_get_data)),
- spacing="4",
- width="100%",
- )
-```
-
-The react code for the `get_data_as_csv` method of the AG Grid API is `getDataAsCsv = (params?: CsvExportParams) => string | undefined;`. Here the function returns a `string` (or undefined).
-
-In Reflex to handle this returned value it is necessary to pass a `callback` as an argument to the `get_data_as_csv` method that will get the returned value. In this example the `handle_get_data` event handler is passed as the callback. This event handler will be called with the returned value from the `get_data_as_csv` method.
diff --git a/docs/enterprise/ag_grid/model-wrapper.md b/docs/enterprise/ag_grid/model-wrapper.md
deleted file mode 100644
index 4615ee872..000000000
--- a/docs/enterprise/ag_grid/model-wrapper.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-order: 6
----
-
-# Model Wrapper
-
-A model wrapper is an utility used to wrap a database model and provide a consistent interface over it. It allows automatically adding new rows to the database, updating existing rows, and deleting rows.
-
-## Default Model Wrapper
-
-You can use the basic functionality of the model wrapper by using the `rxe.model_wrapper` function. This function takes a database model and returns a wrapper object that can be used to interact with the model.
-
-```python
-import reflex_enterprise as rxe
-
-def index_page():
- return rxe.model_wrapper(class_model=MyModel)
-```
-
-By default the model_wrapper use the infinite rows model from AgGrid.
-
-## Custom Model Wrapper
-
-If the default model wrapper does not fit your needs, you can create a custom model wrapper by subclassing the `rxe.ModelWrapper` class. This allows you to customize the behavior of the model wrapper to fit your specific use case.
-
-```python
-import reflex_enterprise as rxe
-
-class MyCustomWrapper(rxe.ModelWrapper[MyModel]):
- pass
-```
-
-In the custom model wrapper, you can override the following methods:
-- `_get_columns_defs`
-- `_get_data`
-- `_row_count`
-- `on_value_setter`
-
-to modify how the model wrapper will behave.
-
-
-## SSRM Model Wrapper
-
-The SSRM model wrapper, used with `rxe.model_wrapper_ssrm`, is a version of the model wrapper that allows you to use the ServerSideRowModel of AgGrid.
-
-```python
-import reflex_enterprise as rxe
-
-def index_page():
- return rxe.model_wrapper_ssrm(class_model=MyModel)
-```
-
-## SSRM Custom Model Wrapper
-
-In the same way you can extend the default model wrapper, you can extend the SSRM custom model wrapper by subclassing the `rxe.ModelWrapperSSRM` class. This allows you to customize the behavior of the model wrapper to fit your specific use case.
-
-```python
-import reflex_enterprise as rxe
-
-class MyCustomSSRMWrapper(rxe.ModelWrapperSSRM[MyModel]):
- pass
-```
-
-The overridable methods are the same as the standard model wrapper.
\ No newline at end of file
diff --git a/docs/enterprise/ag_grid/pivot-mode.md b/docs/enterprise/ag_grid/pivot-mode.md
deleted file mode 100644
index f2f9b8635..000000000
--- a/docs/enterprise/ag_grid/pivot-mode.md
+++ /dev/null
@@ -1,130 +0,0 @@
-```python exec
-import reflex as rx
-import reflex_enterprise as rxe
-from pcweb.pages.docs import enterprise
-```
-
-# Pivot Mode
-
-Pivot mode allows you to visualize your data in a different way than how they are originally structured in the data source. When pivoting on a column, the values in that column will be used as column headers. This allows you to see the data in a more compact way, and can be useful when you have a lot of data to display.
-
-To enable pivot mode, set the `pivot_mode` property to `True` in the grid props. Once pivot mode is enabled, you can define which column to pivot on by setting the `pivot` property in a column definition. In addition to the pivot column, at least one column definition must have `row_group` property set to `True` to define the row grouping.
-
-You can also define how rows are aggregated by passing the `agg_func` property in the column definition. The `agg_func` property should be set to a string that represents the aggregation function to use. The built-in aggregation functions are `sum`, `min`, `max`, `count`, `avg`, `first`, and `last`.
-
-You can find a live example here: [Pivot Mode Example](https://aggrid.reflex.run/pivot).
-
-```python demo exec
-import pandas as pd
-import reflex as rx
-
-import reflex_enterprise as rxe
-
-# Olympic winners data (originally from https://www.ag-grid.com/example-assets/olympic-winners.json)
-df = pd.read_json("data/olympic-winners.json")
-
-def pivot_page():
- return rxe.ag_grid(
- id="sandbox_grid",
- column_defs=[
- {"field": "country", "row_group": True},
- {"field": "sport", "pivot": True},
- {"field": "year", "pivot": True},
- {"field": "gold", "aggFunc": "sum"},
- ],
- loading=False,
- row_data=df.to_dict("records"),
- default_col_def={
- "flex": 1,
- "min_width": 130,
- "enable_value": True,
- "enable_row_group": True,
- "enable_pivot": True,
- },
- auto_group_column_def={
- "minWidth": 200,
- "pinned": "left",
- },
- pivot_mode=True,
- side_bar="columns",
- pivot_panel_show="always",
- width="100%",
- height="500px",
- ),
-```
-
-# Pivot using State
-
-```python demo exec
-import pandas as pd
-import reflex as rx
-
-import reflex_enterprise as rxe
-
-df = pd.read_csv("data/wind_dataset.csv")
-
-
-class PivotState(rx.State):
- """State for the sandbox page."""
-
- pivot = False
- row_grouping = False
-
- @rx.event
- def toggle_pivot(self):
- """Toggle the pivot."""
- self.pivot = not self.pivot
-
- @rx.event
- def toggle_row_grouping(self):
- """Toggle the row grouping."""
- self.row_grouping = not self.row_grouping
-
-
-def sandbox_page():
- """Sandbox page."""
- return rx.vstack(
- rx.hstack(
- rx.text("Toggle Pivot"),
- rx.switch(
- on_click=PivotState.toggle_pivot,
- name="pivot",
- checked=PivotState.pivot,
- ),
- rx.text("Toggle Row Grouping"),
- rx.switch(
- on_click=PivotState.toggle_row_grouping,
- name="row_grouping",
- checked=PivotState.row_grouping,
- )
- ),
- rxe.ag_grid(
- id="sandbox_grid",
- column_defs=[
- rxe.ag_grid.column_def(
- field="direction",
- pivot=True,
- ),
- rxe.ag_grid.column_def(
- field="strength",
- ),
- rxe.ag_grid.column_def(
- field="frequency",
- agg_func="count",
- row_group=PivotState.row_grouping,
- ),
- ],
- row_data=df.to_dict("records"),
- pivot_mode=PivotState.pivot,
- pivot_panel_show="onlyWhenPivoting",
- width="100%",
- height="500px",
- ),
- width="100%",
- )
-
-```
-
-📊 **Dataset source:** [wind_dataset.csv](https://raw.githubusercontent.com/plotly/datasets/master/wind_dataset.csv)
-
-
diff --git a/docs/enterprise/ag_grid/theme.md b/docs/enterprise/ag_grid/theme.md
deleted file mode 100644
index f88fa3924..000000000
--- a/docs/enterprise/ag_grid/theme.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-order: 3
----
-
-```python exec
-import reflex as rx
-import reflex_enterprise as rxe
-from pcweb.pages.docs import enterprise
-```
-
-# Themes
-
-```md alert warning
-# Only the old theme API of AG Grid is currently supported. The new theme API is not supported yet.
-```
-
-You can style your grid with a theme. AG Grid includes the following themes:
-
-1. `quartz`
-2. `alpine`
-3. `balham`
-4. `material`
-
-The grid uses `quartz` by default. To use any other theme, set it using the `theme` prop, i.e. `theme="alpine"`.
-
-```python
-import reflex as rx
-import reflex_enterprise as rxe
-import pandas as pd
-
-class AGGridThemeState(rx.State):
- """The app state."""
-
- theme: str = "quartz"
- themes: list[str] = ["quartz", "balham", "alpine", "material"]
-
-df = pd.read_csv("data/gapminder2007.csv")
-
-column_defs = [
- {"field": "country"},
- {"field": "pop", "headerName": "Population"},
- {"field": "lifeExp", "headerName": "Life Expectancy"},
-]
-
-def ag_grid_simple_themes():
- return rx.vstack(
- rx.hstack(
- rx.text("Theme:"),
- rx.select(AGGridThemeState.themes, value=AGGridThemeState.theme, on_change=AGGridThemeState.set_theme),
- ),
- rxe.ag_grid(
- id="ag_grid_basic_themes",
- row_data=df.to_dict("records"),
- column_defs=column_defs,
- theme=AGGridThemeState.theme,
- width="100%",
- height="40vh",
- ),
- width="100%",
- )
-```
-
-📊 **Dataset source:** [gapminder2007.csv](https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv)
\ No newline at end of file
diff --git a/docs/enterprise/ag_grid/value-transformers.md b/docs/enterprise/ag_grid/value-transformers.md
deleted file mode 100644
index c9de70ebb..000000000
--- a/docs/enterprise/ag_grid/value-transformers.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-order: 2
----
-
-```python exec
-import reflex as rx
-import reflex_enterprise as rxe
-from pcweb.pages.docs import enterprise
-```
-
-# Value Transformers
-
-AgGrid allow you to apply transformers based on the column of your grid. This allow you to perform operations on the data before displaying it on the grid, without having to pre-process the data on the backend, reducing the load on your application.
-
-TOC:
-- [Value Getter](#value-getter)
-- [Value Formatter](#value-formatter)
-
-## Value Getter
-
-`value_getter` is a property of the column definition that allows you to define a function that will be called to get the value of the cell. This function will receive the row data as a parameter and should return the value to be displayed on the cell.
-
-If you have two columns `col_a` and `col_b` and you want to display the sum of these two columns in a third column `sum`, you can define the `value_getter` of `sum` as follows:
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-import pandas as pd
-
-
-df = pd.DataFrame({"col_a": [1, 2, 3, 4, 5], "col_b": [10, 20, 30, 40, 50]})
-
-column_defs = [
- {"field": "col_a", "header_name": "Column A"},
- {"field": "col_b", "header_name": "Column B"},
- {"field": "sum", "header_name": "Sum", "value_getter": "params.data.col_a + params.data.col_b"},
- rxe.ag_grid.column_def(field="diff", header_name="Difference", value_getter="params.data.col_b - params.data.col_a"),
-]
-
-def ag_grid_value_getter():
- return rxe.ag_grid(
- id="ag_grid_value_getter",
- row_data=df.to_dict("records"),
- column_defs=column_defs,
- width="100%",
- )
-```
-
-## Value Formatter
-
-`value_formatter` is a property of the column definition that allows you to define a function that will be called to format the value of the cell. This function will receive the value of the cell as a parameter and should return the formatted value to be displayed on the cell.
-
-If you have a column `price` and you want to display the price with a currency symbol, you can define the `value_formatter` of `price` as follows:
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-import pandas as pd
-
-df = pd.DataFrame({"product_name":["Product A", "Product B", "Product C", "Product D", "Product E"], "price": [100, 200, 300, 400, 500]})
-column_defs = [
- {"field": "product_name", "header_name": "Product Name"},
- {"field": "price", "header_name": "Price ($)", "value_formatter": "'$' + params.value"},
- rxe.ag_grid.column_def(col_id="price_eur", header_name="Price (€)", value_formatter="params.data.price + ' €'"),
-]
-
-def ag_grid_value_formatter():
- return rxe.ag_grid(
- id="ag_grid_value_formatter",
- row_data=df.to_dict("records"),
- column_defs=column_defs,
- width="100%",
- )
-```
-
-
diff --git a/docs/enterprise/built-with-reflex.md b/docs/enterprise/built-with-reflex.md
deleted file mode 100644
index 8fb0f60b9..000000000
--- a/docs/enterprise/built-with-reflex.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Built with Reflex Badge
-
-The "Built with Reflex" badge appears in the bottom right corner of apps using reflex-enterprise components.
-
-## Removing the Badge
-
-To remove the badge, you need to be on the Enterprise tier.
-
-## Configuration
-
-```python
-import reflex_enterprise as rxe
-
-config = rxe.Config(
- show_built_with_reflex=False, # Requires paid tier
-)
-```
\ No newline at end of file
diff --git a/docs/enterprise/components.md b/docs/enterprise/components.md
deleted file mode 100644
index 3e82efae4..000000000
--- a/docs/enterprise/components.md
+++ /dev/null
@@ -1,119 +0,0 @@
----
-title: Enterprise Components
----
-
-```python exec
-import reflex as rx
-from pcweb.pages.docs import enterprise
-from pcweb.templates.docpage import h1_comp, text_comp_2
-from pcweb.components.icons import get_icon
-
-def enterprise_component_grid():
- sections = [
- {
- "title": "AG Grid",
- "description": "Advanced data grid with sorting, filtering, editing, and pagination",
- "link": enterprise.ag_grid.index.path,
- "components": [
- ("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": enterprise.ag_chart.path,
- "components": [
- ("Overview", enterprise.ag_chart.path),
- ]
- },
- {
- "title": "Interactive Components",
- "description": "Drag-and-drop and mapping functionality",
- "link": enterprise.drag_and_drop.path,
- "components": [
- ("Drag and Drop", enterprise.drag_and_drop.path),
- ("Mapping", enterprise.map.index.path),
- ]
- },
- {
- "title": "Mantine",
- "description": "Rich UI components from Mantine library",
- "link": enterprise.mantine.index.path,
- "components": [
- ("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", enterprise.mantine.semi_circle_progress.path),
- ("Spoiler", enterprise.mantine.spoiler.path),
- ("Tags Input", enterprise.mantine.tags_input.path),
- ("Timeline", enterprise.mantine.timeline.path),
- ("Tree", enterprise.mantine.tree.path),
- ]
- }
- ]
-
- cards = []
- for section in sections:
- cards.append(
- rx.box(
- rx.link(
- rx.el.h1(
- section["title"],
- class_name="font-large text-slate-12",
- ),
- get_icon("new_tab", class_name="text-slate-11 [&>svg]:size-4"),
- href=section["link"],
- underline="none",
- class_name="px-4 py-2 bg-slate-1 hover:bg-slate-3 transition-bg flex flex-row justify-between items-center !text-slate-12",
- ),
- rx.text(
- section["description"],
- class_name="px-4 py-2 font-small text-slate-9 border-t border-slate-5",
- ),
- rx.box(
- *[
- rx.link(
- comp[0],
- href=comp[1],
- class_name="font-small text-slate-11 hover:!text-violet-9 transition-color w-fit",
- )
- for comp in section["components"]
- ],
- class_name="flex flex-col gap-2.5 px-4 py-2 border-t border-slate-5",
- ),
- class_name="flex flex-col border border-slate-5 rounded-xl bg-slate-2 shadow-large overflow-hidden",
- )
- )
-
- return rx.box(
- *cards,
- class_name="grid grid-cols-1 lg:grid-cols-2 gap-6",
- )
-
-component_grid = enterprise_component_grid()
-```
-
-```python eval
-h1_comp(text="Enterprise Components")
-```
-
-```python eval
-text_comp_2(text="Advanced UI components and features to enhance your Reflex applications. Available for free with the 'Built with Reflex' badge, or without the badge with an enterprise license.")
-```
-
-```python eval
-component_grid
-```
\ No newline at end of file
diff --git a/docs/enterprise/drag-and-drop.md b/docs/enterprise/drag-and-drop.md
deleted file mode 100644
index ee76470e6..000000000
--- a/docs/enterprise/drag-and-drop.md
+++ /dev/null
@@ -1,584 +0,0 @@
----
-title: Drag and Drop
----
-
-```python exec
-import reflex as rx
-import reflex_enterprise as rxe
-from pcweb.pages.docs import enterprise
-```
-
-# Drag and Drop
-
-Reflex Enterprise provides comprehensive drag and drop functionality for creating interactive UI elements using the `rxe.dnd` module. Built on top of react-dnd, it offers both high-level components for common use cases and low-level hooks for advanced scenarios.
-
-```md alert warning
-# Important: Always decorate functions defining `rxe.dnd.draggable` components with `@rx.memo` to avoid compilation errors.
-```
-
-## Basic Usage
-
-### Simple Drag and Drop
-
-Here's a basic example showing how to create a draggable item and drop target:
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-class BasicDndState(rx.State):
- drop_count: int = 0
-
- def increment_drop_count(self):
- self.drop_count += 1
-
-
-@rx.memo
-def draggable_card():
- return rxe.dnd.draggable(
- rx.card(
- rx.text("Drag me!", weight="bold"),
- rx.text("I can be moved around"),
- bg="blue.500",
- color="white",
- p=4,
- cursor="grab",
- width="200px",
- height="100px"
- ),
- type="BasicCard",
- item={"message": "Hello from draggable!"},
- )
-
-def basic_drag_drop():
- return rx.vstack(
- rx.text(f"Items dropped: {BasicDndState.drop_count}"),
- rx.hstack(
- draggable_card(),
- rxe.dnd.drop_target(
- rx.box(
- "Drop Zone",
- bg="gray.100",
- border="2px dashed gray",
- min_height="150px",
- min_width="200px",
- display="flex",
- align_items="center",
- justify_content="center",
- font_weight="bold"
- ),
- accept=["BasicCard"],
- on_drop=BasicDndState.increment_drop_count,
- ),
- spacing="4",
- align="start"
- ),
- spacing="4"
- )
-```
-
-### Multi-Position Drag and Drop
-
-Create a draggable item that can be moved between multiple drop targets:
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-class MultiPositionState(rx.State):
- card_position: int = 0
-
- def set_card_position(self, position: int):
- self.card_position = position
-
-
-@rx.memo
-def movable_card():
- return rxe.dnd.draggable(
- rx.card(
- rx.text("Movable Card", weight="bold"),
- rx.text("Position: " + MultiPositionState.card_position.to_string()),
- bg="purple.500",
- color="white",
- p=4,
- width="180px",
- height="120px"
- ),
- type="MovableCard",
- border="2px solid purple",
- )
-
-def drop_zone(position: int):
- params = rxe.dnd.DropTarget.collected_params
- return rxe.dnd.drop_target(
- rx.cond(
- MultiPositionState.card_position == position,
- movable_card(),
- rx.box(
- f"Drop Zone {position}",
- color="gray.600",
- font_weight="bold"
- )
- ),
- width="200px",
- height="200px",
- border="2px solid red",
- border_color=rx.cond(params.is_over, "green.500", "red.500"),
- bg=rx.cond(params.is_over, "green.100", "blue.100"),
- accept=["MovableCard"],
- on_drop=lambda _: MultiPositionState.set_card_position(position),
- display="flex",
- align_items="center",
- justify_content="center"
- )
-
-def multi_position_example():
- return rx.vstack(
- rx.text("Drag the card between positions", weight="bold"),
- rx.grid(
- drop_zone(0),
- drop_zone(1),
- drop_zone(2),
- drop_zone(3),
- columns="2",
- spacing="4"
- ),
- spacing="4"
- )
-```
-
-## Advanced Features
-
-### State Tracking with Collected Parameters
-
-Access drag and drop state information using collected parameters:
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-class StateTrackingState(rx.State):
- drag_info: str = "No drag activity"
-
- def set_drag_info(self, value: str):
- self.drag_info = value
-
-@rx.memo
-def tracked_draggable():
- drag_params = rxe.dnd.Draggable.collected_params
- return rxe.dnd.draggable(
- rx.card(
- rx.text("Tracked Draggable"),
- rx.text(rx.cond(drag_params.is_dragging, "Dragging...", "Ready to drag")),
- bg=rx.cond(drag_params.is_dragging, "orange.500", "blue.500"),
- color="white",
- p=4,
- opacity=rx.cond(drag_params.is_dragging, 0.5, 1.0)
- ),
- type="TrackedItem",
- on_end=StateTrackingState.set_drag_info("Drag ended")
- )
-
-def tracked_drop_target():
- drop_params = rxe.dnd.DropTarget.collected_params
- return rxe.dnd.drop_target(
- rx.box(
- rx.text("Smart Drop Zone"),
- rx.text(rx.cond(drop_params.is_over, "Ready to receive!", "Waiting...")),
- bg=rx.cond(drop_params.is_over, "green.200", "gray.100"),
- border=rx.cond(drop_params.is_over, "2px solid green", "2px dashed gray"),
- p=4,
- min_height="150px",
- display="flex",
- flex_direction="column",
- align_items="center",
- justify_content="center"
- ),
- accept=["TrackedItem"],
- on_drop=StateTrackingState.set_drag_info("Item successfully dropped!"),
- on_hover=StateTrackingState.set_drag_info("Item hovering over drop zone")
- )
-
-def state_tracking_example():
- return rx.vstack(
- rx.text(f"Status: {StateTrackingState.drag_info}"),
- rx.hstack(
- tracked_draggable(),
- tracked_drop_target(),
- spacing="4"
- ),
- spacing="4"
- )
-```
-
-### Dynamic Lists with Drag and Drop
-
-Create dynamic draggable lists using `rx.foreach`:
-
-```python demo exec
-import dataclasses
-import reflex as rx
-import reflex_enterprise as rxe
-
-@dataclasses.dataclass
-class ListItem:
- id: str
- text: str
- list_id: str
-
-class DynamicListState(rx.State):
- list_a: list[ListItem] = [
- ListItem(id="1", text="Item 1", list_id="A"),
- ListItem(id="2", text="Item 2", list_id="A"),
- ListItem(id="3", text="Item 3", list_id="A"),
- ]
- list_b: list[ListItem] = [
- ListItem(id="4", text="Item 4", list_id="B"),
- ListItem(id="5", text="Item 5", list_id="B"),
- ]
-
- def move_item(self, item_data: dict, target_list: str):
- item_id = item_data.get("id")
- source_list = item_data.get("list_id")
-
- if not item_id or not source_list:
- return
-
- # Find the item in the source list
- source_items = getattr(self, f"list_{source_list.lower()}")
- item_to_move = None
- for item in source_items:
- if item.id == item_id:
- item_to_move = item
- break
-
- if not item_to_move:
- return
-
- # Remove from source list only
- if source_list == "A":
- self.list_a = [item for item in self.list_a if item.id != item_id]
- else:
- self.list_b = [item for item in self.list_b if item.id != item_id]
-
- # Create new item for target list
- new_item = ListItem(
- id=item_id,
- text=item_to_move.text,
- list_id=target_list
- )
-
- # Add to target list
- if target_list == "A":
- self.list_a.append(new_item)
- else:
- self.list_b.append(new_item)
-
-@rx.memo
-def draggable_list_item(item: ListItem):
- return rxe.dnd.draggable(
- rx.card(
- rx.text(item.text, weight="bold"),
- rx.text(f"From List {item.list_id}", size="2", color="gray.600"),
- p=3,
- cursor="grab",
- _hover={"bg": "gray.50"}
- ),
- type="ListItem",
- item={"id": item.id, "text": item.text, "list_id": item.list_id},
- )
-
-def droppable_list(title: str, items: list[ListItem], list_id: str):
- return rxe.dnd.drop_target(
- rx.vstack(
- rx.text(title, weight="bold", size="5"),
- rx.vstack(
- rx.foreach(items, lambda item, index: draggable_list_item(item=item)),
- spacing="2",
- min_height="200px",
- width="100%"
- ),
- bg="gray.50",
- p=4,
- border_radius="md",
- border="2px dashed gray",
- width="250px"
- ),
- accept=["ListItem"],
- on_drop=lambda item: DynamicListState.move_item(item, list_id)
- )
-
-def dynamic_list_example():
- return rx.hstack(
- droppable_list("List A", DynamicListState.list_a, "A"),
- droppable_list("List B", DynamicListState.list_b, "B"),
- spacing="6",
- align="start"
- )
-```
-
-## Core Components
-
-### Draggable
-
-The `rxe.dnd.draggable` component makes any element draggable:
-
-**Key Properties:**
-- `type`: String identifier for drag type matching
-- `item`: Data object passed to drop handlers
-- `on_end`: Called when drag operation ends
-
-### Drop Target
-
-The `rxe.dnd.drop_target` component creates areas that accept draggable items:
-
-**Key Properties:**
-- `accept`: List of drag types this target accepts
-- `on_drop`: Called when item is dropped
-- `on_hover`: Called when item hovers over target
-
-### Collected Parameters
-
-Access real-time drag/drop state:
-
-**Draggable Parameters (`rxe.dnd.Draggable.collected_params`):**
-- `is_dragging`: Boolean indicating if item is being dragged
-
-**Drop Target Parameters (`rxe.dnd.DropTarget.collected_params`):**
-- `is_over`: Boolean indicating if draggable is hovering
-- `can_drop`: Boolean indicating if drop is allowed
-
-# API Reference
-
-### rxe.dnd.draggable
-
-Creates a draggable component that can be moved around the interface.
-
-**Parameters:**
-
-- **`type`** (str, required): String identifier that must match the `accept` list of drop targets
-- **`item`** (dict | Callable): Data object passed to drop handlers. Can be a static dictionary or a function that receives a `DragSourceMonitor` and returns data
-- **`preview_options`** (dict): Configuration for the drag preview appearance
-- **`options`** (dict): Additional drag source options like `dropEffect`
-- **`on_end`** (EventHandler): Event handler called when drag operation completes
-- **`can_drag`** (Callable): Function that determines if the item can be dragged
-- **`is_dragging`** (Callable): Function to override the default dragging state detection
-- **`collect`** (Callable): Function to collect custom properties from the drag monitor
-
-### rxe.dnd.drop_target
-
-Creates a drop target that can receive draggable items.
-
-**Parameters:**
-
-- **`accept`** (str | list[str], required): Drag type(s) this target accepts
-- **`options`** (dict): Additional drop target configuration options
-- **`on_drop`** (EventHandler): Event handler called when an item is dropped, receives the `item` data
-- **`on_hover`** (EventHandler): Event handler called when an item hovers over the target
-- **`can_drop`** (Callable): Function that determines if a specific item can be dropped
-- **`collect`** (Callable): Function to collect custom properties from the drop monitor
-
-## Monitor Classes
-
-### DragSourceMonitor
-
-Provides information about the drag operation state:
-
-- **`is_dragging()`**: Returns `True` if this item is currently being dragged
-- **`can_drag()`**: Returns `True` if the item can be dragged
-- **`get_item()`**: Returns the item data being dragged
-- **`get_item_type()`**: Returns the drag type string
-- **`get_drop_result()`**: Returns the drop result (available in `on_end`)
-- **`did_drop()`**: Returns `True` if the item was successfully dropped
-
-### DropTargetMonitor
-
-Provides information about the drop target state:
-
-- **`is_over()`**: Returns `True` if a draggable item is hovering over this target
-- **`can_drop()`**: Returns `True` if the hovering item can be dropped
-- **`get_item()`**: Returns the item data of the hovering draggable
-- **`get_item_type()`**: Returns the drag type of the hovering item
-
-## Default Collected Parameters
-
-### Draggable.collected_params
-
-```python
-{
- "is_dragging": bool, # True when this item is being dragged
- "can_drag": bool # True when this item can be dragged
-}
-```
-
-### DropTarget.collected_params
-
-```python
-{
- "is_over": bool, # True when a draggable is hovering
- "can_drop": bool, # True when the hovering item can be dropped
- "item": dict | None # Data from the hovering draggable item
-}
-```
-
-## Advanced Usage Examples
-
-### Data Passing with Item Parameter
-
-The `item` parameter allows you to pass data from draggable components to drop handlers:
-
-```python demo exec toggle
-import reflex as rx
-import reflex_enterprise as rxe
-
-class SimpleState(rx.State):
- message: str = "No items dropped yet"
-
- def set_message_from_item(self, item: dict):
- self.message = f"Dropped: {item['name']}"
-
-def simple_draggable():
- return rxe.dnd.draggable(
- rx.box(
- "Drag me!",
- p=4,
- bg="blue.100",
- border="1px solid blue",
- cursor="grab"
- ),
- type="simple",
- item={"name": "test_item", "value": 42}
- )
-
-def simple_drop_target():
- return rxe.dnd.drop_target(
- rx.box(
- rx.text(SimpleState.message),
- p=4,
- bg="gray.100",
- border="2px dashed gray",
- min_height="100px"
- ),
- accept=["simple"],
- on_drop=SimpleState.set_message_from_item
- )
-
-def item_data_example():
- return rx.vstack(
- simple_draggable(),
- simple_drop_target(),
- spacing="4"
- )
-```
-
-### Custom Collect Functions
-
-The `collect` parameter allows you to access drag and drop state information in real-time:
-
-```python demo exec toggle
-import reflex as rx
-import reflex_enterprise as rxe
-
-class CollectState(rx.State):
- drag_info: str = "No drag activity"
- drop_info: str = "No drop activity"
-
- def handle_drop(self, item: dict):
- self.drop_info = f"Dropped: {item.get('name', 'Unknown')}"
- return rx.toast(f"Successfully dropped {item.get('name', 'item')}")
-
-
-
-def collect_draggable():
- params = rxe.dnd.Draggable.collected_params
- return rxe.dnd.draggable(
- rx.box(
- rx.vstack(
- rx.text("Drag me!", weight="bold"),
- rx.text(f"Dragging: {params.is_dragging}", size="2"),
- rx.text(f"Can drag: {params.can_drag}", size="2"),
- spacing="1"
- ),
- p=4,
- bg=rx.cond(params.is_dragging, "blue.200", "blue.100"),
- border="1px solid blue",
- cursor=rx.cond(params.is_dragging, "grabbing", "grab"),
- opacity=rx.cond(params.is_dragging, 0.7, 1.0)
- ),
- type="collect_item",
- item={"id": "collect_test", "name": "Test Item"}
- )
-
-def collect_drop_target():
- params = rxe.dnd.DropTarget.collected_params
- return rxe.dnd.drop_target(
- rx.box(
- rx.vstack(
- rx.text("Drop Zone", weight="bold"),
- rx.text(f"Is over: {params.is_over}", size="2"),
- rx.text(f"Can drop: {params.can_drop}", size="2"),
- rx.cond(
- params.item,
- rx.text(f"Hovering item: {params.item.get('name', 'Unknown')}", size="2"),
- rx.text("No item hovering", size="2")
- ),
- spacing="1"
- ),
- p=4,
- bg=rx.cond(
- params.is_over & params.can_drop,
- "green.200",
- rx.cond(params.is_over, "yellow.200", "gray.100")
- ),
- border=rx.cond(
- params.is_over & params.can_drop,
- "2px solid green",
- rx.cond(params.is_over, "2px solid yellow", "2px dashed gray")
- ),
- min_height="120px"
- ),
- accept=["collect_item"],
- on_drop=CollectState.handle_drop,
- )
-
-def custom_collect_example():
- return rx.vstack(
- rx.text("Real-time Monitor State", weight="bold", size="4"),
- rx.hstack(
- collect_draggable(),
- collect_drop_target(),
- spacing="6",
- align="start"
- ),
- rx.text(CollectState.drop_info, size="2", color="gray.600"),
- spacing="4"
- )
-```
-
-## Provider
-
-Drag and drop functionality requires the `rxe.dnd.provider` component to wrap your app. The provider is automatically added when using `draggable` or `drop_target` components.
-
-For manual control:
-
-```python
-def app():
- return rxe.dnd.provider(
- # Your app content
- your_app_content(),
- backend="HTML5" # or "Touch" for mobile
- )
-```
-
-## Best Practices
-
-1. **Always use `@rx.memo`** on functions containing draggable components
-2. **Use descriptive type names** for better debugging
-3. **Handle edge cases** in drop handlers (invalid items, etc.)
-4. **Provide visual feedback** using collected parameters
-5. **Test on mobile devices** with touch backend
-6. **Keep item data lightweight** for better performance
-
----
-
-[← Back to main documentation]({enterprise.overview.path})
diff --git a/docs/enterprise/mantine/autocomplete.md b/docs/enterprise/mantine/autocomplete.md
deleted file mode 100644
index 6a9f826c3..000000000
--- a/docs/enterprise/mantine/autocomplete.md
+++ /dev/null
@@ -1,22 +0,0 @@
----
-title: Autocomplete
----
-
-# Autocomplete component
-
-`rxe.mantine.autocomplete` is a component for providing suggestions as the user types. It is useful for enhancing user experience by offering relevant options based on input.
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-def autocomplete_example():
- return rx.vstack(
- rxe.mantine.autocomplete(
- data=["Apple", "Banana", "Cherry", "Date", "Elderberry"],
- placeholder="Type a fruit",
- label="Fruit Autocomplete",
- description="Select a fruit from the list",
- ),
- )
-```
diff --git a/docs/enterprise/mantine/collapse.md b/docs/enterprise/mantine/collapse.md
deleted file mode 100644
index 7ed250261..000000000
--- a/docs/enterprise/mantine/collapse.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-title: Collapse
----
-
-# Collapse component
-
-`rxe.mantine.collapse` is a component that allows you to create collapsible sections in your application. It is useful for hiding or showing content based on user interaction, such as clicking a button or a link.
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-class CollapseState(rx.State):
- is_open: bool = False
-
- @rx.event
- def toggle_collapse(self):
- self.is_open = not self.is_open
-
-def collapse_example():
- return rx.vstack(
- rxe.mantine.collapse(
- rx.text(
- "This is a collapsible section. Click the button to toggle the collapse.",
- font_size="lg",
- ),
- in_=CollapseState.is_open,
- label="Collapsible Section",
- description="Click the button to toggle the collapse.",
- ),
- rx.button(
- "Toggle Collapse",
- on_click=lambda: CollapseState.toggle_collapse,
- ),
- )
-```
diff --git a/docs/enterprise/mantine/combobox.md b/docs/enterprise/mantine/combobox.md
deleted file mode 100644
index d212a9f1c..000000000
--- a/docs/enterprise/mantine/combobox.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-title: Combobox
----
-
-```python exec
-import reflex as rx
-import reflex_enterprise as rxe
-from pcweb.pages.docs import enterprise
-```
-
-# Combobox
-
-`rxe.mantine.combobox` is a wrapping of the mantine component [Combobox](https://mantine.dev/core/combobox/). It is a simple component that can be used to display a list of options, and allows the user to select one or more options from the list. It can be used in various contexts, such as in a form or as a standalone component.
-
-```python
-import reflex as rx
-import reflex_enterprise as rxe
-
-def combobox_page():
- """Combobox demo."""
- return rxe.mantine.combobox(
- rxe.mantine.combobox.target(
- rx.input(type="button"),
- ),
- rxe.mantine.combobox.dropdown(
- rxe.mantine.combobox.options(
- rxe.mantine.combobox.option("Option 1"),
- rxe.mantine.combobox.option("Option 2"),
- rxe.mantine.combobox.option("Option 3"),
- ),
- ),
- label="Combobox",
- placeholder="Select a value",
- )
-```
-
diff --git a/docs/enterprise/mantine/index.md b/docs/enterprise/mantine/index.md
deleted file mode 100644
index 58d48822d..000000000
--- a/docs/enterprise/mantine/index.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: Mantine
-order: 4
----
-
-# Mantine
-
-Mantine is a React component library that provides a set of high-quality components and hooks for building modern web applications. It is designed to be flexible, customizable, and easy to use, making it a popular choice among developers.
-
-Some of those components have been integrated into Reflex Enterprise, allowing you to use them in your Reflex applications. The following components are available:
-- JsonInput
-- Autocomplete
-- ComboBox
-- Multiselect
-- Pill
-- PillsInput
-- TagsInput
-- Tree
-- RingProgress
-- SemiCircleProgress
-- LoadingOverlay
-- NumberFormatter
-- Spoiler
-- Timeline
-- Collapse
-
diff --git a/docs/enterprise/mantine/json-input.md b/docs/enterprise/mantine/json-input.md
deleted file mode 100644
index 573773237..000000000
--- a/docs/enterprise/mantine/json-input.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: JSON Input
----
-
-# JSON Input
-
-`rxe.mantine.json_input` is a component that allows you to input JSON data in a user-friendly way. It provides validation and formatting features to ensure that the JSON data is correctly structured.
-
-## Example
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-class JsonInputState(rx.State):
- json_data: str = ""
-
- def set_json_data(self, value: str):
- self.json_data = value
-
-
-def json_input_example():
- return rxe.mantine.json_input(
- id="json-input",
- value=JsonInputState.json_data,
- placeholder="Enter JSON data",
- label="JSON Input",
- description="Please enter valid JSON data.",
- required=True,
- size="md",
- format_on_blur=True,
- on_change=JsonInputState.set_json_data,
- width="300px",
- )
-```
diff --git a/docs/enterprise/mantine/loading-overlay.md b/docs/enterprise/mantine/loading-overlay.md
deleted file mode 100644
index 8aebe7cdd..000000000
--- a/docs/enterprise/mantine/loading-overlay.md
+++ /dev/null
@@ -1,32 +0,0 @@
----
-title: Loading Overlay
----
-
-# Loading Overlay component
-`rxe.mantine.loading_overlay` is a component that displays a loading overlay on top of its children. It is useful for indicating that a process is ongoing and prevents user interaction with the underlying content.
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-class LoadingOverlayState(rx.State):
- loading: bool = False
-
- @rx.event
- def toggle_loading(self):
- self.loading = not self.loading
-
-def loading_overlay_example():
- return rx.container(
- rxe.mantine.loading_overlay(
- rx.text(
- "Loading Overlay Example",
- height="200px",
- width="100px",
- ),
- overlay_props={"radius": "sm", "blur": 2},
- visible=LoadingOverlayState.loading,
- z_index=1000,
- ),
- ),rx.button("Toggle Loading", on_click=LoadingOverlayState.toggle_loading),
-```
diff --git a/docs/enterprise/mantine/multi-select.md b/docs/enterprise/mantine/multi-select.md
deleted file mode 100644
index 5137409be..000000000
--- a/docs/enterprise/mantine/multi-select.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: MultiSelect
----
-
-# MultiSelect component
-
-`rxe.mantine.multi_select` is a component for selecting multiple options from a list. It allows users to choose one or more items, making it suitable for scenarios where multiple selections are required.
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-class MultiSelectState(rx.State):
- selected_fruits: list = []
-
- def set_selected_fruits(self, value: list):
- self.selected_fruits = value
-
-
-def multi_select_example():
- return rx.vstack(
- rxe.mantine.multi_select(
- label="Select fruits",
- placeholder="Pick all that you like",
- data=["Apple", "Banana", "Cherry", "Date", "Elderberry"],
- value=MultiSelectState.selected_fruits,
- on_change=MultiSelectState.set_selected_fruits,
- )
- )
-
-```
diff --git a/docs/enterprise/mantine/number-formatter.md b/docs/enterprise/mantine/number-formatter.md
deleted file mode 100644
index d2833125d..000000000
--- a/docs/enterprise/mantine/number-formatter.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: Number Formatter
----
-
-# Number Formatter component
-`rxe.mantine.number_formatter` is a component for formatting numbers in a user-friendly way. It allows you to specify the format, precision, and other options for displaying numbers.
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-def number_formatter_example():
- return rx.vstack(
- rxe.mantine.number_formatter(
- value=100,
- prefix="$",
- ),
- rxe.mantine.number_formatter(
- value=100,
- suffix="€",
- ),
- rxe.mantine.number_formatter(
- value=1234567.89,
- thousand_separator=True,
- ),
- )
-```
diff --git a/docs/enterprise/mantine/pill.md b/docs/enterprise/mantine/pill.md
deleted file mode 100644
index e401685eb..000000000
--- a/docs/enterprise/mantine/pill.md
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: Pill
----
-
-```python exec
-import reflex as rx
-import reflex_enterprise as rxe
-from pcweb.pages.docs import enterprise
-```
-
-# Pill
-
-`rxe.mantine.pill` is a wrapping of the mantine component [Pill](https://mantine.dev/core/pill/). It is a simple component that can be used to display a small piece of information, such as a tag or a label. It can be used in various contexts, such as in a list of tags or labels, or as a standalone component.
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-def pill_page():
- """Pill demo."""
- return rxe.mantine.pill(
- "Pill",
- color="blue",
- size="md",
- variant="outline",
- radius="xl",
- with_remove_button=True,
- on_remove=lambda: rx.toast("Pill on_remove triggered"),
- )
-```
-
-## Pill Group
-`rxe.mantine.pill.group` allows grouping multiple `rxe.mantine.pill` components together, with a predefined layout.
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-def pill_group_page():
- """Pill demo."""
- return rxe.mantine.pill.group(
- rxe.mantine.pill("Pill 1"),
- rxe.mantine.pill("Pill 2"),
- )
-```
-
-
-# PillsInput
-
-`rxe.mantine.pills_input` is a wrapping of the mantine component [PillsInput](https://mantine.dev/core/pills-input/). It is an utility component that can be used to display a list of tags or labels. It can be used in various contexts, such as in a form or as a standalone component.
-By itself it does not include any logic, it only renders given children.
-
-```md alert info
-# For a fully functional out-of-the-box component, consider using [`rxe.mantine.tags_input`](/docs/enterprise/mantine/tags-input/) instead.
-```
-
-## Example
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-class PillInputState(rx.State):
- """State for the PillsInput demo."""
-
- tags: set[str] = {"Foo", "Bar"}
-
- @rx.event
- def add_tag(self, tag: str):
- """Add a tag to the list of tags."""
- self.tags.add(tag)
-
- @rx.event
- def remove_tag(self, tag: str):
- """Remove a tag from the list of tags."""
- self.tags.remove(tag)
-
-def pills_input_page():
- """PillsInput demo."""
- return rxe.mantine.pills_input(
- rxe.mantine.pill.group(
- rx.foreach(
- PillInputState.tags, lambda tag: rxe.mantine.pill(tag, with_remove_button=True, on_remove=PillInputState.remove_tag(tag))
- ),
- rxe.mantine.pills_input.field(
- placeholder="Enter tags",
- # on_blur=PillInputState.add_tag,
- ),
- ),
- label="PillsInput",
- id="pills-input",
- value=["tag1", "tag2"],
- )
-```
diff --git a/docs/enterprise/mantine/ring-progress.md b/docs/enterprise/mantine/ring-progress.md
deleted file mode 100644
index 9612531d2..000000000
--- a/docs/enterprise/mantine/ring-progress.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: Ring Progress
----
-
-# Ring Progress component
-
-`rxe.mantine.ring_progress` is a component for displaying progress in a circular format. It is useful for visualizing completion percentages or other metrics in a compact and visually appealing way.
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-import random
-
-class RingProgressState(rx.State):
- value: int = 50
-
- @rx.event
- def random(self):
- self.value = random.randint(0, 100)
-
-def ring_progress_example():
- return rx.vstack(
- rxe.mantine.ring_progress(
- size=100,
- sections=[
- {"value": RingProgressState.value, "color": "blue"},
- ],
- ),
- rx.button("Randomize", on_click=RingProgressState.random),
- )
-```
diff --git a/docs/enterprise/mantine/semi-circle-progress.md b/docs/enterprise/mantine/semi-circle-progress.md
deleted file mode 100644
index 3f7f1f5df..000000000
--- a/docs/enterprise/mantine/semi-circle-progress.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Semi Circle Progress
----
-
-# Semi Circle Progress component
-`rxe.mantine.semi_circle_progress` is a component for displaying progress in a semi-circular format. It is useful for visualizing completion percentages or other metrics in a compact and visually appealing way.
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-import random
-
-class SemiCircleProgressState(rx.State):
- value: int = 50
-
- @rx.event
- def random(self):
- self.value = random.randint(0, 100)
-
-def semi_circle_progress_example():
- return rx.vstack(
- rxe.mantine.semi_circle_progress(
- size=100,
- value=SemiCircleProgressState.value,
- ),
- rx.button("Randomize", on_click=SemiCircleProgressState.random),
- )
-```
diff --git a/docs/enterprise/mantine/spoiler.md b/docs/enterprise/mantine/spoiler.md
deleted file mode 100644
index 09a1b0dc1..000000000
--- a/docs/enterprise/mantine/spoiler.md
+++ /dev/null
@@ -1,22 +0,0 @@
----
-title: Spoiler
----
-
-# Spoiler component
-
-`rxe.mantine.spoiler` is a component that allows you to hide or reveal content. It is useful for displaying additional information or details that may not be immediately relevant to the user.
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-def spoiler_example():
- return rx.vstack(
- rxe.mantine.spoiler(
- "This is a spoiler zone where lorem ipsum text dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...",
- max_height=50,
- show_label="Show more",
- hide_label="Show less",
- ),
- )
-```
diff --git a/docs/enterprise/mantine/tags-input.md b/docs/enterprise/mantine/tags-input.md
deleted file mode 100644
index 5b24a1a63..000000000
--- a/docs/enterprise/mantine/tags-input.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: TagsInput
----
-
-# TagsInput
-
-`rxe.mantine.tags_input` is a wrapping of the mantine component [TagsInput](https://mantine.dev/core/tags-input/). It is an utility component that can be used to display a list of tags or labels. It can be used in various contexts, such as in a form or as a standalone component.
-
-```md alert info
-# You can use the props mentioned in the Mantine documentation, but they need to be passed in snake_case.
-```
-
-## Basic Example
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-def tags_input_simple_page():
- """TagsInput demo."""
- return rxe.mantine.tags_input(
- placeholder="Enter tags",
- label="Press Enter to ad a tag",
- )
-```
-
-## State Example
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-class TagsInputState(rx.State):
- """State for the TagsInput component."""
-
- tags: list[str] = ["Tag1", "Tag2"]
-
- @rx.event
- def update_tags(self, tags: list[str]):
- """Add a tag to the list of tags."""
- self.tags = tags
-
-def tags_input_page():
- """TagsInput demo."""
- return rxe.mantine.tags_input(
- value=TagsInputState.tags,
- on_change=TagsInputState.update_tags,
- placeholder="Enter tags",
- label="TagsInput",
- description="This is a TagsInput component",
- error="",
- size="md",
- radius="xl",
- )
-```
diff --git a/docs/enterprise/mantine/timeline.md b/docs/enterprise/mantine/timeline.md
deleted file mode 100644
index 32843a35b..000000000
--- a/docs/enterprise/mantine/timeline.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-title: Timeline
----
-
-# Timeline component
-`rxe.mantine.timeline` is a component for displaying a sequence of events or milestones in a linear format. It is useful for visualizing progress, history, or any sequential information.
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-def timeline_example():
- return rx.vstack(
- rxe.mantine.timeline(
- rxe.mantine.timeline.item(
- title="Step 1",
- bullet="•",
- ),
- rxe.mantine.timeline.item(
- title="Step 2",
- bullet="•",
- ),
- rxe.mantine.timeline.item(
- title="Step 3",
- bullet="•",
- ),
- active=1,
- bullet_size=24,
- line_width=2,
- color="blue",
-
- )
- )
-```
diff --git a/docs/enterprise/mantine/tree.md b/docs/enterprise/mantine/tree.md
deleted file mode 100644
index a3ce63edd..000000000
--- a/docs/enterprise/mantine/tree.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: Tree
----
-
-# Tree component
-
-`rxe.mantine.tree` is a component for displaying hierarchical data in a tree structure. It allows users to expand and collapse nodes, making it easy to navigate through large datasets.
-
-```md alert warning
-# Due to some technical limitations(pydantic), the tree component only supports 5 levels of depths for the `data` props.
-```
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-def tree_example():
- # return rx.text("Placeholder for tree example")
- return rxe.mantine.tree(
- data=[
- {
- "value": "0",
- "label": "Root",
- "children": [
- {"value": "0-1", "label": "Child 1"},
- {"value": "0-2", "label": "Child 2"},
- ],
- }
- ],
- )
-```
diff --git a/docs/enterprise/map/index.md b/docs/enterprise/map/index.md
deleted file mode 100644
index 20af51880..000000000
--- a/docs/enterprise/map/index.md
+++ /dev/null
@@ -1,565 +0,0 @@
----
-title: Interactive Maps
----
-
-# Interactive Maps
-
-```python exec
-import reflex as rx
-import reflex_enterprise as rxe
-from pcweb.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.
-
-```md alert info
-# All map components are built using Leaflet and react-leaflet, providing a familiar and powerful mapping experience.
-For advanced Leaflet features, refer to the [Leaflet documentation](https://leafletjs.com/reference.html).
-```
-
-🌍 **[View Live Demo](https://map.reflex.run)** - See the map components in action with interactive examples.
-
-## Installation & Setup
-
-Map components are included with `reflex-enterprise`. No additional installation is required.
-
-## Basic Usage
-
-Here's a simple example of creating a map with a marker:
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-class MapState(rx.State):
- center: rxe.map.LatLng = rxe.map.latlng(lat=51.505, lng=-0.09)
- zoom: float = 13.0
-
-def basic_map():
- return rxe.map(
- rxe.map.tile_layer(
- url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
- attribution='© OpenStreetMap contributors'
- ),
- rxe.map.marker(
- rxe.map.popup("Hello from London!"),
- position=MapState.center,
- ),
- id="basic-map",
- center=MapState.center,
- zoom=MapState.zoom,
- height="400px",
- width="100%",
- )
-```
-
-## Core Components
-
-### Map Container
-
-The `rxe.map()` component is the primary container that holds all other map elements:
-
-```python
-rxe.map(
- # Child components (markers, layers, controls)
- id="my-map",
- center=rxe.map.latlng(lat=51.505, lng=-0.09),
- zoom=13,
- height="400px",
- width="100%"
-)
-```
-
-**Key Properties:**
-- `center`: Initial map center coordinates
-- `zoom`: Initial zoom level (0-18+ depending on tile provider)
-- `bounds`: Alternative to center/zoom, fits map to bounds
-- `height`/`width`: Map container dimensions
-
-### Tile Layers
-
-Tile layers provide the base map imagery. The most common is OpenStreetMap:
-
-```python
-rxe.map.tile_layer(
- url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
- attribution='© OpenStreetMap contributors'
-)
-```
-
-
-### Markers
-
-Add point markers to specific locations:
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-def markers_example():
- return rxe.map(
- rxe.map.tile_layer(
- url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
- attribution='© OpenStreetMap contributors'
- ),
- rxe.map.marker(
- rxe.map.popup(
- rx.vstack(
- rx.text("Big Ben", weight="bold"),
- rx.text("Famous clock tower in London"),
- spacing="2"
- )
- ),
- position=rxe.map.latlng(lat=51.4994, lng=-0.1245),
- ),
- rxe.map.marker(
- rxe.map.popup("London Eye"),
- position=rxe.map.latlng(lat=51.5033, lng=-0.1196),
- ),
- id="markers-map",
- center=rxe.map.latlng(lat=51.501, lng=-0.122),
- zoom=14,
- height="400px",
- width="100%",
- )
-```
-
-### Vector Layers
-
-Draw shapes and areas on the map:
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-def vectors_example():
- return rxe.map(
- rxe.map.tile_layer(
- url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
- attribution='© OpenStreetMap contributors'
- ),
- # Circle (radius in meters)
- rxe.map.circle(
- center=rxe.map.latlng(lat=51.505, lng=-0.09),
- radius=500,
- path_options=rxe.map.path_options(
- color="#ff0000",
- fill_color="#ff3333",
- fill_opacity=0.3,
- weight=2
- )
- ),
- # Polygon
- rxe.map.polygon(
- positions=[
- rxe.map.latlng(lat=51.515, lng=-0.08),
- rxe.map.latlng(lat=51.515, lng=-0.07),
- rxe.map.latlng(lat=51.520, lng=-0.07),
- rxe.map.latlng(lat=51.520, lng=-0.08),
- ],
- path_options=rxe.map.path_options(
- color="#0000ff",
- fill_color="#3333ff",
- fill_opacity=0.3
- )
- ),
- # Polyline
- rxe.map.polyline(
- positions=[
- rxe.map.latlng(lat=51.500, lng=-0.095),
- rxe.map.latlng(lat=51.510, lng=-0.085),
- rxe.map.latlng(lat=51.515, lng=-0.095),
- ],
- path_options=rxe.map.path_options(
- color="#00ff00",
- weight=4
- )
- ),
- id="vectors-map",
- center=rxe.map.latlng(lat=51.510, lng=-0.08),
- zoom=13,
- height="400px",
- width="100%",
- )
-```
-
-## Interactive Features
-
-### Event Handling
-
-Maps support comprehensive event handling for user interactions:
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-class InteractiveMapState(rx.State):
- last_click: str = "No clicks yet"
- current_zoom: float = 13.0
-
- def handle_map_click(self, event):
- lat = event.get("latlng", {}).get("lat", 0)
- lng = event.get("latlng", {}).get("lng", 0)
- self.last_click = f"Clicked at: {lat:.4f}, {lng:.4f}"
-
- def handle_zoom_change(self, event):
- self.current_zoom = float(event.get("target", {}).get("_zoom", 13.0))
-
-def interactive_example():
- return rx.vstack(
- rx.text(f"Last click: {InteractiveMapState.last_click}"),
- rx.text(f"Current zoom: {InteractiveMapState.current_zoom}"),
- rxe.map(
- rxe.map.tile_layer(
- url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
- attribution='© OpenStreetMap contributors'
- ),
- id="interactive-map",
- center=rxe.map.latlng(lat=51.505, lng=-0.09),
- zoom=InteractiveMapState.current_zoom,
- height="350px",
- width="100%",
- on_click=InteractiveMapState.handle_map_click,
- on_zoom=InteractiveMapState.handle_zoom_change,
- ),
- spacing="3"
- )
-```
-
-### Map Controls
-
-Add UI controls for enhanced user interaction:
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-def controls_example():
- return rxe.map(
- rxe.map.tile_layer(
- url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
- attribution='© OpenStreetMap contributors'
- ),
- rxe.map.zoom_control(position="topright"),
- rxe.map.scale_control(position="bottomleft"),
- rxe.map.attribution_control(position="bottomright"),
- id="controls-map",
- center=rxe.map.latlng(lat=51.505, lng=-0.09),
- zoom=13,
- height="400px",
- width="100%",
- )
-```
-
-## Helper Functions
-
-### Coordinate Creation
-
-```python
-# Create latitude/longitude coordinates
-center = rxe.map.latlng(lat=51.505, lng=-0.09, nround=4)
-
-# Create bounds
-bounds = rxe.map.latlng_bounds(
- corner1_lat=51.49, corner1_lng=-0.11,
- corner2_lat=51.52, corner2_lng=-0.07
-)
-```
-
-## Map API
-
-The Map API provides programmatic control over your maps, allowing you to manipulate the map programmatically from your Reflex state methods.
-
-### Getting the API Reference
-
-To access the Map API, you need to get a reference to your map using its ID:
-
-```python
-map_api = rxe.map.api("my-map-id")
-```
-
-### Interactive Demo
-
-Here are some commonly used API methods demonstrated in action:
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-map_api = rxe.map.api("api-demo-map")
-
-class MapAPIState(rx.State):
- current_location: str = "London"
-
- def fly_to_london(self):
- yield map_api.fly_to([51.505, -0.09], 13)
- self.current_location = "London"
-
- def fly_to_paris(self):
- yield map_api.fly_to([48.8566, 2.3522], 13)
- self.current_location = "Paris"
-
-def map_api_example():
- return rx.vstack(
- rx.text(f"Current location: {MapAPIState.current_location}"),
- rx.hstack(
- rx.button("Fly to London", on_click=MapAPIState.fly_to_london),
- rx.button("Fly to Paris", on_click=MapAPIState.fly_to_paris),
- rx.button("Zoom Out", on_click=map_api.set_zoom(8)),
- rx.button("Log Center", on_click=map_api.get_center(callback=rx.console_log)),
- spacing="2"
- ),
- rxe.map(
- rxe.map.tile_layer(
- url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
- attribution='© OpenStreetMap contributors'
- ),
- id="api-demo-map",
- center=rxe.map.latlng(lat=51.505, lng=-0.09),
- zoom=13.0,
- height="350px",
- width="100%",
- ),
- spacing="3"
- )
-```
-
-### Common API Methods
-
-**View Control:**
-- `fly_to(latlng, zoom, options)` - Smooth animated movement to location
-- `set_view(latlng, zoom, options)` - Instant movement to location
-- `set_zoom(zoom)` - Change zoom level
-- `zoom_in()` / `zoom_out()` - Zoom by one level
-- `fit_bounds(bounds, options)` - Fit map to specific bounds
-
-**Location Services:**
-- `locate(options)` - Get user's current location
-- `stop_locate()` - Stop location tracking
-
-**Information Retrieval:**
-- `get_center(callback)` - Get current map center
-- `get_zoom(callback)` - Get current zoom level
-- `get_bounds(callback)` - Get current map bounds
-- `get_size(callback)` - Get map container size
-
-**Layer Management:**
-- `add_layer(layer)` - Add a layer to the map
-- `remove_layer(layer)` - Remove a layer from the map
-- `has_layer(layer)` - Check if layer exists on map
-
-### Full Leaflet API Access
-
-```md alert info
-# The Map API provides access to the complete Leaflet map API. Any method available on a Leaflet map instance can be called through the MapAPI instance.
-Function names are automatically converted from snake_case (Python) to camelCase (JavaScript).
-```
-
-This means you can use any method from the [Leaflet Map documentation](https://leafletjs.com/reference.html#map). For example:
-
-**Python (snake_case) → JavaScript (camelCase):**
-- `map_api.pan_to(latlng)` → `map.panTo(latlng)`
-- `map_api.set_max_bounds(bounds)` → `map.setMaxBounds(bounds)`
-- `map_api.get_pixel_bounds()` → `map.getPixelBounds()`
-- `map_api.container_point_to_lat_lng(point)` → `map.containerPointToLatLng(point)`
-
-### Advanced Example
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-
-class AdvancedMapState(rx.State):
- constraints_applied: bool = False
- location_tracking: bool = False
- location_status: str = "Location tracking disabled"
-
- def set_location_status(self, status: str):
- self.location_status = status
-
- def setup_map_constraints(self):
- map_api = rxe.map.api("advanced-demo-map")
-
- # Set maximum bounds (restrict panning to London area)
- max_bounds = rxe.map.latlng_bounds(
- corner1_lat=51.4, corner1_lng=-0.3,
- corner2_lat=51.6, corner2_lng=0.1
- )
- yield map_api.set_max_bounds(max_bounds)
-
- # Set min/max zoom levels
- yield map_api.set_min_zoom(10)
- yield map_api.set_max_zoom(16)
-
- # Disable scroll wheel zoom
- yield map_api.scroll_wheel_zoom(False)
-
- self.constraints_applied = True
-
- def remove_constraints(self):
- map_api = rxe.map.api("advanced-demo-map")
-
- # Remove bounds restriction
- yield map_api.set_max_bounds(None)
-
- # Reset zoom limits
- yield map_api.set_min_zoom(1)
- yield map_api.set_max_zoom(18)
-
- # Re-enable scroll wheel zoom
- yield map_api.scroll_wheel_zoom(True)
-
- self.constraints_applied = False
-
- def toggle_location_tracking(self):
- map_api = rxe.map.api("advanced-demo-map")
-
- if self.location_tracking == False:
- # Start location tracking
- locate_options = rxe.map.locate_options(
- set_view=True,
- max_zoom=16,
- timeout=10000,
- enable_high_accuracy=True,
- watch=False # Single location request
- )
- yield map_api.locate(locate_options)
- self.location_tracking = True
- self.location_status = "Requesting location..."
- else:
- # Stop location tracking
- yield map_api.stop_locate()
- self.location_tracking = False
- self.location_status = "Location tracking disabled"
-
-def advanced_example():
- return rx.vstack(
- rx.hstack(
- rx.button(
- rx.cond(AdvancedMapState.constraints_applied, "Remove Constraints", "Apply Constraints"),
- on_click=rx.cond(AdvancedMapState.constraints_applied, AdvancedMapState.remove_constraints, AdvancedMapState.setup_map_constraints),
- color_scheme="blue"
- ),
- rx.button(
- rx.cond(AdvancedMapState.location_tracking, "Disable Location", "Enable Location"),
- on_click=AdvancedMapState.toggle_location_tracking,
- color_scheme="green"
- ),
- spacing="3"
- ),
- rx.text(f"Status: {AdvancedMapState.location_status}"),
- rx.text(
- rx.cond(
- AdvancedMapState.constraints_applied,
- "Constraints: Applied (restricted to London area, zoom 10-16, no scroll wheel)",
- "Constraints: None"
- )
- ),
- rxe.map(
- rxe.map.tile_layer(
- url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
- attribution='© OpenStreetMap contributors'
- ),
- rxe.map.marker(
- rxe.map.popup("Try panning and zooming when constraints are applied!"),
- position=rxe.map.latlng(lat=51.505, lng=-0.09),
- ),
- id="advanced-demo-map",
- center=rxe.map.latlng(lat=51.505, lng=-0.09),
- zoom=12.0,
- height="400px",
- width="100%",
- on_locationfound=lambda e: AdvancedMapState.set_location_status("Location found!"),
- on_locationerror=lambda e: AdvancedMapState.set_location_status("Location error - permission denied or unavailable"),
- ),
- spacing="3"
- )
-```
-
-### Callback Handling
-
-Many API methods that retrieve information require callbacks to handle the results:
-
-```python
-class CallbackMapState(rx.State):
- map_info: str = ""
-
- def handle_center_result(self, result):
- lat = result.get("lat", 0)
- lng = result.get("lng", 0)
- self.map_info = f"Center: {lat:.4f}, {lng:.4f}"
-
- def handle_bounds_result(self, result):
- # result will contain bounds information
- self.map_info = f"Bounds: {result}"
-
- def get_map_info(self):
- map_api = rxe.map.api("info-map")
- yield map_api.get_center(self.handle_center_result)
- # or
- yield map_api.get_bounds(self.handle_bounds_result)
-```
-
-## Available Events
-
-The map components support a comprehensive set of events:
-
-**Map Events:**
-- `on_click`, `on_dblclick` - Mouse click events
-- `on_zoom`, `on_zoom_start`, `on_zoom_end` - Zoom events
-- `on_move`, `on_move_start`, `on_move_end` - Pan events
-- `on_resize` - Map container resize
-- `on_load`, `on_unload` - Map lifecycle
-
-**Location Events:**
-- `on_locationfound`, `on_locationerror` - Geolocation
-
-**Layer Events:**
-- `on_layeradd`, `on_layerremove` - Layer management
-
-**Popup Events:**
-- `on_popupopen`, `on_popupclose` - Popup lifecycle
-- `on_tooltipopen`, `on_tooltipclose` - Tooltip lifecycle
-
-## Common Patterns
-
-### Dynamic Markers
-
-```python
-class DynamicMapState(rx.State):
- markers: list[dict] = [
- {"lat": 51.505, "lng": -0.09, "title": "London"},
- {"lat": 48.8566, "lng": 2.3522, "title": "Paris"},
- {"lat": 52.5200, "lng": 13.4050, "title": "Berlin"},
- ]
-
-def dynamic_markers():
- return rxe.map(
- rxe.map.tile_layer(url="..."),
- rx.foreach(
- DynamicMapState.markers,
- lambda marker: rxe.map.marker(
- rxe.map.popup(marker["title"]),
- position=rxe.map.latlng(
- lat=marker["lat"],
- lng=marker["lng"]
- )
- )
- ),
- # ... map configuration
- )
-```
-
-
-## Best Practices
-
-1. **Always include attribution** for tile providers
-2. **Set reasonable zoom levels** (typically 1-18)
-3. **Use bounds for multiple markers** instead of arbitrary center/zoom
-4. **Handle loading states** for dynamic map content
-5. **Optimize marker rendering** for large datasets using clustering
-6. **Test on mobile devices** for touch interactions
-
----
-
-[← Back to main documentation]({enterprise.overview.path})
diff --git a/docs/enterprise/overview.md b/docs/enterprise/overview.md
deleted file mode 100644
index fb58a235e..000000000
--- a/docs/enterprise/overview.md
+++ /dev/null
@@ -1,295 +0,0 @@
----
-title: Reflex Enterprise
----
-
-# Reflex Enterprise
-
-```python exec
-from pcweb.pages.docs import enterprise
-import reflex as rx
-try:
- import reflex_enterprise as rxe
- from reflex_enterprise.components.ag_grid.resource import RendererParams
-except ImportError:
- rxe = None
- RendererParams = None
-```
-
-Reflex Enterprise is a package containing paid features built on top of Reflex.
-
-```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]({enterprise.built_with_reflex.path}).
-```
-
-## Installation
-
-`reflex-enterprise` must be installed alongside `reflex` to access the enterprise features.
-
-You can install it from pypi with the following command:
-
-```bash
-pip install reflex-enterprise
-```
-
-## Features
-
-```python exec
-# Create master data organized by category
-categories_data = [
- {
- "category": "Configuration",
- "description": "Core enterprise features for deployment and branding",
- "count": 2,
- "components": [
- {
- "feature": "show_built_with_reflex",
- "description": "Toggle the 'Built with Reflex' badge in your app",
- "cloud_tier": "Enterprise",
- "self_hosted_tier": "Enterprise",
- "link": "/docs/enterprise/built-with-reflex",
- },
- {
- "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",
- },
- ]
- },
- {
- "category": "AGGrid and AGChart",
- "description": "Advanced data visualization and grid components",
- "count": 2,
- "components": [
- {
- "feature": "AgGrid",
- "description": "Advanced data grid with enterprise features (sorting, filtering, grouping)",
- "cloud_tier": "Free",
- "self_hosted_tier": "Free",
- "link": "/docs/enterprise/ag-grid",
- },
- {
- "feature": "AGCharts",
- "description": "Interactive charts and data visualization components",
- "cloud_tier": "Free",
- "self_hosted_tier": "Free",
- "link": "/docs/enterprise/ag-chart",
- },
- ]
- },
- {
- "category": "Interactive Components",
- "description": "Interactive UI features including drag-and-drop and mapping",
- "count": 2,
- "components": [
- {
- "feature": "Drag and Drop",
- "description": "Drag and drop functionality for interactive UI elements",
- "cloud_tier": "Free",
- "self_hosted_tier": "Free",
- "link": "/docs/enterprise/drag-and-drop",
- },
- {
- "feature": "Mapping",
- "description": "Interactive maps with markers, layers, and controls",
- "cloud_tier": "Free",
- "self_hosted_tier": "Free",
- "link": "/docs/enterprise/map",
- },
- ]
- },
- {
- "category": "Mantine",
- "description": "Rich UI components from Mantine library",
- "count": 15,
- "components": [
- {
- "feature": "Autocomplete",
- "description": "Auto-completing text input with dropdown suggestions",
- "cloud_tier": "Free",
- "self_hosted_tier": "Free",
- "link": "/docs/enterprise/mantine/autocomplete",
- },
- {
- "feature": "Combobox",
- "description": "Searchable dropdown with custom options and filtering",
- "cloud_tier": "Free",
- "self_hosted_tier": "Free",
- "link": "/docs/enterprise/mantine/combobox",
- },
- {
- "feature": "Multi Select",
- "description": "Multi-selection dropdown with tags and search",
- "cloud_tier": "Free",
- "self_hosted_tier": "Free",
- "link": "/docs/enterprise/mantine/multi-select",
- },
- {
- "feature": "Tags Input",
- "description": "Input field for creating and managing tags",
- "cloud_tier": "Free",
- "self_hosted_tier": "Free",
- "link": "/docs/enterprise/mantine/tags-input",
- },
- {
- "feature": "Json Input",
- "description": "JSON editor with syntax highlighting and validation",
- "cloud_tier": "Free",
- "self_hosted_tier": "Free",
- "link": "/docs/enterprise/mantine/json-input",
- },
- {
- "feature": "Pill",
- "description": "Small rounded elements for tags, badges, and labels",
- "cloud_tier": "Free",
- "self_hosted_tier": "Free",
- "link": "/docs/enterprise/mantine/pill",
- },
- {
- "feature": "Tree",
- "description": "Hierarchical tree view with expandable nodes",
- "cloud_tier": "Free",
- "self_hosted_tier": "Free",
- "link": "/docs/enterprise/mantine/tree",
- },
- {
- "feature": "Timeline",
- "description": "Timeline component for displaying chronological events",
- "cloud_tier": "Free",
- "self_hosted_tier": "Free",
- "link": "/docs/enterprise/mantine/timeline",
- },
- {
- "feature": "Number Formatter",
- "description": "Format and display numbers with customizable formatting",
- "cloud_tier": "Free",
- "self_hosted_tier": "Free",
- "link": "/docs/enterprise/mantine/number-formatter",
- },
- {
- "feature": "Ring Progress",
- "description": "Circular progress indicator with customizable styling",
- "cloud_tier": "Free",
- "self_hosted_tier": "Free",
- "link": "/docs/enterprise/mantine/ring-progress",
- },
- {
- "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",
- },
- {
- "feature": "Loading Overlay",
- "description": "Loading overlay with spinner for async operations",
- "cloud_tier": "Free",
- "self_hosted_tier": "Free",
- "link": "/docs/enterprise/mantine/loading-overlay",
- },
- {
- "feature": "Spoiler",
- "description": "Collapsible content container with show/hide toggle",
- "cloud_tier": "Free",
- "self_hosted_tier": "Free",
- "link": "/docs/enterprise/mantine/spoiler",
- },
- {
- "feature": "Collapse",
- "description": "Animated collapsible content with smooth transitions",
- "cloud_tier": "Free",
- "self_hosted_tier": "Free",
- "link": "/docs/enterprise/mantine/collapse",
- },
- ]
- },
-]
-
-if rxe is not None:
- @rxe.arrow_func
- def custom_link_renderer(params: RendererParams):
- """Custom cell renderer for links in AG Grid."""
- return rx.link(
- params.value,
- href=params.data.link,
- )
-
- grid = rxe.ag_grid(
- column_defs=[
- {
- "field": "category",
- "header_name": "Category",
- "cell_renderer": "agGroupCellRenderer",
- "suppress_menu": True,
- "width": 220,
- },
- {
- "field": "description",
- "width": 500,
- },
- {
- "field": "count",
- "header_name": "Components",
- "width": 150,
- },
- ],
- row_data=categories_data,
- master_detail=True,
- detail_cell_renderer_params={
- "detail_grid_options": {
- "column_defs": [
- {
- "field": "feature",
- "header_name": "Component/Feature",
- "cell_renderer": custom_link_renderer,
- "width": 250
- },
- {"field": "description", "header_name": "Description", "width": 350},
- {"field": "cloud_tier", "header_name": "Cloud Tier", "width": 120},
- {"field": "self_hosted_tier", "header_name": "Self-hosted Tier", "width": 140},
- ],
- "suppress_context_menu": True,
- "row_height": 35,
- },
- "get_detail_row_data": lambda params: rx.vars.function.FunctionStringVar(
- "params.successCallback"
- ).call(params.data.components),
- },
- id="features-grid",
- width="100%",
- detail_row_height=200,
- detail_row_auto_height=True,
- height="400px",
- loading=False,
-)
- grid.api.set_grid_option("suppressContextMenu", True)
-else:
- grid = rx.text("Reflex Enterprise not available. Install with: pip install reflex-enterprise")
-```
-
-```python eval
-grid
-```
-
-## Usage of reflex_enterprise.
-
-Using `rxe.App` as your `app` is required to use any of the components provided by the enterprise package, as well as config options provided by `rxe.Config`.
-
-### In the main file
-
-Instead of the usual `rx.App()` to create your app, use the following:
-```python
-import reflex_enterprise as rxe
-app = rxe.App()
-```
-
-### In rxconfig.py
-```python
-import reflex_enterprise as rxe
-config = rxe.Config(
- app_name="MyApp",
- ... # you can pass all rx.Config arguments as well as the one specific to rxe.Config
-)
-```
\ No newline at end of file
diff --git a/docs/enterprise/react_flow/basic_flow.md b/docs/enterprise/react_flow/basic_flow.md
deleted file mode 100644
index b057fdc91..000000000
--- a/docs/enterprise/react_flow/basic_flow.md
+++ /dev/null
@@ -1,96 +0,0 @@
-# Basic Flow Example
-
-This example demonstrates a simple flow diagram with three nodes and two edges, showing how nodes can be connected and how edges can be animated.
-
-### Nodes
-
-- Input Node – starting point
-- Default Node – standard content node
-- Output Node – endpoint of the flow
-
-### Edges
-
-- Input → Default (animated)
-- Default → Output
-
-### Interactivity
-
-- Nodes can be moved
-- Edges update dynamically
-- Users can drag from handles to create new edges
-- Zoom, pan, and mini-map controls are available
-
-### Visual Layout
-
-- Flow fits viewport automatically
-- Background grid for orientation
-- Light and dark color modes supported
-
-### Example Flow
-
-```python demo exec
-import reflex as rx
-import reflex_enterprise as rxe
-from reflex_enterprise.components.flow.types import Node, Edge
-
-# Common style for all nodes
-node_style = {
- "backgroundColor": "#ffcc00",
- "color": "#000000",
- "padding": "10px",
- "borderRadius": "5px"
-}
-
-class FlowState(rx.State):
- nodes: list[Node] = [
- {
- "id": "1",
- "type": "input",
- "position": {"x": 100, "y": 100},
- "data": {"label": "Input Node"},
- "style": node_style
- },
- {
- "id": "2",
- "type": "default",
- "position": {"x": 300, "y": 200},
- "data": {"label": "Default Node"},
- "style": node_style
- },
- {
- "id": "3",
- "type": "output",
- "position": {"x": 500, "y": 100},
- "data": {"label": "Output Node"},
- "style": node_style
- },
- ]
-
- edges: list[Edge] = [
- {"id": "e1-2", "source": "1", "target": "2", "animated": True},
- {"id": "e2-3", "source": "2", "target": "3"},
- ]
-
-
-def flow_example():
- return rx.box(
- rxe.flow(
- # Core flow components
- rxe.flow.controls(),
- rxe.flow.background(),
- rxe.flow.mini_map(),
-
- # Flow configuration
- default_nodes=FlowState.nodes,
- default_edges=FlowState.edges,
- nodes=FlowState.nodes,
- edges=FlowState.edges,
-
- # Visual settings
- fit_view=True,
- attribution_position="bottom-right",
- ),
- height="100vh",
- width="100vw",
- )
-```
diff --git a/docs/enterprise/react_flow/components.md b/docs/enterprise/react_flow/components.md
deleted file mode 100644
index 04ba05361..000000000
--- a/docs/enterprise/react_flow/components.md
+++ /dev/null
@@ -1,92 +0,0 @@
-# Flow Components
-
-This page documents the main components provided by the `rxe.flow` library.
-
-## rxe.flow.provider
-
-The `FlowProvider` component is a context provider that makes it possible to access a flow’s internal state outside of the `