```
├── .claude/
├── hooks/
├── session-start.sh (600 tokens)
├── settings.json
├── .devcontainer/
├── devcontainer.json (100 tokens)
├── .github/
├── CODEOWNERS
├── ISSUE_TEMPLATE/
├── bug_report.md (100 tokens)
├── build_issue.md (100 tokens)
├── cloud_issue.md (100 tokens)
├── custom_component_request.md (100 tokens)
├── documentation.md (100 tokens)
├── enhancement_request.md (100 tokens)
├── enterprise_issue.md (100 tokens)
├── feature_request.md (100 tokens)
├── actions/
├── setup_build_env/
├── action.yml (400 tokens)
├── codeql-config.yml
├── pull_request_template.md (300 tokens)
├── scripts/
├── auto_release_internal/
├── detect.sh (100 tokens)
├── dispatch_release/
├── detect.sh (400 tokens)
├── open_release_pr.sh (600 tokens)
├── push_prerelease.sh (500 tokens)
├── publish/
├── create_release.sh (100 tokens)
├── push_tag.sh (100 tokens)
├── verify_pyi.sh
├── workflows/
├── auto_release_internal.yml (400 tokens)
├── build_packages.yml (300 tokens)
├── changelog.yml (800 tokens)
├── check_node_latest.yml (200 tokens)
├── check_outdated_dependencies.yml (600 tokens)
├── codeql.yml (1000 tokens)
├── dependency-review.yml (200 tokens)
├── dispatch_release.yml (1700 tokens)
├── docs_tests.yml (200 tokens)
├── docs_whitelist.yml (100 tokens)
├── integration_app_harness.yml (600 tokens)
├── integration_tests.yml (1800 tokens)
├── min_deps.yml (400 tokens)
├── performance.yml (500 tokens)
├── pre-commit.yml (300 tokens)
├── publish.yml (2.4k tokens)
├── reflex_init_in_docker_test.yml (200 tokens)
├── release_from_changelog.yml (1100 tokens)
├── unit_tests.yml (700 tokens)
├── .gitignore (100 tokens)
├── .pre-commit-config.yaml (300 tokens)
├── .python-version
├── AGENTS.md (1300 tokens)
├── CHANGELOG.md (3.5k tokens)
├── CLAUDE.md
├── CODE_OF_CONDUCT.md (1100 tokens)
├── CONTRIBUTING.md (2.1k tokens)
├── DEBUGGING.md (100 tokens)
├── LICENSE (omitted)
├── MCP_README.md (100 tokens)
├── README.md (900 tokens)
├── SECURITY.md (100 tokens)
├── docker-example/
├── README.md (200 tokens)
├── production-app-platform/
├── .dockerignore
├── Dockerfile (500 tokens)
├── README.md (800 tokens)
├── production-compose/
├── .dockerignore
├── Caddy.Dockerfile
├── Caddyfile
├── Dockerfile (300 tokens)
├── README.md (500 tokens)
├── compose.prod.yaml (100 tokens)
├── compose.tools.yaml (100 tokens)
├── compose.yaml (200 tokens)
├── production-one-port/
├── .dockerignore
├── Caddyfile
├── Dockerfile (400 tokens)
├── README.md (200 tokens)
├── simple-one-port/
├── .dockerignore
├── Caddyfile
├── Dockerfile (300 tokens)
├── README.md (200 tokens)
├── simple-two-port/
├── .dockerignore
├── Dockerfile (200 tokens)
├── README.md (200 tokens)
├── docs/
├── advanced_onboarding/
├── code_structure.md (2.4k tokens)
├── configuration.md (1400 tokens)
├── how-reflex-works.md (2.4k tokens)
├── ai_builder/
├── apis.md (500 tokens)
├── app_lifecycle/
├── copy_app.md (200 tokens)
├── deploy_app.md (300 tokens)
├── download_app.md (200 tokens)
├── fork_app.md (300 tokens)
├── general.md (200 tokens)
├── share_app.md (200 tokens)
├── features/
├── agent_toolkit.md (400 tokens)
├── agent_tools.md (700 tokens)
├── automated_testing.md (400 tokens)
├── connect_to_git_providers.md (400 tokens)
├── connect_to_github.md (900 tokens)
├── design_systems.md (900 tokens)
├── editor_modes.md (500 tokens)
├── file_tree.md (500 tokens)
├── generation_controls.md (500 tokens)
├── image_as_prompt.md (400 tokens)
├── installing_external_packages.md (500 tokens)
├── integration_shortcut.md (1200 tokens)
├── knowledge.md (300 tokens)
├── planning.md (400 tokens)
├── restore_checkpoint.md (300 tokens)
├── secrets.md (800 tokens)
├── security_scanner.md (100 tokens)
├── figma.md
├── files.md (300 tokens)
├── images.md (400 tokens)
├── integrations/
├── agent_toolkit.md (1200 tokens)
├── agents_md.md (900 tokens)
├── mcp_installation.md (900 tokens)
├── mcp_overview.md (200 tokens)
├── overview.md
├── skills.md (2k tokens)
├── organization/
├── audit_logs.md (400 tokens)
├── automated_provisioning.md (3.9k tokens)
├── cloud_providers.md (800 tokens)
├── custom_roles.md (900 tokens)
├── deployment_approvals.md (400 tokens)
├── domains.md (600 tokens)
├── members.md (1000 tokens)
├── moving_projects_and_apps.md (600 tokens)
├── overview.md (1300 tokens)
├── project_access.md (900 tokens)
├── provisioning.md (600 tokens)
├── roles_and_permissions.md (1300 tokens)
├── service_accounts.md (700 tokens)
├── sso.md (500 tokens)
├── teams.md (700 tokens)
├── usage.md (400 tokens)
├── overview/
├── best_practices.md (900 tokens)
├── project_overview.md (600 tokens)
├── templates.md (500 tokens)
├── tutorial.md (1100 tokens)
├── what_is_reflex_build.md (1100 tokens)
├── python_libraries.md (400 tokens)
├── urls.md (300 tokens)
├── webhooks.md (400 tokens)
├── api-reference/
├── browser_javascript.md (1500 tokens)
├── browser_storage.md (2.3k tokens)
├── cli.md (900 tokens)
├── event_triggers.md (2.9k tokens)
├── plugins.md (1800 tokens)
├── special_events.md (1000 tokens)
├── telemetry.md (200 tokens)
├── utils.md (1000 tokens)
├── var_system.md (600 tokens)
├── api-routes/
├── overview.md (900 tokens)
├── app/
├── .github/
├── workflows/
├── codespell.yml (100 tokens)
├── pre-commit.yml (100 tokens)
├── unit_tests.yml (500 tokens)
├── .gitignore
├── CLAUDE.md (500 tokens)
├── README.md (300 tokens)
├── agent_files/
├── __init__.py
├── _plugin.py (5.7k tokens)
├── assets/
├── Reflex.svg (100 tokens)
├── chakra_color_mode_provider.js (200 tokens)
├── docs/
├── dark/
├── getting_started.svg (8.9k tokens)
├── mcp.svg (3.4k tokens)
├── light/
├── getting_started.svg (9k tokens)
├── mcp.svg (3.4k tokens)
├── favicon.ico
├── meta/
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── apple-touch-icon.png
├── browserconfig.xml (100 tokens)
├── favicon-16x16.png
├── favicon-32x32.png
├── mstile-144x144.png
├── mstile-150x150.png
├── mstile-310x150.png
├── mstile-310x310.png
├── mstile-70x70.png
├── site.webmanifest (100 tokens)
├── reflex_banner.webp
├── robots.txt
├── vintage-button-sound-effect.mp3
├── data/
├── GanttChart-updated.csv
├── canada_life.csv (200 tokens)
├── gapminder2007.csv (1400 tokens)
├── mt_bruno_elevation.csv (1000 tokens)
├── nba.csv (6.6k tokens)
├── olympic-winners.json (262.1k tokens)
├── wind_dataset.csv (300 tokens)
├── pyproject.toml (400 tokens)
├── reflex.lock/
├── bun.lock (omitted)
├── package.json (600 tokens)
├── reflex_docs/
├── __init__.py
├── changelogs.py (900 tokens)
├── components/
├── button.py (500 tokens)
├── docpage/
├── __init__.py
├── navbar/
├── __init__.py
├── buttons/
├── sidebar.py
├── hint.py (100 tokens)
├── webpage/
├── __init__.py
├── docgen_pipeline.py (200 tokens)
├── models.py
├── pages/
├── __init__.py (100 tokens)
├── docs/
├── __init__.py (4.6k tokens)
├── api_reference/
├── plugins.py (100 tokens)
├── utils.py (100 tokens)
├── apiref.py (300 tokens)
├── cloud.py (100 tokens)
├── cloud_cliref.py (2.1k tokens)
├── component.py (7.6k tokens)
├── custom_components.py (2.8k tokens)
├── enterprise.py
├── env_vars.py (1000 tokens)
├── guide.py
├── library.py (900 tokens)
├── metadata.py (200 tokens)
├── recipes_overview.py (700 tokens)
├── source.py (1400 tokens)
├── docs_landing/
├── __init__.py (400 tokens)
├── views/
├── __init__.py (100 tokens)
├── ai_builder.py (1500 tokens)
├── divider.py (100 tokens)
├── enterprise.py (300 tokens)
├── framework.py (1600 tokens)
├── hero.py (500 tokens)
├── hosting.py (400 tokens)
├── link_item.py (400 tokens)
├── other.py (300 tokens)
├── self_hosting.py (300 tokens)
├── gallery/
├── __init__.py
├── integrations/
├── integration.py (100 tokens)
├── integration_gallery.py (900 tokens)
├── integration_header.py (200 tokens)
├── integration_list.py (300 tokens)
├── integration_request.py (200 tokens)
├── library_previews.py (2.1k tokens)
├── reflex_docs.py (1600 tokens)
├── templates/
├── __init__.py
├── docpage/
├── __init__.py
├── docpage.py (5.6k tokens)
├── feedback_state.py (800 tokens)
├── sidebar/
├── __init__.py
├── sidebar.py (4.4k tokens)
├── sidebar_items/
├── __init__.py
├── ai.py (1400 tokens)
├── cloud.py (100 tokens)
├── component_lib.py (700 tokens)
├── enterprise.py (2000 tokens)
├── item.py (200 tokens)
├── learn.py (1500 tokens)
├── recipes.py (200 tokens)
├── reference.py (200 tokens)
├── state.py (200 tokens)
├── state.py (100 tokens)
├── utils/
├── http.py (200 tokens)
├── views/
├── algolia.py
├── animated_box.py (3k tokens)
├── bottom_section/
├── get_started.py (700 tokens)
├── newsletter.py (900 tokens)
├── docs_navbar.py (1500 tokens)
├── search.py
├── whitelist.py (200 tokens)
├── rxconfig.py (100 tokens)
├── tests/
├── test_agent_files.py (2.8k tokens)
├── test_breadcrumbs.py (400 tokens)
├── test_changelogs.py (1400 tokens)
├── test_doc_description.py (800 tokens)
├── test_doc_links.py (2.7k tokens)
├── test_docgen_double_eval.py (700 tokens)
├── test_docs_navbar.py (900 tokens)
├── test_frontmatter_meta.py (300 tokens)
├── test_integrations.py (500 tokens)
├── test_routes.py (700 tokens)
├── test_sidebar.py (200 tokens)
├── test_upload_not_evaluated.py (300 tokens)
├── test_urls.py (500 tokens)
├── assets/
├── overview.md (600 tokens)
├── upload_and_download_files.md (1400 tokens)
├── client_storage/
├── overview.md (400 tokens)
├── components/
├── conditional_rendering.md (700 tokens)
├── html_to_reflex.md (100 tokens)
├── props.md (700 tokens)
├── rendering_iterables.md (1800 tokens)
├── custom-components/
├── command-reference.md (1500 tokens)
├── overview.md (900 tokens)
├── prerequisites-for-publishing.md (300 tokens)
├── database/
├── overview.md (600 tokens)
├── queries.md (3.4k tokens)
├── relationships.md (1500 tokens)
├── tables.md (400 tokens)
├── enterprise/
├── LICENSE (1100 tokens)
├── ag_chart.md (200 tokens)
├── ag_grid/
├── aligned-grids.md (400 tokens)
├── cell-selection.md (2.3k tokens)
├── column-defs.md (200 tokens)
├── index.md (5.4k tokens)
├── master-detail.md (900 tokens)
├── model-wrapper.md (1000 tokens)
├── pivot-mode.md (900 tokens)
├── theme.md (1700 tokens)
├── tree-data.md (1200 tokens)
├── value-transformers.md (1200 tokens)
├── auth/
├── audit.md (1600 tokens)
├── custom-pages.md (1900 tokens)
├── deployment.md (1300 tokens)
├── overview.md (1600 tokens)
├── providers.md (3.4k tokens)
├── secure-by-default.md (4.1k tokens)
├── testing.md (1500 tokens)
├── built-with-reflex.md (100 tokens)
├── components.md (1000 tokens)
├── drag-and-drop.md (4k tokens)
├── event-handler-api.md (4.1k tokens)
├── mantine/
├── autocomplete.md (100 tokens)
├── collapse.md (200 tokens)
├── combobox.md (200 tokens)
├── index.md (100 tokens)
├── json-input.md (200 tokens)
├── loading-overlay.md (200 tokens)
├── multi-select.md (200 tokens)
├── number-formatter.md (100 tokens)
├── pill.md (600 tokens)
├── ring-progress.md (200 tokens)
├── semi-circle-progress.md (200 tokens)
├── spoiler.md (300 tokens)
├── tags-input.md (300 tokens)
├── timeline.md (200 tokens)
├── tree.md (200 tokens)
├── map/
├── index.md (3.8k tokens)
├── mcp/
├── authentication.md (2.6k tokens)
├── custom-resources.md (800 tokens)
├── deployment.md (1300 tokens)
├── extending.md (600 tokens)
├── index.md (3.3k tokens)
├── overview.md (2.7k tokens)
├── react_flow/
├── basic_flow.md (500 tokens)
├── components.md (900 tokens)
├── edges.md (1300 tokens)
├── examples.md (1500 tokens)
├── hooks.md (500 tokens)
├── interactivity.md (900 tokens)
├── nodes.md (1800 tokens)
├── overview.md (300 tokens)
├── theming.md (400 tokens)
├── utils.md (300 tokens)
├── single-port-proxy.md (100 tokens)
├── testing.md (2.7k tokens)
├── events/
├── background_events.md (1400 tokens)
├── chaining_events.md (600 tokens)
├── decentralized_event_handlers.md (900 tokens)
├── event_actions.md (1600 tokens)
├── event_arguments.md (900 tokens)
├── events_overview.md (400 tokens)
├── page_load_events.md (500 tokens)
├── special_events.md (100 tokens)
├── yield_events.md (500 tokens)
├── getting_started/
├── __init__.py
├── basics.md (2.7k tokens)
├── chatapp_tutorial.md (5.1k tokens)
├── dashboard_tutorial.md (10k tokens)
├── installation.md (1100 tokens)
├── introduction.md (1600 tokens)
├── project-structure.md (600 tokens)
├── hosting/
├── app-management.md (1000 tokens)
├── billing.md (100 tokens)
├── bring-your-own-cloud.md (500 tokens)
├── cloud-providers.md (700 tokens)
├── compute.md (200 tokens)
├── config_file.md (1700 tokens)
├── custom-domains.md (300 tokens)
├── databricks.md (1200 tokens)
├── deploy-quick-start.md (800 tokens)
├── deploy-to-gcp.md (1500 tokens)
├── deploy-with-github-actions.md (700 tokens)
├── logs.md (200 tokens)
├── machine-types.md (200 tokens)
├── project-members.md (300 tokens)
├── project-settings.md (200 tokens)
├── regions.md (800 tokens)
├── secrets-environment-vars.md (500 tokens)
├── security-scan.md (500 tokens)
├── self-hosting.md (900 tokens)
├── tokens.md (700 tokens)
├── images/
├── dalle.gif
├── dalle_colored_code_example.png
├── reflex-image-generation-app.png
├── reflex.png
├── reflex.svg (100 tokens)
├── reflex_dark.svg (200 tokens)
├── reflex_light.svg (200 tokens)
├── library/
├── data-display/
├── avatar.md (1000 tokens)
├── badge.md (600 tokens)
├── callout-ll.md (800 tokens)
├── callout.md (600 tokens)
├── code_block.md (200 tokens)
├── data_list.md (700 tokens)
├── icon.md (1500 tokens)
├── list.md (300 tokens)
├── moment.md (1100 tokens)
├── progress.md (200 tokens)
├── scroll_area.md (1900 tokens)
├── spinner.md (200 tokens)
├── disclosure/
├── accordion.md (2.5k tokens)
├── segmented_control.md (500 tokens)
├── tabs.md (1600 tokens)
├── dynamic-rendering/
├── auto_scroll.md (600 tokens)
├── cond.md (900 tokens)
├── foreach.md (1200 tokens)
├── match.md (1800 tokens)
├── forms/
├── button.md (300 tokens)
├── checkbox.md (300 tokens)
├── form-ll.md (3.4k tokens)
├── form.md (2.2k tokens)
├── input-ll.md (600 tokens)
├── input.md (900 tokens)
├── radio_group.md (500 tokens)
├── select-ll.md (1900 tokens)
├── select.md (4k tokens)
├── slider.md (700 tokens)
├── switch.md (600 tokens)
├── text_area.md (1000 tokens)
├── upload.md (4.3k tokens)
├── graphing/
├── charts/
├── areachart.md (2.2k tokens)
├── barchart.md (3.1k tokens)
├── composedchart.md (900 tokens)
├── errorbar.md (800 tokens)
├── funnelchart.md (1000 tokens)
├── linechart.md (1800 tokens)
├── piechart.md (2.3k tokens)
├── radarchart.md (1500 tokens)
├── radialbarchart.md (800 tokens)
├── scatterchart.md (1900 tokens)
├── treemap.md (500 tokens)
├── general/
├── axis.md (1700 tokens)
├── brush.md (1000 tokens)
├── cartesiangrid.md (1200 tokens)
├── label.md (1000 tokens)
├── legend.md (600 tokens)
├── reference.md (1000 tokens)
├── tooltip.md (700 tokens)
├── other-charts/
├── plotly.md (3.7k tokens)
├── pyplot.md (1600 tokens)
├── html/
├── forms.md (100 tokens)
├── html.md (200 tokens)
├── layout.md (100 tokens)
├── media.md (100 tokens)
├── svg.md (100 tokens)
├── tables.md (100 tokens)
├── text.md (100 tokens)
├── layout/
├── aspect_ratio.md (400 tokens)
├── box.md (400 tokens)
├── card.md (300 tokens)
├── center.md (100 tokens)
├── container.md (200 tokens)
├── flex.md (1300 tokens)
├── fragment.md (100 tokens)
├── grid.md (200 tokens)
├── inset.md (500 tokens)
├── section.md (200 tokens)
├── separator.md (200 tokens)
├── spacer.md (100 tokens)
├── stack.md (900 tokens)
├── media/
├── audio.md (100 tokens)
├── image.md (300 tokens)
├── video.md (100 tokens)
├── other/
├── clipboard.md (500 tokens)
├── html_embed.md (200 tokens)
├── memo.md (1900 tokens)
├── script.md (300 tokens)
├── skeleton.md (200 tokens)
├── theme.md (100 tokens)
├── overlay/
├── alert_dialog.md (2.4k tokens)
├── context_menu.md (2.7k tokens)
├── dialog.md (1700 tokens)
├── drawer.md (600 tokens)
├── dropdown_menu.md (2.3k tokens)
├── hover_card.md (700 tokens)
├── popover.md (1000 tokens)
├── toast.md (800 tokens)
├── tooltip.md (300 tokens)
├── tables-and-data-grids/
├── data_editor.md (2.5k tokens)
├── data_table.md (500 tokens)
├── table.md (8.4k tokens)
├── typography/
├── blockquote.md (600 tokens)
├── code.md (500 tokens)
├── em.md
├── heading.md (1100 tokens)
├── kbd.md (200 tokens)
├── link.md (900 tokens)
├── markdown.md (1200 tokens)
├── quote.md (100 tokens)
├── strong.md
├── text.md (1400 tokens)
├── package/
├── README.md (100 tokens)
├── pyproject.toml (100 tokens)
├── reflex_docs_bundle/
├── __init__.py (200 tokens)
├── scripts/
├── hatch_build.py (400 tokens)
├── pages/
├── dynamic_routing.md (1100 tokens)
├── overview.md (1300 tokens)
├── recipes/
├── auth/
├── login_form.md (2.2k tokens)
├── signup_form.md (2.3k tokens)
├── content/
├── forms.md (1100 tokens)
├── grid.md (300 tokens)
├── multi_column_row.md (400 tokens)
├── stats.md (1000 tokens)
├── top_banner.md (1600 tokens)
├── layout/
├── footer.md (2k tokens)
├── navbar.md (3.3k tokens)
├── sidebar.md (3.2k tokens)
├── others/
├── chat.md (1500 tokens)
├── checkboxes.md (400 tokens)
├── chips.md (1300 tokens)
├── dark_mode_toggle.md (200 tokens)
├── pricing_cards.md (1100 tokens)
├── speed_dial.md (2.8k tokens)
├── state/
├── overview.md (1300 tokens)
├── state_structure/
├── component_state.md (1500 tokens)
├── mixins.md (1900 tokens)
├── overview.md (1600 tokens)
├── shared_state.md (2.3k tokens)
├── styling/
├── common-props.md (2.8k tokens)
├── custom-stylesheets.md (900 tokens)
├── layout.md (800 tokens)
├── overview.md (1000 tokens)
├── responsive.md (1300 tokens)
├── tailwind.md (1600 tokens)
├── theming.md (3.2k tokens)
├── ui/
├── overview.md (500 tokens)
├── utility_methods/
├── exception_handlers.md (300 tokens)
├── lifespan_tasks.md (800 tokens)
├── other_methods.md (100 tokens)
├── router_attributes.md (2.4k tokens)
├── vars/
├── base_vars.md (1400 tokens)
├── computed_vars.md (1300 tokens)
├── custom_vars.md (400 tokens)
├── hybrid_properties.md (1000 tokens)
├── var-operations.md (4.4k tokens)
├── wrapping-react/
├── custom-code-and-hooks.md (800 tokens)
├── example.md (2.3k tokens)
├── imports-and-styles.md (500 tokens)
├── library-and-tags.md (1200 tokens)
├── local-packages.md (1200 tokens)
├── more-wrapping-examples.md (2.6k tokens)
├── overview.md (1000 tokens)
├── props.md (1500 tokens)
├── serializers.md (300 tokens)
├── step-by-step.md
├── news/
├── +drop-postcss-override.misc.md (100 tokens)
├── +pydantic-optional.breaking.md
├── +react-router-v8.breaking.md (100 tokens)
├── .gitkeep
├── 6382.feature.md (100 tokens)
├── 6790.bugfix.md
├── 6827.feature.md (100 tokens)
├── 6830.bugfix.md
├── 6846.bugfix.md
├── 6857.bugfix.1.md (100 tokens)
├── 6857.bugfix.md (100 tokens)
├── 6884.feature.md
├── 6908.docs.md
├── 6908.feature.md (100 tokens)
├── packages/
├── hatch-reflex-pyi/
├── README.md
├── news/
├── .gitkeep
├── pyproject.toml (100 tokens)
├── src/
├── hatch_reflex_pyi/
├── __init__.py
├── hooks.py (100 tokens)
├── plugin.py (500 tokens)
├── integrations-docs/
├── README.md
├── pyproject.toml (100 tokens)
├── src/
├── integrations_docs/
├── __init__.py
├── docs/
├── __init__.py (100 tokens)
├── airtable.md (300 tokens)
├── anthropic.md (300 tokens)
├── aws.md (1100 tokens)
├── azure_auth.md (400 tokens)
├── cartesia.md (300 tokens)
├── cohere.md (300 tokens)
├── database.md (800 tokens)
├── databricks.md (1200 tokens)
├── descope.md (400 tokens)
├── gemini.md (300 tokens)
├── github.md (400 tokens)
├── google_auth.md (400 tokens)
├── groq.md (300 tokens)
├── hubspot.md (300 tokens)
├── hugging_face.md (400 tokens)
├── langchain.md (300 tokens)
├── linear.md (400 tokens)
├── notion.md (400 tokens)
├── okta_auth.md (700 tokens)
├── openai.md (200 tokens)
├── overview.md
├── perplexity.md (400 tokens)
├── replicate.md (400 tokens)
├── resend.md (300 tokens)
├── roboflow.md (500 tokens)
├── snowflake.md (800 tokens)
├── stripe.md (400 tokens)
├── supabase.md (400 tokens)
├── twilio.md (400 tokens)
├── images/
├── docs/
├── azure_auth_1.webp
├── azure_auth_2.webp
├── azure_auth_3.webp
├── azure_auth_4.webp
├── databricks_admin_auth_1.webp
├── databricks_admin_auth_2.webp
├── databricks_admin_auth_3.webp
├── databricks_integration_1.webp
├── databricks_integration_2.webp
├── databricks_integration_3.webp
├── databricks_integration_4.webp
├── databricks_integration_oauth_1.webp
├── databricks_integration_oauth_2.webp
├── databricks_integration_oauth_3.webp
├── databricks_integration_oauth_4.webp
├── databricks_integration_oauth_5.webp
├── databricks_integration_oauth_6.webp
├── databricks_integration_oauth_7.webp
├── descope.webp
├── descope_2.webp
├── descope_new_tab.webp
├── google_auth_1.webp
├── google_auth_2.webp
├── google_auth_3.webp
├── google_auth_4.webp
├── okta_auth_1.png
├── okta_auth_2.png
├── okta_auth_3.png
├── okta_auth_4.png
├── okta_auth_5.png
├── roboflow.webp
├── logos/
├── dark/
├── aggrid.svg (100 tokens)
├── agno.svg (300 tokens)
├── airtable.svg (100 tokens)
├── amazon_cognito.svg (400 tokens)
├── anthropic.svg (100 tokens)
├── aws.svg (200 tokens)
├── azure.svg (100 tokens)
├── azure_auth.svg (1000 tokens)
├── azure_mssql.svg (100 tokens)
├── azure_openai.svg (300 tokens)
├── cartesia.svg (200 tokens)
├── clerk.svg (200 tokens)
├── cloudwatch.svg (1000 tokens)
├── cohere.svg (100 tokens)
├── database.svg (400 tokens)
├── databricks.svg (100 tokens)
├── descope.svg (500 tokens)
├── gemini.svg (600 tokens)
├── github.svg (400 tokens)
├── google_auth.svg (200 tokens)
├── grafana_otel.svg (1000 tokens)
├── groq.svg (200 tokens)
├── hubspot.svg (200 tokens)
├── hugging_face.svg (2.8k tokens)
├── jira.svg (400 tokens)
├── langchain.svg (600 tokens)
├── linear.svg (200 tokens)
├── llamaindex.svg (400 tokens)
├── mongodb.svg (100 tokens)
├── neo4j.svg (200 tokens)
├── notion.svg (300 tokens)
├── okta_auth.svg (400 tokens)
├── openai.svg (300 tokens)
├── perplexity.svg (100 tokens)
├── replicate.svg (100 tokens)
├── resend.svg (100 tokens)
├── roboflow.svg (300 tokens)
├── salesforce.svg (3.7k tokens)
├── slack.svg (300 tokens)
├── snowflake.svg (400 tokens)
├── stripe.svg (100 tokens)
├── supabase.svg (200 tokens)
├── together.svg (100 tokens)
├── twilio.svg (100 tokens)
├── light/
├── aggrid.svg (100 tokens)
├── agno.svg (300 tokens)
├── airtable.svg (100 tokens)
├── amazon_cognito.svg (400 tokens)
├── anthropic.svg (100 tokens)
├── aws.svg (200 tokens)
├── azure.svg (100 tokens)
├── azure_auth.svg (1000 tokens)
├── azure_mssql.svg (100 tokens)
├── azure_openai.svg (300 tokens)
├── cartesia.svg (200 tokens)
├── clerk.svg (200 tokens)
├── cloudwatch.svg (1000 tokens)
├── cohere.svg (100 tokens)
├── database.svg (100 tokens)
├── databricks.svg (100 tokens)
├── descope.svg (500 tokens)
├── gemini.svg (600 tokens)
├── github.svg (400 tokens)
├── google_auth.svg (200 tokens)
├── grafana_otel.svg (1000 tokens)
├── groq.svg (200 tokens)
├── hubspot.svg (200 tokens)
├── hugging_face.svg (2.8k tokens)
├── jira.svg (400 tokens)
├── langchain.svg (600 tokens)
├── linear.svg (200 tokens)
├── llamaindex.svg (400 tokens)
├── mongodb.svg (100 tokens)
├── neo4j.svg (200 tokens)
├── notion.svg (300 tokens)
├── okta_auth.svg (400 tokens)
├── openai.svg (300 tokens)
├── perplexity.svg (100 tokens)
├── replicate.svg (100 tokens)
├── resend.svg (100 tokens)
├── roboflow.svg (300 tokens)
├── salesforce.svg (3.7k tokens)
├── slack.svg (300 tokens)
├── snowflake.svg (400 tokens)
├── stripe.svg (100 tokens)
├── supabase.svg (200 tokens)
├── together.svg (100 tokens)
├── twilio.svg (100 tokens)
├── reflex-base/
├── CHANGELOG.md (3.1k tokens)
├── README.md
├── news/
├── +drop-postcss-override.misc.md (100 tokens)
├── +pydantic-optional.breaking.md
├── +react-router-v8.breaking.md (100 tokens)
├── .gitkeep
├── 6382.breaking.md (100 tokens)
├── 6382.feature.md
├── 6776.bugfix.md
├── 6827.feature.md (100 tokens)
├── 6846.bugfix.md (100 tokens)
├── 6857.bugfix.md (100 tokens)
├── 6857.misc.md (100 tokens)
├── pyproject.toml (200 tokens)
├── src/
├── reflex_base/
├── .templates/
├── apps/
├── blank/
├── assets/
├── favicon.ico
├── code/
├── __init__.py
├── blank.py (200 tokens)
├── web/
├── .gitignore (100 tokens)
├── app/
├── entry.client.embed.js (500 tokens)
├── entry.client.js (100 tokens)
├── routes.js (100 tokens)
├── components/
├── reflex/
├── radix_themes_color_mode_provider.js (100 tokens)
├── shiki/
├── code.js (200 tokens)
├── compress-static.js (600 tokens)
├── jsconfig.json
├── postcss.config.js
├── react-router.config.js
├── styles/
├── __reflex_style_reset.css (1700 tokens)
├── utils/
├── helpers/
├── dataeditor.js (400 tokens)
├── datetime.js (400 tokens)
├── debounce.js (100 tokens)
├── paste.js (600 tokens)
├── range.js (200 tokens)
├── throttle.js (100 tokens)
├── upload.js (1000 tokens)
├── react-theme.js (700 tokens)
├── state.js (8.7k tokens)
├── vite-plugin-safari-cachebust.js (1100 tokens)
├── __init__.py
├── breakpoints.py (500 tokens)
├── compiler/
├── __init__.py
├── templates.py (5.6k tokens)
├── components/
├── __init__.py
├── component.py (18k tokens)
├── dynamic.py (1500 tokens)
├── field.py (1200 tokens)
├── literals.py (100 tokens)
├── memo.py (15.3k tokens)
├── memoize_helpers.py (1900 tokens)
├── props.py (3k tokens)
├── state_context.py (500 tokens)
├── tags/
├── __init__.py
├── cond_tag.py (200 tokens)
├── iter_tag.py (800 tokens)
├── match_tag.py (200 tokens)
├── tag.py (800 tokens)
├── tagless.py (200 tokens)
├── config.py (7.2k tokens)
├── constants/
├── __init__.py (500 tokens)
├── base.py (1700 tokens)
├── colors.py (400 tokens)
├── compiler.py (1500 tokens)
├── config.py (500 tokens)
├── custom_components.py (300 tokens)
├── event.py (700 tokens)
├── installer.py (1000 tokens)
├── route.py (500 tokens)
├── state.py (100 tokens)
├── utils.py (200 tokens)
├── context/
├── __init__.py
├── base.py (500 tokens)
├── environment.py (5.4k tokens)
├── event/
├── __init__.py (19.8k tokens)
├── context.py (900 tokens)
├── processor/
├── __init__.py (100 tokens)
├── base_state_processor.py (3k tokens)
├── compat.py (700 tokens)
├── event_processor.py (6.3k tokens)
├── future.py (600 tokens)
├── timeout.py (300 tokens)
├── plugins/
├── __init__.py (200 tokens)
├── _screenshot.py (800 tokens)
├── base.py (2.4k tokens)
├── compiler.py (6.1k tokens)
├── embed.py (2.5k tokens)
├── shared_tailwind.py (1400 tokens)
├── sitemap.py (1400 tokens)
├── tailwind_v3.py (1100 tokens)
├── tailwind_v4.py (1200 tokens)
├── py.typed
├── registry.py (1900 tokens)
├── style.py (2.7k tokens)
├── telemetry_context.py (800 tokens)
├── utils/
├── __init__.py
├── compat.py (300 tokens)
├── console.py (3k tokens)
├── decorator.py (800 tokens)
├── exceptions.py (1800 tokens)
├── format.py (4.5k tokens)
├── imports.py (900 tokens)
├── lazy_loader.py (1100 tokens)
├── memo_paths.py (2.4k tokens)
├── pyi_generator.py (12.5k tokens)
├── serializers.py (2.7k tokens)
├── streaming_response.py (1000 tokens)
├── types.py (7.7k tokens)
├── vars/
├── __init__.py (300 tokens)
├── base.py (24.4k tokens)
├── color.py (1000 tokens)
├── datetime.py (1400 tokens)
├── dep_tracking.py (4.2k tokens)
├── function.py (3.3k tokens)
├── hybrid_property.py (1100 tokens)
├── number.py (5.8k tokens)
├── object.py (3.8k tokens)
├── sequence.py (12.6k tokens)
├── reflex-components-code/
├── CHANGELOG.md
├── README.md
├── news/
├── .gitkeep
├── 6520.bugfix.md
├── pyproject.toml (200 tokens)
├── src/
├── reflex_components_code/
├── __init__.py
├── code.py (2.9k tokens)
├── shiki_code_block.py (4.9k tokens)
├── reflex-components-core/
├── CHANGELOG.md (500 tokens)
├── README.md
├── news/
├── .gitkeep
├── 6382.misc.md
├── 6753.bugfix.md
├── pyproject.toml (200 tokens)
├── src/
├── reflex_components_core/
├── __init__.py (100 tokens)
├── base/
├── __init__.py (100 tokens)
├── app_wrap.py (200 tokens)
├── bare.py (1700 tokens)
├── body.py
├── document.py (100 tokens)
├── error_boundary.py (1500 tokens)
├── fragment.py (100 tokens)
├── link.py (200 tokens)
├── meta.py (300 tokens)
├── script.py (500 tokens)
├── strict_mode.py (100 tokens)
├── core/
├── __init__.py (300 tokens)
├── _upload.py (5.9k tokens)
├── auto_scroll.py (800 tokens)
├── banner.py (3.4k tokens)
├── breakpoints.py
├── clipboard.py (700 tokens)
├── colors.py (300 tokens)
├── cond.py (1600 tokens)
├── debounce.py (1200 tokens)
├── foreach.py (1200 tokens)
├── helmet.py
├── html.py (300 tokens)
├── layout/
├── __init__.py
├── markdown_component_map.py (500 tokens)
├── match.py (2.3k tokens)
├── responsive.py (400 tokens)
├── sticky.py (800 tokens)
├── upload.py (3.2k tokens)
├── window_events.py (1100 tokens)
├── datadisplay/
├── __init__.py (100 tokens)
├── logo.py (400 tokens)
├── el/
├── __init__.py (100 tokens)
├── element.py (100 tokens)
├── elements/
├── __init__.py (600 tokens)
├── base.py (900 tokens)
├── forms.py (6.4k tokens)
├── inline.py (900 tokens)
├── media.py (5.9k tokens)
├── metadata.py (500 tokens)
├── other.py (300 tokens)
├── scripts.py (300 tokens)
├── sectioning.py (300 tokens)
├── tables.py (500 tokens)
├── typography.py (600 tokens)
├── react_router/
├── __init__.py
├── dom.py (500 tokens)
├── reflex-components-dataeditor/
├── README.md
├── news/
├── .gitkeep
├── pyproject.toml (200 tokens)
├── src/
├── reflex_components_dataeditor/
├── __init__.py
├── dataeditor.py (4k tokens)
├── reflex-components-gridjs/
├── README.md
├── news/
├── .gitkeep
├── pyproject.toml (200 tokens)
├── src/
├── reflex_components_gridjs/
├── __init__.py
├── datatable.py (900 tokens)
├── reflex-components-internal/
├── README.md
├── pyproject.toml (300 tokens)
├── src/
├── reflex_components_internal/
├── __init__.py (400 tokens)
├── blocks/
├── __init__.py
├── calcom.py (500 tokens)
├── demo_form.py (2.9k tokens)
├── intro_form.py (2.9k tokens)
├── lemcal.py (500 tokens)
├── plain.py (1000 tokens)
├── telemetry/
├── __init__.py (200 tokens)
├── ahrefs.py (100 tokens)
├── clearbit.py (100 tokens)
├── common_room.py (500 tokens)
├── default.py (100 tokens)
├── google.py (400 tokens)
├── koala.py (300 tokens)
├── leadpipe.py (100 tokens)
├── posthog.py (1200 tokens)
├── rb2b.py (400 tokens)
├── unify.py (200 tokens)
├── components/
├── __init__.py (100 tokens)
├── base/
├── __init__.py (100 tokens)
├── accordion.py (2.3k tokens)
├── avatar.py (800 tokens)
├── badge.py (600 tokens)
├── button.py (1100 tokens)
├── card.py (1000 tokens)
├── checkbox.py (1100 tokens)
├── collapsible.py (1100 tokens)
├── context_menu.py (5.4k tokens)
├── dialog.py (2.1k tokens)
├── drawer.py (3.1k tokens)
├── gradient_profile.py (200 tokens)
├── input.py (1400 tokens)
├── link.py (700 tokens)
├── menu.py (5.7k tokens)
├── navigation_menu.py (3.1k tokens)
├── otp_field.py (1500 tokens)
├── popover.py (2.8k tokens)
├── preview_card.py (2.1k tokens)
├── scroll_area.py (1400 tokens)
├── select.py (4.9k tokens)
├── skeleton.py (200 tokens)
├── slider.py (1900 tokens)
├── switch.py (900 tokens)
├── tabs.py (1600 tokens)
├── textarea.py (400 tokens)
├── theme_switcher.py (400 tokens)
├── toggle.py (500 tokens)
├── toggle_group.py (500 tokens)
├── tooltip.py (2.3k tokens)
├── base_ui.py (100 tokens)
├── component.py (200 tokens)
├── icons/
├── __init__.py (100 tokens)
├── hugeicon.py (500 tokens)
├── others.py (600 tokens)
├── simple_icon.py (200 tokens)
├── utils/
├── __init__.py (100 tokens)
├── twmerge.py (200 tokens)
├── reflex-components-lucide/
├── CHANGELOG.md (200 tokens)
├── README.md
├── news/
├── .gitkeep
├── pyproject.toml (200 tokens)
├── src/
├── reflex_components_lucide/
├── __init__.py
├── icon.py (7.9k tokens)
├── reflex-components-markdown/
├── CHANGELOG.md
├── README.md
├── news/
├── .gitkeep
├── pyproject.toml (200 tokens)
├── src/
├── reflex_components_markdown/
├── __init__.py
├── markdown.py (3.8k tokens)
├── reflex-components-moment/
├── CHANGELOG.md (100 tokens)
├── README.md
├── news/
├── .gitkeep
├── pyproject.toml (200 tokens)
├── src/
├── reflex_components_moment/
├── __init__.py
├── moment.py (1000 tokens)
├── reflex-components-plotly/
├── CHANGELOG.md (100 tokens)
├── README.md
├── news/
├── .gitkeep
├── pyproject.toml (200 tokens)
├── src/
├── reflex_components_plotly/
├── __init__.py (100 tokens)
├── plotly.py (3.5k tokens)
├── reflex-components-radix/
├── CHANGELOG.md (200 tokens)
├── README.md
├── news/
├── .gitkeep
├── 6776.bugfix.md
├── pyproject.toml (200 tokens)
├── src/
├── reflex_components_radix/
├── __init__.py (100 tokens)
├── mappings.py (700 tokens)
├── plugin.py (800 tokens)
├── primitives/
├── __init__.py (100 tokens)
├── accordion.py (3.3k tokens)
├── base.py (400 tokens)
├── dialog.py (1200 tokens)
├── drawer.py (1900 tokens)
├── form.py (1000 tokens)
├── progress.py (800 tokens)
├── slider.py (1000 tokens)
├── themes/
├── __init__.py (100 tokens)
├── base.py (1700 tokens)
├── color_mode.py (1300 tokens)
├── components/
├── __init__.py (100 tokens)
├── alert_dialog.py (700 tokens)
├── aspect_ratio.py (100 tokens)
├── avatar.py (200 tokens)
├── badge.py (200 tokens)
├── button.py (300 tokens)
├── callout.py (500 tokens)
├── card.py (200 tokens)
├── checkbox.py (1000 tokens)
├── checkbox_cards.py (300 tokens)
├── checkbox_group.py (400 tokens)
├── context_menu.py (2.8k tokens)
├── data_list.py (400 tokens)
├── dialog.py (600 tokens)
├── dropdown_menu.py (2.3k tokens)
├── hover_card.py (700 tokens)
├── icon_button.py (700 tokens)
├── inset.py (300 tokens)
├── popover.py (900 tokens)
├── progress.py (500 tokens)
├── radio.py (200 tokens)
├── radio_cards.py (700 tokens)
├── radio_group.py (1500 tokens)
├── scroll_area.py (200 tokens)
├── segmented_control.py (1300 tokens)
├── select.py (3.5k tokens)
├── separator.py (200 tokens)
├── skeleton.py (200 tokens)
├── slider.py (700 tokens)
├── spinner.py (100 tokens)
├── switch.py (400 tokens)
├── table.py (800 tokens)
├── tabs.py (1000 tokens)
├── text_area.py (800 tokens)
├── text_field.py (1000 tokens)
├── tooltip.py (1000 tokens)
├── layout/
├── __init__.py (100 tokens)
├── base.py (200 tokens)
├── box.py (100 tokens)
├── center.py (100 tokens)
├── container.py (300 tokens)
├── flex.py (400 tokens)
├── grid.py (400 tokens)
├── list.py (1000 tokens)
├── section.py (200 tokens)
├── spacer.py (100 tokens)
├── stack.py (400 tokens)
├── typography/
├── __init__.py (100 tokens)
├── base.py (100 tokens)
├── blockquote.py (200 tokens)
├── code.py (300 tokens)
├── heading.py (400 tokens)
├── link.py (800 tokens)
├── text.py (600 tokens)
├── reflex-components-react-player/
├── README.md
├── news/
├── .gitkeep
├── pyproject.toml (200 tokens)
├── src/
├── reflex_components_react_player/
├── __init__.py
├── audio.py
├── react_player.py (1800 tokens)
├── video.py
├── reflex-components-recharts/
├── CHANGELOG.md
├── README.md
├── news/
├── .gitkeep
├── pyproject.toml (200 tokens)
├── src/
├── reflex_components_recharts/
├── __init__.py (600 tokens)
├── cartesian.py (7.8k tokens)
├── charts.py (4.2k tokens)
├── general.py (2.6k tokens)
├── polar.py (3.5k tokens)
├── recharts.py (600 tokens)
├── reflex-components-sonner/
├── README.md
├── news/
├── .gitkeep
├── 6846.bugfix.md
├── pyproject.toml (200 tokens)
├── src/
├── reflex_components_sonner/
├── __init__.py
├── toast.py (2.6k tokens)
├── reflex-docgen/
├── CHANGELOG.md (100 tokens)
├── LICENSE (2.3k tokens)
├── README.md
├── news/
├── .gitkeep
├── pyproject.toml (200 tokens)
├── src/
├── reflex_docgen/
├── __init__.py (300 tokens)
├── _class.py (4k tokens)
├── _component.py (900 tokens)
├── markdown/
├── __init__.py (500 tokens)
├── _parser.py (2.6k tokens)
├── _types.py (1700 tokens)
├── transformer/
├── __init__.py (100 tokens)
├── _base.py (2.3k tokens)
├── _markdown.py (1400 tokens)
├── reflex.py (2.7k tokens)
├── py.typed
├── reflex-hosting-cli/
├── CHANGELOG.md (600 tokens)
├── README.md
├── news/
├── .gitkeep
├── 6908.bugfix.md (100 tokens)
├── 6908.deprecation.md (100 tokens)
├── 6908.feature.1.md (100 tokens)
├── 6908.feature.md (100 tokens)
├── pyproject.toml (200 tokens)
├── src/
├── reflex_cli/
├── __init__.py
├── cli.py
├── constants/
├── __init__.py (100 tokens)
├── base.py (300 tokens)
├── compiler.py (100 tokens)
├── hosting.py (300 tokens)
├── core/
├── __init__.py
├── config.py (2.2k tokens)
├── deployments.py (1300 tokens)
├── utils/
├── __init__.py (100 tokens)
├── console.py (1000 tokens)
├── dependency.py (1000 tokens)
├── exceptions.py (300 tokens)
├── hosting.py (18k tokens)
├── v2/
├── __init__.py
├── apps.py (6.6k tokens)
├── cli.py (7.4k tokens)
├── deployments.py (1100 tokens)
├── gcp.py (5.5k tokens)
├── project.py (3.4k tokens)
├── providers.py (2.9k tokens)
├── scan.py (1700 tokens)
├── secrets.py (1500 tokens)
├── utils.py
├── vmtypes_regions.py (1100 tokens)
├── reflex-release/
├── README.md (7.7k tokens)
├── news/
├── +post-release-workflow.feature.md (100 tokens)
├── 6868.feature.md (200 tokens)
├── 6891.feature.md (300 tokens)
├── pyproject.toml (200 tokens)
├── src/
├── reflex_release/
├── __init__.py (100 tokens)
├── __main__.py
├── actions.py (600 tokens)
├── changelog.py (1700 tokens)
├── cli.py (2.6k tokens)
├── commands.py (7.6k tokens)
├── config.py (7k tokens)
├── devpins.py (800 tokens)
├── discovery.py (1600 tokens)
├── dist.py (1400 tokens)
├── gitutil.py (1500 tokens)
├── scaffold.py (7.3k tokens)
├── templates/
├── workflows/
├── auto_release_internal.yml (400 tokens)
├── changelog.yml (600 tokens)
├── dispatch_release.yml (900 tokens)
├── publish.yml (3.6k tokens)
├── release_from_changelog.yml (1100 tokens)
├── versions.py (900 tokens)
├── reflex-site-shared/
├── README.md (700 tokens)
├── pyproject.toml (300 tokens)
├── src/
├── reflex_site_shared/
├── __init__.py
├── backend/
├── __init__.py
├── get_blogs.py (200 tokens)
├── signup.py (700 tokens)
├── status.py (700 tokens)
├── components/
├── __init__.py
├── algolia.py (200 tokens)
├── blocks/
├── __init__.py
├── code.py (1000 tokens)
├── collapsible.py (500 tokens)
├── demo.py (1700 tokens)
├── flexdown.py (900 tokens)
├── headings.py (1300 tokens)
├── tabs.py (500 tokens)
├── typography.py (600 tokens)
├── docs.py (800 tokens)
├── docs_api.py (2.1k tokens)
├── docs_page_actions.py (2.7k tokens)
├── docs_shell.py (5.8k tokens)
├── hosting_banner.py
├── icons.py (35.8k tokens)
├── image_zoom.py (100 tokens)
├── marketing_button.py (200 tokens)
├── marquee.py (200 tokens)
├── patterns.py (1000 tokens)
├── server_status.py (600 tokens)
├── constants.py (400 tokens)
├── docs/
├── __init__.py (700 tokens)
├── content.py (1100 tokens)
├── markdown.py (7k tokens)
├── models.py (1300 tokens)
├── navigation.py (800 tokens)
├── site.py (900 tokens)
├── gallery/
├── __init__.py
├── common.py (2k tokens)
├── gallery.py (2.1k tokens)
├── r_svg_loader.py (1000 tokens)
├── integrations.py (700 tokens)
├── lib/
├── __init__.py
├── meta/
├── __init__.py
├── meta.py (2.3k tokens)
├── route.py (400 tokens)
├── meta/
├── __init__.py
├── meta.py (2.5k tokens)
├── pages/
├── __init__.py
├── page404.py (100 tokens)
├── plugins.py (1100 tokens)
├── route.py
├── styles/
├── __init__.py
├── assets/
├── components/
├── AlgoliaSearch.tsx (7.6k tokens)
├── GradientButton.tsx (800 tokens)
├── custom-colors.css (600 tokens)
├── fonts.css (700 tokens)
├── icons/
├── search.svg (100 tokens)
├── tailwind-theme.css (13.5k tokens)
├── colors.py (100 tokens)
├── fonts.py (400 tokens)
├── shadows.py (100 tokens)
├── styles.py (400 tokens)
├── telemetry/
├── __init__.py
├── pixels.py (200 tokens)
├── templates/
├── __init__.py
├── docs.py (3.6k tokens)
├── marketing_page.py (700 tokens)
├── webpage.py (600 tokens)
├── utils/
├── __init__.py
├── docpage.py (800 tokens)
├── md.py (300 tokens)
├── url.py (300 tokens)
├── views/
├── __init__.py
├── cta_card.py (400 tokens)
├── footer.py (2.8k tokens)
├── hosting_banner.py (1200 tokens)
├── marketing_navbar.py (5.6k tokens)
├── sidebar/
├── __init__.py (3.5k tokens)
├── workflow_stage.py (800 tokens)
├── pyi_hashes.json (3k tokens)
├── pyproject.toml (2.2k tokens)
├── reflex/
├── __init__.py (1600 tokens)
├── __main__.py
├── _upload.py
├── admin.py (100 tokens)
├── app.py (17.1k tokens)
├── app_mixins/
├── __init__.py
├── lifespan.py (1600 tokens)
├── middleware.py (600 tokens)
├── mixin.py (100 tokens)
├── assets.py (2.1k tokens)
├── compiler/
├── __init__.py
├── compiler.py (10k tokens)
├── plugins/
├── __init__.py (100 tokens)
├── builtin.py (4.4k tokens)
├── memoize.py (3.4k tokens)
├── templates.py
├── utils.py (6.4k tokens)
├── components/
├── __init__.py (1000 tokens)
├── component.py
├── dynamic.py
├── field.py
├── literals.py
├── memo.py
├── props.py
├── tags/
├── __init__.py
├── cond_tag.py
├── iter_tag.py
├── match_tag.py
├── tag.py
├── tagless.py
├── config.py
├── constants/
├── __init__.py (500 tokens)
├── base.py
├── colors.py
├── compiler.py
├── config.py
├── custom_components.py
├── event.py
├── installer.py
├── route.py
├── state.py
├── utils.py
├── custom_components/
├── __init__.py
├── custom_components.py (5.1k tokens)
├── environment.py
├── event.py
├── experimental/
├── __init__.py (400 tokens)
├── client_state.py (2k tokens)
├── hooks.py (500 tokens)
├── memo.py (100 tokens)
├── istate/
├── __init__.py (400 tokens)
├── data.py (3k tokens)
├── dynamic.py
├── manager/
├── __init__.py (1800 tokens)
├── disk.py (2.9k tokens)
├── memory.py (1500 tokens)
├── redis.py (9.1k tokens)
├── token.py (1500 tokens)
├── proxy.py (7k tokens)
├── shared.py (4.3k tokens)
├── storage.py (900 tokens)
├── wrappers.py (200 tokens)
├── middleware/
├── __init__.py
├── hydrate_middleware.py (300 tokens)
├── middleware.py (200 tokens)
├── model.py (4.9k tokens)
├── page.py (700 tokens)
├── plugins/
├── __init__.py (200 tokens)
├── _screenshot.py
├── base.py
├── shared_tailwind.py
├── sitemap.py
├── tailwind_v3.py
├── tailwind_v4.py
├── py.typed
├── reflex.py (6.8k tokens)
├── route.py (1600 tokens)
├── state.py (18.7k tokens)
├── style.py
├── testing.py (6.8k tokens)
├── utils/
├── __init__.py
├── build.py (2.3k tokens)
├── codespaces.py (900 tokens)
├── compat.py
├── console.py
├── decorator.py
├── exceptions.py
├── exec.py (5.4k tokens)
├── export.py (800 tokens)
├── format.py
├── frontend_skeleton.py (4.8k tokens)
├── imports.py
├── js_runtimes.py (5.5k tokens)
├── lazy_loader.py
├── misc.py (1000 tokens)
├── net.py (900 tokens)
├── path_ops.py (1600 tokens)
├── precompressed_staticfiles.py (1300 tokens)
├── prerequisites.py (4.8k tokens)
├── processes.py (3.7k tokens)
├── pyi_generator.py
├── redir.py (200 tokens)
├── registry.py (500 tokens)
├── rename.py (1100 tokens)
├── serializers.py
├── tasks.py (1000 tokens)
├── telemetry.py (4.3k tokens)
├── telemetry_accounting.py (2.2k tokens)
├── templates.py (2.2k tokens)
├── token_manager.py (3.3k tokens)
├── types.py
├── vars/
├── __init__.py
├── base.py
├── color.py
├── datetime.py
├── dep_tracking.py
├── function.py
├── number.py
├── object.py
├── sequence.py
├── scripts/
├── __init__.py
├── bun_install.sh (1500 tokens)
├── check_min_deps.py (4.6k tokens)
├── darglint_test.bat (100 tokens)
├── delete_automated_releases.sh (1200 tokens)
├── hatch_build.py (200 tokens)
├── install.ps1 (2.4k tokens)
├── integration.sh (300 tokens)
├── make_pyi.py (2.1k tokens)
├── release.py (9.4k tokens)
├── release.py.lock (omitted)
├── run_lighthouse.py (200 tokens)
├── sfw-shims/
├── activate.sh (100 tokens)
├── bun (100 tokens)
├── npm (100 tokens)
├── wait_for_listening_port.py (500 tokens)
├── tests/
├── __init__.py
├── benchmarks/
├── __init__.py
├── conftest.py
├── fixtures.py (3k tokens)
├── test_compilation.py (800 tokens)
├── test_evaluate.py (100 tokens)
├── test_event_creation.py (600 tokens)
├── test_event_processing.py (800 tokens)
├── test_state_proxy.py (600 tokens)
├── integration/
├── __init__.py
├── conftest.py (200 tokens)
├── init-test/
├── Dockerfile
├── in_docker_test_script.sh (200 tokens)
├── lighthouse_fixtures/
├── images/
├── logo.png
├── lighthouse_utils.py (7.2k tokens)
├── shared/
├── state.py
├── test_auto_memo.py (400 tokens)
├── test_background_task.py (3.1k tokens)
├── test_call_script.py (3.9k tokens)
├── test_client_storage.py (5.5k tokens)
├── test_component_state.py (1600 tokens)
├── test_computed_vars.py (1600 tokens)
├── test_connection_banner.py (2000 tokens)
├── test_deploy_url.py (600 tokens)
├── test_dynamic_components.py (1100 tokens)
├── test_dynamic_routes.py (2.9k tokens)
├── test_event_actions.py (2.5k tokens)
├── test_event_chain.py (5k tokens)
├── test_exception_handlers.py (1200 tokens)
├── test_extra_overlay_function.py (500 tokens)
├── test_form_submit.py (1700 tokens)
├── test_hybrid_properties.py (1900 tokens)
├── test_icon.py (600 tokens)
├── test_input.py (1300 tokens)
├── test_large_state.py (600 tokens)
├── test_lifespan.py (2.3k tokens)
├── test_lighthouse.py (300 tokens)
├── test_linked_state.py (5.7k tokens)
├── test_login_flow.py (900 tokens)
├── test_media.py (1300 tokens)
├── test_memo.py (800 tokens)
├── test_memory_state_manager_expiration.py (1000 tokens)
├── test_navigation.py (500 tokens)
├── test_precompressed_frontend.py (700 tokens)
├── test_prod_build_pipeline.py (900 tokens)
├── test_server_side_event.py (1200 tokens)
├── test_shared_state.py (300 tokens)
├── test_state_inheritance.py (3.3k tokens)
├── test_tailwind.py (1000 tokens)
├── test_telemetry_compile.py (1500 tokens)
├── test_typeddict_form_submit.py (1400 tokens)
├── test_upload.py (7.8k tokens)
├── test_urls.py (400 tokens)
├── test_var_operations.py (8.6k tokens)
├── tests_playwright/
├── test_appearance.py (1900 tokens)
├── test_backend_path.py (1000 tokens)
├── test_client_error.py (1100 tokens)
├── test_code_block.py (1500 tokens)
├── test_cond_match.py (800 tokens)
├── test_datetime_operations.py (2k tokens)
├── test_debounce_input.py (700 tokens)
├── test_frontend_path.py (4k tokens)
├── test_hmr.py (900 tokens)
├── test_link_hover.py (200 tokens)
├── test_memo.py (1800 tokens)
├── test_memoize_edge_cases.py (1900 tokens)
├── test_mount_target.py (1100 tokens)
├── test_plotly.py (1300 tokens)
├── test_recharts.py (1600 tokens)
├── test_router_query.py (2k tokens)
├── test_stateless_app.py (300 tokens)
├── test_table.py (600 tokens)
├── test_textarea_enter_key_submit.py (700 tokens)
├── utils.py (2.4k tokens)
├── test_node_version.py (400 tokens)
├── type_checking/
├── README.md (400 tokens)
├── vars.py (300 tokens)
├── units/
├── __init__.py
├── app_mixins/
├── test_lifespan.py (800 tokens)
├── assets/
├── custom_script.js
├── test_assets.py (2.9k tokens)
├── compiler/
├── __init__.py
├── test_compiler.py (9.3k tokens)
├── test_compiler_utils.py (300 tokens)
├── test_dynamic_components_codegen.py (800 tokens)
├── test_memoize_plugin.py (18.6k tokens)
├── test_plugins.py (8.1k tokens)
├── test_stale_cleanup.py (1100 tokens)
├── test_state_js_template.py (400 tokens)
├── components/
├── __init__.py
├── base/
├── test_bare.py (100 tokens)
├── test_link.py (100 tokens)
├── test_script.py (200 tokens)
├── core/
├── __init__.py
├── test_banner.py (300 tokens)
├── test_colors.py (1200 tokens)
├── test_cond.py (1400 tokens)
├── test_debounce.py (1200 tokens)
├── test_foreach.py (1900 tokens)
├── test_html.py (200 tokens)
├── test_match.py (2.4k tokens)
├── test_responsive.py (200 tokens)
├── test_upload.py (3.8k tokens)
├── datadisplay/
├── __init__.py
├── conftest.py (300 tokens)
├── test_code.py (400 tokens)
├── test_dataeditor.py (100 tokens)
├── test_datatable.py (900 tokens)
├── test_shiki_code.py (1200 tokens)
├── el/
├── test_svg.py (300 tokens)
├── forms/
├── __init__.py
├── test_form.py (1800 tokens)
├── graphing/
├── __init__.py
├── test_plotly.py (400 tokens)
├── test_recharts.py (300 tokens)
├── layout/
├── __init__.py
├── lucide/
├── test_icon.py (800 tokens)
├── markdown/
├── __init__.py
├── test_markdown.py (2.1k tokens)
├── media/
├── __init__.py
├── test_image.py (200 tokens)
├── memo_fixtures/
├── __init__.py (100 tokens)
├── module_a.py (100 tokens)
├── module_b.py (100 tokens)
├── module_c.py (200 tokens)
├── radix/
├── test_callout.py (200 tokens)
├── test_icon_button.py (200 tokens)
├── test_layout.py
├── recharts/
├── test_cartesian.py (200 tokens)
├── test_charts.py (100 tokens)
├── test_general.py (300 tokens)
├── test_polar.py (200 tokens)
├── test_component.py (14.1k tokens)
├── test_component_future_annotations.py (200 tokens)
├── test_component_state.py (400 tokens)
├── test_memo.py (13.5k tokens)
├── test_memo_cross_module.py (1400 tokens)
├── test_props.py (1200 tokens)
├── test_tag.py (700 tokens)
├── typography/
├── __init__.py
├── test_markdown.py (300 tokens)
├── conftest.py (3k tokens)
├── custom_components/
├── __init__.py
├── test_custom_components.py (300 tokens)
├── docgen/
├── __init__.py
├── test_class_and_component.py (4.6k tokens)
├── test_markdown.py (5.9k tokens)
├── test_reflex_transformer.py (1700 tokens)
├── istate/
├── __init__.py
├── manager/
├── __init__.py
├── test_expiration.py (1300 tokens)
├── test_manager_locks.py (500 tokens)
├── test_redis.py (4.6k tokens)
├── test_token.py (1100 tokens)
├── test_data.py (1100 tokens)
├── test_proxy.py (4.8k tokens)
├── middleware/
├── __init__.py
├── conftest.py (100 tokens)
├── test_hydrate_middleware.py (300 tokens)
├── mock_redis.py (2000 tokens)
├── plugins/
├── test_embed.py (1700 tokens)
├── test_sitemap.py (4.2k tokens)
├── test_tailwind.py (300 tokens)
├── reflex_base/
├── __init__.py
├── constants/
├── __init__.py
├── test_base.py (100 tokens)
├── test_installer.py (400 tokens)
├── context/
├── __init__.py
├── test_base.py (600 tokens)
├── event/
├── __init__.py
├── processor/
├── test_base_state_processor.py (1400 tokens)
├── test_event_processor.py (5k tokens)
├── test_future.py (1800 tokens)
├── test_timeout.py (200 tokens)
├── test_context.py (500 tokens)
├── plugins/
├── __init__.py
├── test_base.py (400 tokens)
├── test_registry.py (2.6k tokens)
├── utils/
├── __init__.py
├── pyi_generator/
├── __init__.py
├── __main__.py (100 tokens)
├── dataset/
├── __init__.py
├── classvar_and_private.py (300 tokens)
├── custom_create.py (200 tokens)
├── inheritance.py (200 tokens)
├── literal_types.py (200 tokens)
├── module_level.py (200 tokens)
├── namespace_component.py (200 tokens)
├── simple_component.py (400 tokens)
├── staticmethod_namespace.py (200 tokens)
├── string_event_annotations.py (300 tokens)
├── sub_package/
├── __init__.py (100 tokens)
├── widget.py (100 tokens)
├── typed_event_handlers.py (400 tokens)
├── var_types.py (300 tokens)
├── golden/
├── .gitignore
├── classvar_and_private.pyi (800 tokens)
├── custom_create.pyi (800 tokens)
├── inheritance.pyi (2.4k tokens)
├── literal_types.pyi (1000 tokens)
├── module_level.pyi (900 tokens)
├── namespace_component.pyi (2.9k tokens)
├── simple_component.pyi (1000 tokens)
├── staticmethod_namespace.pyi (900 tokens)
├── string_event_annotations.pyi (900 tokens)
├── sub_package/
├── __init__.pyi (100 tokens)
├── widget.pyi (800 tokens)
├── typed_event_handlers.pyi (1700 tokens)
├── var_types.pyi (2.4k tokens)
├── test_build_hashes.py (500 tokens)
├── test_hashes.py (400 tokens)
├── test_regression.py (1800 tokens)
├── test_unit.py (2.5k tokens)
├── test_types.py (100 tokens)
├── vars/
├── __init__.py
├── test_base.py (600 tokens)
├── reflex_cli/
├── __init__.py
├── conftest.py (100 tokens)
├── core/
├── __init__.py
├── test_config.py (300 tokens)
├── utils/
├── __init__.py
├── test_dependency.py (200 tokens)
├── test_hosting.py (5.9k tokens)
├── v2/
├── __init__.py
├── test_apps.py (11.7k tokens)
├── test_cli.py (12k tokens)
├── test_deployments.py (500 tokens)
├── test_gcp.py (7k tokens)
├── test_project.py (5.5k tokens)
├── test_providers.py (2.9k tokens)
├── test_scan.py (2000 tokens)
├── test_secrets.py (1700 tokens)
├── test_vmtypes_regions.py (1500 tokens)
├── reflex_components_internal/
├── utils/
├── test_twmerge.py (200 tokens)
├── reflex_release/
├── __init__.py
├── conftest.py (1200 tokens)
├── test_changelog.py (1100 tokens)
├── test_cli.py (700 tokens)
├── test_commands.py (6.8k tokens)
├── test_config.py (4.1k tokens)
├── test_devpins.py (500 tokens)
├── test_discovery.py (300 tokens)
├── test_dist.py (1300 tokens)
├── test_scaffold.py (6.7k tokens)
├── test_versions.py (600 tokens)
├── reflex_site_shared/
├── docs/
├── test_content.py (800 tokens)
├── test_imports.py (200 tokens)
├── test_markdown.py (1700 tokens)
├── test_navigation.py (300 tokens)
├── test_site.py (1300 tokens)
├── styles/
├── test_fonts.py (100 tokens)
├── test_algolia.py (5.5k tokens)
├── test_docs_api.py (700 tokens)
├── test_docs_shell.py (1500 tokens)
├── test_plugins.py (800 tokens)
├── utils/
├── test_url.py (300 tokens)
├── states/
├── __init__.py (100 tokens)
├── mutation.py (300 tokens)
├── upload.py (900 tokens)
├── test_app.py (28.5k tokens)
├── test_attribute_access_type.py (2.3k tokens)
├── test_check_min_deps.py (2.4k tokens)
├── test_config.py (6.3k tokens)
├── test_db_config.py (1200 tokens)
├── test_environment.py (5.2k tokens)
├── test_event.py (8.1k tokens)
├── test_health_endpoint.py (1000 tokens)
├── test_lighthouse_utils.py (1000 tokens)
├── test_make_pyi.py (2.2k tokens)
├── test_model.py (1800 tokens)
├── test_optional_pydantic.py (400 tokens)
├── test_page.py (400 tokens)
├── test_prerequisites.py (12.8k tokens)
├── test_release.py (5.7k tokens)
├── test_route.py (800 tokens)
├── test_sqlalchemy.py (1900 tokens)
├── test_state.py (32.9k tokens)
├── test_state_tree.py (1800 tokens)
├── test_style.py (3.6k tokens)
├── test_telemetry.py (5.5k tokens)
├── test_testing.py (1300 tokens)
├── test_var.py (13.8k tokens)
├── utils/
├── __init__.py
├── test_build.py (1000 tokens)
├── test_exec.py (700 tokens)
├── test_export.py (800 tokens)
├── test_format.py (5.6k tokens)
├── test_imports.py (700 tokens)
├── test_memo_paths.py (1300 tokens)
├── test_precompressed_staticfiles.py (1200 tokens)
├── test_processes.py (1000 tokens)
├── test_serializers.py (1400 tokens)
├── test_streaming_response.py (700 tokens)
├── test_tasks.py (700 tokens)
├── test_telemetry_accounting.py (2.8k tokens)
├── test_telemetry_context.py (700 tokens)
├── test_token_manager.py (5k tokens)
├── test_types.py (800 tokens)
├── test_utils.py (6k tokens)
├── vars/
├── test_base.py (500 tokens)
├── test_dep_tracking.py (4.1k tokens)
├── test_dep_tracking_integration.py (1500 tokens)
├── test_hybrid_property.py (700 tokens)
├── test_object.py (2.2k tokens)
├── uv.lock (omitted)
```
## /.claude/hooks/session-start.sh
```sh path="/.claude/hooks/session-start.sh"
#!/bin/bash
# SessionStart hook for Claude Code on the web.
#
# The web container image is baked with tools that predate this repo's current
# requirements, so a later `uv sync` + test run fails out of the box. This hook
# reconciles the environment with the repo on every web session start (it does
# not sync dependencies -- that cost is paid on the first 'uv run'/'uv sync'):
#
# 1. uv: the repo pins tool.uv.required-version in pyproject.toml. If the uv on
# PATH is older, pip-install a satisfying one for --user (into ~/.local/bin,
# assumed already on PATH); the astral.sh installer and `uv self update` are
# blocked / GitHub-rate-limited here.
# 2. Python: an older uv (see #1) predates Python 3.14.0 final, so its bundled
# release manifest only knows 3.14 prereleases -- a bare `uv sync` with it
# resolves .python-version=3.14 to a release candidate whose
# typing._eval_type signature is incompatible with the pinned pydantic
# (breaks every import). Upgrading uv first fixes the manifest; we then run
# `uv python install` (which excludes prereleases) as a guard so a later
# sync can't reuse a prerelease that an earlier stale-uv run may have
# already fetched.
# 3. git tags: web clones are shallow with no tags, so Reflex's VCS-derived
# version resolves to 0.0.0 and trips downstream version gates (e.g.
# reflex-hosting-cli rejects it). Fetching tags lets the version compute.
set -euo pipefail
# Only the web container needs this fixup; local dev environments are managed
# by the developer.
if [ "${CLAUDE_CODE_REMOTE:-}" != "true" ]; then
exit 0
fi
cd "$CLAUDE_PROJECT_DIR"
# 1. Ensure the uv on PATH satisfies the repo's required-version; if not, pip
# installs a satisfying one into ~/.local/bin (assumed already on PATH).
req="$(sed -n 's/^[[:space:]]*required-version[[:space:]]*=[[:space:]]*"[^0-9]*\([0-9][0-9.]*\).*/\1/p' pyproject.toml | head -n1)"
uv_satisfies() { # $1=uv binary; true if its version >= $req (or no req parsed)
local v
v="$("$1" --version 2>/dev/null | grep -oE '[0-9]+\.[0-9]+\.[0-9]+' | head -n1)"
[ -n "$v" ] || return 1
[ -z "$req" ] && return 0
[ "$(printf '%s\n%s\n' "$req" "$v" | sort -V | head -n1)" = "$req" ]
}
if ! uv_satisfies uv; then
python3 -m pip install --user --quiet --root-user-action=ignore "uv${req:+>=$req}"
hash -r 2>/dev/null || true
fi
# 2. Ensure a stable interpreter matching .python-version is installed, so sync
# doesn't fall back to the pre-baked prerelease.
uv python install
# 3. Fetch tags so the dynamic version resolves (ignore failures; offline runs
# still compute a best-effort version).
git fetch --tags --quiet || true
# Dependencies are intentionally not synced here -- the first 'uv run'/'uv sync'
# (e.g. running tests or an app) installs them, so sessions that don't touch the
# code don't pay that cost.
echo "Environment ready: uv $(uv --version). Dependencies install on first 'uv sync' / 'uv run'."
```
## /.claude/settings.json
```json path="/.claude/settings.json"
{
"hooks": {
"SessionStart": [
{
"hooks": [
{
"type": "command",
"command": "$CLAUDE_PROJECT_DIR/.claude/hooks/session-start.sh"
}
]
}
]
}
}
```
## /.devcontainer/devcontainer.json
```json path="/.devcontainer/devcontainer.json"
{
"image": "mcr.microsoft.com/devcontainers/python:3.14-trixie",
"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/CODEOWNERS
```github/CODEOWNERS path="/.github/CODEOWNERS"
* @reflex-dev/reflex-team
/docs/ @Alek99 @reflex-dev/reflex-team
/README.md @Alek99 @reflex-dev/reflex-team
```
## /.github/ISSUE_TEMPLATE/bug_report.md
---
name: Bug report
about: Create a report to help us improve
title: ""
assignees: ""
---
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behavior:
- Code/Link to Repo:
**Expected behavior**
A clear and concise description of what you expected to happen.
**Screenshots**
If applicable, add screenshots to help explain your problem.
**Specifics (please complete the following information):**
- Python Version:
- Reflex Version:
- OS:
- Browser (Optional):
**Additional context**
Add any other context about the problem here.
## /.github/ISSUE_TEMPLATE/build_issue.md
---
name: Build Issue
about: Report an issue related to reflex.build
title: "[BUILD] " # This acts as a hint, but users can change it.
labels: build
assignees: ""
---
## Describe the issue
Provide details about the issue.
...
## Expected behavior
What should have happened?
...
## Steps to reproduce (if applicable)
1.
2.
3.
## Environment
- Reflex Version:
- Python Version:
- OS:
- Browser:
## /.github/ISSUE_TEMPLATE/cloud_issue.md
---
name: Cloud Issue
about: Report an issue related to Reflex Cloud
title: "[CLOUD] " # This acts as a hint, but users can change it.
labels: cloud
assignees: ""
---
## Describe the issue
Provide details about the issue.
...
## Expected behavior
What should have happened?
...
## Steps to reproduce (if applicable)
1.
2.
3.
## Environment
- Reflex Version:
- Python Version:
- OS:
- Browser:
## /.github/ISSUE_TEMPLATE/custom_component_request.md
---
name: Custom Component Request
about: Suggest a new custom component for Reflex
title: ""
labels: "custom component request"
assignees: ""
---
**Describe the Custom Component**
A clear and concise description of what the custom component does.
- What is the purpose of the custom component?
- What is the expected behavior of the custom component?
- 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):
**Additional context**
Add any other context about the custom component here.
## /.github/ISSUE_TEMPLATE/documentation.md
---
name: Documentation
about: Report a problem with the docs at reflex.dev/docs
title: ""
labels: documentation
assignees: ""
---
**Page**
Path:
**What's wrong?**
A clear description of the issue (typo, missing info, broken example, etc.).
**Suggested fix (optional)**
If you have a suggestion for how to improve the page, share it here.
**Screenshots (optional)**
If applicable, add screenshots to help explain.
## /.github/ISSUE_TEMPLATE/enhancement_request.md
---
name: Enhancement Request
about: Suggest an enhancement for an existing Reflex feature.
title: ""
labels: "enhancement"
assignees: ""
---
**Describe the Enhancement you want**
A clear and concise description of what the improvement does.
- Which feature do you want to improve? (and what problem does it have)
- 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
---
name: Enterprise Issue
about: Report an issue related to Reflex Enterprise
title: "[ENTERPRISE] " # This acts as a hint, but users can change it.
labels: enterprise
assignees: ""
---
## Describe the issue
Provide details about the issue.
...
## Expected behavior
What should have happened?
...
## Steps to reproduce (if applicable)
1.
2.
3.
## Environment
- Reflex Version:
- Python Version:
- OS:
- Browser:
## /.github/ISSUE_TEMPLATE/feature_request.md
---
name: Feature Request
about: Suggest a new feature for Reflex
title: ""
labels: "feature request"
assignees: ""
---
**Describe the Features**
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
```yml path="/.github/actions/setup_build_env/action.yml"
# Entry conditions:
# - `setup/checkout` has already happened
# - working dir is the root directory of your project (e.g. `reflex/`).
# - You have a `uv.lock` file in the root directory of your project
# - You have a `pyproject.toml` file in the root directory of your project
#
# Exit conditions:
# - Python of version `python-version` is ready to be invoked as `python`.
# - 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)"
inputs:
python-version:
description: "Python version setup"
required: true
run-uv-sync:
description: "Whether to run uv sync on current dir"
required: false
default: false
working-directory:
description: "Directory to run uv sync from. Defaults to the repo root."
required: false
default: "."
create-venv-at-path:
description: "Path to venv (if uv sync is enabled)"
required: false
default: ".venv"
runs:
using: "composite"
steps:
- name: Install UV
uses: astral-sh/setup-uv@08807647e7069bb48b6ef5acd8ec9567f424441b # v8.1.0
with:
python-version: ${{ inputs.python-version }}
enable-cache: true
prune-cache: false
activate-environment: true
cache-dependency-glob: "uv.lock"
working-directory: ${{ inputs.working-directory }}
- name: Setup Node
uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
with:
node-version: 22
- name: Install Dependencies
if: inputs.run-uv-sync == 'true'
run: uv sync
shell: bash
working-directory: ${{ inputs.working-directory }}
```
## /.github/codeql-config.yml
```yml path="/.github/codeql-config.yml"
paths:
- .github
- reflex
- packages
paths-ignore:
- "**/tests/**"
```
## /.github/pull_request_template.md
### 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?
<!-- You can erase any parts of this template not applicable to your Pull Request. -->
### Type of change
Please delete options that are not relevant.
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] 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?
- [ ] Have you linted your code locally prior to submission?
### Changes To Core Features:
- [ ] Have you added an explanation of what your changes do and why you'd like us to include them?
- [ ] Have you written new tests for your core changes, as applicable?
- [ ] Have you successfully ran tests with your changes locally?
### **After** these steps, you're ready to open a pull request.
a. Give a descriptive title to your PR.
b. Describe your changes.
c. Put `closes #XXXX` in your comment to auto-close the issue that your PR fixes (if such).
## /.github/scripts/auto_release_internal/detect.sh
```sh path="/.github/scripts/auto_release_internal/detect.sh"
#!/usr/bin/env bash
set -euo pipefail
: "${EVENT_NAME:?}"
if [ "$EVENT_NAME" = "workflow_dispatch" ]; then
: "${DISPATCH_PACKAGE:?}"
printf 'packages=["%s"]\n' "$DISPATCH_PACKAGE" >> "$GITHUB_OUTPUT"
exit 0
fi
PACKAGES=()
for pkg in reflex-components-internal reflex-site-shared; do
if git diff --name-only HEAD~1 HEAD -- "packages/$pkg/" | grep -q .; then
PACKAGES+=("\"$pkg\"")
fi
done
JOINED=$(IFS=,; echo "${PACKAGES[*]:-}")
echo "packages=[$JOINED]" >> "$GITHUB_OUTPUT"
```
## /.github/scripts/dispatch_release/detect.sh
```sh path="/.github/scripts/dispatch_release/detect.sh"
#!/usr/bin/env bash
set -euo pipefail
declare -A MAP=(
[hatch_reflex_pyi]=hatch-reflex-pyi
[reflex_base]=reflex-base
[reflex_components_code]=reflex-components-code
[reflex_components_core]=reflex-components-core
[reflex_components_dataeditor]=reflex-components-dataeditor
[reflex_components_gridjs]=reflex-components-gridjs
[reflex_components_lucide]=reflex-components-lucide
[reflex_components_markdown]=reflex-components-markdown
[reflex_components_moment]=reflex-components-moment
[reflex_components_plotly]=reflex-components-plotly
[reflex_components_radix]=reflex-components-radix
[reflex_components_react_player]=reflex-components-react-player
[reflex_components_recharts]=reflex-components-recharts
[reflex_components_sonner]=reflex-components-sonner
[reflex_docgen]=reflex-docgen
[reflex_hosting_cli]=reflex-hosting-cli
[reflex_release]=reflex-release
)
ORDER=(hatch_reflex_pyi reflex_base reflex_components_code reflex_components_core reflex_components_dataeditor reflex_components_gridjs reflex_components_lucide reflex_components_markdown reflex_components_moment reflex_components_plotly reflex_components_radix reflex_components_react_player reflex_components_recharts reflex_components_sonner reflex_docgen reflex_hosting_cli reflex_release)
PACKAGES=()
for key in "${ORDER[@]}"; do
if [[ "${!key:-false}" == "true" ]]; then
PACKAGES+=("\"${MAP[$key]}\"")
fi
done
if [[ ${#PACKAGES[@]} -eq 0 ]]; then
# No explicit selection: the plan step auto-detects packages with pending
# news fragments (or, for release-from-prerelease, packages whose changelog
# is topped by an alpha).
echo "No packages checked; deferring to auto-detection in the plan step."
fi
JOINED=$(IFS=,; echo "${PACKAGES[*]:-}")
echo "packages=[$JOINED]" >> "$GITHUB_OUTPUT"
```
## /.github/scripts/dispatch_release/open_release_pr.sh
```sh path="/.github/scripts/dispatch_release/open_release_pr.sh"
#!/usr/bin/env bash
set -euo pipefail
: "${GH_TOKEN:?}"
: "${ACTION:?}"
: "${REF_NAME:?}"
: "${RELEASES:?}"
: "${GITHUB_RUN_ID:?}"
# Final versions publish from main — except hotfix trains, which publish
# directly from their r/hotfix/** branch, so the PR targets it instead.
BASE="main"
if [[ "$REF_NAME" == r/hotfix/* ]]; then
BASE="$REF_NAME"
fi
BRANCH="release/${ACTION}-${GITHUB_RUN_ID}"
SUMMARY=$(echo "$RELEASES" | jq -r '[.[] | "\(.package)@\(.next)"] | join(", ")')
BODY_FILE="${RUNNER_TEMP}/release_pr_body.md"
{
echo "Materialized changelogs for release action \`${ACTION}\` (dispatched on \`${REF_NAME}\`)."
echo ""
echo "| Package | Current | Next | Tag |"
echo "|---------|---------|------|-----|"
echo "$RELEASES" | jq -r '.[] | "| `\(.package)` | `\(if .current == "" then "<none>" else .current end)` | `\(.next)` | `\(.tag)` |"'
echo ""
echo "Merging this PR lands the versions above for release: the push to \`${BASE}\`"
echo "triggers the \`release_from_changelog\` workflow, which builds each package and"
echo "then waits for \`pypi\` environment approval before uploading; the tag and"
echo "GitHub release are created only after a successful upload. If a publish"
echo "fails, fix the problem on top of the changelog bump — the next push retries"
echo "automatically."
} > "$BODY_FILE"
git config user.name "github-actions[bot]"
git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
# Stage the changelog rewrites (including first-release creations); a
# directory pathspec with a wildcard never matches, so name the files. The
# consumed news fragments are already staged by towncrier's git rm, and
# `commit -a` below picks up any tracked change it left unstaged — while
# never committing untracked stray files.
git add -- CHANGELOG.md 'packages/*/CHANGELOG.md'
if git diff --cached --quiet && git diff --quiet; then
echo "Error: materialization produced no changes; nothing to release."
exit 1
fi
git commit -a -m "Materialize changelogs for ${SUMMARY} (${ACTION})"
# The token is supplied via gh's credential helper so it never appears in a
# remote URL or process argv.
git -c credential.helper= -c 'credential.helper=!gh auth git-credential' \
push origin "HEAD:refs/heads/${BRANCH}"
PR_URL=$(gh pr create --base "$BASE" --head "$BRANCH" --title "Release ${SUMMARY}" --body-file "$BODY_FILE")
# The PR only rewrites changelogs and deletes consumed news fragments, so the
# changelog fragment check does not apply. Label failure is non-fatal.
gh pr edit "$PR_URL" --add-label skip-changelog || echo "::notice::could not add skip-changelog label to $PR_URL"
{
echo "## Release PR opened"
echo ""
echo "$PR_URL"
echo ""
echo "Releases: ${SUMMARY}"
} >> "$GITHUB_STEP_SUMMARY"
```
## /.github/scripts/dispatch_release/push_prerelease.sh
```sh path="/.github/scripts/dispatch_release/push_prerelease.sh"
#!/usr/bin/env bash
set -euo pipefail
: "${GH_TOKEN:?}"
: "${ACTION:?}"
: "${REF_NAME:?}"
: "${RELEASES:?}"
: "${GITHUB_RUN_ID:?}"
SUMMARY=$(echo "$RELEASES" | jq -r '[.[] | "\(.package)@\(.next)"] | join(", ")')
if [[ "$ACTION" == "continued-prerelease" ]]; then
if [[ "$REF_NAME" != r/pre-* ]]; then
echo "Error: continued-prerelease must be dispatched on the r/pre-* branch of an existing prerelease train (got '$REF_NAME')"
exit 1
fi
BRANCH="$REF_NAME"
else
# Same release timezone as the changelog heading dates (RELEASE_TIMEZONE in
# scripts/release.py) so the branch name and headings never disagree.
BRANCH="r/pre-$(TZ=America/Los_Angeles date +%Y.%m.%d)"
if git ls-remote --exit-code --heads origin "$BRANCH" >/dev/null 2>&1; then
BRANCH="${BRANCH}-${GITHUB_RUN_ID}"
fi
fi
git config user.name "github-actions[bot]"
git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
# Stage the changelog rewrites (including first-release creations); a
# directory pathspec with a wildcard never matches, so name the files. The
# consumed news fragments are already staged by towncrier's git rm, and
# `commit -a` below picks up any tracked change it left unstaged — while
# never committing untracked stray files.
git add -- CHANGELOG.md 'packages/*/CHANGELOG.md'
if git diff --cached --quiet && git diff --quiet; then
echo "Error: materialization produced no changes; nothing to push."
exit 1
fi
git commit -a -m "Materialize changelogs for ${SUMMARY} (${ACTION})"
# The token is supplied via gh's credential helper so it never appears in a
# remote URL or process argv.
git -c credential.helper= -c 'credential.helper=!gh auth git-credential' \
push origin "HEAD:refs/heads/${BRANCH}"
# Pushes made with GITHUB_TOKEN do not fire on-push workflows, so dispatch the
# changelog check explicitly. Building is automatic; the upload itself still
# waits for pypi environment approval.
gh workflow run release_from_changelog.yml --ref "$BRANCH"
{
echo "## Prerelease pushed"
echo ""
echo "Branch: \`${BRANCH}\`"
echo ""
echo "Releases: ${SUMMARY}"
echo ""
echo "Dispatched the \`release_from_changelog\` workflow on the branch; approve the"
echo "\`pypi\` environment deployments to upload the alphas."
} >> "$GITHUB_STEP_SUMMARY"
```
## /.github/scripts/publish/create_release.sh
```sh path="/.github/scripts/publish/create_release.sh"
#!/usr/bin/env bash
set -euo pipefail
: "${TAG:?}"
: "${PKG:?}"
: "${VERSION:?}"
: "${PRERELEASE:?}"
: "${MARK_LATEST:?}"
: "${NOTES_PATH:?}"
: "${GH_TOKEN:?}"
: "${GITHUB_SHA:?}"
if gh release view "$TAG" --json name >/dev/null 2>&1; then
echo "Release $TAG already exists; skipping (safe re-run)."
exit 0
fi
ARGS=(--title "$PKG@$VERSION" --notes-file "$NOTES_PATH" --target "$GITHUB_SHA")
if [[ "$PRERELEASE" == "true" ]]; then
ARGS+=(--prerelease --latest=false)
elif [[ "$MARK_LATEST" == "true" ]]; then
ARGS+=(--latest)
else
ARGS+=(--latest=false)
fi
gh release create "$TAG" "${ARGS[@]}"
```
## /.github/scripts/publish/push_tag.sh
```sh path="/.github/scripts/publish/push_tag.sh"
#!/usr/bin/env bash
set -euo pipefail
: "${TAG:?}"
: "${GH_TOKEN:?}"
# Tag the published commit and push it. Runs only after a successful PyPI
# upload — the tag's existence is what marks a version as published. Pushing
# an identical existing tag is a no-op (safe re-runs); a same-name tag on a
# different commit is rejected by git, which means another run already
# published this version from a different commit — investigate, don't force.
#
# The token is supplied via gh's credential helper so it never appears in a
# remote URL or process argv.
git tag --force "$TAG"
git -c credential.helper= -c 'credential.helper=!gh auth git-credential' \
push origin "refs/tags/${TAG}"
```
## /.github/scripts/publish/verify_pyi.sh
```sh path="/.github/scripts/publish/verify_pyi.sh"
#!/usr/bin/env bash
set -euo pipefail
: "${BUILD_DIR:?}"
if unzip -l "$BUILD_DIR"/dist/*.whl | grep '\.pyi{{contextString}}#39;; then
echo "✓ .pyi files found in distribution"
else
echo "Error: No .pyi files found in wheel"
exit 1
fi
```
## /.github/workflows/auto_release_internal.yml
```yml path="/.github/workflows/auto_release_internal.yml"
name: Auto-release internal packages
# Internal packages (no changelog, patch-bump versioning) release on every
# push to main that touches them. Publishing goes through publish.yml with no
# explicit version: the next patch version is computed from the newest tag
# inside the per-package publish concurrency group, and the tag is only
# pushed after a successful upload. Like every publish, the upload itself
# waits for approval by the pypi environment's required reviewers.
on:
push:
branches: [main]
paths:
- "packages/reflex-components-internal/**"
- "packages/reflex-site-shared/**"
- ".github/workflows/auto_release_internal.yml"
workflow_dispatch:
inputs:
package:
description: "Package to release"
required: true
type: choice
options:
- reflex-components-internal
- reflex-site-shared
permissions:
contents: read
jobs:
detect:
runs-on: ubuntu-latest
permissions:
contents: read
outputs:
packages: ${{ steps.detect.outputs.packages }}
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-depth: 2
persist-credentials: false
- id: detect
env:
EVENT_NAME: ${{ github.event_name }}
DISPATCH_PACKAGE: ${{ inputs.package }}
run: bash .github/scripts/auto_release_internal/detect.sh
publish:
needs: detect
if: needs.detect.outputs.packages != '[]'
strategy:
matrix:
package: ${{ fromJson(needs.detect.outputs.packages) }}
fail-fast: false
# Holds the per-package publish lock for the whole called run, so
# back-to-back pushes compute and publish strictly one version at a time.
concurrency:
group: publish-${{ matrix.package }}
cancel-in-progress: false
permissions:
contents: write
id-token: write
actions: read
uses: ./.github/workflows/publish.yml
with:
package: ${{ matrix.package }}
```
## /.github/workflows/build_packages.yml
```yml path="/.github/workflows/build_packages.yml"
name: Build all packages
on:
pull_request:
branches: [main]
push:
branches: [main]
concurrency:
group: ${{ github.workflow }}-${{ github.event.pull_request.id || github.sha }}
cancel-in-progress: true
permissions:
contents: read
jobs:
discover:
runs-on: ubuntu-latest
outputs:
builds: ${{ steps.discover.outputs.builds }}
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
persist-credentials: false
- id: discover
run: |
set -euo pipefail
ENTRIES=('{"name":"reflex","dir":"."}')
for pkg in packages/*/; do
name=$(basename "$pkg")
ENTRIES+=("{\"name\":\"$name\",\"dir\":\"$pkg\"}")
done
JOINED=$(IFS=,; echo "${ENTRIES[*]}")
echo "builds=[$JOINED]" >> "$GITHUB_OUTPUT"
build:
needs: discover
runs-on: ubuntu-latest
strategy:
matrix:
include: ${{ fromJson(needs.discover.outputs.builds) }}
fail-fast: false
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-tags: true
fetch-depth: 0
persist-credentials: false
- uses: ./.github/actions/setup_build_env
with:
python-version: "3.14"
run-uv-sync: false
- name: Build ${{ matrix.name }}
run: uv build --directory "${{ matrix.dir }}"
env:
PYI_GENERATOR_RAISE_FAILED_IMPORTS: "1"
```
## /.github/workflows/changelog.yml
```yml path="/.github/workflows/changelog.yml"
name: changelog
permissions:
contents: read
concurrency:
group: ${{ github.workflow }}-${{ github.event.pull_request.id }}
cancel-in-progress: true
on:
pull_request:
branches: ["main"]
jobs:
changelog:
runs-on: ubuntu-latest
timeout-minutes: 10
steps:
- name: Check for skip-changelog label
id: skip
shell: bash
env:
SKIP_CHANGELOG: ${{ contains(github.event.pull_request.labels.*.name, 'skip-changelog') }}
run: |
if [ "$SKIP_CHANGELOG" = "true" ]; then
echo "skip=true" >> "$GITHUB_OUTPUT"
echo "PR has 'skip-changelog' label; bypassing changelog check."
else
echo "skip=false" >> "$GITHUB_OUTPUT"
fi
# The heading guard runs even for skip-changelog PRs: that label only
# waives the news-fragment requirement, not the publish-trigger guard.
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-depth: 0
# A merged version heading without a git tag triggers a real publish
# (see release_from_changelog.yml), so new headings must come from the
# Dispatch release workflow's release/* branches — not hand edits.
# check-headings uses the same parser the release pipeline publishes
# from, so the guard and the publisher cannot disagree. Escape hatch
# for deliberate restructuring: the 'changelog-version-edit' label.
- uses: astral-sh/setup-uv@08807647e7069bb48b6ef5acd8ec9567f424441b # v8.1.0
if: ${{ !contains(github.event.pull_request.labels.*.name, 'changelog-version-edit') && !startsWith(github.head_ref, 'release/') }}
- name: Reject manual changelog version headings
if: ${{ !contains(github.event.pull_request.labels.*.name, 'changelog-version-edit') && !startsWith(github.head_ref, 'release/') }}
env:
BASE_REF: origin/${{ github.base_ref }}
run: uv run --no-config --locked --script scripts/release.py check-headings
- uses: ./.github/actions/setup_build_env
if: steps.skip.outputs.skip != 'true'
with:
python-version: "3.14"
run-uv-sync: true
- name: Determine affected packages
if: steps.skip.outputs.skip != 'true'
id: affected
shell: bash
run: |
set -euo pipefail
changed=$(git diff --name-only origin/main...HEAD)
affected=()
if printf '%s\n' "$changed" | grep -qE '^reflex/'; then
affected+=(".")
fi
for pkg_dir in packages/*/; do
pkg=$(basename "$pkg_dir")
case "$pkg" in
integrations-docs|reflex-components-internal|reflex-site-shared) continue ;;
esac
if printf '%s\n' "$changed" | grep -qE "^packages/$pkg/src/"; then
affected+=("${pkg_dir%/}")
fi
done
printf '%s\n' "${affected[@]}" > affected.txt
echo "Affected packages:"
cat affected.txt
- name: Check for news fragments
if: steps.skip.outputs.skip != 'true'
shell: bash
run: |
set -euo pipefail
if [ ! -s affected.txt ]; then
echo "No packaged source changes in this PR; no changelog fragments required."
exit 0
fi
failed=0
while IFS= read -r pkg_dir; do
[ -z "$pkg_dir" ] && continue
echo "::group::towncrier check ($pkg_dir)"
if ! uv run towncrier check --config pyproject.toml --dir "$pkg_dir" --compare-with origin/main; then
failed=1
fi
echo "::endgroup::"
done < affected.txt
if [ "$failed" -ne 0 ]; then
echo ""
echo "One or more affected packages is missing a news fragment under <package>/news/."
echo "Add a fragment named <pr-number>.<type>.md where <type> is one of:"
echo " breaking, deprecation, feature, bugfix, performance, docs, misc"
echo "Or apply the 'skip-changelog' label if the change is genuinely not user-facing."
exit 1
fi
```
## /.github/workflows/check_node_latest.yml
```yml path="/.github/workflows/check_node_latest.yml"
name: integration-node-latest
permissions:
contents: read
on:
push:
branches:
- main
pull_request:
branches:
- main
env:
REFLEX_TELEMETRY_ENABLED: false
jobs:
check_latest_node:
runs-on: ubuntu-22.04
strategy:
matrix:
split_index: [1, 2]
node-version: ["node"]
fail-fast: false
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-tags: true
fetch-depth: 0
persist-credentials: false
- uses: ./.github/actions/setup_build_env
with:
python-version: "3.13"
run-uv-sync: true
- uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
with:
node-version: ${{ matrix.node-version }}
- run: uv run playwright install --with-deps
- run: |
uv run pytest tests/test_node_version.py -v
uv run pytest tests/integration --splits 2 -v --group ${{matrix.split_index}}
```
## /.github/workflows/check_outdated_dependencies.yml
```yml path="/.github/workflows/check_outdated_dependencies.yml"
name: check-outdated-dependencies
permissions:
contents: read
on:
push: # This will trigger the action when a pull request is opened or updated.
branches:
- "release/**" # This will trigger the action when any branch starting with "release/" is created.
workflow_dispatch: # Allow manual triggering if needed.
jobs:
backend:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-tags: true
fetch-depth: 0
persist-credentials: false
- uses: ./.github/actions/setup_build_env
with:
python-version: "3.13"
run-uv-sync: true
- name: Check outdated backend dependencies
run: |
outdated=$(uv pip list --outdated)
echo "Outdated:"
echo "$outdated"
filtered_outdated=$(echo "$outdated" | grep -vE 'pyright|ruff' || true)
if [ ! -z "$filtered_outdated" ]; then
echo "Outdated dependencies found:"
echo "$filtered_outdated"
exit 1
else
echo "All dependencies are up to date. (pyright and ruff are ignored)"
fi
frontend:
runs-on: ubuntu-latest
env:
# reflex-enterprise restricts `reflex run --env prod` to paid tiers but
# exempts reflex's own integration tests via the app harness flag.
APP_HARNESS_FLAG: "true"
steps:
- name: Checkout code
uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-tags: true
fetch-depth: 0
persist-credentials: false
- uses: ./.github/actions/setup_build_env
with:
python-version: "3.13"
- name: Install Bun
uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
- name: Install Requirements for reflex-docs
working-directory: ./docs/app
run: uv sync
- name: Init Website for reflex-docs
working-directory: ./docs/app
run: uv run --active --no-sync reflex init
- name: Run Website and Check for errors
run: |
uv run --active --no-sync bash scripts/integration.sh ./docs/app prod
- name: Check outdated frontend dependencies
working-directory: ./docs/app/.web
run: |
raw_outdated=$(bun outdated)
outdated=$(echo "$raw_outdated" | grep -vE '\|\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\|' || true)
echo "Outdated:"
echo "$outdated"
# Ignore 3rd party dependencies that are not updated.
filtered_outdated=$(echo "$outdated" | grep -vE 'Package|@chakra-ui|lucide-react|@splinetool/runtime|ag-grid-react|framer-motion|ag-grid' || true)
no_extra=$(echo "$filtered_outdated" | grep -vE '\|\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-' || true)
if [ ! -z "$no_extra" ]; then
echo "Outdated dependencies found:"
echo "$filtered_outdated"
exit 1
else
echo "All dependencies are up to date. (3rd party packages are ignored)"
fi
```
## /.github/workflows/codeql.yml
```yml path="/.github/workflows/codeql.yml"
# For most projects, this workflow file will not need changing; you simply need
# to commit it to your repository.
#
# You may wish to alter this file to override the set of languages analyzed,
# or to provide custom queries or build logic.
#
# ******** NOTE ********
# We have attempted to detect the languages in your repository. Please check
# the `language` matrix defined below to confirm you have the correct set of
# supported CodeQL languages.
#
name: "CodeQL Advanced"
on:
push:
branches: ["main"]
pull_request:
branches: ["main"]
schedule:
- cron: "36 7 * * 4"
jobs:
analyze:
name: Analyze (${{ matrix.language }})
# Runner size impacts CodeQL analysis time. To learn more, please see:
# - https://gh.io/recommended-hardware-resources-for-running-codeql
# - https://gh.io/supported-runners-and-hardware-resources
# - https://gh.io/using-larger-runners (GitHub.com only)
# Consider using larger runners or machines with greater resources for possible analysis time improvements.
runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
permissions:
# required for all workflows
security-events: write
# required to fetch internal or private CodeQL packs
packages: read
# only required for workflows in private repositories
actions: read
contents: read
strategy:
fail-fast: false
matrix:
include:
- language: python
build-mode: none
- language: actions
build-mode: none
# CodeQL supports the following values keywords for 'language': 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'swift'
# Use `c-cpp` to analyze code written in C, C++ or both
# Use 'java-kotlin' to analyze code written in Java, Kotlin or both
# Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
# To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
# see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
# If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
# your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
steps:
- name: Checkout repository
uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
persist-credentials: false
# Add any setup steps before running the `github/codeql-action/init` action.
# This includes steps like installing compilers or runtimes (`actions/setup-node`
# or others). This is typically only required for manual builds.
# - name: Setup runtime (example)
# uses: actions/setup-example@v1
# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
uses: github/codeql-action/init@68bde559dea0fdcac2102bfdf6230c5f70eb485e # v4.35.4
with:
languages: ${{ matrix.language }}
config-file: .github/codeql-config.yml
build-mode: ${{ matrix.build-mode }}
# If you wish to specify custom queries, you can do so here or in a config file.
# By default, queries listed here will override any specified in a config file.
# Prefix the list here with "+" to use these queries and those in the config file.
# For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
# queries: security-extended,security-and-quality
# If the analyze step fails for one of the languages you are analyzing with
# "We were unable to automatically build your code", modify the matrix above
# to set the build mode to "manual" for that language. Then modify this step
# to build your code.
# ℹ️ Command-line programs to run using the OS shell.
# 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
- if: matrix.build-mode == 'manual'
shell: bash
run: |
echo 'If you are using a "manual" build mode for one or more of the' \
'languages you are analyzing, replace this with the commands to build' \
'your code, for example:'
echo ' make bootstrap'
echo ' make release'
exit 1
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@68bde559dea0fdcac2102bfdf6230c5f70eb485e # v4.35.4
with:
category: "/language:${{matrix.language}}"
```
## /.github/workflows/dependency-review.yml
```yml path="/.github/workflows/dependency-review.yml"
name: "Dependency Review"
on: [pull_request]
permissions:
contents: read
jobs:
dependency-review:
runs-on: ubuntu-latest
steps:
- name: "Checkout Repository"
uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
persist-credentials: false
- name: "Dependency Review"
uses: actions/dependency-review-action@a1d282b36b6f3519aa1f3fc636f609c47dddb294 # v5.0.0
with:
fail-on-severity: high
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"
```
## /.github/workflows/dispatch_release.yml
```yml path="/.github/workflows/dispatch_release.yml"
name: Dispatch release
# Kicks off a release by materializing news fragments into the selected
# packages' CHANGELOG.md files at the next version — the changelogs are the
# source of truth for publishing (see release_from_changelog.yml, which
# builds any changelog version that has no git tag yet and uploads it once
# the pypi environment deployment is approved).
#
# Leaving every package unchecked auto-selects the packages to release:
# those with pending news fragments — or, for release-from-prerelease, those
# whose changelog is topped by an alpha (the train's fragments are already
# consumed). Fragments in the repo-root news/ select reflex-base, which
# releases reflex alongside it.
#
# Prerelease actions (new-prerelease-*, continued-prerelease) write alpha
# versions and push them straight to an r/pre-<date> branch (continued
# prereleases push back to the r/pre-* branch the workflow was dispatched
# on); alphas build immediately and upload after pypi environment approval —
# no PR review involved. To pull new work into a prerelease train, merge
# main into the r/pre-* branch, then dispatch continued-prerelease on it.
#
# Release actions (release-*) open a pull request with the changelog changes
# instead — reviewing and merging that PR is how final versions land for
# publishing. The PR targets main, or the r/hotfix/** branch the workflow
# was dispatched on (hotfix branches may publish final versions directly).
# release-from-prerelease collapses the accumulated alpha sections into the
# single final-version section, so alpha headings never appear in a
# published final changelog.
#
# Materializing changelogs never publishes by itself: every PyPI upload —
# alphas included — additionally requires approval by the `pypi`
# environment's required reviewers (see publish.yml).
#
# REQUIRED CONFIGURATION:
# - The `pypi` environment must have required reviewers (asserted, fail
# closed, by publish.yml).
# - "Allow GitHub Actions to create and approve pull requests" must be
# enabled in the repo's Actions settings for release-* actions to open PRs.
# - Branch protection on main should require review; merging a release PR is
# what lands final versions for publishing.
# - Recommended: a ruleset restricting who can create/push r/** and
# release/** branches to maintainers plus the github-actions[bot] app
# (this workflow pushes as github-actions[bot] via GITHUB_TOKEN).
# - If the pypi environment restricts deployment branches, allow main,
# r/pre-*, and r/hotfix/*.
# - The old dispatch-release-approval environment is no longer used; the
# pypi environment reviewers and release-PR review replace it.
on:
workflow_dispatch:
inputs:
action:
description: "Release action"
required: true
type: choice
# default is continued-prerelease to prevent accidental releases.
default: continued-prerelease
options:
- new-prerelease-patch
- new-prerelease-minor
- new-prerelease-major
- continued-prerelease
- release-from-prerelease
- release-post
- release-patch
- release-minor
- release-major
hatch_reflex_pyi:
description: "hatch-reflex-pyi"
type: boolean
default: false
reflex_base:
description: "reflex-base"
type: boolean
default: false
reflex_components_code:
description: "reflex-components-code"
type: boolean
default: false
reflex_components_core:
description: "reflex-components-core"
type: boolean
default: false
reflex_components_dataeditor:
description: "reflex-components-dataeditor"
type: boolean
default: false
reflex_components_gridjs:
description: "reflex-components-gridjs"
type: boolean
default: false
reflex_components_lucide:
description: "reflex-components-lucide"
type: boolean
default: false
reflex_components_markdown:
description: "reflex-components-markdown"
type: boolean
default: false
reflex_components_moment:
description: "reflex-components-moment"
type: boolean
default: false
reflex_components_plotly:
description: "reflex-components-plotly"
type: boolean
default: false
reflex_components_radix:
description: "reflex-components-radix"
type: boolean
default: false
reflex_components_react_player:
description: "reflex-components-react-player"
type: boolean
default: false
reflex_components_recharts:
description: "reflex-components-recharts"
type: boolean
default: false
reflex_components_sonner:
description: "reflex-components-sonner"
type: boolean
default: false
reflex_docgen:
description: "reflex-docgen"
type: boolean
default: false
reflex_hosting_cli:
description: "reflex-hosting-cli"
type: boolean
default: false
reflex_release:
description: "reflex-release"
type: boolean
default: false
permissions:
contents: read
concurrency:
group: dispatch-release-${{ github.ref }}
cancel-in-progress: false
jobs:
detect:
runs-on: ubuntu-latest
permissions:
contents: read
outputs:
packages: ${{ steps.detect.outputs.packages }}
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
persist-credentials: false
- id: detect
env:
hatch_reflex_pyi: ${{ inputs.hatch_reflex_pyi }}
reflex_base: ${{ inputs.reflex_base }}
reflex_components_code: ${{ inputs.reflex_components_code }}
reflex_components_core: ${{ inputs.reflex_components_core }}
reflex_components_dataeditor: ${{ inputs.reflex_components_dataeditor }}
reflex_components_gridjs: ${{ inputs.reflex_components_gridjs }}
reflex_components_lucide: ${{ inputs.reflex_components_lucide }}
reflex_components_markdown: ${{ inputs.reflex_components_markdown }}
reflex_components_moment: ${{ inputs.reflex_components_moment }}
reflex_components_plotly: ${{ inputs.reflex_components_plotly }}
reflex_components_radix: ${{ inputs.reflex_components_radix }}
reflex_components_react_player: ${{ inputs.reflex_components_react_player }}
reflex_components_recharts: ${{ inputs.reflex_components_recharts }}
reflex_components_sonner: ${{ inputs.reflex_components_sonner }}
reflex_docgen: ${{ inputs.reflex_docgen }}
reflex_hosting_cli: ${{ inputs.reflex_hosting_cli }}
reflex_release: ${{ inputs.reflex_release }}
run: bash .github/scripts/dispatch_release/detect.sh
materialize:
needs: detect
runs-on: ubuntu-latest
permissions:
contents: write
pull-requests: write
actions: write
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-tags: true
fetch-depth: 0
persist-credentials: false
- uses: astral-sh/setup-uv@08807647e7069bb48b6ef5acd8ec9567f424441b # v8.1.0
- name: Plan versions
id: plan
env:
PACKAGES_JSON: ${{ needs.detect.outputs.packages }}
ACTION: ${{ inputs.action }}
run: uv run --no-config --locked --script scripts/release.py plan
- name: Materialize changelogs
env:
RELEASES_JSON: ${{ steps.plan.outputs.releases }}
ACTION: ${{ inputs.action }}
run: uv run --no-config --locked --script scripts/release.py materialize
- name: Push prerelease branch
if: ${{ !startsWith(inputs.action, 'release-') }}
env:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
ACTION: ${{ inputs.action }}
REF_NAME: ${{ github.ref_name }}
RELEASES: ${{ steps.plan.outputs.releases }}
run: bash .github/scripts/dispatch_release/push_prerelease.sh
- name: Open release pull request
if: ${{ startsWith(inputs.action, 'release-') }}
env:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
ACTION: ${{ inputs.action }}
REF_NAME: ${{ github.ref_name }}
RELEASES: ${{ steps.plan.outputs.releases }}
run: bash .github/scripts/dispatch_release/open_release_pr.sh
```
## /.github/workflows/docs_tests.yml
```yml path="/.github/workflows/docs_tests.yml"
name: docs tests
on:
pull_request:
branches: ["main"]
paths:
- 'docs/**'
- 'packages/reflex-components-core/src/reflex_components_core/core/upload.py'
- 'packages/reflex-site-shared/**'
- 'packages/integrations-docs/**'
- '.github/workflows/docs_tests.yml'
push:
branches: ["main"]
paths:
- 'docs/**'
- 'packages/reflex-components-core/src/reflex_components_core/core/upload.py'
- 'packages/reflex-site-shared/**'
- 'packages/integrations-docs/**'
- '.github/workflows/docs_tests.yml'
permissions:
contents: read
defaults:
run:
shell: bash
jobs:
docs-tests:
runs-on: ubuntu-latest
timeout-minutes: 20
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-tags: true
fetch-depth: 0
persist-credentials: false
- uses: ./.github/actions/setup_build_env
with:
python-version: "3.12"
run-uv-sync: true
working-directory: ./docs/app
- name: Run docs app tests
working-directory: ./docs/app
run: uv run --no-sync pytest tests/ -v
```
## /.github/workflows/docs_whitelist.yml
```yml path="/.github/workflows/docs_whitelist.yml"
name: docs whitelist check
on:
pull_request:
paths:
- 'docs/app/reflex_docs/whitelist.py'
- '.github/workflows/docs_whitelist.yml'
permissions:
contents: read
jobs:
check-whitelist:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
- name: Assert whitelist is empty
run: echo -e "\nassert not WHITELISTED_PAGES, f'WHITELISTED_PAGES includes {WHITELISTED_PAGES}'" | cat "docs/app/reflex_docs/whitelist.py" - | python3
```
## /.github/workflows/integration_app_harness.yml
```yml path="/.github/workflows/integration_app_harness.yml"
name: integration-app-harness
concurrency:
group: ${{ github.workflow }}-${{ github.event.pull_request.id || github.sha }}
cancel-in-progress: true
on:
push:
branches: ["main"]
paths-ignore:
- "**/*.md"
pull_request:
branches: ["main"]
paths-ignore:
- "**/*.md"
env:
APP_HARNESS_HEADLESS: 1
PYTHONUNBUFFERED: 1
permissions:
contents: read
jobs:
integration-app-harness:
timeout-minutes: 30
strategy:
matrix:
state_manager: ["redis", "memory"]
python-version: ["3.11", "3.12", "3.13", "3.14"]
split_index: [1, 2]
fail-fast: false
runs-on: ubuntu-22.04
services:
# Label used to access the service container
redis:
image: ${{ matrix.state_manager == 'redis' && 'redis' || '' }}
# Set health checks to wait until redis has started
options: >-
--health-cmd "redis-cli ping"
--health-interval 10s
--health-timeout 5s
--health-retries 5
ports:
# Maps port 6379 on service container to the host
- 6379:6379
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-tags: true
fetch-depth: 0
persist-credentials: false
- uses: ./.github/actions/setup_build_env
with:
python-version: ${{ matrix.python-version }}
run-uv-sync: true
- name: Run app harness tests
env:
REFLEX_REDIS_URL: ${{ matrix.state_manager == 'redis' && 'redis://localhost:6379' || '' }}
run: uv run pytest tests/integration --ignore=tests/integration/tests_playwright --reruns 3 -v --maxfail=5 --splits 2 --group ${{matrix.split_index}}
# Playwright tests run in a separate job because the pytest-playwright plugin
# keeps an asyncio event loop running on the main thread for the entire
# session, which is incompatible with pytest-asyncio tests.
integration-app-harness-playwright:
timeout-minutes: 30
strategy:
matrix:
state_manager: ["redis", "memory"]
python-version: ["3.11", "3.12", "3.13", "3.14"]
fail-fast: false
runs-on: ubuntu-22.04
services:
redis:
image: ${{ matrix.state_manager == 'redis' && 'redis' || '' }}
options: >-
--health-cmd "redis-cli ping"
--health-interval 10s
--health-timeout 5s
--health-retries 5
ports:
- 6379:6379
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-tags: true
fetch-depth: 0
persist-credentials: false
- uses: ./.github/actions/setup_build_env
with:
python-version: ${{ matrix.python-version }}
run-uv-sync: true
- name: Install playwright
run: uv run playwright install chromium --only-shell
- name: Run playwright tests
env:
REFLEX_REDIS_URL: ${{ matrix.state_manager == 'redis' && 'redis://localhost:6379' || '' }}
run: uv run pytest tests/integration/tests_playwright --reruns 3 -v --maxfail=5
```
## /.github/workflows/integration_tests.yml
```yml path="/.github/workflows/integration_tests.yml"
name: integration-tests
on:
push:
branches: ["main"]
paths-ignore:
- "**/*.md"
pull_request:
branches: ["main"]
paths-ignore:
- "**/*.md"
concurrency:
group: ${{ github.workflow }}-${{ github.event.pull_request.id || github.sha }}
cancel-in-progress: true
permissions:
contents: read
defaults:
run:
shell: bash
env:
# Windows CI would fail without this.
# Ref: https://gist.github.com/NodeJSmith/e7e37f2d3f162456869f015f842bcf15
# TODO: can we fix windows encoding natively within reflex? Bug above can hit real users too (less common, but possible)
# - Catch encoding errors when printing logs
# - Best effort print lines that contain illegal chars (map to some default char, etc.)
PYTHONIOENCODING: "utf8"
REFLEX_TELEMETRY_ENABLED: false
NODE_OPTIONS: "--max_old_space_size=8192"
jobs:
example-counter-and-nba-proxy:
env:
OUTPUT_FILE: import_benchmark.json
timeout-minutes: 30
strategy:
# Prioritize getting more information out of the workflow (even if something fails)
fail-fast: false
matrix:
# Show OS combos first in GUI
os: [ubuntu-latest, windows-latest]
python-version: ["3.14"]
runs-on: ${{ matrix.os }}
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-tags: true
fetch-depth: 0
persist-credentials: false
- uses: ./.github/actions/setup_build_env
with:
python-version: ${{ matrix.python-version }}
run-uv-sync: true
- name: Clone Reflex Examples Repo
uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
repository: reflex-dev/reflex-examples
path: reflex-examples
persist-credentials: false
- name: Install requirements for counter example
working-directory: ./reflex-examples/counter
run: |
uv pip install -r requirements.txt
- name: Check export --backend-only before init for counter example
working-directory: ./reflex-examples/counter
run: |
uv run reflex export --backend-only
- name: Check run --backend-only before init for counter example
run: |
uv run bash scripts/integration.sh ./reflex-examples/counter dev 8001 --backend-only --backend-port 8001
- name: Init Website for counter example
working-directory: ./reflex-examples/counter
run: |
uv run reflex init --loglevel debug
- name: Check export for counter example
working-directory: ./reflex-examples/counter
run: |
uv run reflex export
- name: Run Website and Check for errors
run: |
# Check that npm is home
npm -v
uv run bash scripts/integration.sh ./reflex-examples/counter dev
- name: Install requirements for nba proxy example
working-directory: ./reflex-examples/nba-proxy
run: |
uv pip install -r requirements.txt
- name: Check export --backend-only before init for nba-proxy example
working-directory: ./reflex-examples/nba-proxy
run: |
uv run reflex export --backend-only
- name: Init Website for nba-proxy example
working-directory: ./reflex-examples/nba-proxy
run: |
uv run reflex init --loglevel debug
- name: Run Website and Check for errors
run: |
# Check that npm is home
npm -v
uv run bash scripts/integration.sh ./reflex-examples/nba-proxy dev
reflex-docs:
strategy:
fail-fast: false
matrix:
python-version: ["3.11", "3.12"]
env:
REFLEX_WEB_WINDOWS_OVERRIDE: "1"
# reflex-enterprise restricts `reflex run --env prod` to paid tiers but
# exempts reflex's own integration tests via the app harness flag.
APP_HARNESS_FLAG: "true"
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-tags: true
fetch-depth: 0
persist-credentials: false
# Install sfw BEFORE any dependency installation so all packages are scanned.
- name: Install Socket.dev Firewall (free)
uses: SocketDev/action@ba6de6cc0565af1f42295590380973573297e31f # v1.3.2
with:
mode: firewall-free
- name: Install Bun
uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
- name: Activate sfw shims for npm and bun
run: |
SHIM_DIR="$(cd scripts/sfw-shims && pwd)"
echo "$SHIM_DIR" >> "$GITHUB_PATH"
echo "REFLEX_USE_SYSTEM_BUN=1" >> "$GITHUB_ENV"
# Inline setup_build_env steps so all installs go through sfw.
- name: Install UV
uses: astral-sh/setup-uv@08807647e7069bb48b6ef5acd8ec9567f424441b # v8.1.0
with:
python-version: ${{ matrix.python-version }}
enable-cache: true
prune-cache: false
activate-environment: true
cache-dependency-glob: "uv.lock"
- name: Setup Node
uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
with:
node-version: 22
- name: Install reflex-docs dependencies
working-directory: ./docs/app
run: sfw uv sync --frozen
- name: Init Website for reflex-docs
working-directory: ./docs/app
run: uv run --active --no-sync reflex init
- name: Run Website and Check for errors
run: |
# Verify sfw wrappers are on PATH
which npm && npm -v
uv run --active --no-sync bash scripts/integration.sh ./docs/app prod
- name: Validate /docs links against generated sitemap
working-directory: ./docs/app
run: uv run --active --no-sync pytest --runxfail tests/test_doc_links.py -v
- name: Upload Socket.dev Firewall report
if: always()
uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
with:
name: sfw-report-reflex-docs-py${{ matrix.python-version }}
path: ${{ env.SFW_JSON_REPORT_PATH }}
if-no-files-found: warn
rx-shout-from-template:
strategy:
fail-fast: false
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-tags: true
fetch-depth: 0
persist-credentials: false
- uses: ./.github/actions/setup_build_env
with:
python-version: "3.14"
run-uv-sync: true
- name: Create app directory
run: mkdir rx-shout-from-template
- name: Init rx-shout from template
run: uv run reflex init --template https://github.com/masenf/rx_shout
working-directory: ./rx-shout-from-template
- name: Override reflex sources to local checkout
# Force reflex install editable from this repo instead of PyPI.
working-directory: ./rx-shout-from-template
run: |
cat >> pyproject.toml <<'EOF'
[tool.uv.sources]
reflex = { path = "..", editable = true }
EOF
- name: Install rx-shout dependencies
# Re-locks because pyproject.toml changed; --prerelease=allow matches
# the template's own lock options (rx_shout depends on reflex pre-releases).
working-directory: ./rx-shout-from-template
run: uv sync --prerelease=allow
- name: Run App and Check for errors
run: |
# Check that npm is home
npm -v
uv run --project ./rx-shout-from-template --no-sync bash scripts/integration.sh ./rx-shout-from-template prod
reflex-docs-macos:
if: github.event_name == 'push' && github.ref == 'refs/heads/main'
strategy:
fail-fast: false
matrix:
# Note: py311 version chosen due to available arm64 darwin builds.
python-version: ["3.11", "3.12"]
env:
# reflex-enterprise restricts `reflex run --env prod` to paid tiers but
# exempts reflex's own integration tests via the app harness flag.
APP_HARNESS_FLAG: "true"
runs-on: macos-latest
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-tags: true
fetch-depth: 0
persist-credentials: false
- uses: ./.github/actions/setup_build_env
with:
python-version: ${{ matrix.python-version }}
- name: Install Requirements for reflex-docs
working-directory: ./docs/app
run: uv sync
- name: Init Website for reflex-docs
working-directory: ./docs/app
run: uv run --active --no-sync reflex init
- name: Run Website and Check for errors
run: |
# Check that npm is home
npm -v
uv run --active --no-sync bash scripts/integration.sh ./docs/app prod
```
## /.github/workflows/min_deps.yml
```yml path="/.github/workflows/min_deps.yml"
name: check-min-deps
concurrency:
group: ${{ github.workflow }}-${{ github.event.pull_request.id || github.sha }}
cancel-in-progress: true
on:
push:
branches: ["main"]
paths-ignore:
- "**/*.md"
pull_request:
branches: ["main"]
paths-ignore:
- "**/*.md"
workflow_dispatch:
permissions:
contents: read
defaults:
run:
shell: bash
jobs:
# Single-source the list of checkable packages from the script so the matrix
# below stays in sync as packages are added or removed.
discover:
runs-on: ubuntu-latest
outputs:
packages: ${{ steps.list.outputs.packages }}
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
persist-credentials: false
- uses: ./.github/actions/setup_build_env
with:
python-version: "3.14"
- id: list
run: echo "packages=$(uv run --with packaging --no-project python scripts/check_min_deps.py --list)" >> "$GITHUB_OUTPUT"
check:
needs: discover
timeout-minutes: 30
runs-on: ubuntu-latest
strategy:
fail-fast: false
matrix:
package: ${{ fromJSON(needs.discover.outputs.packages) }}
python-version: ["3.10", "3.14"]
steps:
# fetch-tags/fetch-depth are required: each package is built editable via
# uv-dynamic-versioning, which derives the version from git tags/history.
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-tags: true
fetch-depth: 0
persist-credentials: false
- uses: ./.github/actions/setup_build_env
with:
python-version: ${{ matrix.python-version }}
run-uv-sync: true
- name: Check minimum declared dependency versions
run: uv run --no-sync python scripts/check_min_deps.py --python "${{ matrix.python-version }}" "${{ matrix.package }}"
```
## /.github/workflows/performance.yml
```yml path="/.github/workflows/performance.yml"
name: performance-tests
permissions:
contents: read
on:
push:
branches:
- "main" # or "master"
paths-ignore:
- "**/*.md"
pull_request:
workflow_dispatch:
env:
REFLEX_TELEMETRY_ENABLED: false
NODE_OPTIONS: "--max_old_space_size=8192"
APP_HARNESS_HEADLESS: 1
PYTHONUNBUFFERED: 1
jobs:
benchmarks:
name: Run benchmarks
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-tags: true
fetch-depth: 0
persist-credentials: false
- name: Install uv
uses: astral-sh/setup-uv@08807647e7069bb48b6ef5acd8ec9567f424441b # v8.1.0
- name: Set up Python
uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6.2.0
with:
python-version: "3.14"
- name: Install dependencies
run: uv sync --all-extras --dev
- name: Run benchmarks
uses: CodSpeedHQ/action@3194d9a39c4d46684cb44bf7207fc56626aad8fd # v4.15.1
with:
mode: instrumentation
run: uv run pytest -v tests/benchmarks --codspeed
lighthouse:
name: Run Lighthouse benchmark
runs-on: ubuntu-22.04
timeout-minutes: 30
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-tags: true
fetch-depth: 0
persist-credentials: false
- uses: ./.github/actions/setup_build_env
with:
python-version: "3.14"
node-version: "22"
run-uv-sync: true
- name: Install playwright
run: uv run playwright install chromium --only-shell
- name: Run Lighthouse benchmark
env:
REFLEX_RUN_LIGHTHOUSE: "1"
run: |
mkdir -p .pytest-tmp/lighthouse
uv run pytest tests/integration/test_lighthouse.py -q -s --tb=no --basetemp=.pytest-tmp/lighthouse
- name: Upload Lighthouse artifacts
if: always()
uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
with:
name: lighthouse-report
path: |
.pytest-tmp/lighthouse/**
!.pytest-tmp/lighthouse/*current
!.pytest-tmp/lighthouse/*current/**
if-no-files-found: ignore
```
## /.github/workflows/pre-commit.yml
```yml path="/.github/workflows/pre-commit.yml"
name: pre-commit
permissions:
contents: read
concurrency:
group: ${{ github.workflow }}-${{ github.event.pull_request.id || github.sha }}
cancel-in-progress: true
on:
pull_request:
branches: ["main"]
push:
# Note even though this job is called "pre-commit" and runs "pre-commit", this job will run
# also POST-commit on main also! In case there are mishandled merge conflicts / bad auto-resolves
# when merging into main branch.
branches: ["main"]
jobs:
pre-commit:
timeout-minutes: 30
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-tags: true
fetch-depth: 0
persist-credentials: false
- uses: ./.github/actions/setup_build_env
with:
python-version: "3.14"
run-uv-sync: true
# `uv sync` mutates tracked files (e.g. pyi_hashes.json), which would
# cause pre-commit to flag changes that aren't from the PR. Re-checkout
# with clean: false to restore source files while keeping the .venv.
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
clean: false
fetch-tags: true
fetch-depth: 0
persist-credentials: false
- run: uv run pre-commit run --all-files --show-diff-on-failure
# Partial/explicit-target generator runs merge into pyi_hashes.json rather
# than pruning, so a deleted component can leave a stale entry behind. Fail
# the build if any entry references a .py source that no longer exists.
- run: uv run --no-sync python scripts/make_pyi.py --check
```
## /.github/workflows/publish.yml
```yml path="/.github/workflows/publish.yml"
name: Publish to PyPI
run-name: Publish ${{ inputs.package }} ${{ inputs.version }}
# Publishes one package at one version, in three stages:
#
# build unprivileged: validates the request against the changelog
# (source of truth), branch rules, lockstep invariant and
# existing tags; tags the local checkout (uv-dynamic-
# versioning derives the version from it); builds; verifies
# the built metadata; extracts release notes; uploads
# everything as a workflow artifact.
# publish gated by the `pypi` environment — a human reviewer must
# approve every upload, alphas included. Holds the only
# OIDC (id-token) privilege and runs nothing but
# `uv publish` on the pre-built artifact.
# tag-and-release only after a successful upload: pushes the tag and
# creates the GitHub release. A failed run therefore leaves
# no tag behind — fix the problem on top of the changelog
# bump and the release_from_changelog workflow retries on
# the next push.
#
# REQUIRED CONFIGURATION:
# - The `pypi` environment MUST have required reviewers configured
# (Settings → Environments → pypi). The publish job asserts this via the
# API and fails closed when it cannot prove reviewers are configured.
# - PyPI trusted publishing must trust this workflow file (publish.yml) with
# the `pypi` environment — unchanged by the changelog-driven flow,
# including when called from another workflow (the OIDC job_workflow_ref
# claim still points at publish.yml).
# - If the `pypi` environment restricts deployment branches, allow main,
# r/pre-*, and r/hotfix/*.
on:
workflow_call:
inputs:
package:
description: "Package to publish (reflex for the repo-root package)"
required: true
type: string
version:
description: "Target version (e.g. 1.2.3 or 1.2.3a1, no v prefix). Empty auto patch-bumps the newest tag — only for packages without a CHANGELOG.md."
required: false
type: string
default: ""
workflow_dispatch:
inputs:
package:
description: "Package to publish"
required: true
type: choice
options:
- reflex
- hatch-reflex-pyi
- reflex-base
- reflex-components-code
- reflex-components-core
- reflex-components-dataeditor
- reflex-components-gridjs
- reflex-components-internal
- reflex-components-lucide
- reflex-components-markdown
- reflex-components-moment
- reflex-components-plotly
- reflex-components-radix
- reflex-components-react-player
- reflex-components-recharts
- reflex-components-sonner
- reflex-docgen
- reflex-hosting-cli
- reflex-release
- reflex-site-shared
version:
description: "Target version (e.g. 1.2.3 or 1.2.3a1, no v prefix). Empty auto patch-bumps the newest tag — only for packages without a CHANGELOG.md."
required: false
default: ""
permissions:
contents: read
# The same per-package group every caller uses on its calling job, so direct
# dispatches and workflow_call publishes of one package are mutually
# exclusive end to end. (A called workflow's top-level concurrency is ignored
# for workflow_call, so this cannot deadlock against the callers' groups.)
concurrency:
group: publish-${{ inputs.package }}
cancel-in-progress: false
jobs:
build:
runs-on: ubuntu-latest
permissions:
contents: read
outputs:
skipped: ${{ steps.prepare.outputs.skipped }}
version: ${{ steps.prepare.outputs.version }}
tag: ${{ steps.prepare.outputs.tag }}
prerelease: ${{ steps.prepare.outputs.prerelease }}
mark_latest: ${{ steps.prepare.outputs.mark_latest }}
steps:
- name: Checkout
uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-tags: true
fetch-depth: 0
persist-credentials: false
- name: Install uv
uses: astral-sh/setup-uv@08807647e7069bb48b6ef5acd8ec9567f424441b # v8.1.0
with:
version: "0.11.14"
python-version: "3.14.5"
enable-cache: false
restore-cache: false
save-cache: false
cache-python: false
- name: Validate against changelog, branch rules and existing tags
id: prepare
env:
PACKAGE: ${{ inputs.package }}
VERSION: ${{ inputs.version }}
REF_NAME: ${{ github.ref_name }}
run: uv run --no-config --locked --script scripts/release.py prepare-publish
# A *.dev dependency pin references an unpublished version, so it must never reach
# released package metadata. Scoped to the package being published so a dependency
# can still be released while dependents temporarily dev-pin it.
- name: Reject development-release dependency pins
if: steps.prepare.outputs.skipped != 'true'
env:
PACKAGE: ${{ inputs.package }}
run: uv run --with packaging --no-project python scripts/check_min_deps.py --check-dev-pins "$PACKAGE"
- name: Pin reflex-base to exact version
if: steps.prepare.outputs.skipped != 'true' && inputs.package == 'reflex'
env:
VERSION: ${{ steps.prepare.outputs.version }}
run: uv run --no-config --locked --script scripts/release.py pin-reflex-base
# uv-dynamic-versioning derives each package's version from the newest
# reachable tag with the package's prefix, so tagging HEAD locally is
# what selects the version being built. The tag is only pushed after a
# successful upload (tag-and-release job).
- name: Tag local checkout
if: steps.prepare.outputs.skipped != 'true'
env:
TAG: ${{ steps.prepare.outputs.tag }}
run: git tag "$TAG"
- name: Build
if: steps.prepare.outputs.skipped != 'true'
run: uv build --directory "${{ steps.prepare.outputs.build_dir }}"
- name: Verify built artifact versions
if: steps.prepare.outputs.skipped != 'true'
env:
VERSION: ${{ steps.prepare.outputs.version }}
run: uv run --no-config --locked --script scripts/release.py verify-dist
- name: Verify .pyi files in wheel
if: steps.prepare.outputs.skipped != 'true' && inputs.package == 'reflex'
env:
BUILD_DIR: ${{ steps.prepare.outputs.build_dir }}
run: bash .github/scripts/publish/verify_pyi.sh
- name: Extract release notes from changelog
if: steps.prepare.outputs.skipped != 'true'
env:
PACKAGE: ${{ inputs.package }}
VERSION: ${{ steps.prepare.outputs.version }}
NOTES_PATH: release_notes.md
run: uv run --no-config --locked --script scripts/release.py extract-notes
# The manifest lets the gated publish job re-verify (with coreutils
# only) that what it uploads is byte-identical to what was built and
# verified here — everything the human approves is covered by it.
- name: Write checksum manifest
if: steps.prepare.outputs.skipped != 'true'
run: sha256sum dist/* release_notes.md > SHA256SUMS
- name: Upload artifacts for the gated publish
if: steps.prepare.outputs.skipped != 'true'
uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
with:
name: publish-${{ inputs.package }}
path: |
dist/*
release_notes.md
SHA256SUMS
if-no-files-found: error
overwrite: true
# The human approval gate: this job targets the `pypi` environment, whose
# required reviewers must approve before it starts. It holds the only OIDC
# privilege and deliberately runs no repository code and resolves no script
# dependencies — it only uploads the artifact built above.
publish:
needs: build
if: needs.build.outputs.skipped != 'true'
runs-on: ubuntu-latest
environment:
name: pypi
permissions:
id-token: write
# Reading the environment's protection rules needs repository read
# access on GITHUB_TOKEN (contents) plus actions: read.
actions: read
contents: read
steps:
- name: Require a human-approval gate on the pypi environment
env:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
run: |
set -euo pipefail
# Fail closed: uploads must never run unattended. If this job
# started without reviewers configured on the pypi environment,
# nothing paused it — refuse to publish and tell the admins how to
# fix it. The two failure modes get distinct messages so a token
# scope problem is not mistaken for missing reviewers.
if ! rules=$(gh api "repos/${GITHUB_REPOSITORY}/environments/pypi" --jq '[.protection_rules[]?.type]' 2>"$RUNNER_TEMP/gh_api_error.txt"); then
echo "::error::Could not read the pypi environment's protection rules ($(tail -n1 "$RUNNER_TEMP/gh_api_error.txt")); refusing to publish unattended. This is a token or configuration problem, not a missing-reviewers problem: the job needs contents: read and actions: read on GITHUB_TOKEN, and the pypi environment must exist."
exit 1
fi
if [[ "$rules" != *'"required_reviewers"'* ]]; then
echo "::error::The pypi environment has no required reviewers. Every PyPI upload must be approved by a human: add required reviewers to the pypi environment (Settings -> Environments) and re-run."
exit 1
fi
echo "pypi environment protection rules: $rules"
- name: Install uv
uses: astral-sh/setup-uv@08807647e7069bb48b6ef5acd8ec9567f424441b # v8.1.0
with:
version: "0.11.14"
enable-cache: false
restore-cache: false
save-cache: false
- name: Download built artifacts
uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
with:
name: publish-${{ inputs.package }}
- name: Verify artifact integrity
run: sha256sum -c SHA256SUMS
# --check-url makes a retried run skip files that already made it to
# PyPI (e.g. when the upload succeeded but tagging failed), instead of
# erroring on the duplicate upload.
- name: Publish
run: uv publish --check-url https://pypi.org/simple/ dist/*
tag-and-release:
needs: [build, publish]
runs-on: ubuntu-latest
permissions:
contents: write
steps:
- name: Checkout
uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
persist-credentials: false
- name: Download release notes
uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
with:
name: publish-${{ inputs.package }}
- name: Push tag
env:
TAG: ${{ needs.build.outputs.tag }}
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
run: bash .github/scripts/publish/push_tag.sh
- name: Create GitHub release
env:
TAG: ${{ needs.build.outputs.tag }}
PKG: ${{ inputs.package }}
VERSION: ${{ needs.build.outputs.version }}
PRERELEASE: ${{ needs.build.outputs.prerelease }}
MARK_LATEST: ${{ needs.build.outputs.mark_latest }}
NOTES_PATH: release_notes.md
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
run: bash .github/scripts/publish/create_release.sh
```
## /.github/workflows/reflex_init_in_docker_test.yml
```yml path="/.github/workflows/reflex_init_in_docker_test.yml"
name: reflex-init-in-docker-test
permissions:
contents: read
concurrency:
group: ${{ github.workflow }}-${{ github.event.pull_request.id || github.sha }}
cancel-in-progress: true
on:
push:
branches: ["main"]
paths-ignore:
- "**/*.md"
pull_request:
branches: ["main"]
paths-ignore:
- "**/*.md"
jobs:
# TODO we can extend to various starting points (e.g. Ubuntu with node, without node, with unzip, without unzip, etc.)
# Currently starting point is: Ubuntu + unzip, xz-utils, Python suite. No node.
reflex-install-and-init:
timeout-minutes: 30
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-tags: true
fetch-depth: 0
persist-credentials: false
- shell: bash
run: |
# Run reflex init in a docker container
# cwd is repo root
docker build -f tests/integration/init-test/Dockerfile -t reflex-init-test tests/integration/init-test
docker run --rm -v "$(pwd):/reflex-repo" reflex-init-test /reflex-repo/tests/integration/init-test/in_docker_test_script.sh
```
## /.github/workflows/release_from_changelog.yml
```yml path="/.github/workflows/release_from_changelog.yml"
name: Release from changelog
# The CHANGELOG.md files are the source of truth for publishing. On every push
# to main or a release branch, this workflow compares the newest version
# heading in each package's CHANGELOG.md (repo root for reflex, packages/*/
# for sub-packages) against the repo's git tags and runs the publish workflow
# for any version that has no tag yet. Publishing itself is gated by the
# `pypi` environment's required reviewers — detection and builds are
# automatic, uploads are not.
#
# Tags are only pushed after a successful publish (see publish.yml), so a
# failed build/publish is retried by pushing a fix on top of the changelog
# bump — no tag or release cleanup required.
#
# Branch policy (enforced again at publish time): final versions only from
# main or r/hotfix/**; prereleases only from r/pre-* or r/hotfix/** (the
# Dispatch release workflow materializes alphas on r/pre-* branches).
#
# reflex publishes strictly after every other package in the batch: its
# metadata pins reflex-base exactly, so the sibling must be uploaded first.
# detect fails closed if the reflex/reflex-base lockstep invariant is broken.
#
# workflow_dispatch exists so the Dispatch release workflow can trigger a
# check on a branch it just pushed (pushes made with GITHUB_TOKEN do not fire
# on-push workflows) and for manual re-checks; it runs against the branch it
# is dispatched on.
on:
push:
branches: ["main", "r/pre-**", "r/hotfix/**"]
workflow_dispatch:
permissions:
contents: read
concurrency:
group: release-from-changelog-${{ github.ref }}
cancel-in-progress: false
jobs:
detect:
runs-on: ubuntu-latest
permissions:
contents: read
outputs:
packages: ${{ steps.detect.outputs.packages }}
any: ${{ steps.detect.outputs.any }}
reflex_version: ${{ steps.detect.outputs.reflex_version }}
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-tags: true
fetch-depth: 0
persist-credentials: false
- uses: astral-sh/setup-uv@08807647e7069bb48b6ef5acd8ec9567f424441b # v8.1.0
- id: detect
env:
REF_NAME: ${{ github.ref_name }}
run: uv run --no-config --locked --script scripts/release.py detect
publish:
needs: detect
if: needs.detect.outputs.any == 'true'
strategy:
matrix:
include: ${{ fromJson(needs.detect.outputs.packages) }}
fail-fast: false
# Serializes the entire publish (build, approval, upload, tag) per
# package, so a second push while a publish is in flight waits and then
# no-ops on the already-created tag.
concurrency:
group: publish-${{ matrix.package }}
cancel-in-progress: false
permissions:
contents: write
id-token: write
actions: read
uses: ./.github/workflows/publish.yml
with:
package: ${{ matrix.package }}
version: ${{ matrix.version }}
# reflex pins reflex-base exactly, so it publishes only after every other
# package in the batch (reflex-base included) has fully published and
# tagged. If any sibling failed, reflex is held back — fail closed rather
# than ship an uninstallable pin.
publish-reflex:
needs: [detect, publish]
if: >-
always() && needs.detect.result == 'success' &&
needs.detect.outputs.reflex_version != '' &&
(needs.publish.result == 'success' || needs.publish.result == 'skipped')
concurrency:
group: publish-reflex
cancel-in-progress: false
permissions:
contents: write
id-token: write
actions: read
uses: ./.github/workflows/publish.yml
with:
package: reflex
version: ${{ needs.detect.outputs.reflex_version }}
# One loud, canonical failure signal for partial releases: red whenever any
# leg of the batch failed or reflex was held back.
report:
needs: [detect, publish, publish-reflex]
if: always()
runs-on: ubuntu-latest
permissions: {}
steps:
- name: Report release batch outcome
env:
DETECT: ${{ needs.detect.result }}
PUBLISH: ${{ needs.publish.result }}
PUBLISH_REFLEX: ${{ needs.publish-reflex.result }}
REFLEX_VERSION: ${{ needs.detect.outputs.reflex_version }}
run: |
set -euo pipefail
echo "detect: $DETECT, publish: $PUBLISH, publish-reflex: $PUBLISH_REFLEX"
failed=0
# Anything that is not success/skipped (failure, cancelled,
# timed_out, a rejected environment approval, ...) is a failed leg.
for leg in "detect:$DETECT" "publish:$PUBLISH" "publish-reflex:$PUBLISH_REFLEX"; do
case "${leg#*:}" in
success | skipped) ;;
*)
echo "::error::release leg '${leg%%:*}' ended '${leg#*:}'."
failed=1
;;
esac
done
if [[ "$failed" -eq 1 ]]; then
if [[ "$DETECT" != "success" ]]; then
echo "::error::Changelog detection did not complete (check for a reflex/reflex-base lockstep violation) — no packages were published."
fi
if [[ -n "$REFLEX_VERSION" && "$PUBLISH_REFLEX" != "success" ]]; then
echo "::error::reflex v$REFLEX_VERSION did not publish (held back or failed)."
fi
echo "::error::Fix the problem on top of the changelog bump; the next push retries the unpublished versions."
fi
exit "$failed"
```
## /.github/workflows/unit_tests.yml
```yml path="/.github/workflows/unit_tests.yml"
name: unit-tests
concurrency:
group: ${{ github.workflow }}-${{ github.event.pull_request.id || github.sha }}
cancel-in-progress: true
on:
push:
branches: ["main"]
paths-ignore:
- "**/*.md"
pull_request:
branches: ["main"]
paths-ignore:
- "**/*.md"
permissions:
contents: read
defaults:
run:
shell: bash
jobs:
unit-tests:
timeout-minutes: 30
strategy:
fail-fast: false
matrix:
os: [ubuntu-latest, windows-latest]
python-version: ["3.10", "3.11", "3.12", "3.13", "3.14"]
runs-on: ${{ matrix.os }}
# Service containers to run with `runner-job`
services:
# Label used to access the service container
redis:
image: ${{ matrix.os == 'ubuntu-latest' && 'redis' || '' }}
# Set health checks to wait until redis has started
options: >-
--health-cmd "redis-cli ping"
--health-interval 10s
--health-timeout 5s
--health-retries 5
ports:
# Maps port 6379 on service container to the host
- 6379:6379
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-tags: true
fetch-depth: 0
persist-credentials: false
- uses: ./.github/actions/setup_build_env
with:
python-version: ${{ matrix.python-version }}
run-uv-sync: true
- name: Run unit tests without db dependencies
run: |
export PYTHONUNBUFFERED=1
uv pip uninstall pydantic alembic sqlalchemy sqlmodel
uv run --no-sync pytest tests/units --cov --no-cov-on-fail --cov-report= --cov-fail-under=0
uv sync
- name: Run unit tests
run: |
export PYTHONUNBUFFERED=1
uv run pytest tests/units --cov --no-cov-on-fail --cov-report=
- name: Run unit tests w/ redis
if: ${{ matrix.os == 'ubuntu-latest' }}
run: |
export PYTHONUNBUFFERED=1
export REFLEX_REDIS_URL=redis://localhost:6379
uv run pytest tests/units --cov --no-cov-on-fail --cov-report=
- name: Run unit tests w/ redis and OPLOCK_ENABLED
if: ${{ matrix.os == 'ubuntu-latest' }}
run: |
export PYTHONUNBUFFERED=1
export REFLEX_REDIS_URL=redis://localhost:6379
export REFLEX_OPLOCK_ENABLED=true
uv run pytest tests/units --cov --no-cov-on-fail --cov-report=
- name: Generate coverage report
run: uv run coverage html
unit-tests-macos:
timeout-minutes: 30
if: github.event_name == 'push' && github.ref == 'refs/heads/main'
strategy:
fail-fast: false
matrix:
python-version: ["3.10", "3.11", "3.12", "3.13", "3.14"]
runs-on: macos-latest
steps:
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-tags: true
fetch-depth: 0
persist-credentials: false
- uses: ./.github/actions/setup_build_env
with:
python-version: ${{ matrix.python-version }}
run-uv-sync: true
- name: Run unit tests without db dependencies
run: |
export PYTHONUNBUFFERED=1
uv pip uninstall pydantic alembic sqlalchemy sqlmodel
uv run --no-sync pytest tests/units --cov --no-cov-on-fail --cov-report= --cov-fail-under=0
uv sync
- name: Run unit tests
run: |
export PYTHONUNBUFFERED=1
uv run pytest tests/units --cov --no-cov-on-fail --cov-report=
```
## /.gitignore
```gitignore path="/.gitignore"
**/.DS_Store
**/*.pyc
**/__pycache__/
.pytest_cache/
.ruff_cache/
**/.ruff_cache/
.mypy_cache/
assets/external/*
dist/*
examples/
.web
.states
.idea
.vscode
.coverage
.coverage.*
.venv
venv
requirements.txt
.pyi_generator_last_run
.pyi_generator_diff
reflex.db
.codspeed
.env
.env.*
node_modules
package-lock.json
*.pyi
.pre-commit-config.yaml
.claude/.worktrees
.claude/settings.local.json
CLAUDE.local.md
# Backups written by scripts/delete_automated_releases.sh
automated-releases-backup-*.json
```
## /.pre-commit-config.yaml
```yaml path="/.pre-commit-config.yaml"
fail_fast: true
repos:
- repo: local
hooks:
- id: ruff-format
name: ruff-format
entry: uv run --no-sync ruff format
language: system
types_or: [python, markdown]
require_serial: true
- id: ruff-check
name: ruff-check
entry: uv run --no-sync ruff check
language: system
args: [--fix, --exit-non-zero-on-fix]
types_or: [python, pyi]
require_serial: true
- repo: local
hooks:
- id: codespell
name: codespell
entry: uv run --no-sync codespell
language: system
types: [text]
require_serial: true
- repo: local
hooks:
- id: update-pyi-files
name: update-pyi-files
description: Update pyi files as needed
entry: uv run --no-sync python scripts/make_pyi.py
language: system
always_run: true
require_serial: true
- repo: local
hooks:
- id: pyright
name: pyright
entry: uv run --no-sync pyright
language: system
types: [python]
require_serial: true
- repo: local
hooks:
# The second opinion the assert_type examples exist for. Always runs: what
# these examples catch is a source change altering an inferred type, so
# scoping the hook to the examples themselves would never fire on the edit
# that broke them.
- id: ty
name: ty
entry: uv run --no-sync ty check --python-version 3.14 tests/type_checking
language: system
always_run: true
pass_filenames: false
require_serial: true
- repo: https://github.com/biomejs/pre-commit
rev: 19865851e014cbe6138e295365f95ca51bf953f8 # v0.6.1
hooks:
- id: biome-format
additional_dependencies: ['@biomejs/biome@2.4.8']
args: [--indent-width, '2', --indent-style, space]
exclude: (\.css$|docs/app/)
require_serial: true
```
## /.python-version
```python-version path="/.python-version"
3.14
```
## /AGENTS.md
# Coding Agent Guidelines
Reflex: Python web **framework** compiling to React. Monorepo using uv workspace — main package in `reflex/`, sub-packages in `packages/`, docs site in `docs/`.
## Workflow
1. **Plan first.** Ensure the task is well-defined before writing code. If unclear, work with the user to flesh out details. No sloppy/spaghetti code — every feature/fix must be clearly understood first.
2. **Bugfixes:** write a regression test that fails before writing the fix.
3. **After implementation:** act as an adversarial reviewer. Scrutinize the diff against all rules in this file. Call out numbered issues, then wait for the user to request followup changes.
## Commands
Use `uv` for everything — never bare `python` or `python3`.
```
uv sync # install deps
uv run pytest tests/units --cov --no-cov-on-fail --cov-report= # unit tests (>=72% coverage)
uv run pytest tests/integration # integration tests (slow)
uv run ruff check . # lint
uv run ruff format . # format
uv run pyright reflex tests # type check
uv run python scripts/check_min_deps.py # validate each package's declared minimum dep versions (pyright in isolated min-version envs; *.dev pins resolve from the local workspace, all other deps from PyPI)
uv run python scripts/check_min_deps.py --check-dev-pins [pkg] # publish gate: fail if pkg (default: all) declares an unpublishable *.dev dependency pin
uv run python scripts/make_pyi.py # regenerate .pyi stubs
uv run pre-commit run --all-files # all pre-commit hooks
```
## Layout
```
reflex/ # main framework package (app, state, compiler, components, utils, istate)
packages/ # workspace sub-packages (reflex-base, reflex-components-*, reflex-docgen, reflex-components-internal)
tests/units/ # unit tests, mirrors source tree
tests/integration/ # Selenium integration tests (run in dev+prod modes)
tests_playwright/ # Playwright integration tests (preferred for new tests)
tests/benchmarks/ # performance benchmarks
docs/ # documentation site (separate workspace member)
```
## Code style
- Concise, robust code. Reflex is a framework used in many ways — handle edge cases without unnecessary complexity.
- Performance matters. Avoid suboptimal patterns (e.g. iterating a dict to find a value by identity). Suggest restructuring data/APIs if an operation can't be done efficiently.
- Don't add expensive workarounds (e.g. `isinstance` checks) to paper over type-level problems — fix the root cause instead.
- Don't repeat validation or be over-defensive; trust data that was already validated upstream.
- Think in CPU cycles: avoid unnecessary data copies, redundant allocations, and gratuitous indirection.
- Extract duplicated code into parameterized helpers.
- No block comments (`# --- Section ---`, `# ============`). Plain inline comments only.
- Be cautious creating new public APIs — they must be documented and supported long-term.
- Google-style docstrings on all functions: one-line summary, optional detail sentence(s), then Args/Returns (or Yields)/Raises.
- Prefer imports at the top of the module in isort order. Only use inline imports when necessary to avoid circular dependencies.
## Testing
- Write comprehensive tests for new/changed features; extend existing test files where possible.
- Test functions at module level, not wrapped in classes.
- **Unit tests:** `tests/units/`, run with `uv run pytest tests/units`.
- unit tests should primarily cover a single module, and should be named accordingly, including subdirectories (e.g. `tests/units/istate/test_manager.py` for `reflex/istate/manager.py`). For subpackages, also include the corresponding path below `src/` (e.g. `tests/units/reflex_base/event/test_context.py` for `packages/reflex-base/src/reflex_base/event/context.py`).
- **Integration tests:** prefer Playwright (`tests/integration/tests_playwright/`). Integration tests are slow — extend existing test apps rather than creating new ones for trivial functionality. Multiple test cases sharing one app is fine.
### Integration test patterns
Apps as factory functions, run via `AppHarness`:
```python
def SomeApp():
import reflex as rx
class State(rx.State):
value: str = ""
def index():
return rx.box(rx.text(State.value))
app = rx.App()
app.add_page(index)
@pytest.fixture(scope="module")
def some_app(tmp_path_factory) -> Generator[AppHarness, None, None]:
with AppHarness.create(
root=tmp_path_factory.mktemp("some_app"), app_source=SomeApp
) as harness:
yield harness
```
Playwright tests use the `page` fixture and navigate to `harness.frontend_url`. Utilities in `tests/integration/utils.py` (polling, event ordering, storage).
## .pyi stubs
When adding/modifying components: `uv run python scripts/make_pyi.py`. Commit `pyi_hashes.json` (not `.pyi` files). If the diff removes many modules, run `uv sync`, delete `.pyi_generator_last_run`, and regenerate.
## Breaking changes and deprecation
Reflex has downstream users — don't break them. Provide a fallback path during deprecation.
**Runtime warning** via `console.deprecate()`:
```python
from reflex_base.utils import console
console.deprecate(
feature_name="OldFeature",
reason="Use NewFeature instead.",
deprecation_version="<next dot version of latest git tag>",
removal_version="1.0",
)
```
Set `deprecation_version` to the next dot version of the latest tag (`git fetch --tags` if needed, e.g. tag `v0.7.3` -> `"0.7.4"`). Set `removal_version` to next major unless directed otherwise.
**Type-level deprecation** for deprecated methods/overloads using `typing_extensions.deprecated`, always inside a `TYPE_CHECKING` guard to avoid double warnings:
```python
from __future__ import annotations
from typing import TYPE_CHECKING
if TYPE_CHECKING:
from typing_extensions import deprecated
@deprecated("Use new_method() instead")
def old_method(self) -> str: ...
```
## Checklist
Before submitting:
1. Tests pass with adequate coverage
2. `uv run ruff check .` and `uv run ruff format .` clean
3. `uv run pyright reflex tests` passes
4. `pyi_hashes.json` updated if components changed
5. Documentation updated if user-facing behavior changed
6. Deprecation warnings added if breaking changes introduced
## /CHANGELOG.md
## v0.9.8 (2026-08-04)
### Features
- Added content-hash cache busting to `rx.asset` URLs. ([#6550](https://github.com/reflex-dev/reflex/issues/6550))
- Add a `preview` run mode (`reflex run --env preview`) that hot reloads like `dev` but serves a freshly built, un-minified frontend bundle mounted into the backend instead of running the Vite dev server. Minification, CSS minification, autoprefixer, and sourcemaps are disabled by default for faster rebuilds and readable output (each overridable via `VITE_MINIFY`, `REFLEX_NO_AUTOPREFIXER`, and `VITE_SOURCEMAP`). ([#6663](https://github.com/reflex-dev/reflex/issues/6663))
- Support using mutable state proxies as async context managers. ([#6689](https://github.com/reflex-dev/reflex/issues/6689))
- Run plugins' staged `register_route` hooks once per app before page evaluation so plugins can contribute pages atomically, and invalidate the cached route resolver when a page is added after it was first built. ([#6728](https://github.com/reflex-dev/reflex/issues/6728))
- `reflex deploy` now accepts `--provider` (deploy to Reflex Cloud or a GCP account connected to your organization) and `--description` (record an optional changelog note on the deployment, shown in `reflex cloud apps history`).
### Bug Fixes
- Fix `reflex component build` crashing with `AttributeError` on Python 3.10 and 3.11 by delegating recursive stub generation to the Python 3.10-compatible `PyiGenerator` scanner. ([#6760](https://github.com/reflex-dev/reflex/issues/6760))
- Fixed `reflex rename` corrupting or failing on source files on non-UTF-8 platform locales while preserving declared Python source encodings and line endings. ([#6761](https://github.com/reflex-dev/reflex/issues/6761))
- Fixed nested/subfolder stylesheets failing to load on Windows because the generated CSS `@import` used backslash path separators (which CSS treats as escape sequences); the import URL is now always POSIX-normalized. ([#6762](https://github.com/reflex-dev/reflex/issues/6762))
- Process persisted package.json files before mirroring them into the web directory. ([#6765](https://github.com/reflex-dev/reflex/issues/6765))
- Fix production frontend hydration on Windows when the system MIME registry maps JavaScript files to `text/plain`. ([#6831](https://github.com/reflex-dev/reflex/issues/6831))
- Fixed `reflex run` failing with `error: lockfile had changes, but lockfile is frozen` after upgrading to a Reflex version that adds a `package.json` override. Overrides are now applied after the lockfile saved in `reflex.lock/` has been installed, so it is no longer treated as out of date. ([#6844](https://github.com/reflex-dev/reflex/issues/6844))
### Miscellaneous
- Update dev pin Pillow==12.3.0 to avoid various CVE reports ([#6836](https://github.com/reflex-dev/reflex/issues/6836))
- Update locked `aiohttp==3.14.3` and `cryptography==50.0.0`, clearing CVE-2026-59881, CVE-2026-69243, CVE-2026-69244 and CVE-2026-69247. Both are transitive development dependencies of the docs app and are not installed with Reflex. ([#6837](https://github.com/reflex-dev/reflex/issues/6837))
## v0.9.7 (2026-07-15)
### Features
- Added `default_color_mode` to `rx.Config` (`"system"`, `"light"`, or `"dark"`, also settable via `REFLEX_DEFAULT_COLOR_MODE`), so apps can set the initial color mode — and use the built-in color mode switcher and `rx.color_mode_cond` — without pulling in the large Radix themes CSS. The value drives both the compiled `ThemeProvider` default and the pre-hydration preload script, so there is no flash of the wrong theme on first paint. An explicit `rx.theme(appearance=...)` still takes precedence. ([#6716](https://github.com/reflex-dev/reflex/issues/6716))
- `@rx.memo` components now compile with a configurable JS wrapper: React's `memo` remains the default, `wrapper=` swaps in a custom function `Var` whose imports ride along into the generated module, and `wrapper=None` emits the bare function component. ([#6730](https://github.com/reflex-dev/reflex/issues/6730))
- The new `frozen_lockfile` config option is now honored during frontend package installation: when enabled (the default), bun's initial install runs with `--frozen-lockfile` so a lockfile out of sync with `package.json` fails fast. Set `frozen_lockfile=False` to let the lockfile update in place instead. npm has no equivalent install flag today, so the option is a no-op there. ([#6763](https://github.com/reflex-dev/reflex/issues/6763))
### Bug Fixes
- Fix stateful pages being evaluated twice in one process (forked prod workers and same-process export+serve), which created duplicate `ComponentState` classes and broke frontend hydration (`TypeError: d is not a function`). ([#6710](https://github.com/reflex-dev/reflex/issues/6710))
- Reset the disk state manager write queue task after close. ([#6715](https://github.com/reflex-dev/reflex/issues/6715))
- Close the `RedisTokenManager` redis client and cancel its pub/sub background tasks on app shutdown, fixing leaked redis connections (`ResourceWarning: unclosed Connection`) when the server stops. ([#6724](https://github.com/reflex-dev/reflex/issues/6724))
- Event handlers and computed vars inherited from a state mixin now preserve the source function's custom attributes and keyword-only defaults. ([#6725](https://github.com/reflex-dev/reflex/issues/6725))
### Performance
- Run anonymous telemetry collection and delivery on a dedicated single-worker background thread instead of inline on the asyncio event loop. The blocking syscalls, subprocess calls and synchronous HTTP request used to gather and post an event no longer stall the event loop — notably when reporting backend errors at a high rate. Delivery is best-effort and any failure is suppressed, so telemetry can never affect the running app. ([#6626](https://github.com/reflex-dev/reflex/issues/6626))
- Event chaining (`yield OtherState.handler(rows)`) no longer deep-copies payload values that are not attached to any state: only state-bound `MutableProxy` subtrees are copied, making proxy-free payloads ~5x faster to chain. ([#6739](https://github.com/reflex-dev/reflex/issues/6739))
- `Var.to()` and `Var.guess_type()` resolve their target Var subclass through cached registry lookups instead of scanning the full registry with `safe_issubclass` on every call. ([#6742](https://github.com/reflex-dev/reflex/issues/6742))
## v0.9.6 (2026-06-25)
### Features
- Auto-memoized (`rx.memo`) components now compile to `.web/app_components/` output paths that mirror their defining Python source module (using the real package name, including framework packages) instead of being bundled into a single shared `components.jsx`. The compiler's auto-memo registry is scoped per source module, so identical-rendering subtrees in different modules each emit their own output instead of one silently overwriting another, hot-reloads of a module refresh the correct output, and stale memo files are cleaned up when their source changes. Memos whose module can't be mirrored (`__main__`, unsafe names) fall back to one file per memo at `.web/utils/components/<name>.jsx`. Each mirrored memo's generated export name also carries a stable per-module suffix, so two memos that share a name in different modules compile to distinct symbols and can be used together on one page without colliding. ([#6457](https://github.com/reflex-dev/reflex/issues/6457))
- `rx._x.hybrid_property` now works on dataclasses, pydantic models and SQLAlchemy models, not just `State` classes. Accessing the property through an object var on the frontend (e.g. `State.info.a_b`) renders it as a var, using the same code you already use on the backend. ([#6617](https://github.com/reflex-dev/reflex/issues/6617))
- `reflex init` now writes a Reflex-managed section into `AGENTS.md` (fetched from the canonical source and delimited by markers that preserve surrounding user content), and bridges it for Claude Code by creating a `CLAUDE.md` importing `@AGENTS.md` — or, if a `CLAUDE.md` exists without the import, managing the section there directly. ([#6620](https://github.com/reflex-dev/reflex/issues/6620))
- `rx._x.hybrid_property` now raises a clear error when its frontend logic reads a backend (underscore-prefixed) state var, instead of silently baking the var's server-side default into the frontend. Reference a regular var, or provide a separate frontend implementation with `@<name>.var`. ([#6621](https://github.com/reflex-dev/reflex/issues/6621))
### Bug Fixes
- Sync `reflex.lock/package.json` to `.web/package.json` before installing packages to ensure lock file and package.json are aligned. ([#6658](https://github.com/reflex-dev/reflex/issues/6658))
- Avoid re-entering config loading when a `State` subclass is defined in `rxconfig.py`. ([#6662](https://github.com/reflex-dev/reflex/issues/6662))
- Raise minimum dependency versions to pull in security fixes: `starlette>=1.3.1` (Host-header path poisoning, `request.form()` DoS, and UNC-path SSRF), `python-multipart>=0.0.32` (quadratic-time querystring DoS, unbounded header field size, and negative `Content-Length` buffering in `parse_form`), and `granian>=2.7.4` (WSGI and WebSocket header-panic DoS). ([#6665](https://github.com/reflex-dev/reflex/issues/6665))
- Fixed `modify_state` to rebind `EventContext.token` to the token being modified, so delta resolution and computed vars inside shared-state fan-out tasks observe the correct client token rather than the triggering event's inherited context. ([#6673](https://github.com/reflex-dev/reflex/issues/6673))
## v0.9.5.post2 (2026-06-10)
### Bug Fixes
- Allow access to State from `app_wrap` components ([#6651](https://github.com/reflex-dev/reflex/issues/6651))
## v0.9.5.post1 (2026-06-10)
### Bug Fixes
- Bumped minimum `reflex-components-core` dependency to 0.9.5 for compatibility.
## v0.9.5 (2026-06-10)
### Features
- `rx.form` `on_submit` handlers can now annotate their form-data parameter with a `TypedDict` (including `typing_extensions.NotRequired` fields). The submitted mapping is accepted by the event-argument type checker, and at component build time the form statically validates that its controls supply every required `TypedDict` field, raising `EventHandlerValueError` — with the missing and present field names — when a required field has no control with a matching static `name`/`id`. Validation is skipped when the form sets an `id` (controls may be associated externally via the HTML `form` attribute) or when any control identifier is a dynamic `Var`. ([#6301](https://github.com/reflex-dev/reflex/issues/6301))
- Event handlers attached to JSX literals built outside a component's render scope — such as an `ErrorBoundary`'s `onError` — can now dispatch events. `addEvents` is reached through a module-level import that `EventLoopProvider` populates on each render, so dispatch no longer depends on a `useContext` hook being hoisted into the calling scope. The state and event-loop providers, previously hard-coded in the layout template, are now injected around the app root by the compiler from the `app_wraps` declared on the `Var`s that use them. ([#6447](https://github.com/reflex-dev/reflex/issues/6447))
- Added `App.hydrate_fallback`, a component rendered during the page's hydration window (React Router's `HydrateFallback`) instead of a blank white page. It can also be configured without code through the `hydrate_fallback` config — a dotted import path to a no-arg callable returning a component, settable via the `REFLEX_HYDRATE_FALLBACK` environment variable — with the `App` argument taking precedence. Note that the fallback only covers the hydration window after the JS bundle has loaded, not the initial bundle download. ([#6630](https://github.com/reflex-dev/reflex/issues/6630))
- Added the `REFLEX_HOT_RELOAD_OVERRIDE_PATHS` environment variable, a colon-separated list of paths that, when set, fully replaces the paths watched for hot reload in dev mode — taking precedence over the config-derived defaults as well as `REFLEX_HOT_RELOAD_INCLUDE_PATHS` and `REFLEX_HOT_RELOAD_EXCLUDE_PATHS`. ([#6639](https://github.com/reflex-dev/reflex/issues/6639))
### Bug Fixes
- Anonymous telemetry now reports the installation and project identifiers as UUID strings rather than 128-bit integers. PostHog coerced the large integers to floats, discarding all but ~16 significant digits and risking distinct installs or apps being correlated as one. Each identifier is re-encoded to the same value (a UUID carries the same 128 bits), and a one-time PostHog `$create_alias` links an installation's pre-existing history to its new identifier so continuity is preserved. ([#6611](https://github.com/reflex-dev/reflex/issues/6611))
- `scripts/make_pyi.py` is now a proper CLI for maintaining `pyi_hashes.json`: `--force` regenerates every default target (ignoring the incremental markers), explicit targets are merged into the registry instead of pruning it, and an unreachable last-run commit (after a branch switch or rebase) triggers a full regeneration. A new `--check` mode, wired into the pre-commit CI job, fails when a `pyi_hashes.json` entry no longer has a matching `.py` source. ([#6614](https://github.com/reflex-dev/reflex/issues/6614))
- `State.get_var_value()` no longer silently returns a wrong value when passed a Var operation — an arithmetic/concatenation expression such as `State.a + State.b`, or an indexed/item access such as `State.items[0]`. Previously it resolved the state and field of the operation's *first* operand and returned that field's value instead of the operation's result. It now raises `UnretrievableVarValueError`, consistent with how it already handled vars not associated with any state. Plain field and computed-var references continue to resolve as before. ([#6633](https://github.com/reflex-dev/reflex/issues/6633))
### Performance
- Speed up reading mutable state vars (lists, dicts, dataclasses) through `MutableProxy`. The per-element check that detects `dataclasses.asdict`/`astuple` recursion now reads `frame.f_code.co_filename` directly instead of calling `inspect.getfile()`, cutting proxy read overhead by roughly 3-4x on large containers without changing behavior. ([#6600](https://github.com/reflex-dev/reflex/issues/6600))
### Miscellaneous
- Report the versions of the first-party Reflex subpackages shipped with Reflex (`reflex-base`, the `reflex-components-*` family and `reflex-hosting-cli`) in anonymous telemetry via a new `reflex_package_version` field. The set is derived from Reflex's own declared dependencies, so unrelated third-party `reflex-*` packages are never reported. Now that Reflex is split across many independently-versioned packages, the single `reflex_version` field no longer reflects the full install. ([#6610](https://github.com/reflex-dev/reflex/issues/6610))
## v0.9.4 (2026-06-03)
### Deprecations
- `rx._x.memo` is deprecated in favor of `rx.memo`. The old name remains a working alias for now; update imports to use `rx.memo` directly. ([#6517](https://github.com/reflex-dev/reflex/issues/6517))
- `@rx.memo` now expects each parameter to be annotated as `rx.Var[...]` (or `rx.RestProp`/`rx.EventHandler`) and the function to declare an `rx.Component` or `rx.Var[...]` return type. Memos that still use bare Python types (e.g. `name: str`) or omit the return annotation keep working — the values are coerced to `rx.Var[...]`/`rx.Component` and a deprecation warning points at the parameters and return type that need explicit annotations — but this fallback will be removed in 1.0. ([#6598](https://github.com/reflex-dev/reflex/issues/6598))
### Features
- Added `rx._x.hybrid_property`, a property decorator usable on State classes that works like a normal Python property for backend access while also rendering on the frontend at class level. Use the same method for both, or register a separate frontend implementation with `@<name>.var`. ([#3806](https://github.com/reflex-dev/reflex/issues/3806))
- Promoted the component memo system to a first-class `rx.memo` API. Memo-decorated components now accept `rx.EventHandler` parameters and carry annotated return types so they type-check correctly at call sites. ([#6517](https://github.com/reflex-dev/reflex/issues/6517))
- Added `rx.EMPTY_VAR_COMPONENT`, an empty-component `rx.Var[rx.Component]` sentinel for use as a default on `@rx.memo` `children` slots (and any `rx.Var[rx.Component]` prop) — the component counterpart to `rx.EMPTY_VAR_STR` and `rx.EMPTY_VAR_INT`. ([#6598](https://github.com/reflex-dev/reflex/issues/6598))
- `@rx.memo` now evaluates the decorated function body lazily — on first use (component instantiation) or at compile time — instead of at import time. This speeds up startup and lets a memo reference modules that aren't fully imported yet, sidestepping circular-import errors during decoration. Body-dependent errors (e.g. a var-returning memo that uses hooks or non-bundled imports) now surface when the memo is first used or compiled rather than at import. ([#6598](https://github.com/reflex-dev/reflex/issues/6598))
### Miscellaneous
- Introduced towncrier-based changelog management. Each PR that changes package source now adds a fragment under the affected package's `news/` directory; fragments are assembled into `CHANGELOG.md` at release time. See CONTRIBUTING.md for the full workflow. ([#6350](https://github.com/reflex-dev/reflex/issues/6350))
- Removed the "choose templates" option from `reflex init`. The interactive prompt now offers only a blank app or the AI builder, and no longer opens the open-source templates page. ([#6592](https://github.com/reflex-dev/reflex/issues/6592))
## /CLAUDE.md
AGENTS.md
## /CODE_OF_CONDUCT.md
# Contributor Covenant Code of Conduct
## Our Pledge
We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socioeconomic status,
nationality, personal appearance, race, religion, or sexual identity
and orientation.
We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.
## Our Standards
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,
and learning from the experience
- 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
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
address, without their explicit permission
- Other conduct which could reasonably be considered inappropriate in a
professional setting
## Enforcement Responsibilities
Community leaders are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.
Community leaders have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.
## Scope
This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official e-mail address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the community leaders responsible for enforcement at
opensource@reflex.dev.
All complaints will be reviewed and investigated promptly and fairly.
All community leaders are obligated to respect the privacy and security of the
reporter of any incident.
## Enforcement Guidelines
Community leaders will follow these Community Impact Guidelines in determining
the consequences for any action they deem in violation of this Code of Conduct:
### 1. Correction
**Community Impact**: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.
**Consequence**: A private, written warning from community leaders, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.
### 2. Warning
**Community Impact**: A violation through a single incident or series
of actions.
**Consequence**: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or
permanent ban.
### 3. Temporary Ban
**Community Impact**: A serious violation of community standards, including
sustained inappropriate behavior.
**Consequence**: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
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
individual, or aggression toward or disparagement of classes of individuals.
**Consequence**: A permanent ban from any sort of public interaction within
the community as well as any sort of private interaction with the people.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 2.0, available at
https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
Community Impact Guidelines were inspired by [Mozilla's code of conduct
enforcement ladder](https://github.com/mozilla/diversity).
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see the FAQ at
https://www.contributor-covenant.org/faq. Translations are available at
https://www.contributor-covenant.org/translations.
## /CONTRIBUTING.md
# Reflex Contributing Guidelines
## Running a Local Build of Reflex
Here is a quick guide on how to run Reflex repo locally so you can start contributing to the project.
**Prerequisites:**
- uv version >= 0.9.17 and add it to your path (see [UV Docs](https://docs.astral.sh/uv/getting-started/installation/) for more info).
**1. Fork this repository:**
Fork this repository by clicking on the `Fork` button on the top right.
**2. Clone Reflex and navigate into the repo:**
```bash
git clone https://github.com/<YOUR-USERNAME>/reflex.git
cd reflex
```
**3. Install your local Reflex build:**
```bash
uv sync
```
**4. Now create an examples folder so you can test the local Python build in this repository.**
- We have the `examples` folder in the `.gitignore`, so your changes in `reflex/examples` won't be reflected in your commit.
```bash
mkdir examples
cd examples
```
**5. Init and Run**
```bash
uv run reflex init
uv run reflex run
```
All the changes you make to the repository will be reflected in your running app.
- We have the examples folder in the .gitignore, so your changes in reflex/examples won't be reflected in your commit.
## 🧪 Testing and QA
Any feature or significant change added should be accompanied with unit tests.
Within the 'test' directory of Reflex you can add to a test file already there or create a new test python file if it doesn't fit into the existing layout.
#### What to unit test?
- Any feature or significant change that has been added.
- Any edge cases or potential problem areas.
- Any interactions between different parts of the code.
## 📝 Changelog Fragments
Each PR that changes the source of a published package must add a news fragment describing the change. Fragments are assembled into `CHANGELOG.md` at release time by [towncrier](https://towncrier.readthedocs.io/).
**Where:** add the fragment under the affected package's `news/` directory. For the main `reflex` package, that's the repo-root `news/`. For sub-packages it's `packages/<name>/news/`.
**Filename:** `<pr-or-issue-number>.<type>.md`, where `<type>` is one of:
| Type | When to use |
| --- | --- |
| `breaking` | Backwards-incompatible change users need to adapt to |
| `deprecation` | API marked deprecated but still functional |
| `feature` | New user-facing functionality |
| `bugfix` | Fix for an incorrect behavior |
| `performance` | Speed, memory, or startup improvement |
| `docs` | Documentation or docstring changes |
| `misc` | Internal refactor, build, or dependency change that still warrants mention |
**Content:** one or two sentences, written for users reading release notes (not reviewers of the diff).
**Create a fragment from the CLI:**
```bash
uv run towncrier create --config pyproject.toml --dir packages/reflex-components-lucide 1234.feature.md
```
Drop `--dir` for a fragment against the main `reflex` package.
If you don't yet know the PR number, use an [orphan fragment](https://towncrier.readthedocs.io/en/stable/cli.html#towncrier-create) (`+.feature.md`) and rename it after opening the PR.
**Skipping the fragment check:** for PRs that are genuinely not user-facing (CI-only tweaks, script fixes, test-only changes), apply the `skip-changelog` label on the PR to bypass the changelog CI check.
**Changelog version headings:** PRs to `main` must not add new version headings to any `CHANGELOG.md` — a merged heading without a git tag is a publish trigger, so new headings only come from the *Dispatch release* workflow. CI enforces this with the same parser the release pipeline uses; for deliberate restructuring of already-published sections, apply the `changelog-version-edit` label.
**Releasing (maintainers):** the `CHANGELOG.md` files are the source of truth
for publishing. A release is cut by materializing the news fragments into a
package's `CHANGELOG.md` under a new version heading and landing that change on
a release branch — never by tagging manually. The pieces:
1. **Dispatch release** (`dispatch_release.yml`, run from the Actions tab)
selects packages and a release action, computes the next version(s), runs
towncrier, and delivers the changelog bump. Leaving every package
unchecked auto-selects the packages with pending news fragments (for
`release-from-prerelease`: the packages whose changelog is topped by an
alpha). Details:
- *Prerelease actions* (`new-prerelease-*`, `continued-prerelease`) push
alpha versions straight to an `r/pre-<date>` branch (continued
prereleases push back to the `r/pre-*` branch they are dispatched on);
alphas build immediately and upload once the `pypi` environment
deployment is approved. To pull new work into a prerelease train, merge
`main` into its branch and dispatch `continued-prerelease` on it.
- *Release actions* (`release-*`) open a PR with the changelog changes
instead; reviewing and merging that PR is how final versions land (the
upload still waits for the `pypi` environment approval below). The PR
targets `main`, or the `r/hotfix/...` branch the workflow was dispatched
on (hotfix branches may publish final versions directly).
`release-from-prerelease` collapses the accumulated alpha sections into
one final-version section — alpha headings never ship in a final
changelog.
- Selecting `reflex-base` automatically releases the root `reflex` package
at the same version.
2. **Release from changelog** (`release_from_changelog.yml`) runs on every push
to `main`, `r/pre-*`, and `r/hotfix/**`: any package whose newest changelog
version has no git tag gets built and queued for publishing. Final
(non-alpha) versions only publish from `main` or `r/hotfix/**`; alphas only
from `r/pre-*`/`r/hotfix/**`. `reflex` and `reflex-base` are checked as a
lockstep pair and `reflex` publishes only after the rest of the batch.
3. **Publish to PyPI** (`publish.yml`, also manually dispatchable with a
package + version) validates and builds without privileges, then **waits
for a human to approve the `pypi` environment deployment** — every upload,
alphas and internal packages included, requires that approval. Only after a
successful upload does it push the tag and create the GitHub release, so a
failed or rejected publish leaves no tag behind — fix the problem on top of
the changelog bump and the next push retries automatically.
**Where changelogs are published:** the docs site renders every `CHANGELOG.md`
in the repo (repo root and `packages/*/`) under
[reflex.dev/docs/changelog/](https://reflex.dev/docs/changelog/). The
`reflex-enterprise` changelog is read from the installed `reflex-enterprise`
distribution at docs build time; it appears once the published wheel ships a
`CHANGELOG.md` and the docs app's lockfile picks up that version.
## ✅ Making a PR
Once you solve a current issue or improvement to Reflex, you can make a PR, and we will review the changes.
Before submitting, a pull request, ensure the following steps are taken and test passing.
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 72%.
```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 type checking.
```bash
uv run ruff check .
uv run pyright reflex tests
```
Finally, run `ruff` to format your code.
```bash
uv run ruff format .
```
Consider installing git pre-commit hooks so Ruff, Pyright, and `make_pyi` will run automatically before each commit.
```bash
uv run pre-commit install
```
That's it you can now submit your PR. Thanks for contributing to Reflex!
## 🤖 AI-Assisted PRs
We welcome AI-assisted contributions, but they must meet the same quality bar as any other PR.
- **A human developer must be responsible for the PR contents and review process.** Bot account PRs are subject to prejudicial closure.
- Ensure pre-commit hooks and unit tests pass before submitting.
- Review the patch locally with an "adversarial" prompt before opening the PR.
- Apply fixes for reasonable feedback from Greptile and/or Copilot review bots.
- Resolve or dismiss irrelevant bot feedback with a brief explanation.
- All added/changed lines MUST have unit or integration test coverage with _real_ assertions. No untested code, no bogus test code.
- PRs with merge conflicts or failing tests will not be reviewed or merged. The maintainers do not spend time on PRs that are not in a ready state. If you need attention on a PR that is not ready, mention the maintainers in a comment.
## 📝 Contributing to the Docs
The Reflex documentation lives in this repo under [`docs/`](https://github.com/reflex-dev/reflex/tree/main/docs). All doc pages are plain Markdown files in [`docs/`](https://github.com/reflex-dev/reflex/tree/main/docs), and the docs site itself (a Reflex app that renders them) lives in [`docs/app/`](https://github.com/reflex-dev/reflex/tree/main/docs/app). If you're fixing a typo, clarifying an explanation, or adding a new page, you can do it all in this repo by editing the relevant `.md` file.
**1. Run the docs site locally:**
```bash
cd docs/app
uv sync
uv run reflex run
```
Then open [http://localhost:3000/docs/](http://localhost:3000/docs/). The dev server picks up changes to the `.md` files in `docs/` so you can preview edits live.
**2. Speed up dev builds with the page whitelist (optional):**
By default the dev server compiles every page, which can be slow. To only compile the pages you're working on, edit `docs/app/reflex_docs/whitelist.py` and add paths to `WHITELISTED_PAGES`:
```python
WHITELISTED_PAGES = [
"/getting-started/introduction",
"/components/props",
]
```
Paths must start with `/`, have no trailing slash, and are prefix-matched. An empty list builds everything. Restart the dev server after editing.
## Editing Templates
Changes to the basic `blank` template can be done in the `reflex/.templates/apps/blank` directory.
## 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 -m reflex.utils.pyi_generator
```
## /DEBUGGING.md
# Debugging
It is possible to run Reflex apps in dev mode under a debugger.
1. Run Reflex as a module: `python -m reflex run --env dev`
2. Set current working directory to the dir containing `rxconfig.py`
## VSCode
The following launch configuration can be used to interactively debug a Reflex
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}/.."
}
]
}
```
## /MCP_README.md
# Reflex MCP Server
The Reflex MCP Server provides comprehensive access to Reflex framework documentation and component information through the Model Context Protocol (MCP). This server is deployed and ready to use with your MCP-compatible AI tools.
Check the documentation at https://reflex.dev/docs/ai-builder/integrations/mcp-overview
## /README.md
<div align="center">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_light.svg">
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_dark.svg">
<img alt="Reflex Logo" src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex.svg" width="300px">
</picture>
<hr>
### **✨ Performant, customizable web apps in pure Python. Deploy in seconds. ✨**
[](https://badge.fury.io/py/reflex)
[](https://reflex.dev/docs/getting-started/introduction)
[](https://pepy.tech/projects/reflex)
[](https://discord.gg/T5WSbC2YtQ)
[](https://x.com/getreflex)
</div>
---
> [!NOTE]
> Build faster with Reflex:
>
> - **[AI Builder](https://build.reflex.dev/)** - Generate full-stack Reflex apps in seconds.
> - **[Agent Toolkit](https://reflex.dev/docs/ai/integrations/agent-toolkit/)** - Connect MCP and Skills to your coding assistant.
> - **[App Management](https://reflex.dev/hosting)** - Deploy and manage your Reflex apps.
---
# Introduction
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.
See our [architecture page](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture) to learn how Reflex works under the hood.
## ⚙️ Installation
**Important:** We strongly recommend using a virtual environment to ensure the `reflex` command is available in your PATH.
## 🥳 Create your first app
Create a project, add Reflex, and start the development server with [uv](https://docs.astral.sh/uv/):
```shell
mkdir my_app_name
cd my_app_name
uv init
uv add reflex
uv run reflex init
uv run reflex run
```
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
Build an image generation app in Python with Reflex: define the UI, manage state in a class, and call an image model from an event handler.
<div align="center">
<video src="https://github.com/user-attachments/assets/aaff28ad-8b3c-43bf-967e-439ee34c8a87" width="900" controls muted poster="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex-image-generation-app.png">
<a href="https://web.reflex-assets.dev/video/reflex-dalle-video-2x.mp4">
<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex-image-generation-app.png" alt="Preview of an image generation app built with Reflex" width="900">
</a>
</video>
</div>
```python
import reflex as rx
import openai
client = openai.AsyncOpenAI()
class State(rx.State):
prompt: str = ""
image_url: str = ""
processing: bool = False
@rx.event
def set_prompt(self, value: str):
self.prompt = value
@rx.event
async def generate(self):
self.processing = True
yield
response = await client.images.generate(
model="gpt-image-1.5",
prompt=self.prompt,
)
self.image_url = f"data:image/png;base64,{response.data[0].b64_json}"
self.processing = False
def index():
return rx.vstack(
rx.heading("Image Generator"),
rx.input(placeholder="Enter a prompt...", on_change=State.set_prompt),
rx.button("Generate", on_click=State.generate, loading=State.processing),
rx.image(src=State.image_url),
)
app = rx.App()
app.add_page(index, title="Reflex:Image Generation")
```
## 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
# Security Policy
## Supported Versions
| Version | Supported |
| -------- | ------------------ |
| >= 0.7.0 | :white_check_mark: |
## Reporting a Vulnerability
Please report any security vulnerabilities by using: https://github.com/reflex-dev/reflex/security/advisories/new
## /docker-example/README.md
# Reflex Docker Examples
This directory contains several examples of how to deploy Reflex apps using docker.
In all cases, ensure that your `requirements.txt` file is up to date and
includes the `reflex` package.
## `simple-two-port`
The most basic production deployment exposes two HTTP ports and relies on an
existing load balancer to forward the traffic appropriately.
## `simple-one-port`
This deployment exports the frontend statically and serves it via a single HTTP
port using Caddy. This is useful for platforms that only support a single port
or where running a node server in the container is undesirable.
## `production-compose`
This deployment is intended for use with a standalone VPS that is only hosting a
single Reflex app. It provides the entire stack in a single `compose.yaml`
including a webserver, one or more backend instances, redis, and a postgres
database.
## `production-app-platform`
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.
## /docker-example/production-app-platform/.dockerignore
```dockerignore path="/docker-example/production-app-platform/.dockerignore"
.web
.git
__pycache__/*
Dockerfile
uploaded_files
```
## /docker-example/production-app-platform/Dockerfile
``` path="/docker-example/production-app-platform/Dockerfile"
# This docker file is intended to be used with container hosting services
#
# After deploying this image, get the URL pointing to the backend service
# and run API_URL=https://path-to-my-container.example.com reflex export frontend
# then copy the contents of `frontend.zip` to your static file server (github pages, s3, etc).
#
# Azure Static Web App example:
# npx @azure/static-web-apps-cli deploy --env production --app-location .web/build/client
#
# For dynamic routes to function properly, ensure that 404s are redirected to /404 on the
# static file host (for github pages, this works out of the box; remember to create .nojekyll).
#
# For azure static web apps, add `staticwebapp.config.json` to to `.web/build/client` with the following:
# {
# "responseOverrides": {
# "404": {
# "rewrite": "/404.html"
# }
# }
# }
#
# Note: many container hosting platforms require amd64 images, so when building on an M1 Mac
# for example, pass `docker build --platform=linux/amd64 ...`
# Stage 1: init
FROM python:3.13 as init
ARG uv=/root/.local/bin/uv
# Install `uv` for faster package bootstrapping
ADD --chmod=755 https://astral.sh/uv/install.sh /install.sh
RUN /install.sh && rm /install.sh
# Copy local context to `/app` inside container (see .dockerignore)
WORKDIR /app
COPY . .
RUN mkdir -p /app/data /app/uploaded_files
# Create virtualenv which will be copied into final container
ENV VIRTUAL_ENV=/app/.venv
ENV PATH="$VIRTUAL_ENV/bin:$PATH"
RUN $uv venv
# Install app requirements and reflex inside virtualenv
RUN $uv pip install -r requirements.txt
# Deploy templates and prepare app
RUN reflex init
# Stage 2: copy artifacts into slim image
FROM python:3.13-slim
WORKDIR /app
RUN adduser --disabled-password --home /app reflex
COPY --chown=reflex --from=init /app /app
# Install libpq-dev for psycopg (skip if not using postgres).
RUN apt-get update -y && apt-get install -y libpq-dev && rm -rf /var/lib/apt/lists/*
USER reflex
ENV PATH="/app/.venv/bin:$PATH" PYTHONUNBUFFERED=1
# Needed until Reflex properly passes SIGTERM on backend.
STOPSIGNAL SIGKILL
# Always apply migrations before starting the backend.
CMD [ -d alembic ] && reflex db migrate; \
exec reflex run --env prod --backend-only --backend-port ${PORT:-8000}
```
## /docker-example/production-app-platform/README.md
# production-app-platform
This example deployment is intended for use with App hosting platforms, like
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.
## Deployment
These general steps do not cover the specifics of each platform, but all platforms should
support the concepts described here.
### Vnet
All containers in the deployment should be hooked up to the same virtual private
network so they can access the redis service and optionally the database server.
The vnet should not be exposed to the internet, use an ingress rule to terminate
TLS at the load balancer and forward the traffic to a backend service replica.
### Redis
Deploy a `redis` instance on the vnet.
### Backend
The backend is built by the `Dockerfile` in this directory. When deploying the
backend, be sure to set REFLEX_REDIS_URL=redis://internal-redis-hostname to connect to
the redis service.
### Ingress
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.
### Frontend
The frontend should be hosted on a static file server or CDN.
**Important**: when exporting the frontend, set the API_URL environment variable
to the ingress hostname of the backend service.
If you will host the frontend from a path other than the root, set the
`REFLEX_FRONTEND_PATH` environment variable appropriately when exporting the frontend.
Most static hosts will automatically use the `/404.html` file to handle 404
errors. _This is essential for dynamic routes to work correctly._ Ensure that
missing routes return the `/404.html` content to the user if this is not the
default behavior.
_For Github Pages_: ensure the file `.nojekyll` is present in the root of the repo
to avoid special processing of underscore-prefix directories, like `_next`.
## Platform Notes
The following sections are currently a work in progress and may be incomplete.
### Azure
In the Azure load balancer, per-message deflate is not supported. Add the following
to your `rxconfig.py` to workaround this issue.
```python
import uvicorn.workers
import reflex as rx
class NoWSPerMessageDeflate(uvicorn.workers.UvicornH11Worker):
CONFIG_KWARGS = {
**uvicorn.workers.UvicornH11Worker.CONFIG_KWARGS,
"ws_per_message_deflate": False,
}
config = rx.Config(
app_name="my_app",
gunicorn_worker_class="rxconfig.NoWSPerMessageDeflate",
)
```
#### Persistent Storage
If you need to use a database or upload files, you cannot save them to the
container volume. Use Azure Files and mount it into the container at /app/uploaded_files.
#### 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 REFLEX_REDIS_URL and REFLEX_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/.dockerignore
```dockerignore path="/docker-example/production-compose/.dockerignore"
.web
.git
__pycache__/*
Dockerfile
Caddy.Dockerfile
compose.yaml
compose.*.yaml
uploaded_files
```
## /docker-example/production-compose/Caddy.Dockerfile
```Dockerfile path="/docker-example/production-compose/Caddy.Dockerfile"
FROM library/caddy
COPY --from=local/reflex-app /app/.web/build/client /srv
ADD Caddyfile /etc/caddy/Caddyfile
```
## /docker-example/production-compose/Caddyfile
``` path="/docker-example/production-compose/Caddyfile"
{$DOMAIN}
encode gzip
@backend_routes path /_event/* /ping /_upload /_upload/*
handle @backend_routes {
reverse_proxy app:8000
}
root * /srv
route {
try_files {path} {path}/ /404.html
file_server
}
```
## /docker-example/production-compose/Dockerfile
``` path="/docker-example/production-compose/Dockerfile"
# This docker file is intended to be used with docker compose to deploy a production
# instance of a Reflex app.
# Stage 1: init
FROM python:3.13 as init
ARG uv=/root/.local/bin/uv
# Install `uv` for faster package bootstrapping
ADD --chmod=755 https://astral.sh/uv/install.sh /install.sh
RUN /install.sh && rm /install.sh
# Copy local context to `/app` inside container (see .dockerignore)
WORKDIR /app
COPY . .
RUN mkdir -p /app/data /app/uploaded_files
# Create virtualenv which will be copied into final container
ENV VIRTUAL_ENV=/app/.venv
ENV PATH="$VIRTUAL_ENV/bin:$PATH"
RUN $uv venv
# Install app requirements and reflex inside virtualenv
RUN $uv pip install -r requirements.txt
# Deploy templates and prepare app
RUN reflex init
# Export static copy of frontend to /app/.web/build/client
RUN reflex export --frontend-only --no-zip
# Copy static files out of /app to save space in backend image
RUN mv .web/build/client /tmp/client
RUN rm -rf .web && mkdir -p .web/build
RUN mv /tmp/client .web/build/client
# Stage 2: copy artifacts into slim image
FROM python:3.13-slim
WORKDIR /app
RUN adduser --disabled-password --home /app reflex
COPY --chown=reflex --from=init /app /app
# Install libpq-dev for psycopg (skip if not using postgres).
RUN apt-get update -y && apt-get install -y libpq-dev && rm -rf /var/lib/apt/lists/*
USER reflex
ENV PATH="/app/.venv/bin:$PATH" PYTHONUNBUFFERED=1
# Needed until Reflex properly passes SIGTERM on backend.
STOPSIGNAL SIGKILL
# Always apply migrations before starting the backend.
CMD [ -d alembic ] && reflex db migrate; \
exec reflex run --env prod --backend-only
```
## /docker-example/production-compose/README.md
# production-compose
This example production deployment uses automatic TLS with Caddy serving static
files for the frontend and proxying requests to both the frontend and backend.
It is intended for use with a standalone VPS that is only hosting a single
Reflex app.
The production app container (`Dockerfile`), builds and exports the frontend
statically (to be served by Caddy). The resulting image only runs the backend
service.
The `webserver` service, based on `Caddy.Dockerfile`, copies the static frontend
and `Caddyfile` into the container to configure the reverse proxy routes that will
forward requests to the backend service. Caddy will automatically provision TLS
for localhost or the domain specified in the environment variable `DOMAIN`.
This type of deployment should use less memory and be more performant since
nodejs is not required at runtime.
## Customize `Caddyfile` (optional)
If the app uses additional backend API routes, those should be added to the
`@backend_routes` path matcher to ensure they are forwarded to the backend.
## 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).
**If `DOMAIN` is not provided, the service will default to `localhost`.**
```bash
DOMAIN=example.com docker compose build
```
This will build both the `app` service from the `prod.Dockerfile` and the `webserver`
service via `Caddy.Dockerfile`.
## Run Reflex Production Service
```bash
DOMAIN=example.com docker compose up
```
The app should be available at the specified domain via HTTPS. Certificate
provisioning will occur automatically and may take a few minutes.
### Data Persistence
Named docker volumes are used to persist the app database (`db-data`),
uploaded_files (`upload-data`), and caddy TLS keys and certificates
(`caddy-data`).
## More Robust Deployment
For a more robust deployment, consider bringing the service up with
`compose.prod.yaml` which includes postgres database and redis cache, allowing
the backend to run with multiple workers and service more requests.
```bash
DOMAIN=example.com docker compose -f compose.yaml -f compose.prod.yaml up -d
```
Postgres uses its own named docker volume for data persistence.
## Admin Tools
When needed, the services in `compose.tools.yaml` can be brought up, providing
graphical database administration (Adminer on http://localhost:8080) and a
redis cache browser (redis-commander on http://localhost:8081). It is not recommended
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
```yaml path="/docker-example/production-compose/compose.prod.yaml"
# Use this override file to run the app in prod mode with postgres and redis
# docker compose -f compose.yaml -f compose.prod.yaml up -d
services:
db:
image: postgres
restart: always
environment:
POSTGRES_PASSWORD: secret
volumes:
- postgres-data:/var/lib/postgresql/data
redis:
image: redis
restart: always
app:
environment:
REFLEX_DB_URL: postgresql+psycopg://postgres:secret@db/postgres
REFLEX_REDIS_URL: redis://redis:6379
depends_on:
- db
- redis
volumes:
postgres-data:
```
## /docker-example/production-compose/compose.tools.yaml
```yaml path="/docker-example/production-compose/compose.tools.yaml"
# Use this override file with `compose.prod.yaml` to run admin tools
# for production services.
# docker compose -f compose.yaml -f compose.prod.yaml -f compose.tools.yaml up -d
services:
adminer:
image: adminer
ports:
- 8080:8080
redis-commander:
image: ghcr.io/joeferner/redis-commander:latest
environment:
- REDIS_HOSTS=local:redis:6379
ports:
- "8081:8081"
volumes:
redis-ui-settings:
```
## /docker-example/production-compose/compose.yaml
```yaml path="/docker-example/production-compose/compose.yaml"
# Base compose file production deployment of reflex app with Caddy webserver
# providing TLS termination and reverse proxying.
#
# See `compose.prod.yaml` for more robust and performant deployment option.
#
# During build and run, set environment DOMAIN pointing
# to publicly accessible domain where app will be hosted
services:
app:
image: local/reflex-app
environment:
REFLEX_DB_URL: sqlite:///data/reflex.db
build:
context: .
volumes:
- db-data:/app/data
- upload-data:/app/uploaded_files
restart: always
webserver:
environment:
DOMAIN: ${DOMAIN:-localhost}
ports:
- 443:443
- 80:80 # For acme-challenge via HTTP.
build:
context: .
dockerfile: Caddy.Dockerfile
volumes:
- caddy-data:/root/.caddy
restart: always
depends_on:
- app
volumes:
# SQLite data
db-data:
# Uploaded files
upload-data:
# TLS keys and certificates
caddy-data:
```
## /docker-example/production-one-port/.dockerignore
```dockerignore path="/docker-example/production-one-port/.dockerignore"
.web
!.web/bun.lockb
!.web/package.json
```
## /docker-example/production-one-port/Caddyfile
``` path="/docker-example/production-one-port/Caddyfile"
:{$PORT}
encode gzip
@backend_routes path /_event/* /ping /_upload /_upload/*
handle @backend_routes {
reverse_proxy localhost:8000
}
root * /srv
route {
try_files {path} {path}/ /404.html
file_server
}
```
## /docker-example/production-one-port/Dockerfile
``` path="/docker-example/production-one-port/Dockerfile"
# This Dockerfile is used to deploy a single-container Reflex app instance
# to services like Render, Railway, Heroku, GCP, and others.
# If the service expects a different port, provide it here (f.e Render expects port 10000)
ARG PORT=8080
# Only set for local/direct access. When TLS is used, the API_URL is assumed to be the same as the frontend.
ARG API_URL
# It uses a reverse proxy to serve the frontend statically and proxy to backend
# from a single exposed port, expecting TLS termination to be handled at the
# edge by the given platform.
FROM python:3.13 as builder
RUN mkdir -p /app/.web
RUN python -m venv /app/.venv
ENV PATH="/app/.venv/bin:$PATH"
WORKDIR /app
# Install python app requirements and reflex in the container
COPY requirements.txt .
RUN pip install -r requirements.txt
# Install reflex helper utilities like bun/node
COPY rxconfig.py ./
RUN reflex init
# Install pre-cached frontend dependencies (if exist)
COPY *.web/bun.lockb *.web/package.json .web/
RUN if [ -f .web/bun.lockb ]; then cd .web && ~/.local/share/reflex/bun/bin/bun install --frozen-lockfile; fi
# Copy local context to `/app` inside container (see .dockerignore)
COPY . .
ARG PORT API_URL
# Download other npm dependencies and compile frontend
RUN REFLEX_API_URL=${API_URL:-http://localhost:$PORT} reflex export --loglevel debug --frontend-only --no-zip && mv .web/build/client/* /srv/ && rm -rf .web
# Final image with only necessary files
FROM python:3.13-slim
# Install Caddy and redis server inside image
RUN apt-get update -y && apt-get install -y caddy redis-server && rm -rf /var/lib/apt/lists/*
ARG PORT API_URL
ENV PATH="/app/.venv/bin:$PATH" PORT=$PORT REFLEX_API_URL=${API_URL:-http://localhost:$PORT} REFLEX_REDIS_URL=redis://localhost PYTHONUNBUFFERED=1
WORKDIR /app
COPY --from=builder /app /app
COPY --from=builder /srv /srv
# Needed until Reflex properly passes SIGTERM on backend.
STOPSIGNAL SIGKILL
EXPOSE $PORT
# Apply migrations before starting the backend.
CMD [ -d alembic ] && reflex db migrate; \
caddy start && \
redis-server --daemonize yes && \
exec reflex run --env prod --backend-only
```
## /docker-example/production-one-port/README.md
# 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.
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
Using this method may be preferable for deploying in memory constrained
environments, because it serves a static frontend export, rather than running
the Vite server via node.
## Build
```console
docker build -t reflex-production-one-port .
```
## Run
```console
docker run -p 8080:8080 reflex-production-one-port
```
Note that this container has _no persistence_ and will lose all data when
stopped. You can use bind mounts or named volumes to persist the database and
uploaded_files directories as needed.
## Usage
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.
## /docker-example/simple-one-port/.dockerignore
```dockerignore path="/docker-example/simple-one-port/.dockerignore"
.web
.git
__pycache__/*
Dockerfile
uploaded_files
```
## /docker-example/simple-one-port/Caddyfile
``` path="/docker-example/simple-one-port/Caddyfile"
:{$PORT}
encode gzip
@backend_routes path /_event/* /ping /_upload /_upload/*
handle @backend_routes {
reverse_proxy localhost:8000
}
root * /srv
route {
try_files {path} {path}/ /404.html
file_server
}
```
## /docker-example/simple-one-port/Dockerfile
``` path="/docker-example/simple-one-port/Dockerfile"
# This Dockerfile is used to deploy a single-container Reflex app instance
# to services like Render, Railway, Heroku, GCP, and others.
# It uses a reverse proxy to serve the frontend statically and proxy to backend
# from a single exposed port, expecting TLS termination to be handled at the
# edge by the given platform.
FROM python:3.13
# If the service expects a different port, provide it here (f.e Render expects port 10000)
ARG PORT=8080
# Only set for local/direct access. When TLS is used, the API_URL is assumed to be the same as the frontend.
ARG API_URL
ENV PORT=$PORT REFLEX_API_URL=${API_URL:-http://localhost:$PORT} REFLEX_REDIS_URL=redis://localhost PYTHONUNBUFFERED=1
# Install Caddy and redis server inside image
RUN apt-get update -y && apt-get install -y caddy redis-server && rm -rf /var/lib/apt/lists/*
WORKDIR /app
# Copy local context to `/app` inside container (see .dockerignore)
COPY . .
# Install app requirements and reflex in the container
RUN pip install -r requirements.txt
# Deploy templates and prepare app
RUN reflex init
# Download all npm dependencies and compile frontend
RUN reflex export --frontend-only --no-zip && mv .web/build/client/* /srv/ && rm -rf .web
# Needed until Reflex properly passes SIGTERM on backend.
STOPSIGNAL SIGKILL
EXPOSE $PORT
# Apply migrations before starting the backend.
CMD [ -d alembic ] && reflex db migrate; \
caddy start && \
redis-server --daemonize yes && \
exec reflex run --env prod --backend-only
```
## /docker-example/simple-one-port/README.md
# 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.
The deployment also runs a local Redis server to store state for each user.
Using this method may be preferable for deploying in memory constrained
environments, because it serves a static frontend export, rather than running
the Vite server via node.
For platforms which only terminate TLS to a single port, this container can be
deployed instead of the `simple-two-port` example.
## Build
```console
docker build -t reflex-simple-one-port .
```
## Run
```console
docker run -p 8080:8080 reflex-simple-one-port
```
Note that this container has _no persistence_ and will lose all data when
stopped. You can use bind mounts or named volumes to persist the database and
uploaded_files directories as needed.
## Usage
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.
## /docker-example/simple-two-port/.dockerignore
```dockerignore path="/docker-example/simple-two-port/.dockerignore"
.web
.git
__pycache__/*
Dockerfile
uploaded_files
```
## /docker-example/simple-two-port/Dockerfile
``` path="/docker-example/simple-two-port/Dockerfile"
# This Dockerfile is used to deploy a simple single-container Reflex app instance.
FROM python:3.13
RUN apt-get update && apt-get install -y redis-server && rm -rf /var/lib/apt/lists/*
ENV REFLEX_REDIS_URL=redis://localhost PYTHONUNBUFFERED=1
# Copy local context to `/app` inside container (see .dockerignore)
WORKDIR /app
COPY . .
# Install app requirements and reflex in the container
RUN pip install -r requirements.txt
# Deploy templates and prepare app
RUN reflex init
# Download all npm dependencies and compile frontend
RUN reflex export --frontend-only --no-zip
# Needed until Reflex properly passes SIGTERM on backend.
STOPSIGNAL SIGKILL
# Always apply migrations before starting the backend.
CMD [ -d alembic ] && reflex db migrate; \
redis-server --daemonize yes && \
exec reflex run --env prod
```
## /docker-example/simple-two-port/README.md
# simple-two-port
This docker deployment runs Reflex in prod mode, exposing two HTTP ports:
- `3000` - node 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.
## Build
```console
docker build -t reflex-simple-two-port .
```
## Run
```console
docker run -p 3000:3000 -p 8000:8000 reflex-simple-two-port
```
Note that this container has _no persistence_ and will lose all data when
stopped. You can use bind mounts or named volumes to persist the database and
uploaded_files directories as needed.
## Usage
This container should be used with an existing load balancer or reverse proxy to
route traffic to the appropriate port inside the container.
For example, the following Caddyfile can be used to terminate TLS and forward
traffic to the frontend and backend from outside the container.
```
my-domain.com
encode gzip
@backend_routes path /_event/* /ping /_upload /_upload/*
handle @backend_routes {
reverse_proxy localhost:8000
}
reverse_proxy localhost:3000
```
## /docs/advanced_onboarding/code_structure.md
# Project Structure (Advanced)
## App Module
Reflex imports the main app module based on the `app_name` from the config, which **must define a module-level global named `app` as an instance of `rx.App`**.
The main app module is responsible for importing all other modules that make up the app and defining `app = rx.App()`.
**All other modules containing pages, state, and models MUST be imported by the main app module or package** for Reflex to include them in the compiled output.
## Breaking the App into Smaller Pieces
As applications scale, effective organization is crucial. This is achieved by breaking the application down into smaller, manageable modules and organizing them into logical packages that avoid circular dependencies.
In the following documentation there will be an app with an `app_name` of `example_big_app`. The main module would be `example_big_app/example_big_app.py`.
In the [Putting it all together](#putting-it-all-together) section there is a visual of the project folder structure to help follow along with the examples below.
### Pages Package: `example_big_app/pages`
All complex apps will have multiple pages, so it is recommended to create `example_big_app/pages` as a package.
1. This package should contain one module per page in the app.
2. If a particular page depends on the state, the substate should be defined in the same module as the page.
3. The page-returning function should be decorated with `rx.page()` to have it added as a route in the app.
```python
import reflex as rx
from ..state import AuthState
class LoginState(AuthState):
@rx.event
def handle_submit(self, form_data):
self.logged_in = authenticate(form_data["username"], form_data["password"])
def login_field(name: str, **input_props):
return rx.hstack(
rx.text(name.capitalize()),
rx.input(name=name, **input_props),
width="100%",
justify="between",
)
@rx.page(route="/login")
def login():
return rx.card(
rx.form(
rx.vstack(
login_field("username"),
login_field("password", type="password"),
rx.button("Login"),
width="100%",
justify="center",
),
on_submit=LoginState.handle_submit,
),
)
```
### Templating: `example_big_app/template.py`
Most applications maintain a consistent layout and structure across pages. Defining this common structure in a separate module facilitates easy sharing and reuse when constructing individual pages.
**Best Practices**
1. Factor out common frontend UI elements into a function that returns a component.
2. If a function accepts a function that returns a component, it can be used as a decorator as seen below.
```python
from typing import Callable
import reflex as rx
from .components.menu import menu
from .components.navbar import navbar
def template(page: Callable[[], rx.Component]) -> rx.Component:
return rx.vstack(
navbar(),
rx.hstack(
menu(),
rx.container(page()),
),
width="100%",
)
```
The `@template` decorator should appear below the `@rx.page` decorator and above the page-returning function. See the [Posts Page](#a-post-page-example_big_apppagespostspy) code for an example.
## State Management
Most pages will use State in some capacity. You should avoid adding vars to a
shared state that will only be used in a single page. Instead, define a new
subclass of `rx.State` and keep it in the same module as the page.
### Accessing other States
As of Reflex 0.4.3, any event handler can get access to an instance of any other
substate via the `get_state` API. From a practical perspective, this means that
state can be split up into smaller pieces without requiring a complex
inheritance hierarchy to share access to other states.
In previous releases, if an app wanted to store settings in `SettingsState` with
a page or component for modifying them, any other state with an event handler
that needed to access those settings would have to inherit from `SettingsState`,
even if the other state was mostly orthogonal. The other state would also now
always have to load the settings, even for event handlers that didn't need to
access them.
A better strategy is to load the desired state on demand from only the event
handler which needs access to the substate.
### A Settings Component: `example_big_app/components/settings.py`
```python
import reflex as rx
class SettingsState(rx.State):
refresh_interval: int = 15
auto_update: bool = True
prefer_plain_text: bool = True
posts_per_page: int = 20
def settings_dialog():
return rx.dialog(...)
```
### A Post Page: `example_big_app/pages/posts.py`
This page loads the `SettingsState` to determine how many posts to display per page
and how often to refresh.
```python
import reflex as rx
from ..models import Post
from ..template import template
from ..components.settings import SettingsState
class PostsState(rx.State):
refresh_tick: int
page: int
posts: list[Post]
@rx.event
async def on_load(self):
settings = await self.get_state(SettingsState)
if settings.auto_update:
self.refresh_tick = settings.refresh_interval * 1000
else:
self.refresh_tick = 0
@rx.event
async def tick(self, _):
settings = await self.get_state(SettingsState)
with rx.session() as session:
q = (
Post
.select()
.offset(self.page * settings.posts_per_page)
.limit(settings.posts_per_page)
)
self.posts = q.all()
@rx.event
def go_to_previous(self):
if self.page > 0:
self.page = self.page - 1
@rx.event
def go_to_next(self):
if self.posts:
self.page = self.page + 1
@rx.page(route="/posts", on_load=PostsState.on_load)
@template
def posts():
return rx.vstack(
rx.foreach(PostsState.posts, post_view),
rx.hstack(
rx.button("< Prev", on_click=PostsState.go_to_previous),
rx.button("Next >", on_click=PostsState.go_to_next),
justify="between",
),
rx.moment(
interval=PostsState.refresh_tick, on_change=PostsState.tick, display="none"
),
width="100%",
)
```
### Common State: `example_big_app/state.py`
_Common_ states and substates that are shared by multiple pages or components
should be implemented in a separate module to avoid circular imports. This
module should not import other modules in the app.
## Component Reusability
The primary mechanism for reusing components in Reflex is to define a function that returns
the component, then simply call it where that functionality is needed.
Component functions typically should not take any State classes as arguments, but prefer
to import the needed state and access the vars on the class directly.
### Memoize Functions for Improved Performance
In a large app, if a component has many subcomponents or is used in a large number of places, it can improve compile and runtime performance to memoize the function with the `@lru_cache` decorator.
To memoize the `foo` component to avoid re-creating it many times simply add `@lru_cache` to the function definition, and the component will only be created once per unique set of arguments.
```python
from functools import lru_cache
import reflex as rx
class State(rx.State):
v: str = "foo"
@rx.event
def set_v(self, value: str):
self.v = value
@lru_cache
def foo():
return rx.text(State.v)
def index():
return rx.flex(
rx.button(
"Change", on_click=State.set_v(rx.cond(State.v != "bar", "bar", "foo"))
),
*[foo() for _ in range(100)],
direction="row",
wrap="wrap",
)
```
### example_big_app/components
This package contains reusable parts of the app, for example headers, footers,
and menus. If a particular component requires state, the substate may be defined
in the same module for locality. Any substate defined in a component module
should only contain fields and event handlers pertaining to that individual
component.
### External Components
Reflex 0.4.3 introduced support for the [`reflex component` CLI commands](/docs/custom-components/overview), which makes it easy
to bundle up common functionality to publish on PyPI as a standalone Python package
that can be installed and used in any Reflex app.
When wrapping npm components or other self-contained bits of functionality, it can be helpful
to move this complexity outside the app itself for easier maintenance and reuse in other apps.
## Database Models: `example_big_app/models.py`
It is recommended to implement all database models in a single file to make it easier to define relationships and understand the entire schema.
However, if the schema is very large, it might make sense to have a `models` package with individual models defined in their own modules.
At any rate, defining the models separately allows any page or component to import and use them without circular imports.
## Top-level Package: `example_big_app/__init__.py`
This is a great place to import all state, models, and pages that should be part of the app.
Typically, components and helpers do not need to imported, because they will be imported by
pages that use them (or they would be unused).
```python
from . import state, models
from .pages import index, login, post, product, profile, schedule
__all__ = [
"state",
"models",
"index",
"login",
"post",
"product",
"profile",
"schedule",
]
```
If any pages are not imported here, they will not be compiled as part of the app.
## example_big_app/example_big_app.py
This is the main app module. Since everything else is defined in other modules, this file becomes very simple.
```python
import reflex as rx
app = rx.App()
```
## File Management
There are two categories of non-code assets (media, fonts, stylesheets,
documents) typically used in a Reflex app.
### assets
The `assets` directory is used for **static** files that should be accessible
relative to the root of the frontend (default port 3000). When an app is deployed in
production mode, changes to the assets directory will NOT be available at runtime!
When referencing an asset, always use a leading forward slash, so the
asset can be resolved regardless of the page route where it may appear.
### uploaded_files
If an app needs to make files available dynamically at runtime, it is
recommended to set the target directory via `REFLEX_UPLOADED_FILES_DIR`
environment variable (default `./uploaded_files`), write files relative to the
path returned by `rx.get_upload_dir()`, and create working links via
`rx.get_upload_url(relative_path)`.
Uploaded files are served from the backend (default port 8000) via
`/_upload/<relative_path>`
## Putting it all together
Based on the previous discussion, the recommended project layout look like this.
```text
example-big-app/
├─ assets/
├─ example_big_app/
│ ├─ components/
│ │ ├─ __init__.py
│ │ ├─ auth.py
│ │ ├─ footer.py
│ │ ├─ menu.py
│ │ ├─ navbar.py
│ ├─ pages/
│ │ ├─ __init__.py
│ │ ├─ index.py
│ │ ├─ login.py
│ │ ├─ posts.py
│ │ ├─ product.py
│ │ ├─ profile.py
│ │ ├─ schedule.py
│ ├─ __init__.py
│ ├─ example_big_app.py
│ ├─ models.py
│ ├─ state.py
│ ├─ template.py
├─ uploaded_files/
├─ pyproject.toml
├─ rxconfig.py
```
## Key Takeaways
- Like any other Python project, **split up the app into modules and packages** to keep the codebase organized and manageable.
- Using smaller modules and packages makes it easier to **reuse components and state** across the app
without introducing circular dependencies.
- Create **individual functions** to encapsulate units of functionality and **reuse them** where needed.
## /docs/advanced_onboarding/configuration.md
# Configuration
Reflex apps can be configured using a configuration file, environment variables, and command line arguments.
## Configuration File
Running `uv run reflex init` will create an `rxconfig.py` file in your root directory.
You can pass keyword arguments to the `Config` class to configure your app.
For example:
```python
# rxconfig.py
import reflex as rx
config = rx.Config(
app_name="my_app_name",
# Connect to your own database.
db_url="postgresql://user:password@localhost:5432/my_db",
# Change the frontend port.
frontend_port=3001,
)
```
See the [config reference](/docs/api-reference/config/) for all the parameters available.
## Environment Variables
Any config parameter can be overridden by setting an environment variable with the `REFLEX_` prefix and the parameter name in uppercase. Environment variables take precedence over values set in `rxconfig.py`.
For example, to override the `frontend_port` setting:
```bash
REFLEX_FRONTEND_PORT=3001 uv run reflex run
```
The [config reference](/docs/api-reference/config/) lists the environment variable corresponding to each config parameter. Reflex also honors additional environment variables that are not config parameters — see [environment variables](/docs/api-reference/environment-variables/) for those.
## Command Line Arguments
Finally, you can override the configuration file and environment variables by passing command line arguments to `uv run reflex run`.
```bash
uv run reflex run --frontend-port 3001
```
See the [CLI reference](/docs/api-reference/cli) for all the arguments available.
## Loading a .env File
Set `env_file` (or the `REFLEX_ENV_FILE` environment variable) to load environment variables from a dotenv-format file before the config is read. This requires the `python-dotenv` package to be installed.
```python
config = rx.Config(
app_name="my_app_name",
env_file=".env",
)
```
Multiple files can be passed separated by `os.pathsep` (`:` on Linux/macOS, `;` on Windows); when several files set the same variable, the first file in the list takes precedence. Values from an env file override variables already present in the environment.
Because the env file is loaded before config overrides are applied, it can set any `REFLEX_*` variable, e.g. `REFLEX_FRONTEND_PORT=3001`.
## The App Module
`app_name` tells Reflex where your app lives: by default it imports the module `<app_name>.<app_name>` (the layout created by `reflex init`) and expects it to define a module-level variable named `app`, an instance of `rx.App`.
Set `app_module_import` to load the app from a different module, e.g. a `src` layout or a package entry point:
```python
config = rx.Config(
app_name="my_app_name",
# Equivalent to `from mypkg.main import app`.
app_module_import="mypkg.main",
)
```
The imported module must still define `app` at module level.
## Ports, Hosts and URLs
- `frontend_port` (default `3000`) and `backend_port` (default `8000`) control which ports the frontend and backend listen on. In dev mode, if a port is taken, the next available port is used.
- `backend_host` (default `0.0.0.0`) is the address the backend server binds to.
- `api_url` (default `http://localhost:8000`) is the URL the user's **browser** uses to reach the backend. You typically don't need to set it: when `api_url` points at localhost, the frontend substitutes the domain the app was served from, so a backend reachable at the same address as the frontend (e.g. behind a reverse proxy or load balancer) is found automatically. Set `api_url` only when the backend is listening on a different address than the frontend, e.g. `https://api.example.com`.
- `deploy_url` (default `http://localhost:3000`) is the public URL where the **frontend** is hosted. Reflex uses it wherever an absolute frontend URL is needed — most notably for the links in the generated `sitemap.xml`. It is also the origin browsers will present when connecting to the backend, which matters for CORS (below).
## CORS
The backend only accepts cross-origin requests from origins listed in `cors_allowed_origins`. The default, `["*"]`, allows any origin — convenient in development, but in production restrict it to the origins your frontend is actually served from (typically the origin of `deploy_url`):
```python
config = rx.Config(
app_name="my_app_name",
api_url="https://api.example.com",
deploy_url="https://example.com",
cors_allowed_origins=["https://example.com"],
)
```
The setting applies to both regular HTTP endpoints and the WebSocket connection. As an environment variable, pass a comma-separated list:
```bash
REFLEX_CORS_ALLOWED_ORIGINS="https://example.com,https://www.example.com" uv run reflex run
```
## Path Prefixes
By default the frontend is served from the root of its domain and backend routes are mounted at the root of the backend server. Two settings change that, e.g. when the app shares a domain with other services behind a reverse proxy:
- `frontend_path` serves the frontend under a sub-path: `frontend_path="/app"` serves the frontend at `http://localhost:3000/app`.
- `backend_path` mounts all backend routes under a prefix: `backend_path="/api"` mounts the event WebSocket and the `/ping`, `/_upload`, `/_health`, and `/_all_routes` endpoints under `/api`. The prefix is automatically included in the backend URLs baked into the frontend. Routes are registered at startup, so changing it requires a full `reflex run` restart.
Both values are normalized to start with a `/`.
## Plugins
Plugins extend the Reflex compiler. Add plugin instances via the `plugins` parameter, and disable plugins that are enabled by default (like the sitemap plugin) with `disable_plugins`:
```python
config = rx.Config(
app_name="my_app_name",
plugins=[
rx.plugins.SitemapPlugin(),
rx.plugins.TailwindV4Plugin(),
],
# Or turn off a default-enabled plugin:
# disable_plugins=[rx.plugins.SitemapPlugin],
)
```
Plugins can also be specified in the environment as fully qualified import paths, separated by `:`. Plugins specified this way are instantiated without arguments, so plugins that require constructor arguments must be configured in `rxconfig.py`.
- `REFLEX_PLUGINS` **replaces** the `plugins` list from `rxconfig.py`.
- `REFLEX_EXTRA_PLUGINS` **appends** to the configured plugins, skipping any that are already configured or disabled.
- `REFLEX_DISABLE_PLUGINS` lists plugin classes to disable.
```bash
REFLEX_EXTRA_PLUGINS="reflex.plugins.SitemapPlugin" uv run reflex run
```
See the [plugins reference](/docs/api-reference/plugins/) for the available plugins and how to write your own.
## Customizable App Data Directory
The `REFLEX_DIR` environment variable can be set, which allows users to set the location where Reflex writes helper tools like Bun and NodeJS.
By default we use Platform specific directories:
On windows, `C:/Users/<username>/AppData/Local/reflex` is used.
On macOS, `~/Library/Application Support/reflex` is used.
On linux, `~/.local/share/reflex` is used.
## /docs/advanced_onboarding/how-reflex-works.md
# How Reflex Works
We'll use the following basic app that displays Github profile images as an example to explain the different parts of the architecture.
```python demo exec
import requests
import reflex as rx
class GithubState(rx.State):
url: str = "https://github.com/reflex-dev"
profile_image: str = "https://avatars.githubusercontent.com/u/104714959"
@rx.event
def set_profile(self, username: str):
if username == "":
return
try:
github_data = requests.get(
f"https://api.github.com/users/{username}"
).json()
except:
return
self.url = github_data["url"]
self.profile_image = github_data["avatar_url"]
def index():
return rx.hstack(
rx.link(
rx.avatar(src=GithubState.profile_image),
href=GithubState.url,
),
rx.input(
placeholder="Your Github username",
on_blur=GithubState.set_profile,
),
)
```
## The Reflex Architecture
Full-stack web apps are made up of a frontend and a backend. The frontend is the user interface, and is served as a web page that runs on the user's browser. The backend handles the logic and state management (such as databases and APIs), and is run on a server.
In traditional web development, these are usually two separate apps, and are often written in different frameworks or languages. For example, you may combine a Flask backend with a React frontend. With this approach, you have to maintain two separate apps and end up writing a lot of boilerplate code to connect the frontend and backend.
We wanted to simplify this process in Reflex by defining both the frontend and backend in a single codebase, while using Python for everything. Developers should only worry about their app's logic and not about the low-level implementation details.
### TLDR
Under the hood, Reflex apps compile down to a [React](https://react.dev) frontend app and a [FastAPI](https://github.com/tiangolo/fastapi) backend app. Only the UI is compiled to Javascript; all the app logic and state management stays in Python and is run on the server. Reflex uses [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) to send events from the frontend to the backend, and to send state updates from the backend to the frontend.
The diagram below provides a detailed overview of how a Reflex app works. We'll go through each part in more detail in the following sections.
```python eval
rx.el.a(
rx.image(
src="https://web.reflex-assets.dev/other/architecture.webp",
alt="Reflex app architecture diagram",
),
href="https://web.reflex-assets.dev/other/architecture.webp",
target="_blank",
)
```
```python eval
rx.box(height="1em")
```
## Frontend
We wanted Reflex apps to look and feel like a traditional web app to the end user, while still being easy to build and maintain for the developer. To do this, we built on top of mature and popular web technologies.
When you run `uv run reflex run`, Reflex compiles the frontend down to a single-page [Next.js](https://nextjs.org) app and serves it on a port (by default `3000`) that you can access in your browser.
The frontend's job is to reflect the app's state, and send events to the backend when the user interacts with the UI. No actual logic is run on the frontend.
### Components
Reflex frontends are built using components that can be composed together to create complex UIs. Instead of using a templating language that mixes HTML and Python, we just use Python functions to define the UI.
```python
def index():
return rx.hstack(
rx.link(
rx.avatar(src=GithubState.profile_image),
href=GithubState.url,
),
rx.input(
placeholder="Your Github username",
on_blur=GithubState.set_profile,
),
)
```
In our example app, we have components such as `rx.hstack`, `rx.avatar`, and `rx.input`. These components can have different **props** that affect their appearance and functionality - for example the `rx.input` component has a `placeholder` prop to display the default text.
We can make our components respond to user interactions with events such as `on_blur`, which we will discuss more below.
Under the hood, these components compile down to React components. For example, the above code compiles down to the following React code:
```jsx
<HStack>
<Link href={GithubState.url}>
<Avatar src={GithubState.profile_image}/>
</Link>
<Input
placeholder="Your Github username"
// This would actually be a websocket call to the backend.
onBlur={GithubState.set_profile}
>
</HStack>
```
Many of our core components are based on [Radix](https://radix-ui.com/), a popular React component library. We also have many other components for graphing, datatables, and more.
We chose React because it is a popular library with a huge ecosystem. Our goal isn't to recreate the web ecosystem, but to make it accessible to Python developers.
This also lets our users bring their own components if we don't have a component they need. Users can [wrap their own React components](/docs/wrapping-react/overview) and then [publish them](/docs/custom-components/overview) for others to use. Over time we will build out our [third party component ecosystem](/docs/custom-components/overview) so that users can easily find and use components that others have built.
### Styling
We wanted to make sure Reflex apps look good out of the box, while still giving developers full control over the appearance of their app.
We have a core [theming system](/docs/styling/theming) that lets you set high level styling options such as dark mode and accent color throughout your app to give it a unified look and feel.
Beyond this, Reflex components can be styled using the full power of CSS. We leverage the [Emotion](https://emotion.sh/docs/introduction) library to allow "CSS-in-Python" styling, so you can pass any CSS prop as a keyword argument to a component. This includes [responsive props](/docs/styling/responsive) by passing a list of values.
## Backend
Now let's look at how we added interactivity to our apps.
In Reflex only the frontend compiles to Javascript and runs on the user's browser, while all the state and logic stays in Python and is run on the server. When you run `uv run reflex run`, we start a FastAPI server (by default on port `8000`) that the frontend connects to through a websocket.
All the state and logic are defined within a `State` class.
```python
class GithubState(rx.State):
url: str = "https://github.com/reflex-dev"
profile_image: str = "https://avatars.githubusercontent.com/u/104714959"
def set_profile(self, username: str):
if username == "":
return
github_data = requests.get(f"https://api.github.com/users/{username}").json()
self.url = github_data["url"]
self.profile_image = github_data["avatar_url"]
```
The state is made up of **vars** and **event handlers**.
Vars are any values in your app that can change over time. They are defined as class attributes on your `State` class, and may be any Python type that can be serialized to JSON. In our example, `url` and `profile_image` are vars.
Event handlers are methods in your `State` class that are called when the user interacts with the UI. They are the only way that we can modify the vars in Reflex, and can be called in response to user actions, such as clicking a button or typing in a text box. In our example, `set_profile` is an event handler that updates the `url` and `profile_image` vars.
Since event handlers are run on the backend, you can use any Python library within them. In our example, we use the `requests` library to make an API call to Github to get the user's profile image.
## Event Processing
Now we get into the interesting part - how we handle events and state updates.
Normally when writing web apps, you have to write a lot of boilerplate code to connect the frontend and backend. With Reflex, you don't have to worry about that - we handle the communication between the frontend and backend for you. Developers just have to write their event handler logic, and when the vars are updated the UI is automatically updated.
You can refer to the diagram above for a visual representation of the process. Let's walk through it with our Github profile image example.
### Event Triggers
The user can interact with the UI in many ways, such as clicking a button, typing in a text box, or hovering over an element. In Reflex, we call these **event triggers**.
```python
rx.input(
placeholder="Your Github username",
on_blur=GithubState.set_profile,
)
```
In our example we bind the `on_blur` event trigger to the `set_profile` event handler. This means that when the user types in the input field and then clicks away, the `set_profile` event handler is called.
### Event Queue
On the frontend, we maintain an event queue of all pending events. An event consists of three major pieces of data:
- **client token**: Each client (browser tab) has a unique token to identify it. This let's the backend know which state to update.
- **event handler**: The event handler to run on the state.
- **arguments**: The arguments to pass to the event handler.
Let's assume I type my username "picklelo" into the input. In this example, our event would look something like this:
```json
{
"client_token": "abc123",
"event_handler": "GithubState.set_profile",
"arguments": ["picklelo"]
}
```
On the frontend, we maintain an event queue of all pending events.
When an event is triggered, it is added to the queue. We have a `processing` flag to make sure only one event is processed at a time. This ensures that the state is always consistent and there aren't any race conditions with two event handlers modifying the state at the same time.
```md alert info
# There are exceptions to this, such as [background events](/docs/events/background-events) which allow you to run events in the background without blocking the UI.
```
Once the event is ready to be processed, it is sent to the backend through a WebSocket connection.
### State Manager
Once the event is received, it is processed on the backend.
Reflex uses a **state manager** which maintains a mapping between client tokens and their state. By default, the state manager is just an in-memory dictionary, but it can be extended to use a database or cache. In production we use Redis as our state manager.
### Event Handling
Once we have the user's state, the next step is to run the event handler with the arguments.
```python
def set_profile(self, username: str):
if username == "":
return
github_data = requests.get(f"https://api.github.com/users/{username}").json()
self.url = github_data["url"]
self.profile_image = github_data["avatar_url"]
```
In our example, the `set_profile` event handler is run on the user's state. This makes an API call to Github to get the user's profile image, and then updates the state's `url` and `profile_image` vars.
### State Updates
Every time an event handler returns (or [yields](/docs/events/yield-events)), we save the state in the state manager and send the **state updates** to the frontend to update the UI.
To maintain performance as your state grows, internally Reflex keeps track of vars that were updated during the event handler (**dirty vars**). When the event handler is done processing, we find all the dirty vars and create a state update to send to the frontend.
In our case, the state update may look something like this:
```json
{
"url": "https://github.com/picklelo",
"profile_image": "https://avatars.githubusercontent.com/u/104714959"
}
```
We store the new state in our state manager, and then send the state update to the frontend. The frontend then updates the UI to reflect the new state. In our example, the new Github profile image is displayed.
## /docs/ai_builder/apis.md
---
tags: AI Builder
description: Connect a Reflex Build app to an external HTTP API and handle credentials, responses, and failures safely.
---
# Call an External API
Use a direct API call when the service you need has an HTTP API but no suitable built-in or custom integration.
Before building against it, find the service's current documentation and identify:
- The base URL and required endpoints.
- The authentication method.
- The request and response formats.
- Rate limits, timeouts, and documented errors.
## Store credentials
Add API keys and tokens to [Secrets](/docs/ai/features/secrets/). Refer to each credential by its environment-variable name in the prompt; never include the value.
```text
Use the BILLING_API_TOKEN environment variable to authenticate server-side
requests to https://api.example.com/v1. Do not expose or log the token.
```
OAuth flows usually require more than a static secret. Describe the provider's authorization flow, callback URL, and required scopes, or configure an appropriate integration first.
## Describe the request
Give the agent the endpoint, trigger, inputs, expected result, and failure behavior:
```text
When the user submits the form, POST the validated fields to /customers.
Use a 10-second timeout. Show a useful error for authentication, rate-limit,
validation, and server failures, and do not retry validation errors.
```
The agent can use a standard HTTP client or add a supported package when the API needs a specific SDK. See [Install External Packages](/docs/ai/features/installing-external-packages/).
## Review and test
- Keep credentials and privileged calls in backend code.
- Validate user-controlled values before sending them.
- Do not log tokens, passwords, or sensitive response data.
- Test success, timeout, rate-limit, authentication, and malformed-response cases.
- Confirm the integration against test data before using production credentials.
## Related
- [Webhooks](/docs/ai/webhooks/) — send event payloads to an incoming webhook.
- [Custom Integration](/docs/ai/features/integration-shortcut/#custom-integration) — save reusable service instructions and credentials at project level.
- [Python Libraries](/docs/ai/python-libraries/) — guide the agent when an API uses a specialized SDK.
## /docs/ai_builder/app_lifecycle/copy_app.md
# Copy App
```python exec
import reflex as rx
```
Copying creates an independent app from an existing Reflex Build app. Use it to try a significant change without altering the original or to reuse a working starting point.
## Copy an App
1. Open the menu next to **Deploy** and select **Copy**. You can also use the copy action in **Settings**.
2. Wait for the copied app to open in the current project.
3. Rename it so it is easy to distinguish from the original.
```python eval
rx.image(
src="https://web.reflex-assets.dev/docs-preview/ai-builder/platform/app_copy_action.webp",
alt="The Copy action in the menu next to Deploy",
class_name="rounded-md h-auto mb-4",
border=f"0.81px solid {rx.color('slate', 5)}",
)
```
The copy includes the app's code, state, configuration, and dependencies. Changes to the copied app do not change the original app.
Review integrations, secrets, and visibility before sharing or deploying the copy. Credentials and access requirements may need to be confirmed separately.
## /docs/ai_builder/app_lifecycle/deploy_app.md
# Deploy App
Deploying publishes the current app to Reflex Cloud or to a connected cloud provider.
```python exec
import reflex as rx
```
## Deploy from the Builder
1. Open the app and wait for the current generation to finish.
2. Select **Deploy** in the upper-right corner.
3. Review the workspace resource check and deployment configuration.
4. Confirm the deployment.
```python eval
rx.image(
src="https://web.reflex-assets.dev/docs-preview/hosting/builder_deploy_dialog.webp",
alt="Deploy dialog with hosting provider choices in Reflex Build",
class_name="rounded-md h-auto mb-4",
border=f"0.81px solid {rx.color('slate', 5)}",
)
```
If the app needs more memory than the active workspace provides, the dialog recommends a larger workspace before deployment. Upgrading the workspace can prevent build failures; deploy anyway only when you understand the resource requirement.
Depending on your plan and organization configuration, the deployment flow can include:
- App name and generated hostname.
- Hosting provider.
- Region and machine size.
- App secrets and environment variables.
- A deployment approval request.
## Project Approvals
When **Require approval to deploy** is enabled for the project, the deployment waits in the **Approvals** queue. It runs automatically after a member with **Approve deployments** permission approves it. See [Project Approvals](/docs/ai/organization/deployment-approvals/).
## After Deployment
Open **Deployments** in the project sidebar to view status, resource allocation, logs, history, domains, and settings. See the [Reflex Cloud quick start](/docs/hosting/deploy-quick-start/) for the current dashboard and CLI workflows.
## /docs/ai_builder/app_lifecycle/download_app.md
# Download App
```python exec
import reflex as rx
```
Download creates a one-time source export for local development or self-hosting.
## Download the Source
1. Open the menu next to **Deploy**.
2. Select **Download**. The action is also available from app **Settings**.
3. Save and extract the generated archive.
```python eval
rx.image(
src="https://web.reflex-assets.dev/docs-preview/ai-builder/platform/app_download_action.webp",
alt="The Download action in the menu next to Deploy",
class_name="rounded-md h-auto mb-4",
border=f"0.81px solid {rx.color('slate', 5)}",
)
```
The archive contains the app source, assets, dependency manifests, and Reflex configuration needed to continue development.
Secrets, integration credentials, and other protected project values are not a portable part of the source export. Configure them separately in the destination environment and never commit them to source control.
For ongoing source control, [connect this app to GitHub](/docs/ai/features/connect-to-github/) to push and pull its code. To start Reflex Build work from an existing GitHub, GitLab, Bitbucket, Azure DevOps, or other Git repository, connect a [Project Repository](/docs/ai/features/connect-to-git-providers/).
## /docs/ai_builder/app_lifecycle/fork_app.md
# Fork App
Forking creates an independent app from a public app or template that you can view but do not own. Use **Copy** instead when the source app already belongs to you.
## Fork a Public App
Before you begin, sign in and select or create the project that should contain the new app. You need permission to create apps in that project.
1. Open the public app or template you want to use.
2. Select **Fork** in the upper-right corner.
3. Enter a name for the new app.
4. Choose its visibility when that option is available on your plan.
5. Select **Fork App** and wait for the new app to open.
The fork contains its own copy of the source files. Changes to it do not affect the original app, and changes to the original do not update the fork.
Review integrations, secrets, repository connections, and visibility before continuing development or deploying. Access and credentials from the source app are not automatically available to every fork.
## Fork or Copy
- Use **Fork** for another user's public app or for a template.
- Use [**Copy**](/docs/ai/app-lifecycle/copy-app/) for an app you already own.
Your plan can limit whether you may fork a public app that is not a template. If **Fork** is unavailable, check the app's visibility and your plan.
## /docs/ai_builder/app_lifecycle/general.md
# General App Settings
Open the app's more menu and select **Settings** to manage the app itself.
## General Information
The Settings page shows the app name and ID. Rename an app when its purpose changes, and use the ID when support or another Reflex service asks for the exact app.
## Visibility
Set **App Visibility** to:
- **Private** — only people with project access can open it.
- **Public** — the app can be shared with a read-only link.
Review the app for credentials, private data, and unfinished content before making it public.
## Reuse and Export
Settings links to the app's reuse and export workflows:
- [Save as a template](/docs/ai/overview/templates/)
- [Copy the app](/docs/ai/app-lifecycle/copy-app/)
- [Download the source](/docs/ai/app-lifecycle/download-app/)
All three actions are available in **Settings**. The menu next to **Deploy** also provides shortcuts for **Copy** and **Download**.
## Delete the App
The delete action permanently removes the app. Confirm that you selected the correct app and copy or download anything you need before deleting it.
## /docs/ai_builder/app_lifecycle/share_app.md
# Share App
Sharing creates a link to a read-only view of an app generation. It is useful for feedback and demos before a production deployment.
## Before You Share
The **Share** action is available for public apps. Open **Settings** and review **App Visibility** first:
- **Public** apps can be shared by link.
- **Private** apps remain restricted to people with access to the project.
Review the app for secrets, personal data, and unfinished content before changing its visibility.
## Share a Public App
1. Open the menu next to **Deploy**.
2. Select **Share**.
3. Copy the generated link and send it to the intended reviewers.
Recipients can view and interact with the shared app preview but cannot edit the source app. Use deployment instead when you need a production URL and production configuration.
## /docs/ai_builder/features/agent_toolkit.md
# Agent Toolkit
The **Agent Toolkit** brings together the current Reflex documentation, the hosted Reflex MCP server, and Reflex Agent Skills so local coding assistants can work with the same guidance as Reflex Build.
Agent Toolkit configures assistants that run outside Reflex Build. For web search, Python execution, and image generation used by the Builder agent inside an app, see [Agent Tools](/docs/ai/features/agent-tools/).
```python exec
import reflex as rx
```
```python eval
rx.image(
src="https://web.reflex-assets.dev/docs-preview/ai-builder/platform/agent_toolkit.webp",
alt="Agent Toolkit MCP and coding assistant setup options",
class_name="rounded-md h-auto mb-4",
border=f"0.81px solid {rx.color('slate', 5)}",
)
```
Open **Agent Toolkit** in the project sidebar to find setup instructions for supported coding assistants.
```md alert info
# Enterprise access
The hosted Reflex MCP server currently requires an Enterprise organization. [Contact the Reflex team](https://reflex.dev/pricing/) if the MCP connection is unavailable for your organization.
```
## MCP
Connect an MCP-compatible assistant to:
```text
https://build.reflex.dev/mcp
```
The page provides client-specific instructions for Claude Code, Claude Desktop, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode, and Windsurf. Authentication opens in your browser when the client first connects.
See [MCP installation](/docs/ai/integrations/mcp-installation/) for the commands and configuration for each client.
## Reflex Agent Skills
Skills add reusable Reflex-specific workflows to a local coding assistant. The Agent Toolkit shows the recommended installation method for supported tools and a manual `AGENTS.md` option.
Use MCP for current structured documentation and component context. Use Skills for repeatable setup, development, validation, and debugging behavior. They can be used together.
For the complete onboarding workflow, see the [Agent Toolkit guide](/docs/ai/integrations/agent-toolkit/).
## /docs/ai_builder/features/agent_tools.md
---
tags: AI Builder
description: How the Reflex Build agent uses web search, Python, and image generation while building an app.
---
# Agent Tools
Inside an app's Build conversation, the agent can search the web, run Python, and generate images. These tools appear in generation progress so you can see how the agent is working.
For MCP and Reflex Agent Skills used by local coding assistants outside the Builder, see [Agent Toolkit](/docs/ai/features/agent-toolkit/).
## Web Search
The agent can search the web when a request needs current information, package documentation, or external implementation details. The workspace shows the search queries it uses.
Tell the agent what kind of source or information to prioritize:
```text
Check the current Stripe Python SDK documentation and use the supported
Checkout Session flow. Do not use an unofficial package.
```
Review important facts before shipping. Search results provide context for the build, but they do not replace validation against an authoritative source.
## Run Python
The agent can run Python on demand while building or debugging. It can use the output to:
- Check a script or calculation before adding it to the app.
- Inspect and transform sample data.
- Verify that a package imports successfully.
- Reproduce an error or validate a proposed fix.
- Run tests and other project commands.
Ask for the result you want verified rather than prescribing every command:
```text
Test the CSV transformation with the attached sample before wiring it into
the upload workflow. Show empty rows and malformed dates as validation errors.
```
Code run during generation is part of the build process. It does not automatically become a user-facing app feature unless the agent adds the corresponding code to the project.
## Generate Images
Ask the agent to generate an image when the app needs an original illustration, background, placeholder, or other visual asset. Generated images appear alongside the conversation and app changes.
Describe the intended use, composition, and constraints:
```text
Generate a wide, abstract hero background for a financial dashboard. Use navy
and teal, leave the left third visually quiet for heading text, and do not add
words, logos, or interface elements.
```
After generation:
1. Review the image at its intended size in **Preview**.
2. Confirm that text remains legible over it.
3. Check mobile cropping and loading behavior.
4. Ask for a focused revision if the composition or style is wrong.
To provide an existing image as design context instead, see [Images and Attachments](/docs/ai/features/image-as-prompt/).
## Security and Privacy
- Do not put passwords, API keys, private tokens, or production credentials in a prompt.
- Use [Secrets](/docs/ai/features/secrets/) or an integration form for credentials.
- Do not ask the agent to search for or reproduce private data.
- Review generated assets and third-party information before publishing them.
## Related
- [Generation Controls & Collaboration](/docs/ai/features/generation-controls/)
- [Install External Packages](/docs/ai/features/installing-external-packages/)
- [Add Integrations](/docs/ai/features/integration-shortcut/)
- [Secrets](/docs/ai/features/secrets/)
## /docs/ai_builder/features/automated_testing.md
# Testing
Reflex Build can generate and run tests from plain-language descriptions. Use tests to verify important app behavior after generation and before sharing or deploying.
```python exec
import reflex as rx
```
## Create a Test
1. Select **Testing** in the app workspace navigation.
2. Select **Add Test**.
3. Choose a test type:
- **Unit test** for isolated state, calculations, validation, and other logic.
- **Browser test** for user workflows that interact with the rendered app.
4. Describe the behavior and expected result in plain language.
5. Select **Generate**, review the generated test, and run it.
For example:
```text
Open the sign-in page, submit an invalid email, and verify that the form shows
an error without navigating. Then enter valid credentials and verify that the
dashboard opens.
```
## Run and Review Tests
```python eval
rx.image(
src="https://web.reflex-assets.dev/docs-preview/ai-builder/platform/testing_browser.webp",
alt="Passing tests in the Reflex Build Testing panel",
class_name="rounded-md h-auto mb-4",
border=f"0.81px solid {rx.color('slate', 5)}",
)
```
The Testing panel lets you search existing tests, run an individual test, or use **Run All**. Review the status and output of a failed test before asking the agent to change the app.
A failed test can indicate a problem in the app, an outdated expectation, or an ambiguous test description. Check the tested workflow in **Preview** before deciding which one to change.
## What to Test
Prioritize behavior that would block a user:
- Navigation and authentication.
- Forms, validation, and submission.
- Create, edit, and delete workflows.
- Filters and search.
- Data loading, empty states, and error states.
- Integrations and other external-service boundaries.
Keep each test focused on one workflow. Small tests are easier to understand and maintain than one test that tries to cover the whole app.
## /docs/ai_builder/features/connect_to_git_providers.md
---
tags: DevTools
description: Connect a project repository from GitHub, GitLab, Bitbucket, Azure DevOps, or another Git server.
---
# Project Repositories
```python exec
import reflex as rx
```
Connect a Git repository at the project level so Reflex Build can clone the code before the agent starts working. The current Repos interface supports GitHub, GitLab, Bitbucket, Azure DevOps, self-hosted Git servers, and other HTTPS Git remotes.
Use this workflow to start from an existing repository by providing its URL and a personal access token. To create and synchronize a GitHub repository for an individual Builder app through the `reflex-build` GitHub App, see [Connecting to GitHub](/docs/ai/features/connect-to-github/).
## Before You Connect
```python eval
rx.image(
src="https://web.reflex-assets.dev/docs-preview/ai-builder/platform/repos.webp",
alt="Connected project repositories from several Git providers",
class_name="rounded-md h-auto mb-4",
border=f"0.81px solid {rx.color('slate', 5)}",
)
```
Create a credential supported by your Git provider and grant it only the repository access required by this connection. The Repos page provides provider-specific instructions. For example, use a fine-grained GitHub token limited to the selected repository with **Contents: Read and write**.
Use the repository's HTTPS clone URL:
```text
https://gitlab.com/example/team-app.git
```
## Connect the Repository
1. Open **Repos** in the project sidebar.
2. Select the provider tab and follow its token instructions.
3. Select **Connect Repository**.
4. Enter the repository URL and personal access token.
5. Confirm the connection.
The repository is cloned before the agent starts, so the first prompt can work from the existing files rather than generating an unrelated app.
## Security
- Prefer a dedicated, least-privilege credential over a broad account token.
- Restrict the token to the required repository and permissions.
- Rotate or revoke the token when access changes.
- Do not paste the token into a prompt or commit it to the repository.
Repository connections are controlled by project permissions. If **Connect Repository** is unavailable, ask a project admin to check your role and plan.
## /docs/ai_builder/features/connect_to_github.md
---
tags: DevTools
description: Connect Reflex Build to GitHub to version your app, sync code locally, and revert to previous checkpoints.
---
# Connecting to GitHub
```python exec
import reflex as rx
```
Use this workflow to create and synchronize a GitHub repository for an individual Builder app through the `reflex-build` GitHub App. It gives the app a version history, lets you edit the code locally, and records each push as an ordinary Git commit.
```python eval
rx.el.div(
rx.image(
src="https://web.reflex-assets.dev/docs-preview/ai-builder/platform/git_integration_connect.webp",
alt="Connecting a Reflex Build app to GitHub",
class_name="rounded-md h-auto mb-4",
border=f"0.81px solid {rx.color('slate', 5)}",
),
)
```
The GitHub integration allows you to:
- Save your app progress as commits you control
- Work on your code locally and push your local changes back to Reflex Build
- Pull changes made elsewhere back into the editor
- Revert to any previous version of your app
## How the Connection Works
Reflex Build connects to GitHub through the `reflex-build` GitHub App using OAuth. The first time you connect, GitHub prompts you to install the app and authorize access. It then links your GitHub account to Reflex Build, which stores an encrypted access token and uses it to create repositories and push commits for you.
Pushes, pulls, and reverts use short-lived GitHub App installation tokens that Reflex Build requests as needed. Your personal OAuth token identifies you and refreshes access. Both are encrypted at rest.
## Team and Multi-User Access
**Each user connects their own GitHub account.** Connections are stored per user; there is no shared or organization-level token. If one teammate connects GitHub, another teammate who wants to push or pull has to run the same connect flow and authorize the `reflex-build` app with their own account.
Commits are attributed to the GitHub user who made them, and each person's access to a repository follows their own GitHub permissions.
The GitHub App installation is separate from per-user authorization. An organization owner can install the `reflex-build` app once and choose which repositories it may access, which controls what is reachable from Reflex Build. Each user still authorizes the app once to link their own account before they can push or pull.
## Where Repositories Are Created
When you connect a Build app to GitHub, Reflex Build creates a Git repository for it:
- If the `reflex-build` app is installed on a **GitHub organization**, the repository is created inside that organization.
- Otherwise, the repository is created under your **personal GitHub account**.
New repositories use the `main` branch and are private, unless you make them public when connecting.
## Pushing and Pulling Changes
The GitHub popover in the editor syncs in both directions:
- **Push**: commit the current state of your app and push it to GitHub.
- **Pull**: fetch the latest commits from GitHub and update the files in the editor.
- **Switch branch**: check out a different branch and sync its files into the editor.
You can also clone the repository, edit it locally, and push your changes back.
Before switching branches or pulling remote work:
1. Finish or review the active generation.
2. Save any manual edits.
3. Check the current branch and pending changes in the Git controls.
4. Pull the latest remote changes before starting another overlapping task.
If a teammate is changing the same app, coordinate the affected work and avoid overlapping generations. See [Generation Controls & Collaboration](/docs/ai/features/generation-controls/).
## GitHub Commit History
Use commit history to review changes and return the app to an earlier version when needed. Check the affected files before reverting so you do not discard newer work that should be preserved.
## Other Git Providers
To connect a repository hosted somewhere other than GitHub, such as GitLab, Bitbucket, or a self-hosted Git server, use the generic Git connection instead. See [Connecting to Git Providers](/docs/ai/features/connect-to-git-providers/) for details.
## Requirements
Git integration is available on plans that include the Git connection feature. If your plan does not include it, connecting will prompt you to upgrade.
## /docs/ai_builder/features/design_systems.md
# Design Systems
Design Systems give Reflex Build reusable visual guidelines for every app in a project. Define colors, typography, spacing, component styles, and other brand rules once, then let the agent apply them as it creates and updates your apps.
```python exec
import reflex as rx
```
## Open Design Systems
```python eval
rx.image(
src="https://web.reflex-assets.dev/docs-preview/ai-builder/platform/design_systems.webp",
alt="Saved and example design systems in Reflex Build",
class_name="rounded-md h-auto mb-4",
border=f"0.81px solid {rx.color('slate', 5)}",
)
```
You can access Design Systems in two places:
- In your project, select **Design Systems** in the sidebar to create and manage the project's design systems.
- In the new-app prompt box, open the **Design System** selector to choose an existing design system or create one without leaving the builder.
Design systems belong to the project, so every app in that project can reuse them.
## Create a Design System
From **Design Systems** in the project sidebar, select **Create new**. Enter a name and provide at least one source for the design:
- **Guidelines**: Describe the visual direction in plain language.
- **Reference website**: Enter a public website URL. Reflex captures a screenshot of the page and uses its visual language as a reference.
- **Reference file**: Upload a PDF or image containing a brand guide, style guide, screenshot, or mockup.
You can combine written guidelines with a website or uploaded file. Select **Generate** to create and save the design system. The new design system becomes active automatically.
For example:
```text
Use a warm, editorial style with cream backgrounds, dark green text,
serif headings, compact navigation, and orange accents for primary actions.
Keep cards flat with thin borders and use generous spacing between sections.
```
### Supported Reference Files
Reflex accepts one reference file up to 20 MB in any of these formats:
- PDF
- PNG
- JPG or JPEG
- WebP
## Start From an Example
The **Examples** section includes ready-made design systems such as Minimal, Modern, Material, Carbon, Neobrutalism, and Glassmorphism. Select **Add Style** on an example to add it to the project and make it active.
Examples are useful as a starting point. After adding one, edit its saved Markdown instructions to match your brand more closely.
## Select the Active Design System
Enable **Auto-enable** next to a saved design system to make it active for subsequent Reflex Build requests in the project. You can also select or create a design system from the new-app prompt box before generating an app.
Only one design system can be active at a time. Activating, creating, or adding another design system automatically deactivates the current one. Turn off the active design system if you want to build without design-system guidance.
The active design system also guides later updates to the project's apps. You can still provide page-specific requirements in your prompt:
```text
Use the active design system, but make this checkout page more compact
and reserve the accent color for the final purchase action.
```
## Edit or Delete a Design System
From **Design Systems** in the project sidebar, open the menu next to a saved design system.
- Select **Edit** to change its name or update the Markdown instructions that the agent follows.
- Select **Delete** to remove it from the project.
Editing the Markdown is useful when you need exact tokens or component rules:
```markdown
## Buttons
- Primary buttons use `#0F62FE` with white text.
- Use a 4 px corner radius.
- Button labels use 14 px semibold text.
- Destructive actions use `#DA1E28`.
```
## Best Practices
- Give each design system a descriptive name, such as `Marketing Site` or `Internal Admin Tools`.
- Describe concrete choices such as colors, typefaces, spacing, borders, and component behavior instead of asking for a design that is only "modern" or "clean."
- Use a public, visually representative page when supplying a reference website.
- Upload a focused brand guide or screenshot that clearly shows the styles you want the agent to reproduce.
- Review the saved Markdown and add any non-negotiable accessibility or brand requirements.
- Keep one design system active while building a consistent group of apps, and switch it when the project needs a different visual direction.
## /docs/ai_builder/features/editor_modes.md
# Code and Review
```python exec
import reflex as rx
```
Use **Review mode** to point out visual changes in the running app. Use **Code** to inspect or edit the generated source. After either workflow, return to **Preview** and test the affected behavior.
## Annotate the app in Review mode
```python eval
rx.image(
src="https://web.reflex-assets.dev/docs-preview/ai-builder/platform/review_mode.webp",
alt="An annotation and comment ready to send from Review mode",
class_name="rounded-md h-auto mb-4",
border=f"0.81px solid {rx.color('slate', 5)}",
)
```
Review mode turns comments drawn on the preview into a prompt for the agent:
1. At desktop width, let the current generation finish, then open the affected route in **Preview**.
2. Select **Review mode** and wait for the captured page to load.
3. Draw around the area you want to change and add a concise comment.
4. Add more annotations on the same route, or switch routes and annotate those pages.
5. Select **Send review** to send the annotations and marked screenshots to the agent.
Each comment should say what is wrong and what the result should be. Use a normal chat prompt instead when the feedback is not tied to a specific part of the interface.
You need edit access to send a review. If another session is generating or holds the app's edit lock, wait until it finishes.
## Inspect or edit the source in Code
Open **Code** to browse and search the app's files, inspect generated diffs, or make a precise manual edit. The workspace also provides Git controls and **Terminal** and **Debug** panels.
Your plan and app access determine whether the editor is writable. See [Code Workspace](/docs/ai/features/file-tree/) for editing, file operations, diffs, and file locking.
## Choose the right workflow
- Use **Review mode** for feedback such as spacing, alignment, missing states, or a change to one visible component.
- Use **Code** when you need to understand the implementation, inspect a diff, or make a small source-level change.
- Use **Preview** after every meaningful change to test the actual workflow, including loading, empty, error, validation, and responsive states.
## Related
- [Generation Controls & Collaboration](/docs/ai/features/generation-controls/) — guide work without overlapping requests.
- [Planning](/docs/ai/features/planning/) — review the intended work before and during generation.
- [Testing](/docs/ai/features/automated-testing/) — verify the resulting behavior.
- [Restore Checkpoint](/docs/ai/features/restore-checkpoint/) — return the app to an earlier generated state.
## /docs/ai_builder/features/file_tree.md
---
tags: DevTools
description: Browse, compare, lock, and edit generated app files in the Code workspace.
---
# Code Workspace
```python exec
import reflex as rx
```
Open **Code** in an app to work directly with its generated source. Use it when you need more detail than Preview or the agent's summary provides.
## Find and inspect files
```python eval
rx.image(
src="https://web.reflex-assets.dev/docs-preview/ai-builder/platform/code_workspace.webp",
alt="The searchable file tree in the Code workspace",
class_name="rounded-md h-auto mb-4",
border=f"0.81px solid {rx.color('slate', 5)}",
)
```
Use the file tree and search to find a path, then select it to open the editor. Changed-file indicators and diff counts show where a generation added, removed, or modified code. Open the diff view to compare the generated change before continuing.
The **Terminal** and **Debug** panels help you inspect the running app and diagnose failures. Git controls show the connected repository workflow when the app uses one.
## Edit files
Manual code editing is available on paid plans and requires edit access to the app:
1. Wait for the current generation to finish.
2. Open a file and make the change.
3. Select **Save**, or press `Cmd+S` on macOS or `Ctrl+S` on Windows and Linux.
4. Return to **Preview** and test the affected workflow.
Depending on your access, the file tree also lets you create, rename, delete, and upload files. These operations change the app source, so check the selected path before confirming them.
## Lock files
```python eval
rx.image(
src="https://web.reflex-assets.dev/docs-preview/ai-builder/platform/file_locking.webp",
alt="The Lock file action in the Code workspace file tree",
class_name="rounded-md h-auto mb-4",
border=f"0.81px solid {rx.color('slate', 5)}",
)
```
Lock a file when the agent must preserve your manual implementation during later generations. The agent skips locked files until you unlock them.
Use locks sparingly. A lock can prevent the agent from completing a change that depends on that file, so unlock it when the protected implementation no longer needs to be preserved.
For work outside Builder, connect a [Git repository](/docs/ai/features/connect-to-git-providers/) or [download the app](/docs/ai/app-lifecycle/download-app/). Avoid editing the same files in two places at once.
## Related
- [Code and Review](/docs/ai/features/editor-modes/) — choose between source-level work and annotated visual feedback.
- [Generation Controls & Collaboration](/docs/ai/features/generation-controls/) — understand app edit locks and concurrent work.
- [Files](/docs/ai/files/) — attach documents and structured data to a prompt.
## /docs/ai_builder/features/generation_controls.md
---
tags: AI Builder
description: Guide an active Reflex Build generation and work safely with teammates.
---
# Generation Controls & Collaboration
Reflex Build lets you refine a request while the agent works and avoid overlapping changes from another session.
## Queue Follow-Up Instructions
You do not have to wait for the current generation to finish before adding context. Send another message while the agent is working to queue a follow-up instruction. The agent picks it up at its next step.
Use queued messages for small corrections or missing constraints:
```text
Keep the current desktop layout. Make the new table responsive below 768 px
and do not change the existing filters.
```
Avoid queueing several competing changes at once. If the direction has changed substantially, let the current step finish, review the result, and send one consolidated follow-up.
## Follow Generation Progress
The workspace shows the agent's current activity, including planning, web searches, workspace operations, tests, and generated screenshots. A screenshot includes the page route it represents, which helps distinguish results from multi-page apps.
You can continue browsing **Preview** and **Plan** while the work runs. Review the latest result before sending another broad request so you do not accidentally reverse a useful change.
## Work with Teammates
When an app is already being edited in another session, Reflex Build locks it against overlapping edits. Wait for the active generation to finish and the edit lock to clear before starting work in another session. Then, before starting a large generation:
1. Check whether someone else is editing the affected area.
2. Keep the request scoped to a clear workflow.
3. State what must remain unchanged.
4. Review the latest preview and test results before beginning another overlapping generation.
Project roles determine who can open, edit, and administer an app. See [Roles & Permissions](/docs/ai/organization/roles-and-permissions/).
## Related
- [Planning](/docs/ai/features/planning/) — review and adjust work before or during generation.
- [Code and Review](/docs/ai/features/editor-modes/) — inspect source changes or send annotated visual feedback.
- [Code Workspace](/docs/ai/features/file-tree/) — inspect, compare, lock, or edit generated files.
- [Restore Checkpoint](/docs/ai/features/restore-checkpoint/) — return the app to an earlier generated state.
## /docs/ai_builder/features/image_as_prompt.md
---
tags: AI Builder
description: Give the Reflex Build agent focused image, document, and data context with clear instructions about how to use each attachment.
---
# Images and Attachments
```python exec
import reflex as rx
```
Attach screenshots, documents, or sample data when the agent needs visual or file-based context. You can select the attachment control, drag a file into chat, or paste an image from the clipboard.
## Use an Image as a Reference
An image is often the clearest way to communicate a layout, visual hierarchy, or specific UI issue:
```python eval
rx.el.div(
rx.image(
src="https://web.reflex-assets.dev/docs-preview/ai-builder/platform/image_prompt_attachment.webp",
alt="Using an image as a prompt in Reflex Build",
class_name="rounded-md h-auto mb-4",
border=f"0.81px solid {rx.color('slate', 5)}",
),
class_name="w-full flex flex-col rounded-md",
)
```
Explain what the agent should copy and what it should ignore:
```text
Use the attached screenshot as a layout reference. Match its navigation width,
card hierarchy, and spacing, but keep the current brand colors and content.
```
For a screenshot of an existing app, include the relevant route or page name. Tightly crop references when only one component matters.
## Attach Files
Attach no more data than the task requires; smaller, focused files are faster for the agent to interpret. Use the format-specific pages for current upload limits:
- [Files](/docs/ai/files/) for supported document and data formats.
- [Images](/docs/ai/images/) for supported image formats and app assets.
## Generate a New Image
If the app needs an original visual rather than a reference, ask the agent to generate one. Generated images appear alongside the conversation and app changes. See [Agent Tools](/docs/ai/features/agent-tools/).
## /docs/ai_builder/features/installing_external_packages.md
---
tags: AI Builder
description: Install a supported Python dependency through the Reflex Build agent or by editing the app's requirements file.
---
# Install External Packages
```python exec
import reflex as rx
```
Add a Python package when the app needs a library that is not already in its environment.
You can install one in either of these ways:
1. Ask the agent to add the package while implementing a feature.
2. Add the package to `requirements.txt` in **Code**, then save the file.
## Ask the agent
Describe the outcome and name the package when you already know which one to use:
```text
Use the requests package to call this REST endpoint. Add it to the app's
dependencies and handle timeouts and non-success responses.
```
```python eval
rx.el.div(
rx.image(
src="https://web.reflex-assets.dev/docs-preview/ai-builder/platform/agent_package_install.webp",
alt="Installing external packages via the chat interface",
class_name="rounded-md h-auto mb-4",
border=f"0.81px solid {rx.color('slate', 5)}",
),
class_name="w-full flex flex-col rounded-md",
)
```
## Edit `requirements.txt`
Open `requirements.txt` in **Code**, add the package on its own line, and save. Reflex installs the dependency and recompiles the app.
```python eval
rx.el.div(
rx.image(
src="https://web.reflex-assets.dev/docs-preview/ai-builder/platform/requirements_package_added.webp",
alt="Installing external packages via requirements.txt",
class_name="rounded-md h-auto mb-4",
border=f"0.81px solid {rx.color('slate', 5)}",
),
class_name="w-full flex flex-col rounded-md",
)
```
Pin or constrain dependencies used by a deployed app so future builds remain repeatable. Update those versions deliberately after reviewing compatibility. After installation, check **Preview** and the build output for import or compatibility errors.
Some packages are too large or require system dependencies that are unavailable in the Builder environment. When that happens, use a hosted API or another supported service instead.
## Related
- [Python Libraries](/docs/ai/python-libraries/) — give the agent reusable guidance for a specialized package.
- [Call an External API](/docs/ai/apis/) — connect to a hosted service instead of installing a package.
## /docs/ai_builder/features/integration_shortcut.md
---
tags: AI Builder
description: Add built-in or custom integrations to a Reflex project and make them available to Builder apps.
---
# Integrations
```python exec
import reflex as rx
```
Integrations give Reflex Build the context and credentials it needs to work with databases, AI models, authentication providers, APIs, and other services.
Manage the project's integrations from **Integrations** in the project settings. Inside an app, open **Integrations** to review what is available to that app.
## Adding an integration
```python eval
rx.image(
src="https://web.reflex-assets.dev/docs-preview/ai-builder/platform/integrations_gallery.webp",
alt="The searchable integrations gallery in Reflex Build",
class_name="rounded-md h-auto mb-4",
border=f"0.81px solid {rx.color('slate', 5)}",
)
```
1. Open the project's **Integrations** page.
2. Select **Add Integration**.
3. Browse or search the gallery, then open the integration you need.
4. Complete its configuration and secret fields.
5. Return to the app and enable the integration when it is not already available there.
Builder can then use the integration's instructions while generating or updating the app.
```md alert warning
# Keep credentials out of prompts
Enter secrets only in the integration's secret fields. Do not paste API keys, tokens, passwords, or private connection strings into chat, knowledge, source code, or screenshots.
```
## Custom integration
Use **Custom Integration** when the service or internal tool you need is not represented by a built-in integration.
From **Add Integration**, find **Custom Integration** and select **Create Custom Integration**. The form asks for:
- **Name**: the service or tool name.
- **Description**: what it is for and when Builder should use it.
- **Knowledge / Context**: instructions Builder needs in order to use the service.
- [**Secrets**](/docs/ai/features/secrets/) (optional): key-value credentials or other sensitive configuration.
Useful knowledge/context includes:
- The service's purpose and base URL.
- The authentication scheme, referring to secret keys by name rather than including their values.
- Required packages and imports.
- Common operations, request shapes, and response formats.
- Error handling, rate limits, and usage constraints.
- A short safe example when the API is unusual.
Write the context as focused Markdown with clear headings. Include enough information to call the service correctly, but avoid copying an entire API reference when only a few operations are relevant.
For each optional secret, add a descriptive key and its value in the **Secrets** section. Never repeat the value in the knowledge/context field.
After creation, the integration appears in the project's integration list with the **Custom** type. Use **Auto-enable** to turn it on by default for new app generations. Existing app threads are not changed. Use **Edit** when its guidance or credentials need to change.
## Managing a configured integration
Open the integration's action menu to see the actions available for that integration.
```python eval
rx.image(
src="https://web.reflex-assets.dev/docs-preview/ai-builder/platform/integration_actions.webp",
alt="Action menu for a configured project integration",
class_name="rounded-md h-auto mb-4",
border=f"0.81px solid {rx.color('slate', 5)}",
)
```
### Rename or edit
Use **Rename** to change the display name of a configured gallery integration. Use **Edit** to update its configuration or secrets.
For a custom integration, **Edit** also updates its name, description, knowledge/context, and optional secrets.
### Duplicate
For a configured gallery integration that shows this action, use **Duplicate** to copy it into the current project or another project in the same organization. Enter a name and choose the destination project.
The copy includes the integration's secrets. It is not automatically attached to an app, and the original integration is unchanged. You need permission to view the source secrets and manage integrations in the destination project.
```md alert warning
# Duplicating copies credentials
Confirm that the destination project should receive the same credentials. Repository connections cannot be duplicated; connect the repository separately in the destination project.
```
### Manage access
```python eval
rx.image(
src="https://web.reflex-assets.dev/docs-preview/ai-builder/platform/integration_access.webp",
alt="Member access controls for a configured integration",
class_name="rounded-md h-auto mb-4",
border=f"0.81px solid {rx.color('slate', 5)}",
)
```
For a configured gallery integration that shows this action, use **Manage access** to choose what each project member can do:
- **No access**: cannot use the integration.
- **Can use**: can use it while building.
- **Can manage**: can configure or delete it and view its secret values.
Project and organization admins always have full access. Project Viewers cannot use integrations.
### Delete
Deleting an integration disconnects it from the project and removes its stored configuration and credentials. Apps that depend on it may stop working.
Before deleting it, check which apps use it and create any replacement integration they need. Deletion is permanent.
## Choosing what to enable
Enable only the integrations an app needs. This keeps Builder's context focused and limits unnecessary access.
Before using a custom integration with a sensitive system:
- Give its credential the least privilege required.
- Use separate development and production credentials.
- Confirm the project's members and [effective permissions](/docs/ai/organization/project-access/#viewing-effective-permissions).
- Review generated calls and run them against safe data before production.
## /docs/ai_builder/features/knowledge.md
# Knowledge
Knowledge gives the agent reusable context that should guide more than one prompt. Reflex Build separates project-wide knowledge from instructions that apply only to the current app.
```python exec
import reflex as rx
```
## Project Knowledge
```python eval
rx.image(
src="https://web.reflex-assets.dev/docs-preview/ai-builder/platform/knowledge_project.webp",
alt="Project Knowledge entries and their automatic enablement state",
class_name="rounded-md h-auto mb-4",
border=f"0.81px solid {rx.color('slate', 5)}",
)
```
Use project knowledge for guidance shared by apps in the same project, such as:
- Product terminology and audience.
- Organization-wide architecture or security rules.
- Shared data concepts and naming conventions.
- Links or references that every app team should use.
You can manage project knowledge from **Knowledge** in the project sidebar or follow the project-knowledge link in the app's Knowledge panel.
## App Instructions
Open the app's more menu and select **Knowledge**. Add instructions that should apply only to the current app, such as:
```text
Use "workspace" instead of "tenant" in user-facing copy.
Keep state transformations in State methods rather than UI components.
Every data table must include loading, empty, and error states.
```
App instructions save when you select another control. Keep them short, specific, and current; contradictory or obsolete instructions make generation less predictable.
## Design Systems
Use a design system for reusable visual guidance such as color tokens, typography, spacing, and component patterns. Keep behavior and architecture rules in Knowledge so each source of context has a clear purpose.
## /docs/ai_builder/features/planning.md
# Planning
The **Plan** view turns a large prompt into an implementation plan that can be reviewed and adjusted while the agent works.
```python exec
import reflex as rx
```
## Choose When to Plan
The create screen and chat controls let you set **Plan first** to:
- **Auto** — the agent decides whether the request needs a plan.
- **Always** — create a plan before implementation.
- **Never** — start implementing without a separate plan.
Use a plan for work that affects several pages, integrations, or systems. Small, isolated edits usually do not need one.
## Review and Adjust the Plan
```python eval
rx.image(
src="https://web.reflex-assets.dev/docs-preview/ai-builder/platform/plan_mode.webp",
alt="A populated implementation plan in Reflex Build",
class_name="rounded-md h-auto mb-4",
border=f"0.81px solid {rx.color('slate', 5)}",
)
```
Open **Plan** in the app workspace to review the current sections and tasks. You can:
- Add or reorganize plan sections.
- Edit the plan before generation starts.
- Comment on plan items or ask the agent to revise them.
- Adjust the plan during generation; the agent picks up the latest changes.
For a multi-page or integration-heavy request, wait until the agent produces the plan. Confirm that each section describes a concrete outcome, dependencies appear in the right order, and validation is included before implementation begins. Keep manual edits focused so the plan remains useful as a progress record.
## Move Between Plan and Implementation
You can keep the **Plan** view open while generation runs and move back to **Preview** without discarding the plan. When you revise a plan during generation, make the change explicit in chat as well so the agent can reconcile the latest instruction with work already in progress.
After implementation, compare the finished result in **Preview** with the plan. Send focused feedback for any task or visual detail that still needs work.
## /docs/ai_builder/features/restore_checkpoint.md
# Restore Checkpoint
Restore a checkpoint to return the app source to the state produced by an earlier agent message.
```python exec
import reflex as rx
```
```python eval
rx.el.div(
rx.image(
src="https://web.reflex-assets.dev/docs-preview/ai-builder/platform/restore_checkpoint.webp",
alt="The Revert to this version action on an agent checkpoint",
class_name="rounded-md h-auto mb-4",
border=f"0.81px solid {rx.color('slate', 5)}",
),
class_name="w-full flex flex-col rounded-md",
)
```
## Restore an earlier state
Agent messages that change the app create checkpoints:
1. Find the message that produced the state you want.
2. Select its restore icon.
3. Confirm the restore.
4. Check the result in **Preview** before continuing.
The conversation remains visible, but the app source returns to the selected checkpoint. Later code changes are removed from the current app state.
```md alert warning
# Check the restore point before confirming
A checkpoint restore cannot be undone from the restore dialog. Copy the app or save important work to Git before restoring when you may need the current state later.
```
## When to use a checkpoint
- Return to the last working version after a generation breaks a workflow.
- Try a different implementation from a known state.
- Remove a group of recent changes without reverting files one by one.
For version history shared outside the Builder conversation, connect the app to [GitHub](/docs/ai/features/connect-to-github/).
## /docs/ai_builder/features/security_scanner.md
# Security Scanner
The **Security Scanner** checks a Reflex app for dependency risks, exposed secrets, risky configuration, and Reflex-specific security issues before deployment.
Open **Security Scanner** in the project sidebar for the command and a summary of the checks. Run the scanner from the root of any Reflex app:
```bash
reflex cloud scan
```
The results are grouped by severity and include file locations and recommended fixes when available. Use `--fail-on`, `--json`, `--token`, and `--no-interactive` to enforce the scanner in CI.
See [Security Scan](/docs/hosting/security-scan/) for authentication, result formats, CI configuration, and command options.
## /docs/ai_builder/figma.md
# Figma Integration
Integration Coming Soon!
## /docs/ai_builder/integrations/overview.md
```python exec
from reflex_docs.pages.integrations.integration import integration_page
```
```python eval
integration_page()
```
## /docs/app/.github/workflows/codespell.yml
```yml path="/docs/app/.github/workflows/codespell.yml"
name: codespell
on:
pull_request:
branches: [main]
permissions:
contents: read
jobs:
codespell:
name: Check for spelling errors
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
- name: Codespell
uses: codespell-project/actions-codespell@8f01853be192eb0f849a5c7d721450e7a467c579 # v2.2
with:
skip: data/*
```
## /docs/app/.gitignore
```gitignore path="/docs/app/.gitignore"
.states
**/*.db
**/*.pyc
**/*.swp
**/.DS_Store
**/.web
*.db
*.py[cod]
*.zip
.idea
.markdownlint.json
.venv/
.web
__pycache__/
assets/external/
pcconfig2.py
pynecone.db
reflex.db
venv/
.env
build
*.egg-info
shared/
```
## /docs/wrapping-react/step-by-step.md
# Wrapping React Step by Step
The content has been capped at 50000 tokens. The user could consider applying other filters to refine the result. The better and more specific the context, the better the LLM can follow instructions. If the context seems verbose, the user can refine the filter using uithub. Thank you for using https://uithub.com - Perfect LLM context for any GitHub repo.