prettier (#4941)

* prettier

* add prettier to pre-commit

* run formatter

---------

Co-authored-by: Masen Furer <m_github@0x26.net>

.devcontainer/devcontainer.json

@@ -1,14 +1,14 @@
 {
-	"image": "mcr.microsoft.com/devcontainers/python:1-3.11-bookworm",
-	"postCreateCommand": "/bin/bash -c 'python -m pip install uv && python -m uv sync & git clone https://github.com/reflex-dev/reflex-examples; wait'",
-	"forwardPorts": [3000, 8000],
-	"portsAttributes": {
-		"3000": {
-			"label": "Frontend",
-			"onAutoForward": "notify"
-		},
-		"8000": {
-			"label": "Backend"
-		}
-	}
+  "image": "mcr.microsoft.com/devcontainers/python:1-3.11-bookworm",
+  "postCreateCommand": "/bin/bash -c 'python -m pip install uv && python -m uv sync & git clone https://github.com/reflex-dev/reflex-examples; wait'",
+  "forwardPorts": [3000, 8000],
+  "portsAttributes": {
+    "3000": {
+      "label": "Frontend",
+      "onAutoForward": "notify"
+    },
+    "8000": {
+      "label": "Backend"
+    }
+  }
 }

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,9 +1,8 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
-assignees: ''
-
+title: ""
+assignees: ""
 ---
 
 **Describe the bug**
@@ -11,7 +10,8 @@ A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
- - Code/Link to Repo:
+
+- Code/Link to Repo:
 
 **Expected behavior**
 A clear and concise description of what you expected to happen.
@@ -20,10 +20,11 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Specifics (please complete the following information):**
- - Python Version:
- - Reflex Version:
- - OS: 
- - Browser (Optional):
- 
+
+- Python Version:
+- Reflex Version:
+- OS:
+- Browser (Optional):
+
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/build_issue.md

@@ -1,29 +1,32 @@
 ---
 name: Build Issue
 about: Report an issue related to reflex.build
-title: '[BUILD] '  # This acts as a hint, but users can change it.
+title: "[BUILD] " # This acts as a hint, but users can change it.
 labels: build
-assignees: ''
+assignees: ""
 ---
 
-
 ## Describe the issue
+
 Provide details about the issue.
 
 ...
 
 ## Expected behavior
+
 What should have happened?
 
 ...
 
 ## Steps to reproduce (if applicable)
-1. 
-2. 
-3. 
+
+1.
+2.
+3.
 
 ## Environment
+
 - Reflex Version:
 - Python Version:
 - OS:
-- Browser: 
+- Browser:

.github/ISSUE_TEMPLATE/cloud_issue.md

@@ -1,28 +1,32 @@
 ---
 name: Cloud Issue
 about: Report an issue related to Reflex Cloud
-title: '[CLOUD] '  # This acts as a hint, but users can change it.
+title: "[CLOUD] " # This acts as a hint, but users can change it.
 labels: cloud
-assignees: ''
+assignees: ""
 ---
 
 ## Describe the issue
+
 Provide details about the issue.
 
 ...
 
 ## Expected behavior
+
 What should have happened?
 
 ...
 
 ## Steps to reproduce (if applicable)
-1. 
-2. 
-3. 
+
+1.
+2.
+3.
 
 ## Environment
+
 - Reflex Version:
 - Python Version:
 - OS:
-- Browser: 
+- Browser:

.github/ISSUE_TEMPLATE/custom_component_request.md

@@ -1,10 +1,9 @@
 ---
 name: Custom Component Request
 about: Suggest a new custom component for Reflex
-title: ''
-labels: 'custom component request'
-assignees: ''
-
+title: ""
+labels: "custom component request"
+assignees: ""
 ---
 
 **Describe the Custom Component**
@@ -17,7 +16,8 @@ A clear and concise description of what the custom component does.
 - What are the use cases for the custom component?
 
 **Specifics (please complete the following information):**
- - Do you have a specific react package in mind? (Optional):
- 
+
+- Do you have a specific react package in mind? (Optional):
+
 **Additional context**
 Add any other context about the custom component here.

.github/ISSUE_TEMPLATE/enhancement_request.md

@@ -1,9 +1,9 @@
 ---
 name: Enhancement Request
 about: Suggest an enhancement for an existing Reflex feature.
-title: ''
-labels: 'enhancement'
-assignees: ''
+title: ""
+labels: "enhancement"
+assignees: ""
 ---
 
 **Describe the Enhancement you want**
@@ -14,6 +14,6 @@ A clear and concise description of what the improvement does.
 - What is the benefit of the enhancement?
 
 - Show an example/usecase were the improvement are needed.
- 
+
 **Additional context**
 Add any other context here.

.github/ISSUE_TEMPLATE/enterprise_issue.md

@@ -1,28 +1,32 @@
 ---
 name: Enterprise Issue
 about: Report an issue related to Reflex Enterprise
-title: '[ENTERPRISE] '  # This acts as a hint, but users can change it.
+title: "[ENTERPRISE] " # This acts as a hint, but users can change it.
 labels: enterprise
-assignees: ''
+assignees: ""
 ---
 
 ## Describe the issue
+
 Provide details about the issue.
 
 ...
 
 ## Expected behavior
+
 What should have happened?
 
 ...
 
 ## Steps to reproduce (if applicable)
-1. 
-2. 
-3. 
+
+1.
+2.
+3.
 
 ## Environment
+
 - Reflex Version:
 - Python Version:
 - OS:
-- Browser: 
+- Browser:

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,10 +1,9 @@
 ---
 name: Feature Request
 about: Suggest a new feature for Reflex
-title: ''
-labels: 'feature request'
-assignees: ''
-
+title: ""
+labels: "feature request"
+assignees: ""
 ---
 
 **Describe the Features**
@@ -13,6 +12,6 @@ A clear and concise description of what the features does.
 - What is the purpose of the feature?
 
 - Show an example / use cases for the new feature.
- 
+
 **Additional context**
 Add any other context here.

.github/actions/setup_build_env/action.yml

@@ -9,27 +9,27 @@
 # - Uv of version `uv-version` is ready to be invoked as `uv`.
 # - If `run-uv-sync` is true, deps as defined in `pyproject.toml` will have been installed into the venv at `create-venv-at-path`.
 
-name: 'Setup Reflex build environment'
-description: 'Sets up Python, install uv (cached), install project deps (cached)'
+name: "Setup Reflex build environment"
+description: "Sets up Python, install uv (cached), install project deps (cached)"
 inputs:
   python-version:
-    description: 'Python version setup'
+    description: "Python version setup"
     required: true
   uv-version:
-    description: 'Uv version to install'
+    description: "Uv version to install"
     required: false
-    default: '0.6.5'
+    default: "0.6.5"
   run-uv-sync:
-    description: 'Whether to run uv sync on current dir'
+    description: "Whether to run uv sync on current dir"
     required: false
     default: false
   create-venv-at-path:
-    description: 'Path to venv (if uv sync is enabled)'
+    description: "Path to venv (if uv sync is enabled)"
     required: false
-    default: '.venv'
+    default: ".venv"
 
 runs:
-  using: 'composite'
+  using: "composite"
   steps:
     - name: Install UV
       uses: astral-sh/setup-uv@v5
@@ -69,4 +69,3 @@ runs:
       shell: bash
       run: |
         uv sync --all-extras --dev
-

.github/pull_request_template.md

@@ -1,7 +1,7 @@
 ### All Submissions:
 
 - [ ] Have you followed the guidelines stated in [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md) file?
-- [ ] Have you checked to ensure there aren't any other open [Pull Requests](https://github.com/reflex-dev/reflex/pulls ) for the desired changed?
+- [ ] Have you checked to ensure there aren't any other open [Pull Requests](https://github.com/reflex-dev/reflex/pulls) for the desired changed?
 
 <!-- You can erase any parts of this template not applicable to your Pull Request. -->
 
@@ -14,10 +14,9 @@ Please delete options that are not relevant.
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
 - [ ] This change requires a documentation update
 
-
 ### New Feature Submission:
 
-- [ ] Does your submission pass the tests? 
+- [ ] Does your submission pass the tests?
 - [ ] Have you linted your code locally prior to submission?
 
 ### Changes To Core Features:
@@ -33,4 +32,3 @@ Please delete options that are not relevant.
     b. Describe your changes.
 
     c. Put `closes #XXXX` in your comment to auto-close the issue that your PR fixes (if such).
-

.github/workflows/benchmarks.yml

@@ -43,7 +43,6 @@ jobs:
           python-version: ${{ matrix.python-version }}
           run-uv-sync: true
 
-
       - name: Clone Reflex Website Repo
         uses: actions/checkout@v4
         with:

.github/workflows/check_outdated_dependencies.yml

@@ -16,10 +16,9 @@ jobs:
 
       - uses: ./.github/actions/setup_build_env
         with:
-          python-version: '3.10'
+          python-version: "3.10"
           run-uv-sync: true
 
-
       - name: Check outdated backend dependencies
         run: |
           outdated=$(uv pip list --outdated)

.github/workflows/dependency-review.yml

@@ -1,4 +1,4 @@
-name: 'Dependency Review'
+name: "Dependency Review"
 on: [pull_request]
 
 permissions:
@@ -8,10 +8,10 @@ jobs:
   dependency-review:
     runs-on: ubuntu-latest
     steps:
-      - name: 'Checkout Repository'
+      - name: "Checkout Repository"
         uses: actions/checkout@v4
-      - name: 'Dependency Review'
+      - name: "Dependency Review"
         uses: actions/dependency-review-action@v4
         with:
           allow-licenses: Apache-2.0, BSD-2-Clause, BSD-3-Clause, HPND, ISC, MIT, MPL-2.0, Unlicense, Python-2.0, Python-2.0.1, Apache-2.0 AND MIT, BSD-2-Clause AND BSD-3-Clause, Apache-2.0 AND BSD-3-Clause
-          allow-dependencies-licenses: 'pkg:pypi/lazy-loader'
+          allow-dependencies-licenses: "pkg:pypi/lazy-loader"

.github/workflows/integration_tests.yml

@@ -43,17 +43,17 @@ jobs:
       matrix:
         # Show OS combos first in GUI
         os: [ubuntu-latest, windows-latest]
-        python-version: ['3.10.16', '3.11.11', '3.12.8', '3.13.1']
+        python-version: ["3.10.16", "3.11.11", "3.12.8", "3.13.1"]
         exclude:
           - os: windows-latest
             python-version: "3.11.11"
           - os: windows-latest
-            python-version: '3.10.16'
+            python-version: "3.10.16"
         include:
           - os: windows-latest
             python-version: "3.11.9"
           - os: windows-latest
-            python-version: '3.10.11'
+            python-version: "3.10.11"
 
     runs-on: ${{ matrix.os }}
     steps:
@@ -110,7 +110,6 @@ jobs:
           npm -v
           uv run bash scripts/integration.sh ./reflex-examples/nba-proxy dev
 
-
   reflex-web:
     strategy:
       fail-fast: false
@@ -129,7 +128,6 @@ jobs:
           python-version: ${{ matrix.python-version }}
           run-uv-sync: true
 
-
       - name: Clone Reflex Website Repo
         uses: actions/checkout@v4
         with:

.github/workflows/integration_tests_wsl.yml

@@ -6,20 +6,20 @@ concurrency:
 
 on:
   push:
-    branches: ['main']
+    branches: ["main"]
     paths-ignore:
-      - '**/*.md'
+      - "**/*.md"
   pull_request:
-    branches: ['main']
+    branches: ["main"]
     paths-ignore:
-      - '**/*.md'
+      - "**/*.md"
 
 permissions:
   contents: read
 
 env:
   TELEMETRY_ENABLED: false
-  NODE_OPTIONS: '--max_old_space_size=4096'
+  NODE_OPTIONS: "--max_old_space_size=4096"
 
 jobs:
   example-counter-wsl:

.github/workflows/pre-commit.yml

@@ -27,7 +27,6 @@ jobs:
           run-uv-sync: true
 
       # TODO pre-commit related stuff can be cached too (not a bottleneck yet)
-      - run:
-          uv run pre-commit run --all-files
+      - run: uv run pre-commit run --all-files
         env:
           SKIP: update-pyi-files

.github/workflows/reflex_init_in_docker_test.yml

@@ -6,13 +6,13 @@ concurrency:
 
 on:
   push:
-    branches: ['main']
+    branches: ["main"]
     paths-ignore:
-      - '**/*.md'
+      - "**/*.md"
   pull_request:
-    branches: ['main']
+    branches: ["main"]
     paths-ignore:
-      - '**/*.md'
+      - "**/*.md"
 
 jobs:
   # TODO we can extend to various starting points (e.g. Ubuntu with node, without node, with unzip, without unzip, etc.)

.gitignore

@@ -17,4 +17,5 @@ requirements.txt
 reflex.db
 .codspeed
 .env
-.env.*
+.env.*
+node_modules

.pre-commit-config.yaml

@@ -1,7 +1,6 @@
 fail_fast: true
 
 repos:
-
   - repo: https://github.com/charliermarsh/ruff-pre-commit
     rev: v0.9.10
     hooks:
@@ -9,7 +8,7 @@ repos:
         args: [reflex, tests]
       - id: ruff
         args: ["--fix", "--exit-non-zero-on-fix"]
-        exclude: '^integration/benchmarks/'
+        exclude: "^integration/benchmarks/"
 
   - repo: https://github.com/codespell-project/codespell
     rev: v2.3.0
@@ -25,11 +24,11 @@ repos:
         always_run: true
         language: system
         require_serial: true
-        description: 'Update pyi files as needed'
+        description: "Update pyi files as needed"
         entry: python3 scripts/make_pyi.py
 
   - repo: https://github.com/RobertCraigie/pyright-python
-    rev: v1.1.393
+    rev: v1.1.394
     hooks:
       - id: pyright
         args: [reflex, tests]
@@ -39,5 +38,8 @@ repos:
     rev: v1.8.1
     hooks:
       - id: darglint
-        exclude: '^reflex/reflex.py'
-
+        exclude: "^reflex/reflex.py"
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: f62a70a3a7114896b062de517d72829ea1c884b6
+    hooks:
+      - id: prettier

CODE_OF_CONDUCT.md

@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within

CONTRIBUTING.md

@@ -16,14 +16,14 @@ Fork this repository by clicking on the `Fork` button on the top right.
 
 **2. Clone Reflex and navigate into the repo:**
 
-``` bash
+```bash
 git clone https://github.com/<YOUR-USERNAME>/reflex.git
 cd reflex
 ```
 
 **3. Install your local Reflex build:**
 
-``` bash
+```bash
 uv sync
 ```
 
@@ -31,14 +31,14 @@ uv sync
 
 - We have the `examples` folder in the `.gitignore`, so your changes in `reflex/examples` won't be reflected in your commit.
 
-``` bash
+```bash
 mkdir examples
 cd examples
 ```
 
 **5. Init and Run**
 
-``` bash
+```bash
 uv run reflex init
 uv run reflex run
 ```
@@ -68,13 +68,13 @@ Before submitting, a pull request, ensure the following steps are taken and test
 In your `reflex` directory run make sure all the unit tests are still passing using the following command.
 This will fail if code coverage is below 70%.
 
-``` bash
-uv run pytest tests/units --cov --no-cov-on-fail --cov-report= 
+```bash
+uv run pytest tests/units --cov --no-cov-on-fail --cov-report=
 ```
 
 Next make sure all the following tests pass. This ensures that every new change has proper documentation and type checking.
 
-``` bash
+```bash
 uv run ruff check .
 uv run pyright reflex tests
 find reflex tests -name "*.py" -not -path reflex/reflex.py | xargs uv run darglint
@@ -82,21 +82,20 @@ find reflex tests -name "*.py" -not -path reflex/reflex.py | xargs uv run dargli
 
 Finally, run `ruff` to format your code.
 
-``` bash
+```bash
 uv run ruff format .
 ```
 
 Consider installing git pre-commit hooks so Ruff, Pyright, Darglint and `make_pyi` will run automatically before each commit.
 Note that pre-commit will only be installed when you use a Python version >= 3.10.
 
-``` bash
+```bash
 pre-commit install
 ```
 
 That's it you can now submit your PR. Thanks for contributing to Reflex!
 
-
-## Editing Templates 
+## Editing Templates
 
 To edit the templates in Reflex you can do so in two way.
 
@@ -104,13 +103,12 @@ Change to the basic `blank` template can be done in the `reflex/.templates/apps/
 
 Others templates can be edited in their own repository. For example the `sidebar` template can be found in the [`reflex-sidebar`](https://github.com/reflex-dev/sidebar-template) repository.
 
-
 ## Other Notes
 
 For some pull requests when adding new components you will have to generate a pyi file for the new component. This is done by running the following command in the `reflex` directory.
 
 (Please check in with the team before adding a new component to Reflex we are cautious about adding new components to Reflex's core.)
 
-``` bash
-uv run python scripts/make_pyi.py 
-```
+```bash
+uv run python scripts/make_pyi.py
+```

README.md

@@ -1,4 +1,3 @@
-
 <div align="center">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_dark.svg#gh-light-mode-only" alt="Reflex Logo" width="300px">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_light.svg#gh-dark-mode-only" alt="Reflex Logo" width="300px">
@@ -6,10 +5,12 @@
 <hr>
 
 ### **✨ Performant, customizable web apps in pure Python. Deploy in seconds. ✨**
+
 [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
 ![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
 [![Documentation](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
 [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
+
 </div>
 
 ---
@@ -23,9 +24,10 @@
 Reflex is a library to build full-stack web apps in pure Python.
 
 Key features:
-* **Pure Python** - Write your app's frontend and backend all in Python, no need to learn Javascript.
-* **Full Flexibility** - Reflex is easy to get started with, but can also scale to complex apps.
-* **Deploy Instantly** - After building, deploy your app with a [single command](https://reflex.dev/docs/hosting/deploy-quick-start/) or host it on your own server.
+
+- **Pure Python** - Write your app's frontend and backend all in Python, no need to learn Javascript.
+- **Full Flexibility** - Reflex is easy to get started with, but can also scale to complex apps.
+- **Deploy Instantly** - After building, deploy your app with a [single command](https://reflex.dev/docs/hosting/deploy-quick-start/) or host it on your own server.
 
 See our [architecture page](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture) to learn how Reflex works under the hood.
 
@@ -49,7 +51,7 @@ cd my_app_name
 reflex init
 ```
 
-This command initializes a template app in your new directory. 
+This command initializes a template app in your new directory.
 
 You can run this app in development mode:
 
@@ -61,7 +63,6 @@ You should see your app running at http://localhost:3000.
 
 Now you can modify the source code in `my_app_name/my_app_name.py`. Reflex has fast refreshes so you can see your changes instantly when you save your code.
 
-
 ## 🫧 Example App
 
 Let's go over an example: creating an image generation UI around [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node). For simplicity, we just call the [OpenAI API](https://platform.openai.com/docs/api-reference/authentication), but you could replace this with an ML model run locally.
@@ -76,8 +77,6 @@ Let's go over an example: creating an image generation UI around [DALL·E](https
 
 Here is the complete code to create this. This is all done in one Python file!
 
-
-  
 ```python
 import reflex as rx
 import openai
@@ -117,7 +116,7 @@ def index():
                 width="25em",
             ),
             rx.button(
-                "Generate Image", 
+                "Generate Image",
                 on_click=State.get_image,
                 width="25em",
                 loading=State.processing
@@ -137,17 +136,12 @@ app = rx.App()
 app.add_page(index, title="Reflex:DALL-E")
 ```
 
-
-
-
-
 ## Let's break this down.
 
 <div align="center">
 <img src="docs/images/dalle_colored_code_example.png" alt="Explaining the differences between backend and frontend parts of the DALL-E app." width="900" />
 </div>
 
-
 ### **Reflex UI**
 
 Let's start with the UI.
@@ -225,11 +219,10 @@ You can create a multi-page app by adding more pages.
 
 <div align="center">
 
-📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; |  &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; |  &nbsp; 📱 [Component Library](https://reflex.dev/docs/library) &nbsp; |  &nbsp; 🖼️ [Templates](https://reflex.dev/templates/) &nbsp; |  &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start)  &nbsp;   
+📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; | &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; | &nbsp; 📱 [Component Library](https://reflex.dev/docs/library) &nbsp; | &nbsp; 🖼️ [Templates](https://reflex.dev/templates/) &nbsp; | &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start) &nbsp;
 
 </div>
 
-
 ## ✅ Status
 
 Reflex launched in December 2022 with the name Pynecone.
@@ -242,14 +235,14 @@ Reflex has new releases and features coming every other week! Make sure to :star
 
 We welcome contributions of any size! Below are some good ways to get started in the Reflex community.
 
--   **Join Our Discord**: Our [Discord](https://discord.gg/T5WSbC2YtQ) is the best place to get help on your Reflex project and to discuss how you can contribute.
--   **GitHub Discussions**: A great way to talk about features you want added or things that are confusing/need clarification.
--   **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues) are an excellent way to report bugs. Additionally, you can try and solve an existing issue and submit a PR.
+- **Join Our Discord**: Our [Discord](https://discord.gg/T5WSbC2YtQ) is the best place to get help on your Reflex project and to discuss how you can contribute.
+- **GitHub Discussions**: A great way to talk about features you want added or things that are confusing/need clarification.
+- **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues) are an excellent way to report bugs. Additionally, you can try and solve an existing issue and submit a PR.
 
 We are actively looking for contributors, no matter your skill level or experience. To contribute check out [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
 
-
 ## All Thanks To Our Contributors:
+
 <a href="https://github.com/reflex-dev/reflex/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=reflex-dev/reflex" />
 </a>

SECURITY.md

@@ -2,9 +2,9 @@
 
 ## Supported Versions
 
-| Version    | Supported          |
-| ---------- | ------------------ |
-| >= 0.1.18   | :white_check_mark: |
+| Version   | Supported          |
+| --------- | ------------------ |
+| >= 0.1.18 | :white_check_mark: |
 
 ## Reporting a Vulnerability
 

docker-example/README.md

@@ -27,4 +27,4 @@ database.
 
 This example deployment is intended for use with App hosting platforms, like
 Azure, AWS, or Google Cloud Run. It is the backend of the deployment, which
-depends on a separately hosted redis instance and static frontend deployment.
+depends on a separately hosted redis instance and static frontend deployment.

docker-example/production-app-platform/README.md

@@ -6,12 +6,13 @@ Azure, AWS, or Google Cloud Run.
 ## Architecture
 
 The production deployment consists of a few pieces:
-  * Backend container - built by `Dockerfile` Runs the Reflex backend
-    service on port 8000 and is scalable to multiple instances.
-  * Redis container - A single instance the standard `redis` docker image should
-    share private networking with the backend
-  * Static frontend - HTML/CSS/JS files that are hosted via a CDN or static file
-    server. This is not included in the docker image.
+
+- Backend container - built by `Dockerfile` Runs the Reflex backend
+  service on port 8000 and is scalable to multiple instances.
+- Redis container - A single instance the standard `redis` docker image should
+  share private networking with the backend
+- Static frontend - HTML/CSS/JS files that are hosted via a CDN or static file
+  server. This is not included in the docker image.
 
 ## Deployment
 
@@ -37,7 +38,7 @@ the redis service.
 
 ### Ingress
 
-Configure the load balancer for the app to forward traffic to port 8000 on the 
+Configure the load balancer for the app to forward traffic to port 8000 on the
 backend service replicas. Most platforms will generate an ingress hostname
 automatically. Make sure when you access the ingress endpoint on `/ping` that it
 returns "pong", indicating that the backend is up an available.
@@ -95,19 +96,19 @@ container volume. Use Azure Files and mount it into the container at /app/upload
 
 #### Resource Types
 
-* Create a new vnet with 10.0.0.0/16
-  * Create a new subnet for redis, database, and containers
-* Deploy redis as a Container Instances
-* Deploy database server as "Azure Database for PostgreSQL"
-  * Create a new database for the app
-  * Set db-url as a secret containing the db user/password connection string
-* Deploy Storage account for uploaded files
-  * Enable access from the vnet and container subnet
-  * Create a new file share
-  * In the environment, create a new files share (get the storage key)
-* Deploy the backend as a Container App
-  * Create a custom Container App Environment linked up to the same vnet as the redis container.
-  * Set REDIS_URL and DB_URL environment variables
-  * Add the volume from the environment
-  * Add the volume mount to the container
-* Deploy the frontend as a Static Web App
+- Create a new vnet with 10.0.0.0/16
+  - Create a new subnet for redis, database, and containers
+- Deploy redis as a Container Instances
+- Deploy database server as "Azure Database for PostgreSQL"
+  - Create a new database for the app
+  - Set db-url as a secret containing the db user/password connection string
+- Deploy Storage account for uploaded files
+  - Enable access from the vnet and container subnet
+  - Create a new file share
+  - In the environment, create a new files share (get the storage key)
+- Deploy the backend as a Container App
+  - Create a custom Container App Environment linked up to the same vnet as the redis container.
+  - Set REDIS_URL and DB_URL environment variables
+  - Add the volume from the environment
+  - Add the volume mount to the container
+- Deploy the frontend as a Static Web App

docker-example/production-compose/README.md

@@ -25,7 +25,7 @@ If the app uses additional backend API routes, those should be added to the
 ## Build Reflex Production Service
 
 During build, set `DOMAIN` environment variable to the domain where the app will
-be hosted!  (Do not include http or https, it will always use https).
+be hosted! (Do not include http or https, it will always use https).
 
 **If `DOMAIN` is not provided, the service will default to `localhost`.**
 
@@ -72,4 +72,4 @@ to deploy these services if they are not in active use.
 
 ```bash
 DOMAIN=example.com docker compose -f compose.yaml -f compose.prod.yaml -f compose.tools.yaml up -d
-```
+```

docker-example/production-compose/compose.prod.yaml

@@ -7,7 +7,7 @@ services:
     environment:
       POSTGRES_PASSWORD: secret
     volumes:
-       - postgres-data:/var/lib/postgresql/data
+      - postgres-data:/var/lib/postgresql/data
 
   redis:
     image: redis
@@ -22,4 +22,4 @@ services:
       - redis
 
 volumes:
-  postgres-data:
+  postgres-data:

docker-example/production-compose/compose.tools.yaml

@@ -10,9 +10,9 @@ services:
   redis-commander:
     image: ghcr.io/joeferner/redis-commander:latest
     environment:
-    - REDIS_HOSTS=local:redis:6379
+      - REDIS_HOSTS=local:redis:6379
     ports:
-    - "8081:8081"
+      - "8081:8081"
 
 volumes:
   redis-ui-settings:

docker-example/production-compose/compose.yaml

@@ -13,8 +13,8 @@ services:
     build:
       context: .
     volumes:
-       - db-data:/app/data
-       - upload-data:/app/uploaded_files
+      - db-data:/app/data
+      - upload-data:/app/uploaded_files
     restart: always
 
   webserver:
@@ -22,12 +22,12 @@ services:
       DOMAIN: ${DOMAIN:-localhost}
     ports:
       - 443:443
-      - 80:80  # For acme-challenge via HTTP.
+      - 80:80 # For acme-challenge via HTTP.
     build:
       context: .
       dockerfile: Caddy.Dockerfile
     volumes:
-       - caddy-data:/root/.caddy
+      - caddy-data:/root/.caddy
     restart: always
     depends_on:
       - app
@@ -38,4 +38,4 @@ volumes:
   # Uploaded files
   upload-data:
   # TLS keys and certificates
-  caddy-data:
+  caddy-data:

docker-example/production-one-port/README.md

@@ -1,13 +1,15 @@
 # production-one-port
 
 This docker deployment runs Reflex in prod mode, exposing a single HTTP port:
-  * `8080` (`$PORT`) - Caddy server hosting the frontend statically and proxying requests to the backend.
+
+- `8080` (`$PORT`) - Caddy server hosting the frontend statically and proxying requests to the backend.
 
 The deployment also runs a local Redis server to store state for each user.
 
 Conceptually it is similar to the `simple-one-port` example except it:
-  * has layer caching for python, reflex, and node dependencies
-  * uses multi-stage build to reduce the size of the final image
+
+- has layer caching for python, reflex, and node dependencies
+- uses multi-stage build to reduce the size of the final image
 
 Using this method may be preferable for deploying in memory constrained
 environments, because it serves a static frontend export, rather than running
@@ -34,4 +36,4 @@ uploaded_files directories as needed.
 This container should be used with an existing load balancer or reverse proxy to
 terminate TLS.
 
-It is also useful for deploying to simple app platforms, such as Render or Heroku.
+It is also useful for deploying to simple app platforms, such as Render or Heroku.

docker-example/simple-one-port/README.md

@@ -1,7 +1,8 @@
 # simple-one-port
 
 This docker deployment runs Reflex in prod mode, exposing a single HTTP port:
-  * `8080` (`$PORT`) - Caddy server hosting the frontend statically and proxying requests to the backend.
+
+- `8080` (`$PORT`) - Caddy server hosting the frontend statically and proxying requests to the backend.
 
 The deployment also runs a local Redis server to store state for each user.
 
@@ -33,4 +34,4 @@ uploaded_files directories as needed.
 This container should be used with an existing load balancer or reverse proxy to
 terminate TLS.
 
-It is also useful for deploying to simple app platforms, such as Render or Heroku.
+It is also useful for deploying to simple app platforms, such as Render or Heroku.

docker-example/simple-two-port/README.md

@@ -1,8 +1,9 @@
 # simple-two-port
 
 This docker deployment runs Reflex in prod mode, exposing two HTTP ports:
-  * `3000` - node NextJS server using optimized production build
-  * `8000` - python gunicorn server hosting the Reflex backend
+
+- `3000` - node NextJS server using optimized production build
+- `8000` - python gunicorn server hosting the Reflex backend
 
 The deployment also runs a local Redis server to store state for each user.
 
@@ -41,4 +42,4 @@ handle @backend_routes {
 }
 
 reverse_proxy localhost:3000
-```
+```

docs/DEBUGGING.md

@@ -12,17 +12,17 @@ app with breakpoints.
 
 ```json
 {
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "name": "Reflex App",
-            "type": "python",
-            "request": "launch",
-            "module": "reflex",
-            "args": "run --env dev",
-            "justMyCode": true,
-            "cwd": "${fileDirname}/.."
-        }
-    ]
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Reflex App",
+      "type": "python",
+      "request": "launch",
+      "module": "reflex",
+      "args": "run --env dev",
+      "justMyCode": true,
+      "cwd": "${fileDirname}/.."
+    }
+  ]
 }
-```
+```

docs/de/README.md

@@ -1,4 +1,3 @@
-
 <div align="center">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_dark.svg#gh-light-mode-only" alt="Reflex Logo" width="300px">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_light.svg#gh-dark-mode-only" alt="Reflex Logo" width="300px">
@@ -6,10 +5,12 @@
 <hr>
 
 ### **✨ Performante, anpassbare Web-Apps in purem Python. Bereitstellung in Sekunden. ✨**
+
 [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
 ![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
 [![Documentation](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
 [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
+
 </div>
 
 ---
@@ -23,9 +24,10 @@
 Reflex ist eine Bibliothek, mit der man Full-Stack-Web-Applikationen in purem Python erstellen kann.
 
 Wesentliche Merkmale:
-* **Pures Python** - Schreibe dein Front- und Backend in Python, es gibt also keinen Grund, JavaScript zu lernen.
-* **Volle Flexibilität** - Reflex ist einfach zu handhaben, kann aber auch für komplexe Anwendungen skaliert werden.
-* **Sofortige Bereitstellung** - Nach dem Erstellen kannst du deine App mit einem [einzigen Befehl](https://reflex.dev/docs/hosting/deploy-quick-start/) bereitstellen oder auf deinem eigenen Server hosten.
+
+- **Pures Python** - Schreibe dein Front- und Backend in Python, es gibt also keinen Grund, JavaScript zu lernen.
+- **Volle Flexibilität** - Reflex ist einfach zu handhaben, kann aber auch für komplexe Anwendungen skaliert werden.
+- **Sofortige Bereitstellung** - Nach dem Erstellen kannst du deine App mit einem [einzigen Befehl](https://reflex.dev/docs/hosting/deploy-quick-start/) bereitstellen oder auf deinem eigenen Server hosten.
 
 Auf unserer [Architektur-Seite](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture) erfahren Sie, wie Reflex unter der Haube funktioniert.
 
@@ -61,7 +63,6 @@ Du solltest deine App unter http://localhost:3000 laufen sehen.
 
 Nun kannst du den Quellcode in `my_app_name/my_app_name.py` ändern. Reflex hat schnelle Aktualisierungen, sodass du deine Änderungen sofort siehst, wenn du deinen Code speicherst.
 
-
 ## 🫧 Beispiel-App
 
 Lass uns ein Beispiel durchgehen: die Erstellung einer Benutzeroberfläche für die Bildgenerierung mit [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node). Zur Vereinfachung rufen wir einfach die [OpenAI-API](https://platform.openai.com/docs/api-reference/authentication) auf, aber du könntest dies auch durch ein lokal ausgeführtes ML-Modell ersetzen.
@@ -76,8 +77,6 @@ Lass uns ein Beispiel durchgehen: die Erstellung einer Benutzeroberfläche für
 
 Hier ist der komplette Code, um dies zu erstellen. Das alles wird in einer Python-Datei gemacht!
 
-
-  
 ```python
 import reflex as rx
 import openai
@@ -117,7 +116,7 @@ def index():
                 width="25em",
             ),
             rx.button(
-                "Generate Image", 
+                "Generate Image",
                 on_click=State.get_image,
                 width="25em",
                 loading=State.processing
@@ -137,17 +136,12 @@ app = rx.App()
 app.add_page(index, title="Reflex:DALL-E")
 ```
 
-
-
-
-
 ## Schauen wir uns das mal genauer an.
 
 <div align="center">
 <img src="docs/images/dalle_colored_code_example.png" alt="Erläuterung der Unterschiede zwischen Backend- und Frontend-Teilen der DALL-E-App." width="900" />
 </div>
 
-
 ### **Reflex-UI**
 
 Fangen wir mit der Benutzeroberfläche an.
@@ -224,11 +218,10 @@ Du kannst eine mehrseitige App erstellen, indem du weitere Seiten hinzufügst.
 
 <div align="center">
 
-📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; |  &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; |  &nbsp; 📱 [Komponentenbibliothek](https://reflex.dev/docs/library) &nbsp; |  &nbsp; 🖼️ [Galerie](https://reflex.dev/docs/gallery) &nbsp; |  &nbsp; 🛸 [Bereitstellung](https://reflex.dev/docs/hosting/deploy-quick-start)  &nbsp;   
+📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; | &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; | &nbsp; 📱 [Komponentenbibliothek](https://reflex.dev/docs/library) &nbsp; | &nbsp; 🖼️ [Galerie](https://reflex.dev/docs/gallery) &nbsp; | &nbsp; 🛸 [Bereitstellung](https://reflex.dev/docs/hosting/deploy-quick-start) &nbsp;
 
 </div>
 
-
 ## ✅ Status
 
 Reflex wurde im Dezember 2022 unter dem Namen Pynecone gestartet.
@@ -241,14 +234,14 @@ Reflex hat wöchentliche Veröffentlichungen und neue Features! Stelle sicher, d
 
 Wir begrüßen Beiträge jeder Größe! Hier sind einige gute Möglichkeiten, um in der Reflex-Community zu starten.
 
--   **Tritt unserem Discord bei**: Unser [Discord](https://discord.gg/T5WSbC2YtQ) ist der beste Ort, um Hilfe für dein Reflex-Projekt zu bekommen und zu besprechen, wie du beitragen kannst.
--   **GitHub-Diskussionen**: Eine großartige Möglichkeit, über Funktionen zu sprechen, die du hinzugefügt haben möchtest oder Dinge, die verwirrend sind/geklärt werden müssen.
--   **GitHub-Issues**: [Issues](https://github.com/reflex-dev/reflex/issues) sind eine ausgezeichnete Möglichkeit, Bugs zu melden. Außerdem kannst du versuchen, ein bestehendes Problem zu lösen und eine PR einzureichen.
+- **Tritt unserem Discord bei**: Unser [Discord](https://discord.gg/T5WSbC2YtQ) ist der beste Ort, um Hilfe für dein Reflex-Projekt zu bekommen und zu besprechen, wie du beitragen kannst.
+- **GitHub-Diskussionen**: Eine großartige Möglichkeit, über Funktionen zu sprechen, die du hinzugefügt haben möchtest oder Dinge, die verwirrend sind/geklärt werden müssen.
+- **GitHub-Issues**: [Issues](https://github.com/reflex-dev/reflex/issues) sind eine ausgezeichnete Möglichkeit, Bugs zu melden. Außerdem kannst du versuchen, ein bestehendes Problem zu lösen und eine PR einzureichen.
 
 Wir suchen aktiv nach Mitwirkenden, unabhängig von deinem Erfahrungslevel oder deiner Erfahrung. Um beizutragen, sieh dir [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md) an.
 
-
 ## Vielen Dank an unsere Mitwirkenden:
+
 <a href="https://github.com/reflex-dev/reflex/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=reflex-dev/reflex" />
 </a>

docs/es/README.md

@@ -1,4 +1,3 @@
-
 <div align="center">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_dark.svg#gh-light-mode-only" alt="Reflex Logo" width="300px">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_light.svg#gh-dark-mode-only" alt="Reflex Logo" width="300px">
@@ -6,11 +5,13 @@
 <hr>
 
 ### **✨ Aplicaciones web personalizables y eficaces en Python puro. Despliega tu aplicación en segundos. ✨**
+
 [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
 ![Pruebas](https://github.com/pynecone-io/pynecone/actions/workflows/integration.yml/badge.svg)
 ![Versiones](https://img.shields.io/pypi/pyversions/reflex.svg)
 [![Documentación](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
 [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
+
 </div>
 
 ---
@@ -24,9 +25,10 @@
 Reflex es una biblioteca para construir aplicaciones web full-stack en Python puro.
 
 Características clave:
-* **Python puro** - Escribe el frontend y backend de tu aplicación en Python, sin necesidad de aprender JavaScript.
-* **Flexibilidad total** - Reflex es fácil para empezar, pero también puede escalar a aplicaciones complejas.
-* **Despliegue instantáneo** - Después de construir, despliega tu aplicación con un [solo comando](https://reflex.dev/docs/hosting/deploy-quick-start/) u hospédala en tu propio servidor.
+
+- **Python puro** - Escribe el frontend y backend de tu aplicación en Python, sin necesidad de aprender JavaScript.
+- **Flexibilidad total** - Reflex es fácil para empezar, pero también puede escalar a aplicaciones complejas.
+- **Despliegue instantáneo** - Después de construir, despliega tu aplicación con un [solo comando](https://reflex.dev/docs/hosting/deploy-quick-start/) u hospédala en tu propio servidor.
 
 Consulta nuestra [página de arquitectura](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture) para aprender cómo funciona Reflex en detalle.
 
@@ -62,7 +64,6 @@ Debería ver su aplicación ejecutándose en http://localhost:3000.
 
 Ahora puede modificar el código fuente en `my_app_name/my_app_name.py`. Reflex se actualiza rápidamente para que pueda ver los cambios al instante cuando guarde el código.
 
-
 ## 🫧 Ejemplo de una Aplicación
 
 Veamos un ejemplo: crearemos una UI de generación de imágenes en torno a [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node). Para simplificar, solo llamamos a la [API de OpenAI](https://platform.openai.com/docs/api-reference/authentication), pero podrías reemplazar esto con un modelo ML ejecutado localmente.
@@ -102,7 +103,7 @@ class State(rx.State):
         )
         self.image_url = response.data[0].url
         self.processing, self.complete = False, True
-        
+
 
 def index():
     return rx.center(
@@ -114,7 +115,7 @@ def index():
                 width="25em",
             ),
             rx.button(
-                "Generate Image", 
+                "Generate Image",
                 on_click=State.get_image,
                 width="25em",
                 loading=State.processing
@@ -215,11 +216,10 @@ Puedes crear una aplicación multipágina añadiendo más páginas.
 
 <div align="center">
 
-📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; |  &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; |  &nbsp; 📱 [Librería de componentes](https://reflex.dev/docs/library) &nbsp; |  &nbsp; 🖼️ [Galería](https://reflex.dev/docs/gallery) &nbsp; |  &nbsp; 🛸 [Despliegue](https://reflex.dev/docs/hosting/deploy-quick-start)  &nbsp;   
+📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; | &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; | &nbsp; 📱 [Librería de componentes](https://reflex.dev/docs/library) &nbsp; | &nbsp; 🖼️ [Galería](https://reflex.dev/docs/gallery) &nbsp; | &nbsp; 🛸 [Despliegue](https://reflex.dev/docs/hosting/deploy-quick-start) &nbsp;
 
 </div>
 
-
 ## ✅ Estado
 
 Reflex se lanzó en diciembre de 2022 con el nombre de Pynecone.
@@ -232,9 +232,9 @@ Reflex se lanzó en diciembre de 2022 con el nombre de Pynecone.
 
 ¡Aceptamos contribuciones de cualquier tamaño! A continuación encontrará algunas buenas formas de iniciarse en la comunidad Reflex.
 
--   **Únete a nuestro  Discord**: Nuestro [Discord](https://discord.gg/T5WSbC2YtQ) es el mejor lugar para obtener ayuda en su proyecto Reflex y discutir cómo puedes contribuir.
--   **Discusiones de GitHub**: Una excelente manera de hablar sobre las características que deseas agregar o las cosas que te resultan confusas o necesitan aclaración.
--   **GitHub Issues**: Las incidencias son una forma excelente de informar de errores. Además, puedes intentar resolver un problema existente y enviar un PR.
+- **Únete a nuestro Discord**: Nuestro [Discord](https://discord.gg/T5WSbC2YtQ) es el mejor lugar para obtener ayuda en su proyecto Reflex y discutir cómo puedes contribuir.
+- **Discusiones de GitHub**: Una excelente manera de hablar sobre las características que deseas agregar o las cosas que te resultan confusas o necesitan aclaración.
+- **GitHub Issues**: Las incidencias son una forma excelente de informar de errores. Además, puedes intentar resolver un problema existente y enviar un PR.
 
 Buscamos colaboradores, sin importar su nivel o experiencia. Para contribuir consulta [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
 

docs/in/README.md

@@ -1,4 +1,3 @@
-
 <div align="center">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_dark.svg#gh-light-mode-only" alt="Reflex लोगो" width="300px">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_light.svg#gh-dark-mode-only" alt="Reflex लोगो" width="300px">

docs/it/README.md

@@ -1,4 +1,3 @@
-
 <div align="center">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_dark.svg#gh-light-mode-only" alt="Reflex Logo" width="300px">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_light.svg#gh-dark-mode-only" alt="Reflex Logo" width="300px">
@@ -6,15 +5,19 @@
 <hr>
 
 ### **✨ App web performanti e personalizzabili in puro Python. Distribuisci in pochi secondi. ✨**
+
 [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
 ![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
 [![Documentaiton](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
 [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
+
 </div>
 
 ---
+
 [English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) |
 [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md)
+
 ---
 
 ## ⚙️ Installazione
@@ -86,7 +89,7 @@ class State(rx.State):
         response = openai.Image.create(prompt=self.prompt, n=1, size="1024x1024")
         self.image_url = response["data"][0]["url"]
         self.processing, self.complete = False, True
-        
+
 def index():
     return rx.center(
         rx.vstack(
@@ -172,7 +175,7 @@ def get_image(self):
 
 Dentro lo stato, definiamo funzioni chiamate gestori di eventi che cambiano le vars dello stato. I gestori di eventi sono il modo in cui possiamo modificare lo stato in Reflex. Possono essere chiamati in risposta alle azioni dell'utente, come fare clic su un pulsante o digitare in una casella di testo. Queste azioni vengono chiamate eventi.
 
-La nostra app DALL·E ha un gestore di eventi, `get_image` con cui ottiene questa immagine dall'API OpenAI. Utilizzando `yield`  nel mezzo di un gestore di eventi farà sì che l'UI venga aggiornata. Altrimenti, l'UI verrà aggiornata alla fine del gestore di eventi.
+La nostra app DALL·E ha un gestore di eventi, `get_image` con cui ottiene questa immagine dall'API OpenAI. Utilizzando `yield` nel mezzo di un gestore di eventi farà sì che l'UI venga aggiornata. Altrimenti, l'UI verrà aggiornata alla fine del gestore di eventi.
 
 ### **Instradamento (Routing)**
 
@@ -194,7 +197,7 @@ Puoi creare un'app multi-pagina aggiungendo altre pagine.
 
 <div align="center">
 
-📑 [Documentazione](https://reflex.dev/docs/getting-started/introduction) &nbsp; |  &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; |  &nbsp; 📱 [Libreria Componenti](https://reflex.dev/docs/library) &nbsp; |  &nbsp; 🖼️ [Immagini](https://reflex.dev/docs/gallery) &nbsp; |  &nbsp; 🛸 [Distribuzione](https://reflex.dev/docs/hosting/deploy)  &nbsp;   
+📑 [Documentazione](https://reflex.dev/docs/getting-started/introduction) &nbsp; | &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; | &nbsp; 📱 [Libreria Componenti](https://reflex.dev/docs/library) &nbsp; | &nbsp; 🖼️ [Immagini](https://reflex.dev/docs/gallery) &nbsp; | &nbsp; 🛸 [Distribuzione](https://reflex.dev/docs/hosting/deploy) &nbsp;
 
 </div>
 
@@ -204,10 +207,10 @@ Reflex è stato lanciato nel dicembre 2022 con il nome Pynecone.
 
 Da luglio 2023, siamo nella fase di Beta Pubblica.
 
--   :white_check_mark: **Alfa Pubblica**: Chiunque può installare e utilizzare Reflex. Potrebbero esserci dei problemi, ma stiamo lavorando per risolverli attivamente.
--   :large_orange_diamond: **Beta Pubblica**: Abbastanza stabile per casi d'uso non aziendali.
--   **Beta Hosting Pubblico**: _Opzionalmente_, distribuisci e ospita le tue app su Reflex! 
--   **Pubblico**: Reflex è pronto per la produzione. 
+- :white_check_mark: **Alfa Pubblica**: Chiunque può installare e utilizzare Reflex. Potrebbero esserci dei problemi, ma stiamo lavorando per risolverli attivamente.
+- :large_orange_diamond: **Beta Pubblica**: Abbastanza stabile per casi d'uso non aziendali.
+- **Beta Hosting Pubblico**: _Opzionalmente_, distribuisci e ospita le tue app su Reflex!
+- **Pubblico**: Reflex è pronto per la produzione.
 
 Reflex ha nuove versioni e funzionalità in arrivo ogni settimana! Assicurati di :star: mettere una stella e :eyes: osservare questa repository per rimanere aggiornato.
 
@@ -215,13 +218,12 @@ Reflex ha nuove versioni e funzionalità in arrivo ogni settimana! Assicurati di
 
 Diamo il benvenuto a contributi di qualsiasi dimensione! Di seguito sono alcuni modi per iniziare nella comunità Reflex.
 
--   **Unisciti al nostro Discord**: Il nostro [Discord](https://discord.gg/T5WSbC2YtQ) è posto migliore per ottenere aiuto sul tuo progetto Reflex e per discutere come puoi contribuire.
--   **Discussioni su GitHub**: Un ottimo modo per parlare delle funzionalità che desideri aggiungere o di cose che creano confusione o necessitano chiarimenti.
--   **GitHub Issues**: Sono un ottimo modo per segnalare bug. Inoltre, puoi provare a risolvere un problema esistente e inviare un PR. 
+- **Unisciti al nostro Discord**: Il nostro [Discord](https://discord.gg/T5WSbC2YtQ) è posto migliore per ottenere aiuto sul tuo progetto Reflex e per discutere come puoi contribuire.
+- **Discussioni su GitHub**: Un ottimo modo per parlare delle funzionalità che desideri aggiungere o di cose che creano confusione o necessitano chiarimenti.
+- **GitHub Issues**: Sono un ottimo modo per segnalare bug. Inoltre, puoi provare a risolvere un problema esistente e inviare un PR.
 
 Stiamo attivamente cercando collaboratori, indipendentemente dal tuo livello di abilità o esperienza.
 
-
 ## Licenza
 
 Reflex è open-source e rilasciato sotto la [Licenza Apache 2.0](LICENSE).

docs/ja/README.md

@@ -1,4 +1,3 @@
-
 <div align="center">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_dark.svg#gh-light-mode-only" alt="Reflex Logo" width="300px">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_light.svg#gh-dark-mode-only" alt="Reflex Logo" width="300px">

docs/kr/README.md

@@ -1,4 +1,3 @@
-
 <div align="center">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_dark.svg#gh-light-mode-only" alt="Reflex Logo" width="300px">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_light.svg#gh-dark-mode-only" alt="Reflex Logo" width="300px">
@@ -6,15 +5,18 @@
 <hr>
 
 ### **✨ 순수 Python으로 고성능 사용자 정의 웹앱을 만들어 보세요. 몇 초만에 배포 가능합니다. ✨**
+
 [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
 ![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
 [![Documentaiton](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
 [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
+
 </div>
 
 ---
-[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md)
----
+
+## [English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md)
+
 ## ⚙️ 설치
 
 터미널을 열고 실행하세요. (Python 3.10+ 필요):
@@ -47,7 +49,6 @@ http://localhost:3000 에서 앱이 실행 됩니다.
 
 이제 `my_app_name/my_app_name.py`에서 소스코드를 수정할 수 있습니다. Reflex는 빠른 새로고침을 지원하므로 코드를 저장할 때마다 즉시 변경 사항을 볼 수 있습니다.
 
-
 ## 🫧 예시 앱
 
 예시를 살펴보겠습니다: DALL·E를 중심으로 이미지 생성 UI를 만들어 보겠습니다. 간단하게 하기 위해 OpenAI API를 호출했지만, 이를 로컬에서 실행되는 ML 모델로 대체할 수 있습니다.
@@ -101,7 +102,7 @@ def index():
                 width="25em",
             ),
             rx.button(
-                "Generate Image", 
+                "Generate Image",
                 on_click=State.get_image,
                 width="25em",
                 loading=State.processing
@@ -136,11 +137,10 @@ def index():
 
 `index` 함수는 앱의 프론트엔드를 정의합니다.
 
-`center`, `vstack`, `input`, `button`과 같은 다양한 컴포넌트를 사용하여 프론트엔드를 구축합니다. 
-컴포넌트들은 복잡한 레이아웃을 만들기 위해 서로 중첩될 수 있습니다. 
+`center`, `vstack`, `input`, `button`과 같은 다양한 컴포넌트를 사용하여 프론트엔드를 구축합니다.
+컴포넌트들은 복잡한 레이아웃을 만들기 위해 서로 중첩될 수 있습니다.
 그리고 키워드 인자를 사용하여 CSS의 모든 기능을 사용하여 스타일을 지정할 수 있습니다.
 
-
 Reflex는 시작하기 위한 [60개 이상의 기본 컴포넌트](https://reflex.dev/docs/library)를 제공하고 있습니다. 더 많은 컴포넌트를 추가하고 있으며, [자신만의 컴포넌트를 생성하는 것](https://reflex.dev/docs/wrapping-react/overview/)도 쉽습니다.
 
 ### **State**
@@ -201,24 +201,20 @@ app.add_page(index, title="DALL-E")
 
 <div align="center">
 
-📑 [문서](https://reflex.dev/docs/getting-started/introduction) &nbsp; |  &nbsp; 🗞️ [블로그](https://reflex.dev/blog) &nbsp; |  &nbsp; 📱 [컴포넌트 라이브러리](https://reflex.dev/docs/library) &nbsp; |  &nbsp; 🖼️ [갤러리](https://reflex.dev/docs/gallery) &nbsp; |  &nbsp; 🛸 [배포](https://reflex.dev/docs/hosting/deploy)  &nbsp;   
+📑 [문서](https://reflex.dev/docs/getting-started/introduction) &nbsp; | &nbsp; 🗞️ [블로그](https://reflex.dev/blog) &nbsp; | &nbsp; 📱 [컴포넌트 라이브러리](https://reflex.dev/docs/library) &nbsp; | &nbsp; 🖼️ [갤러리](https://reflex.dev/docs/gallery) &nbsp; | &nbsp; 🛸 [배포](https://reflex.dev/docs/hosting/deploy) &nbsp;
 
 </div>
 
-
-
-
-
 ## ✅ 상태
 
 Reflex는 2022년 12월 Pynecone이라는 이름으로 출시되었습니다.
 
 2023년 7월 현재, 우리는 **Public Beta** 상태에 있습니다.
 
--   :white_check_mark: **Public Alpha**: 누구나 Reflex를 설치하고 사용할 수 있습니다. 문제가 발생할 수도 있지만 적극적으로 수정합니다.
--   :large_orange_diamond: **Public Beta**: 비상업적 용도로 충분히 안정적입니다.
--   **Public Hosting Beta**: _선택적으로_, Reflex에서 앱을 배포하고 호스팅할 수 있습니다!
--   **Public** : Reflex는 프로덕션 준비를 마쳤습니다.
+- :white_check_mark: **Public Alpha**: 누구나 Reflex를 설치하고 사용할 수 있습니다. 문제가 발생할 수도 있지만 적극적으로 수정합니다.
+- :large_orange_diamond: **Public Beta**: 비상업적 용도로 충분히 안정적입니다.
+- **Public Hosting Beta**: _선택적으로_, Reflex에서 앱을 배포하고 호스팅할 수 있습니다!
+- **Public** : Reflex는 프로덕션 준비를 마쳤습니다.
 
 Reflex는 매주 새로운 릴리즈와 기능을 제공합니다! 최신 정보를 확인하려면 :star: Star와 :eyes: Watch를 눌러 이 저장소를 확인하세요.
 
@@ -226,9 +222,9 @@ Reflex는 매주 새로운 릴리즈와 기능을 제공합니다! 최신 정보
 
 우리는 모든 기여를 환영합니다! 아래는 Reflex 커뮤니티에 참여하는 좋은 방법입니다.
 
--   **Discord 참여**: 우리의 [Discord](https://discord.gg/T5WSbC2YtQ)는 Reflex 프로젝트에 대한 도움을 받고 기여하는 방법을 논의하는 최고의 장소입니다.
--   **GitHub Discussions**: 추가하고 싶은 기능이나 혼란스럽거나 해결이 필요한 것들에 대해 이야기하는 좋은 방법입니다.
--   **GitHub Issues**: 이것은 버그를 보고하는 훌륭한 방법입니다. 또한, 기존의 이슈를 해결하고 PR을 제출할 수 있습니다.
+- **Discord 참여**: 우리의 [Discord](https://discord.gg/T5WSbC2YtQ)는 Reflex 프로젝트에 대한 도움을 받고 기여하는 방법을 논의하는 최고의 장소입니다.
+- **GitHub Discussions**: 추가하고 싶은 기능이나 혼란스럽거나 해결이 필요한 것들에 대해 이야기하는 좋은 방법입니다.
+- **GitHub Issues**: 이것은 버그를 보고하는 훌륭한 방법입니다. 또한, 기존의 이슈를 해결하고 PR을 제출할 수 있습니다.
 
 우리는 능력이나 경험에 상관없이 적극적으로 기여자를 찾고 있습니다.
 

docs/pe/README.md

@@ -1,4 +1,3 @@
-
 <div align="center">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_dark.svg#gh-light-mode-only" alt="Reflex Logo" width="300px">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_light.svg#gh-dark-mode-only" alt="Reflex Logo" width="300px">
@@ -6,10 +5,12 @@
 <hr>
 
 ### **✨ برنامه های تحت وب قابل تنظیم، کارآمد تماما پایتونی که در چند ثانیه مستقر(دپلوی) می‎شود. ✨**
+
 [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
 ![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
 [![Documentation](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
 [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
+
 </div>
 
 ---
@@ -23,9 +24,10 @@
 رفلکس(Reflex) یک کتابخانه برای ساخت برنامه های وب فول استک تماما پایتونی است.
 
 ویژگی های کلیدی:
-* **تماما پایتونی** - فرانت اند و بک اند برنامه خود را همه در پایتون بنویسید، بدون نیاز به یادگیری جاوا اسکریپت.
-* **انعطاف پذیری کامل** - شروع به کار با Reflex آسان است، اما می تواند به برنامه های پیچیده نیز تبدیل شود.
-* **دپلوی فوری** - پس از ساخت، برنامه خود را با [یک دستور](https://reflex.dev/docs/hosting/deploy-quick-start/) دپلوی کنید یا آن را روی سرور خود میزبانی کنید.
+
+- **تماما پایتونی** - فرانت اند و بک اند برنامه خود را همه در پایتون بنویسید، بدون نیاز به یادگیری جاوا اسکریپت.
+- **انعطاف پذیری کامل** - شروع به کار با Reflex آسان است، اما می تواند به برنامه های پیچیده نیز تبدیل شود.
+- **دپلوی فوری** - پس از ساخت، برنامه خود را با [یک دستور](https://reflex.dev/docs/hosting/deploy-quick-start/) دپلوی کنید یا آن را روی سرور خود میزبانی کنید.
 
 برای آشنایی با نحوه عملکرد Reflex [صفحه معماری](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture) را ببینید.
 
@@ -61,7 +63,6 @@ reflex run
 
 اکنون می‌توانید کد منبع را در «my_app_name/my_app_name.py» تغییر دهید. Reflex دارای تازه‌سازی‌های سریعی است، بنابراین می‌توانید تغییرات خود را بلافاصله پس از ذخیره کد خود مشاهده کنید.
 
-
 ## 🫧 Example App - برنامه نمونه
 
 بیایید یک مثال بزنیم: ایجاد یک رابط کاربری برای تولید تصویر [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node). برای سادگی، ما فراخوانی میکنیم [OpenAI API](https://platform.openai.com/docs/api-reference/authentication), اما می توانید آن را با یک مدل ML که به صورت محلی اجرا می شود جایگزین کنید.
@@ -76,8 +77,6 @@ reflex run
 
 در اینجا کد کامل برای ایجاد این پروژه آمده است. همه اینها در یک فایل پایتون انجام می شود!
 
-
-  
 ```python
 import reflex as rx
 import openai
@@ -117,7 +116,7 @@ def index():
                 width="25em",
             ),
             rx.button(
-                "Generate Image", 
+                "Generate Image",
                 on_click=State.get_image,
                 width="25em",
                 loading=State.processing
@@ -137,18 +136,13 @@ app = rx.App()
 app.add_page(index, title="Reflex:DALL-E")
 ```
 
-
-
-
-
 ## بیاید سادش کنیم
 
 <div align="center">
 <img src="docs/images/dalle_colored_code_example.png" alt="Explaining the differences between backend and frontend parts of the DALL-E app." width="900" />
 </div>
 
-
-### **Reflex UI - رابط کاربری رفلکس** 
+### **Reflex UI - رابط کاربری رفلکس**
 
 بیایید با رابط کاربری شروع کنیم.
 
@@ -164,7 +158,7 @@ def index():
 ما از اجزای مختلفی مثل `center`, `vstack`, `input` و `button` استفاده میکنیم تا فرانت اند را بسازیم. اجزاء را می توان درون یکدیگر قرار داد
 برای ایجاد طرح بندی های پیچیده می توانید از args کلمات کلیدی برای استایل دادن به آنها از CSS استفاده کنید.
 
-رفلکس دارای [بیش از 60  جزء](https://reflex.dev/docs/library) برای کمک به شما برای شروع. ما به طور فعال اجزای بیشتری را اضافه می کنیم, و این خیلی آسان است که [اجزا خود را بسازید](https://reflex.dev/docs/wrapping-react/overview/).
+رفلکس دارای [بیش از 60 جزء](https://reflex.dev/docs/library) برای کمک به شما برای شروع. ما به طور فعال اجزای بیشتری را اضافه می کنیم, و این خیلی آسان است که [اجزا خود را بسازید](https://reflex.dev/docs/wrapping-react/overview/).
 
 ### **State - حالت**
 
@@ -225,31 +219,30 @@ app.add_page(index, title="DALL-E")
 
 <div align="center">
 
-📑 [اسناد](https://reflex.dev/docs/getting-started/introduction) &nbsp; |  &nbsp; 🗞️ [وبلاگ](https://reflex.dev/blog) &nbsp; |  &nbsp; 📱 [کتابخانه جزء](https://reflex.dev/docs/library) &nbsp; |  &nbsp; 🖼️ [گالری](https://reflex.dev/docs/gallery) &nbsp; |  &nbsp; 🛸 [استقرار](https://reflex.dev/docs/hosting/deploy-quick-start)  &nbsp;   
+📑 [اسناد](https://reflex.dev/docs/getting-started/introduction) &nbsp; | &nbsp; 🗞️ [وبلاگ](https://reflex.dev/blog) &nbsp; | &nbsp; 📱 [کتابخانه جزء](https://reflex.dev/docs/library) &nbsp; | &nbsp; 🖼️ [گالری](https://reflex.dev/docs/gallery) &nbsp; | &nbsp; 🛸 [استقرار](https://reflex.dev/docs/hosting/deploy-quick-start) &nbsp;
 
 </div>
 
-
 ## ✅ Status - وضعیت
 
 رفلکس(reflex) در دسامبر 2022 با نام Pynecone راه اندازی شد.
 
 از فوریه 2024، سرویس میزبانی ما در آلفا است! در این مدت هر کسی می‌تواند برنامه‌های خود را به صورت رایگان اجرا کند. [نقشه راه](https://github.com/reflex-dev/reflex/issues/2727) را ببینید تا متوجه شوید چه برنامه‌ریزی شده است.
 
-رفلکس(reflex) هر هفته نسخه ها و ویژگی های جدیدی دارد! مطمئن شوید که :star: ستاره و  :eyes: این مخزن را تماشا کنید تا به روز بمانید.
+رفلکس(reflex) هر هفته نسخه ها و ویژگی های جدیدی دارد! مطمئن شوید که :star: ستاره و :eyes: این مخزن را تماشا کنید تا به روز بمانید.
 
 ## Contributing - مشارکت کردن
 
 ما از مشارکت در هر اندازه استقبال می کنیم! در زیر چند راه خوب برای شروع در انجمن رفلکس آورده شده است.
 
--   **به Discord ما بپیوندید**: [Discord](https://discord.gg/T5WSbC2YtQ) ما بهترین مکان برای دریافت کمک در مورد پروژه Reflex و بحث در مورد اینکه چگونه می توانید کمک کنید است.
--   **بحث های GitHub**: راهی عالی برای صحبت در مورد ویژگی هایی که می خواهید اضافه کنید یا چیزهایی که گیج کننده هستند/نیاز به توضیح دارند.
--   **قسمت مشکلات GitHub**: [قسمت مشکلات](https://github.com/reflex-dev/reflex/issues) یک راه عالی برای گزارش اشکال هستند. علاوه بر این، می توانید یک مشکل موجود را حل کنید و یک PR(pull request) ارسال کنید.
-
-ما فعالانه به دنبال مشارکت کنندگان هستیم، فارغ از سطح مهارت یا تجربه شما. برای مشارکت  [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md) را بررسی کنید.
+- **به Discord ما بپیوندید**: [Discord](https://discord.gg/T5WSbC2YtQ) ما بهترین مکان برای دریافت کمک در مورد پروژه Reflex و بحث در مورد اینکه چگونه می توانید کمک کنید است.
+- **بحث های GitHub**: راهی عالی برای صحبت در مورد ویژگی هایی که می خواهید اضافه کنید یا چیزهایی که گیج کننده هستند/نیاز به توضیح دارند.
+- **قسمت مشکلات GitHub**: [قسمت مشکلات](https://github.com/reflex-dev/reflex/issues) یک راه عالی برای گزارش اشکال هستند. علاوه بر این، می توانید یک مشکل موجود را حل کنید و یک PR(pull request) ارسال کنید.
 
+ما فعالانه به دنبال مشارکت کنندگان هستیم، فارغ از سطح مهارت یا تجربه شما. برای مشارکت [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md) را بررسی کنید.
 
 ## All Thanks To Our Contributors - با تشکر از همکاران ما:
+
 <a href="https://github.com/reflex-dev/reflex/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=reflex-dev/reflex" />
 </a>

docs/pt/pt_br/README.md

@@ -1,4 +1,3 @@
-
 <div align="center">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_dark.svg#gh-light-mode-only" alt="Reflex Logo" width="300px">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_light.svg#gh-dark-mode-only" alt="Reflex Logo" width="300px">
@@ -6,16 +5,19 @@
 <hr>
 
 ### **✨ Web apps customizáveis, performáticos, em Python puro. Faça deploy em segundos. ✨**
+
 [![Versão PyPI](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
 ![testes](https://github.com/pynecone-io/pynecone/actions/workflows/integration.yml/badge.svg)
 ![versões](https://img.shields.io/pypi/pyversions/reflex.svg)
 [![Documentação](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
 [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
+
 </div>
 
 ---
-[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md)
----
+
+## [English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md)
+
 ## ⚙️ Instalação
 
 Abra um terminal e execute (Requer Python 3.10+):
@@ -48,7 +50,6 @@ Você deve conseguir verificar seu app sendo executado em http://localhost:3000.
 
 Agora, você pode modificar o código fonte em `nome_do_meu_app/nome_do_meu_app.py`. O Reflex apresenta recarregamento rápido para que você possa ver suas mudanças instantâneamente quando você salva o seu código.
 
-
 ## 🫧 Exemplo de App
 
 Veja o seguinte exemplo: criar uma interface de criação de imagens por meio do DALL-E. Para fins de simplicidade, vamos apenas chamar a API da OpenAI, mas você pode substituir esta solução por qualquer modelo de aprendizado de máquina que preferir, executando localmente.
@@ -86,7 +87,7 @@ class State(rx.State):
         response = openai.Image.create(prompt=self.prompt, n=1, size="1024x1024")
         self.image_url = response["data"][0]["url"]
         self.processing, self.complete = False, True
-        
+
 
 def index():
     return rx.center(
@@ -138,7 +139,7 @@ Esta função `index` define o frontend do app.
 Usamos diferentes componentes, como `center`, `vstack`, `input` e `button`, para construir o frontend. Componentes podem ser aninhados um no do outro
 para criar layouts mais complexos. E você pode usar argumentos de chave-valor para estilizá-los com todo o poder do CSS.
 
-O Reflex vem com [60+ componentes nativos](https://reflex.dev/docs/library) para te ajudar. Estamos adicionando ativamente mais componentes, mas também é fácil [criar seus próprios componentes](https://reflex.dev/docs/wrapping-react/overview/). 
+O Reflex vem com [60+ componentes nativos](https://reflex.dev/docs/library) para te ajudar. Estamos adicionando ativamente mais componentes, mas também é fácil [criar seus próprios componentes](https://reflex.dev/docs/wrapping-react/overview/).
 
 ### **Estado**
 
@@ -196,24 +197,20 @@ Você pode criar mais páginas e adicioná-las ao seu app.
 
 <div align="center">
 
-📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; |  &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; |  &nbsp; 📱 [Biblioteca de Componentes](https://reflex.dev/docs/library) &nbsp; |  &nbsp; 🖼️ [Galeria](https://reflex.dev/docs/gallery) &nbsp; |  &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy)  &nbsp;   
+📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; | &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; | &nbsp; 📱 [Biblioteca de Componentes](https://reflex.dev/docs/library) &nbsp; | &nbsp; 🖼️ [Galeria](https://reflex.dev/docs/gallery) &nbsp; | &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy) &nbsp;
 
 </div>
 
-
-
-
-
 ## ✅ Status
 
 O Reflex foi lançado em Dezembro de 2022 com o nome Pynecone.
 
 Em Julho de 2023, estamos no estágio de **Beta Público**.
 
--   :white_check_mark: **Alpha Público**: Qualquer um pode instalar e usar o Reflex. Podem existir alguns problemas, mas estamos trabalhando ativamente para resolvê-los.
--   :large_orange_diamond: **Beta Público**: Estável o suficiente para utilizar em projetos pessoais, com menor criticidade.
--   **Hospedagem Pública Beta**: _Opcionalmente_, implante e hospede os seus apps no Reflex!
--   **Público**: O Reflex está pronto para produção.
+- :white_check_mark: **Alpha Público**: Qualquer um pode instalar e usar o Reflex. Podem existir alguns problemas, mas estamos trabalhando ativamente para resolvê-los.
+- :large_orange_diamond: **Beta Público**: Estável o suficiente para utilizar em projetos pessoais, com menor criticidade.
+- **Hospedagem Pública Beta**: _Opcionalmente_, implante e hospede os seus apps no Reflex!
+- **Público**: O Reflex está pronto para produção.
 
 O Reflex agora possui novas versões e funcionalidades sendo lançadas toda semana! Lembre-se de marcar o repositório com uma :star: estrela e :eyes: acompanhe para ficar atualizado sobre o projeto.
 
@@ -221,9 +218,9 @@ O Reflex agora possui novas versões e funcionalidades sendo lançadas toda sema
 
 Nós somos abertos a contribuições de qualquer tamanho! Abaixo, seguem algumas boas formas de começar a contribuir para a comunidade do Reflex.
 
--   **Entre no nosso Discord**: Nosso [Discord](https://discord.gg/T5WSbC2YtQ) é o melhor lugar para conseguir ajuda no seu projeto Reflex e para discutir como você pode contribuir.
--   **Discussões no GitHub**: Uma boa forma de conversar sobre funcionalidades que você gostaria de ver ou coisas que ainda estão confusas/exigem ajuda.
--   **Issues no GitHub**: Excelente forma de reportar bugs. Além disso, você pode tentar resolver alguma issue existente e enviar um Pull Request.
+- **Entre no nosso Discord**: Nosso [Discord](https://discord.gg/T5WSbC2YtQ) é o melhor lugar para conseguir ajuda no seu projeto Reflex e para discutir como você pode contribuir.
+- **Discussões no GitHub**: Uma boa forma de conversar sobre funcionalidades que você gostaria de ver ou coisas que ainda estão confusas/exigem ajuda.
+- **Issues no GitHub**: Excelente forma de reportar bugs. Além disso, você pode tentar resolver alguma issue existente e enviar um Pull Request.
 
 Estamos ativamente buscando novos contribuidores, não importa o seu nível de habilidade ou experiência.
 

docs/tr/README.md

@@ -1,4 +1,3 @@
-
 <div align="center">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_dark.svg#gh-light-mode-only" alt="Reflex Logo" width="300px">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_light.svg#gh-dark-mode-only" alt="Reflex Logo" width="300px">
@@ -11,6 +10,7 @@
 ![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
 [![Documentaiton](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
 [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
+
 </div>
 
 ---
@@ -88,7 +88,7 @@ class State(rx.State):
         response = openai.Image.create(prompt=self.prompt, n=1, size="1024x1024")
         self.image_url = response["data"][0]["url"]
         self.processing, self.complete = False, True
-        
+
 
 def index():
     return rx.center(
@@ -197,14 +197,10 @@ Daha fazla sayfa ekleyerek çok sayfalı bir uygulama oluşturabilirsiniz.
 
 <div align="center">
 
-📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; |  &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; |  &nbsp; 📱 [Component Library](https://reflex.dev/docs/library) &nbsp; |  &nbsp; 🖼️ [Templates](https://reflex.dev/templates/) &nbsp; |  &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy)  &nbsp;   
+📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; | &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; | &nbsp; 📱 [Component Library](https://reflex.dev/docs/library) &nbsp; | &nbsp; 🖼️ [Templates](https://reflex.dev/templates/) &nbsp; | &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy) &nbsp;
 
 </div>
 
-
-
-
-
 ## ✅ Durum
 
 Reflex, Aralık 2022'de Pynecone adıyla piyasaya sürüldü.

docs/vi/README.md

@@ -1,4 +1,3 @@
-
 <div align="center">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_dark.svg#gh-light-mode-only" alt="Reflex Logo" width="300px">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_light.svg#gh-dark-mode-only" alt="Reflex Logo" width="300px">
@@ -6,10 +5,12 @@
 <hr>
 
 ### **✨ Ứng dụng web hiệu suất cao, tùy chỉnh bằng Python thuần. Deploy trong vài giây. ✨**
+
 [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
 ![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
 [![Documentation](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
 [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
+
 </div>
 
 ---
@@ -23,9 +24,10 @@
 Reflex là một thư viện để xây dựng ứng dụng web toàn bộ bằng Python thuần.
 
 Các tính năng chính:
-* **Python thuần tuý** - Viết toàn bộ ứng dụng cả backend và frontend hoàn toàn bằng Python, không cần học JavaScript.
-* **Full Flexibility** - Reflex dễ dàng để bắt đầu, nhưng cũng có thể mở rộng lên các ứng dụng phức tạp.
-* **Deploy Instantly** - Sau khi xây dựng ứng dụng, bạn có thể triển khai bằng [một dòng lệnh](https://reflex.dev/docs/hosting/deploy-quick-start/) hoặc triển khai trên server của riêng bạn.
+
+- **Python thuần tuý** - Viết toàn bộ ứng dụng cả backend và frontend hoàn toàn bằng Python, không cần học JavaScript.
+- **Full Flexibility** - Reflex dễ dàng để bắt đầu, nhưng cũng có thể mở rộng lên các ứng dụng phức tạp.
+- **Deploy Instantly** - Sau khi xây dựng ứng dụng, bạn có thể triển khai bằng [một dòng lệnh](https://reflex.dev/docs/hosting/deploy-quick-start/) hoặc triển khai trên server của riêng bạn.
 
 Đọc [bài viết về kiến trúc hệ thống](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture) để hiểu rõ các hoạt động của Reflex.
 
@@ -49,7 +51,7 @@ cd my_app_name
 reflex init
 ```
 
-Lệnh này tạo ra một ứng dụng mẫu trong một thư mục mới. 
+Lệnh này tạo ra một ứng dụng mẫu trong một thư mục mới.
 
 Bạn có thể chạy ứng dụng ở chế độ phát triển.
 
@@ -61,10 +63,9 @@ Bạn có thể xem ứng dụng của bạn ở địa chỉ http://localhost:3
 
 Bạn có thể thay đổi mã nguồn ở `my_app_name/my_app_name.py`. Reflex nhanh chóng làm mới và bạn có thể thấy thay đổi trên ứng dụng của bạn ngay lập tức khi bạn lưu file.
 
-
 ## 🫧 Ứng dụng ví dụ
 
-Bắt đầu với ví dụ: tạo một ứng dụng tạo ảnh bằng [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node). Để cho đơn giản, chúng  ta sẽ sử dụng [OpenAI API](https://platform.openai.com/docs/api-reference/authentication), nhưng bạn có thể sử dụng model của chính bạn được triển khai trên local.
+Bắt đầu với ví dụ: tạo một ứng dụng tạo ảnh bằng [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node). Để cho đơn giản, chúng ta sẽ sử dụng [OpenAI API](https://platform.openai.com/docs/api-reference/authentication), nhưng bạn có thể sử dụng model của chính bạn được triển khai trên local.
 
 &nbsp;
 
@@ -76,8 +77,6 @@ Bắt đầu với ví dụ: tạo một ứng dụng tạo ảnh bằng [DALL·
 
 Đây là toàn bộ đoạn mã để xây dựng ứng dụng trên. Nó được viết hoàn toàn trong một file Python!
 
-
-  
 ```python
 import reflex as rx
 import openai
@@ -117,7 +116,7 @@ def index():
                 width="25em",
             ),
             rx.button(
-                "Generate Image", 
+                "Generate Image",
                 on_click=State.get_image,
                 width="25em",
                 loading=State.processing
@@ -137,17 +136,12 @@ app = rx.App()
 app.add_page(index, title="Reflex:DALL-E")
 ```
 
-
-
-
-
 ## Hãy phân tích chi tiết.
 
 <div align="center">
 <img src="../images/dalle_colored_code_example.png" alt="Explaining the differences between backend and frontend parts of the DALL-E app." width="900" />
 </div>
 
-
 ### **Reflex UI**
 
 Bắt đầu với giao diện chính.
@@ -218,7 +212,6 @@ app = rx.App()
 
 Chúng ta thêm một trang ở đầu ứng dụng bằng index component. Chúng ta cũng thêm tiêu đề của ứng dụng để hiển thị lên trình duyệt.
 
-
 ```python
 app.add_page(index, title="DALL-E")
 ```
@@ -229,11 +222,10 @@ Bạn có thể tạo một ứng dụng nhiều trang bằng cách thêm trang.
 
 <div align="center">
 
-📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; |  &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; |  &nbsp; 📱 [Component Library](https://reflex.dev/docs/library) &nbsp; |  &nbsp; 🖼️ [Templates](https://reflex.dev/templates/) &nbsp; |  &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start)  &nbsp;   
+📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; | &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; | &nbsp; 📱 [Component Library](https://reflex.dev/docs/library) &nbsp; | &nbsp; 🖼️ [Templates](https://reflex.dev/templates/) &nbsp; | &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start) &nbsp;
 
 </div>
 
-
 ## ✅ Status
 
 Reflex phát hành vào tháng 12/2022 với tên là Pynecone.
@@ -246,15 +238,15 @@ Reflex ra phiên bản mới với các tính năng mới hàng tuần! Hãy :st
 
 Chúng tôi chào đón mọi đóng góp dù lớn hay nhỏ. Dưới đây là các cách để bắt đầu với cộng đồng Reflex.
 
--   **Discord**: [Discord](https://discord.gg/T5WSbC2YtQ) của chúng tôi là nơi tốt nhất để nhờ sự giúp đỡ và thảo luận các bạn có thể đóng góp.
--   **GitHub Discussions**: Là cách tốt nhất để thảo luận về các tính năng mà bạn có thể đóng góp hoặc những điều bạn chưa rõ.
--   **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues) là nơi tốt nhất để thông báo. Ngoài ra bạn có thể sửa chữa các vấn đề bằng cách tạo PR.
+- **Discord**: [Discord](https://discord.gg/T5WSbC2YtQ) của chúng tôi là nơi tốt nhất để nhờ sự giúp đỡ và thảo luận các bạn có thể đóng góp.
+- **GitHub Discussions**: Là cách tốt nhất để thảo luận về các tính năng mà bạn có thể đóng góp hoặc những điều bạn chưa rõ.
+- **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues) là nơi tốt nhất để thông báo. Ngoài ra bạn có thể sửa chữa các vấn đề bằng cách tạo PR.
 
-Chúng tôi luôn sẵn sàng tìm kiếm các contributor, bất kể kinh nghiệm. Để tham gia đóng góp, xin mời xem 
+Chúng tôi luôn sẵn sàng tìm kiếm các contributor, bất kể kinh nghiệm. Để tham gia đóng góp, xin mời xem
 [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
 
-
 ## Xin cảm ơn các Contributors:
+
 <a href="https://github.com/reflex-dev/reflex/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=reflex-dev/reflex" />
 </a>

docs/zh/zh_cn/README.md

@@ -1,4 +1,3 @@
-
 <div align="center">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_dark.svg#gh-light-mode-only" alt="Reflex Logo" width="300px">
 <img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_light.svg#gh-dark-mode-only" alt="Reflex Logo" width="300px">
@@ -6,10 +5,12 @@
 <hr>
 
 ### **✨ 使用 Python 创建高效且可自定义的网页应用程序,几秒钟内即可部署.✨**
+
 [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
 ![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
 [![Documentaiton](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
 [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
+
 </div>
 
 ---
@@ -23,9 +24,10 @@
 Reflex 是一个使用纯Python构建全栈web应用的库。
 
 关键特性：
-* **纯Python** - 前端、后端开发全都使用Python，不需要学习Javascript。
-* **完整的灵活性** - Reflex很容易上手, 并且也可以扩展到复杂的应用程序。
-* **立即部署** - 构建后，使用[单个命令](https://reflex.dev/docs/hosting/deploy-quick-start/)就能部署应用程序；或者也可以将其托管在您自己的服务器上。
+
+- **纯Python** - 前端、后端开发全都使用Python，不需要学习Javascript。
+- **完整的灵活性** - Reflex很容易上手, 并且也可以扩展到复杂的应用程序。
+- **立即部署** - 构建后，使用[单个命令](https://reflex.dev/docs/hosting/deploy-quick-start/)就能部署应用程序；或者也可以将其托管在您自己的服务器上。
 
 请参阅我们的[架构页](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture)了解Reflex如何工作。
 
@@ -75,9 +77,6 @@ reflex run
 
 这是这个范例的完整代码,只需要一个 Python 文件就可以完成!
 
-
-
-
 ```python
 import reflex as rx
 import openai
@@ -87,7 +86,7 @@ openai_client = openai.OpenAI()
 
 class State(rx.State):
     """The app state."""
-    
+
     prompt = ""
     image_url = ""
     processing = False
@@ -117,7 +116,7 @@ def index():
                 width="25em",
             ),
             rx.button(
-                "Generate Image", 
+                "Generate Image",
                 on_click=State.get_image,
                 width="25em",
                 loading=State.processing
@@ -137,17 +136,12 @@ app = rx.App()
 app.add_page(index, title="Reflex:DALL-E")
 ```
 
-
-
-
-
 ## 让我们分解以上步骤.
 
 <div align="center">
 <img src="../../images/dalle_colored_code_example.png" alt="解释 DALL-E app 的前端和后端部分的区别。" width="900" />
 </div>
 
-
 ### **Reflex UI**
 
 让我们从UI开始.
@@ -225,11 +219,10 @@ app.add_page(index, title="DALL-E")
 
 <div align="center">
 
-📑 [文档](https://reflex.dev/docs/getting-started/introduction) &nbsp; |  &nbsp; 🗞️ [日志](https://reflex.dev/blog) &nbsp; |  &nbsp; 📱 [组件库](https://reflex.dev/docs/library) &nbsp; |  &nbsp; 🖼️ [展览](https://reflex.dev/docs/gallery) &nbsp; |  &nbsp; 🛸 [部署](https://reflex.dev/docs/hosting/deploy)  &nbsp;   
+📑 [文档](https://reflex.dev/docs/getting-started/introduction) &nbsp; | &nbsp; 🗞️ [日志](https://reflex.dev/blog) &nbsp; | &nbsp; 📱 [组件库](https://reflex.dev/docs/library) &nbsp; | &nbsp; 🖼️ [展览](https://reflex.dev/docs/gallery) &nbsp; | &nbsp; 🛸 [部署](https://reflex.dev/docs/hosting/deploy) &nbsp;
 
 </div>
 
-
 ## ✅ Reflex 的状态
 
 Reflex 于 2022 年 12 月以Pynecone的名称推出.
@@ -242,14 +235,14 @@ Reflex 每周都有新功能和发布新版本! 确保您按下 :star: 收藏和
 
 我们欢迎任何大小的贡献,以下是几个好的方法来加入 Reflex 社群.
 
--   **加入我们的 Discord**: 我们的 [Discord](https://discord.gg/T5WSbC2YtQ) 是帮助您加入 Reflex 项目和讨论或贡献最棒的地方.
--   **GitHub Discussions**: 一个来讨论您想要添加的功能或是需要澄清的事情的好地方.
--   **GitHub Issues**: [报告错误](https://github.com/reflex-dev/reflex/issues)的绝佳地方,另外您可以试着解决一些 issue 和送出 PR.
+- **加入我们的 Discord**: 我们的 [Discord](https://discord.gg/T5WSbC2YtQ) 是帮助您加入 Reflex 项目和讨论或贡献最棒的地方.
+- **GitHub Discussions**: 一个来讨论您想要添加的功能或是需要澄清的事情的好地方.
+- **GitHub Issues**: [报告错误](https://github.com/reflex-dev/reflex/issues)的绝佳地方,另外您可以试着解决一些 issue 和送出 PR.
 
 我们正在积极寻找贡献者,无关您的技能或经验水平.
 
-
 ## 感谢我们所有的贡献者:
+
 <a href="https://github.com/reflex-dev/reflex/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=reflex-dev/reflex" />
 </a>

docs/zh/zh_tw/README.md

@@ -1,11 +1,10 @@
-
 <div align="center">
 <img src="../../images/reflex_dark.svg#gh-light-mode-only" alt="Reflex Logo" width="300px">
 <img src="../../images/reflex_light.svg#gh-dark-mode-only" alt="Reflex Logo" width="300px">
 
 <hr>
 
-**✨ 使用 Python 建立高效且可自訂的網頁應用程式，幾秒鐘內即可部署。✨**  
+**✨ 使用 Python 建立高效且可自訂的網頁應用程式，幾秒鐘內即可部署。✨**
 
 [![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
 ![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
@@ -26,10 +25,10 @@ Reflex 是一個可以用純 Python 構建全端網頁應用程式的函式庫
 
 主要特色：
 
-* **純 Python** - 您可以用 Python 撰寫應用程式的前端和後端，無需學習 Javascript。
-* **完全靈活性** - Reflex 易於上手，但也可以擴展到複雜的應用程式。
-* **立即部署** - 構建後，只需使用[單一指令](https://reflex.dev/docs/hosting/deploy-quick-start/)即可部署您的應用程式，或在您自己的伺服器上託管。
-請參閱我們的[架構頁面](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture)了解 Reflex 如何在底層運作。
+- **純 Python** - 您可以用 Python 撰寫應用程式的前端和後端，無需學習 Javascript。
+- **完全靈活性** - Reflex 易於上手，但也可以擴展到複雜的應用程式。
+- **立即部署** - 構建後，只需使用[單一指令](https://reflex.dev/docs/hosting/deploy-quick-start/)即可部署您的應用程式，或在您自己的伺服器上託管。
+  請參閱我們的[架構頁面](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture)了解 Reflex 如何在底層運作。
 
 ## ⚙️ 安裝
 
@@ -103,7 +102,7 @@ class State(rx.State):
         )
         self.image_url = response.data[0].url
         self.processing, self.complete = False, True
-        
+
 
 def index():
     return rx.center(
@@ -115,7 +114,7 @@ def index():
                 width="25em",
             ),
             rx.button(
-                "Generate Image", 
+                "Generate Image",
                 on_click=State.get_image,
                 width="25em",
                 loading=State.processing
@@ -135,19 +134,12 @@ app = rx.App()
 app.add_page(index, title="Reflex:DALL-E")
 ```
 
-
-
-
-
-
-
 ## 讓我們來拆解一下。
 
 <div align="center">
 <img src="../../images/dalle_colored_code_example.png" alt="解釋 DALL-E app 的前端和後端部分的區別。" width="900" />
 </div>
 
-
 ### **Reflex 使用者介面**
 
 讓我們從使用介面開始。
@@ -161,7 +153,7 @@ def index():
 
 這個 `index` 函式定義了應用程式的前端.
 
-我們用不同的元件像是 `center`, `vstack`, `input`, 和 `button` 來建立前端，元件之間可互相套入以建立出複雜的版面配置。並且您可使用關鍵字引數 *keyword args* 運行 CSS 全部功能來設計這些元件們的樣式。
+我們用不同的元件像是 `center`, `vstack`, `input`, 和 `button` 來建立前端，元件之間可互相套入以建立出複雜的版面配置。並且您可使用關鍵字引數 _keyword args_ 運行 CSS 全部功能來設計這些元件們的樣式。
 
 Reflex 擁有 [60+ 內建元件](https://reflex.dev/docs/library) 來幫助你開始建立應用程式。我們正積極添加元件，你也可以簡單地 [創建自己所屬的元件](https://reflex.dev/docs/wrapping-react/overview/)。
 
@@ -226,12 +218,10 @@ app.add_page(index, title="DALL-E")
 
 <div align="center">
 
-📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; |  &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; |  &nbsp; 📱 [Component Library](https://reflex.dev/docs/library) &nbsp; |  &nbsp; 🖼️ [Templates](https://reflex.dev/templates/) &nbsp; |  &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start)  &nbsp;   
+📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; | &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; | &nbsp; 📱 [Component Library](https://reflex.dev/docs/library) &nbsp; | &nbsp; 🖼️ [Templates](https://reflex.dev/templates/) &nbsp; | &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start) &nbsp;
 
 </div>
 
-
-
 ## ✅ 產品狀態
 
 Reflex 在 2022 年 12 月以 Pynecone 的名字推出。
@@ -244,14 +234,14 @@ Reflex 每周都有新功能和釋出新版本! 確保你按下 :star: 和 :eyes
 
 我們歡迎任何大小的貢獻，以下是一些加入 Reflex 社群的好方法。
 
--   **加入我們的 Discord**: 我們的 [Discord](https://discord.gg/T5WSbC2YtQ) 是獲取 Reflex 專案幫助和討論如何貢獻的最佳地方。
--   **GitHub Discussions**: 這是一個討論您想新增的功能或對於一些困惑/需要澄清事項的好方法。
--   **GitHub Issues**: 在 [Issues](https://github.com/reflex-dev/reflex/issues) 頁面報告錯誤是一個絕佳的方式。此外，您也可以嘗試解決現有 Issue 並提交 PR。
+- **加入我們的 Discord**: 我們的 [Discord](https://discord.gg/T5WSbC2YtQ) 是獲取 Reflex 專案幫助和討論如何貢獻的最佳地方。
+- **GitHub Discussions**: 這是一個討論您想新增的功能或對於一些困惑/需要澄清事項的好方法。
+- **GitHub Issues**: 在 [Issues](https://github.com/reflex-dev/reflex/issues) 頁面報告錯誤是一個絕佳的方式。此外，您也可以嘗試解決現有 Issue 並提交 PR。
 
 我們積極尋找貢獻者，不論您的技能水平或經驗如何。要貢獻，請查看 [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
 
-
 ## 感謝所有貢獻者:
+
 <a href="https://github.com/reflex-dev/reflex/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=reflex-dev/reflex" />
 </a>

reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js

@@ -11,7 +11,7 @@ export default function RadixThemesColorModeProvider({ children }) {
   const { theme, resolvedTheme, setTheme } = useTheme();
   const [rawColorMode, setRawColorMode] = useState(defaultColorMode);
   const [resolvedColorMode, setResolvedColorMode] = useState(
-    defaultColorMode === "dark" ? "dark" : "light"
+    defaultColorMode === "dark" ? "dark" : "light",
   );
 
   useEffect(() => {

reflex/.templates/web/components/shiki/code.js

@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react"
-import { codeToHtml} from "shiki"
+import { useEffect, useState } from "react";
+import { codeToHtml } from "shiki";
 
 /**
  * Code component that uses Shiki to convert code to HTML and render it.
@@ -12,23 +12,28 @@ import { codeToHtml} from "shiki"
  * @param divProps - Additional properties to be passed to the div element.
  * @returns The rendered code block.
  */
-export function Code ({code, theme, language, transformers, decorations, ...divProps}) {
-    const [codeResult, setCodeResult] = useState("")
-    useEffect(() => {
-        async function fetchCode() {
-          const result = await codeToHtml(code, {
-            lang: language,
-            theme,
-            transformers,
-            decorations
-          });
-          setCodeResult(result);
-        }
-        fetchCode();
-      }, [code, language, theme, transformers, decorations]
-
-    )
-    return (
-        <div dangerouslySetInnerHTML={{__html: codeResult}} {...divProps}  ></div>
-    )
+export function Code({
+  code,
+  theme,
+  language,
+  transformers,
+  decorations,
+  ...divProps
+}) {
+  const [codeResult, setCodeResult] = useState("");
+  useEffect(() => {
+    async function fetchCode() {
+      const result = await codeToHtml(code, {
+        lang: language,
+        theme,
+        transformers,
+        decorations,
+      });
+      setCodeResult(result);
+    }
+    fetchCode();
+  }, [code, language, theme, transformers, decorations]);
+  return (
+    <div dangerouslySetInnerHTML={{ __html: codeResult }} {...divProps}></div>
+  );
 }

reflex/.templates/web/postcss.config.js

@@ -4,4 +4,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

reflex/.templates/web/utils/client_side_routing.js

@@ -10,32 +10,34 @@ import { useRouter } from "next/router";
  * @returns {boolean} routeNotFound - true if the current route is an actual 404
  */
 export const useClientSideRouting = () => {
-  const [routeNotFound, setRouteNotFound] = useState(false)
-  const didRedirect = useRef(false)
-  const router = useRouter()
+  const [routeNotFound, setRouteNotFound] = useState(false);
+  const didRedirect = useRef(false);
+  const router = useRouter();
   useEffect(() => {
     if (
       router.isReady &&
-      !didRedirect.current  // have not tried redirecting yet
+      !didRedirect.current // have not tried redirecting yet
     ) {
-      didRedirect.current = true  // never redirect twice to avoid "Hard Navigate" error
+      didRedirect.current = true; // never redirect twice to avoid "Hard Navigate" error
       // attempt to redirect to the route in the browser address bar once
-      router.replace({
+      router
+        .replace({
           pathname: window.location.pathname,
           query: window.location.search.slice(1),
-      }).then(()=>{
+        })
+        .then(() => {
           // Check if the current route is /404
-        if (router.pathname === '/404') {
-          setRouteNotFound(true); // Mark as an actual 404
-        }
-    })
-      .catch((e) => {
-        setRouteNotFound(true)  // navigation failed, so this is a real 404
-      })
+          if (router.pathname === "/404") {
+            setRouteNotFound(true); // Mark as an actual 404
+          }
+        })
+        .catch((e) => {
+          setRouteNotFound(true); // navigation failed, so this is a real 404
+        });
     }
   }, [router.isReady]);
 
   // Return the reactive bool, to avoid flashing 404 page until we know for sure
   // the route is not found.
-  return routeNotFound
-}
+  return routeNotFound;
+};

reflex/.templates/web/utils/helpers/dataeditor.js

@@ -48,7 +48,7 @@ export function formatCell(value, column) {
       };
     default:
       console.log(
-        "Warning: column.type is undefined for column.title=" + column.title
+        "Warning: column.type is undefined for column.title=" + column.title,
       );
       return {
         kind: GridCellKind.Text,

reflex/.templates/web/utils/helpers/range.js

@@ -1,43 +1,43 @@
 /**
  * Simulate the python range() builtin function.
  * inspired by https://dev.to/guyariely/using-python-range-in-javascript-337p
- * 
+ *
  * If needed outside of an iterator context, use `Array.from(range(10))` or
  * spread syntax `[...range(10)]` to get an array.
- * 
+ *
  * @param {number} start: the start or end of the range.
  * @param {number} stop: the end of the range.
  * @param {number} step: the step of the range.
  * @returns {object} an object with a Symbol.iterator method over the range
  */
 export default function range(start, stop, step) {
-    return {
-      [Symbol.iterator]() {
-        if (stop === undefined) {
-          stop = start;
-          start = 0;
-        }
-        if (step === undefined) {
-          step = 1;
-        }
-  
-        let i = start - step;
-  
-        return {
-          next() {
-            i += step;
-            if ((step > 0 && i < stop) || (step < 0 && i > stop)) {
-              return {
-                value: i,
-                done: false,
-              };
-            }
+  return {
+    [Symbol.iterator]() {
+      if (stop === undefined) {
+        stop = start;
+        start = 0;
+      }
+      if (step === undefined) {
+        step = 1;
+      }
+
+      let i = start - step;
+
+      return {
+        next() {
+          i += step;
+          if ((step > 0 && i < stop) || (step < 0 && i > stop)) {
             return {
-              value: undefined,
-              done: true,
+              value: i,
+              done: false,
             };
-          },
-        };
-      },
-    };
-  }
+          }
+          return {
+            value: undefined,
+            done: true,
+          };
+        },
+      };
+    },
+  };
+}

reflex/.templates/web/utils/state.js

@@ -227,8 +227,8 @@ export const applyEvent = async (event, socket) => {
       a.href = eval?.(
         event.payload.url.replace(
           "getBackendURL(env.UPLOAD)",
-          `"${getBackendURL(env.UPLOAD)}"`
-        )
+          `"${getBackendURL(env.UPLOAD)}"`,
+        ),
       );
     }
     a.download = event.payload.filename;
@@ -341,7 +341,7 @@ export const applyRestEvent = async (event, socket) => {
       event.payload.files,
       event.payload.upload_id,
       event.payload.on_upload_progress,
-      socket
+      socket,
     );
     return false;
   }
@@ -357,7 +357,12 @@ export const applyRestEvent = async (event, socket) => {
 export const queueEvents = async (events, socket, prepend) => {
   if (prepend) {
     // Drain the existing queue and place it after the given events.
-    events = [...events, ...Array.from({length: event_queue.length}).map(() => event_queue.shift())];
+    events = [
+      ...events,
+      ...Array.from({ length: event_queue.length }).map(() =>
+        event_queue.shift(),
+      ),
+    ];
   }
   event_queue.push(...events);
   await processEvent(socket.current);
@@ -413,7 +418,7 @@ export const connect = async (
   dispatch,
   transports,
   setConnectErrors,
-  client_storage = {}
+  client_storage = {},
 ) => {
   // Get backend URL object from the endpoint.
   const endpoint = getBackendURL(EVENTURL);
@@ -504,7 +509,7 @@ export const uploadFiles = async (
   files,
   upload_id,
   on_upload_progress,
-  socket
+  socket,
 ) => {
   // return if there's no file to upload
   if (files === undefined || files.length === 0) {
@@ -609,7 +614,7 @@ export const Event = (
   name,
   payload = {},
   event_actions = {},
-  handler = null
+  handler = null,
 ) => {
   return { name, payload, handler, event_actions };
 };
@@ -636,7 +641,7 @@ export const hydrateClientStorage = (client_storage) => {
     for (const state_key in client_storage.local_storage) {
       const options = client_storage.local_storage[state_key];
       const local_storage_value = localStorage.getItem(
-        options.name || state_key
+        options.name || state_key,
       );
       if (local_storage_value !== null) {
         client_storage_values[state_key] = local_storage_value;
@@ -647,7 +652,7 @@ export const hydrateClientStorage = (client_storage) => {
     for (const state_key in client_storage.session_storage) {
       const session_options = client_storage.session_storage[state_key];
       const session_storage_value = sessionStorage.getItem(
-        session_options.name || state_key
+        session_options.name || state_key,
       );
       if (session_storage_value != null) {
         client_storage_values[state_key] = session_storage_value;
@@ -672,7 +677,7 @@ export const hydrateClientStorage = (client_storage) => {
 const applyClientStorageDelta = (client_storage, delta) => {
   // find the main state and check for is_hydrated
   const unqualified_states = Object.keys(delta).filter(
-    (key) => key.split(".").length === 1
+    (key) => key.split(".").length === 1,
   );
   if (unqualified_states.length === 1) {
     const main_state = delta[unqualified_states[0]];
@@ -706,7 +711,7 @@ const applyClientStorageDelta = (client_storage, delta) => {
         const session_options = client_storage.session_storage[state_key];
         sessionStorage.setItem(
           session_options.name || state_key,
-          delta[substate][key]
+          delta[substate][key],
         );
       }
     }
@@ -726,7 +731,7 @@ const applyClientStorageDelta = (client_storage, delta) => {
 export const useEventLoop = (
   dispatch,
   initial_events = () => [],
-  client_storage = {}
+  client_storage = {},
 ) => {
   const socket = useRef(null);
   const router = useRouter();
@@ -740,7 +745,7 @@ export const useEventLoop = (
 
     event_actions = events.reduce(
       (acc, e) => ({ ...acc, ...e.event_actions }),
-      event_actions ?? {}
+      event_actions ?? {},
     );
 
     const _e = args.filter((o) => o?.preventDefault !== undefined)[0];
@@ -768,7 +773,7 @@ export const useEventLoop = (
       debounce(
         combined_name,
         () => queueEvents(events, socket),
-        event_actions.debounce
+        event_actions.debounce,
       );
     } else {
       queueEvents(events, socket);
@@ -834,7 +839,7 @@ export const useEventLoop = (
           dispatch,
           ["websocket"],
           setConnectErrors,
-          client_storage
+          client_storage,
         );
       }
     }
@@ -882,7 +887,7 @@ export const useEventLoop = (
         vars[storage_to_state_map[e.key]] = e.newValue;
         const event = Event(
           `${state_name}.reflex___state____update_vars_internal_state.update_vars_internal`,
-          { vars: vars }
+          { vars: vars },
         );
         addEvents([event], e);
       }
@@ -975,7 +980,7 @@ export const getRefValues = (refs) => {
   return refs.map((ref) =>
     ref.current
       ? ref.current.value || ref.current.getAttribute("aria-valuenow")
-      : null
+      : null,
   );
 };
 

tests/units/assets/custom_script.js

@@ -1 +1 @@
-const test = "inside custom_script.js";
+const test = "inside custom_script.js";