# Reflex Documentation

> Reflex is a Python framework for building full-stack web apps. Use this index to find agent-readable Markdown docs, or see [llms-full.txt](https://reflex.dev/docs/llms-full.txt) for the complete docs in one file.

## Docs

### Advanced Onboarding

- [Project Structure (Advanced)](https://reflex.dev/docs/advanced-onboarding/code-structure.md)
- [Configuration](https://reflex.dev/docs/advanced-onboarding/configuration.md)
- [How Reflex Works](https://reflex.dev/docs/advanced-onboarding/how-reflex-works.md)

### AI Builder

- [Reflex Build: Best Practices](https://reflex.dev/docs/ai/overview/best-practices.md)
- [Templates](https://reflex.dev/docs/ai/overview/templates.md)
- [Your First Reflex Build App](https://reflex.dev/docs/ai/overview/tutorial.md)
- [What Is Reflex Build](https://reflex.dev/docs/ai/overview/what-is-reflex-build.md)

### AI Onboarding

- [AI Onboarding](https://reflex.dev/docs/ai/integrations/ai-onboarding.md)

### MCP

- [Overview](https://reflex.dev/docs/ai/integrations/mcp-overview.md)
- [Installation](https://reflex.dev/docs/ai/integrations/mcp-installation.md)

### Skills

- [Skills](https://reflex.dev/docs/ai/integrations/skills.md)

### API Reference

- [Browser Javascript](https://reflex.dev/docs/api-reference/browser-javascript.md)
- [Browser Storage](https://reflex.dev/docs/api-reference/browser-storage.md)
- [CLI](https://reflex.dev/docs/api-reference/cli.md)
- [Event Triggers](https://reflex.dev/docs/api-reference/event-triggers.md)
- [Plugins](https://reflex.dev/docs/api-reference/plugins.md)
- [Special Events](https://reflex.dev/docs/api-reference/special-events.md)
- [Utility Functions](https://reflex.dev/docs/api-reference/utils.md)
- [Reflex's Var System](https://reflex.dev/docs/api-reference/var-system.md)
- [App](https://reflex.dev/docs/api-reference/app.md)
- [Component](https://reflex.dev/docs/api-reference/component.md)
- [Componentstate](https://reflex.dev/docs/api-reference/componentstate.md)
- [Config](https://reflex.dev/docs/api-reference/config.md)
- [Event](https://reflex.dev/docs/api-reference/event.md)
- [Eventhandler](https://reflex.dev/docs/api-reference/eventhandler.md)
- [Eventspec](https://reflex.dev/docs/api-reference/eventspec.md)
- [Model](https://reflex.dev/docs/api-reference/model.md)
- [Statemanager](https://reflex.dev/docs/api-reference/statemanager.md)
- [State](https://reflex.dev/docs/api-reference/state.md)
- [Importvar](https://reflex.dev/docs/api-reference/importvar.md)
- [Var](https://reflex.dev/docs/api-reference/var.md)
- [Environment Variables](https://reflex.dev/docs/api-reference/environment-variables.md)

### API Routes

- [API Routes Overview](https://reflex.dev/docs/api-routes/overview.md)

### Assets

- [Assets](https://reflex.dev/docs/assets/overview.md)
- [Files](https://reflex.dev/docs/assets/upload-and-download-files.md)

### Authentication

- [Authentication Overview](https://reflex.dev/docs/authentication/authentication-overview.md)

### Client Storage

- [Client Storage Overview](https://reflex.dev/docs/client-storage/overview.md)

### Components

- [Conditional Rendering](https://reflex.dev/docs/components/conditional-rendering.md)
- [Convert HTML to Reflex](https://reflex.dev/docs/components/html-to-reflex.md)
- [Props](https://reflex.dev/docs/components/props.md)
- [Rendering Iterables](https://reflex.dev/docs/components/rendering-iterables.md)

### Custom Components

- [Custom Component CLI Reference](https://reflex.dev/docs/custom-components/command-reference.md)
- [Custom Components Overview](https://reflex.dev/docs/custom-components/overview.md)
- [Python Package Index](https://reflex.dev/docs/custom-components/prerequisites-for-publishing.md)

### Database

- [Database Overview](https://reflex.dev/docs/database/overview.md)
- [Queries](https://reflex.dev/docs/database/queries.md)
- [Relationships](https://reflex.dev/docs/database/relationships.md)
- [Tables](https://reflex.dev/docs/database/tables.md)

### Enterprise

- [AG Chart](https://reflex.dev/docs/enterprise/ag-chart.md)
- [Aligned Grids](https://reflex.dev/docs/enterprise/ag-grid/aligned-grids.md)
- [Cell Selection](https://reflex.dev/docs/enterprise/ag-grid/cell-selection.md)
- [Column Definitions](https://reflex.dev/docs/enterprise/ag-grid/column-defs.md)
- [AG Grid](https://reflex.dev/docs/enterprise/ag-grid.md)
- [Model Wrapper](https://reflex.dev/docs/enterprise/ag-grid/model-wrapper.md)
- [Pivot Mode](https://reflex.dev/docs/enterprise/ag-grid/pivot-mode.md)
- [Themes](https://reflex.dev/docs/enterprise/ag-grid/theme.md)
- [Value Transformers](https://reflex.dev/docs/enterprise/ag-grid/value-transformers.md)
- [Built with Reflex Badge](https://reflex.dev/docs/enterprise/built-with-reflex.md)
- [Components](https://reflex.dev/docs/enterprise/components.md)
- [Drag and Drop](https://reflex.dev/docs/enterprise/drag-and-drop.md)
- [Event Handler API Plugin](https://reflex.dev/docs/enterprise/event-handler-api.md)
- [Autocomplete component](https://reflex.dev/docs/enterprise/mantine/autocomplete.md)
- [Collapse component](https://reflex.dev/docs/enterprise/mantine/collapse.md)
- [Combobox](https://reflex.dev/docs/enterprise/mantine/combobox.md)
- [Mantine](https://reflex.dev/docs/enterprise/mantine.md)
- [JSON Input](https://reflex.dev/docs/enterprise/mantine/json-input.md)
- [Loading Overlay component](https://reflex.dev/docs/enterprise/mantine/loading-overlay.md)
- [MultiSelect component](https://reflex.dev/docs/enterprise/mantine/multi-select.md)
- [Number Formatter component](https://reflex.dev/docs/enterprise/mantine/number-formatter.md)
- [Pill](https://reflex.dev/docs/enterprise/mantine/pill.md)
- [Ring Progress component](https://reflex.dev/docs/enterprise/mantine/ring-progress.md)
- [Semi Circle Progress component](https://reflex.dev/docs/enterprise/mantine/semi-circle-progress.md)
- [Spoiler component](https://reflex.dev/docs/enterprise/mantine/spoiler.md)
- [TagsInput](https://reflex.dev/docs/enterprise/mantine/tags-input.md)
- [Timeline component](https://reflex.dev/docs/enterprise/mantine/timeline.md)
- [Tree component](https://reflex.dev/docs/enterprise/mantine/tree.md)
- [Interactive Maps](https://reflex.dev/docs/enterprise/map.md)
- [Reflex Enterprise](https://reflex.dev/docs/enterprise/overview.md)
- [Basic Flow Example](https://reflex.dev/docs/enterprise/react-flow/basic-flow.md)
- [Flow Components](https://reflex.dev/docs/enterprise/react-flow/components.md)
- [Edges](https://reflex.dev/docs/enterprise/react-flow/edges.md)
- [Example React Flow Components](https://reflex.dev/docs/enterprise/react-flow/examples.md)
- [Hooks (API)](https://reflex.dev/docs/enterprise/react-flow/hooks.md)
- [Adding Interactivity to Your Flow](https://reflex.dev/docs/enterprise/react-flow/interactivity.md)
- [Nodes](https://reflex.dev/docs/enterprise/react-flow/nodes.md)
- [Overview](https://reflex.dev/docs/enterprise/react-flow/overview.md)
- [Theming](https://reflex.dev/docs/enterprise/react-flow/theming.md)
- [Utility Functions](https://reflex.dev/docs/enterprise/react-flow/utils.md)
- [Single Port Proxy](https://reflex.dev/docs/enterprise/single-port-proxy.md)

### Events

- [Background Tasks](https://reflex.dev/docs/events/background-events.md)
- [Chaining events](https://reflex.dev/docs/events/chaining-events.md)
- [Decentralized Event Handlers](https://reflex.dev/docs/events/decentralized-event-handlers.md)
- [Event Actions](https://reflex.dev/docs/events/event-actions.md)
- [Event Arguments](https://reflex.dev/docs/events/event-arguments.md)
- [Events Overview](https://reflex.dev/docs/events/events-overview.md)
- [Page Load Events](https://reflex.dev/docs/events/page-load-events.md)
- [Setters](https://reflex.dev/docs/events/setters.md)
- [Special Events Docs](https://reflex.dev/docs/events/special-events.md)
- [Yielding Updates](https://reflex.dev/docs/events/yield-events.md)

### Getting Started

- [Basics](https://reflex.dev/docs/getting-started/basics.md)
- [AI Chat App](https://reflex.dev/docs/getting-started/chatapp-tutorial.md)
- [Data Dashboard](https://reflex.dev/docs/getting-started/dashboard-tutorial.md)
- [Installation](https://reflex.dev/docs/getting-started/installation.md)
- [Introduction](https://reflex.dev/docs/getting-started/introduction.md)
- [Open Source Templates](https://reflex.dev/docs/getting-started/open-source-templates.md)
- [Project Structure](https://reflex.dev/docs/getting-started/project-structure.md)

### Hosting

- [Project](https://reflex.dev/docs/hosting/adding-members.md)
- [App](https://reflex.dev/docs/hosting/app-management.md)
- [Billing](https://reflex.dev/docs/hosting/billing.md)
- [Compute](https://reflex.dev/docs/hosting/compute.md)
- [Config File](https://reflex.dev/docs/hosting/config-file.md)
- [Custom Domains](https://reflex.dev/docs/hosting/custom-domains.md)
- [Deploy Reflex to Databricks](https://reflex.dev/docs/hosting/databricks.md)
- [Reflex Cloud - Quick Start](https://reflex.dev/docs/hosting/deploy-quick-start.md)
- [Deploy with Github Actions](https://reflex.dev/docs/hosting/deploy-with-github-actions.md)
- [Logs](https://reflex.dev/docs/hosting/logs.md)
- [Machine Types](https://reflex.dev/docs/hosting/machine-types.md)
- [Regions](https://reflex.dev/docs/hosting/regions.md)
- [Secrets (Environment Variables)](https://reflex.dev/docs/hosting/secrets-environment-vars.md)
- [Self Hosting](https://reflex.dev/docs/hosting/self-hosting.md)
- [Tokens](https://reflex.dev/docs/hosting/tokens.md)

### Library

- [Avatar](https://reflex.dev/docs/library/data-display/avatar.md)
- [Badge](https://reflex.dev/docs/library/data-display/badge.md)
- [Callout](https://reflex.dev/docs/library/data-display/callout.md)
- [Code Block](https://reflex.dev/docs/library/data-display/code-block.md)
- [Data List](https://reflex.dev/docs/library/data-display/data-list.md)
- [Icon](https://reflex.dev/docs/library/data-display/icon.md)
- [List](https://reflex.dev/docs/library/data-display/list.md)
- [Moment](https://reflex.dev/docs/library/data-display/moment.md)
- [Progress](https://reflex.dev/docs/library/data-display/progress.md)
- [Scroll Area](https://reflex.dev/docs/library/data-display/scroll-area.md)
- [Spinner](https://reflex.dev/docs/library/data-display/spinner.md)
- [Accordion](https://reflex.dev/docs/library/disclosure/accordion.md)
- [Segmented Control](https://reflex.dev/docs/library/disclosure/segmented-control.md)
- [Tabs](https://reflex.dev/docs/library/disclosure/tabs.md)
- [Auto Scroll](https://reflex.dev/docs/library/dynamic-rendering/auto-scroll.md)
- [Cond](https://reflex.dev/docs/library/dynamic-rendering/cond.md)
- [Foreach](https://reflex.dev/docs/library/dynamic-rendering/foreach.md)
- [Match](https://reflex.dev/docs/library/dynamic-rendering/match.md)
- [Button](https://reflex.dev/docs/library/forms/button.md)
- [Checkbox](https://reflex.dev/docs/library/forms/checkbox.md)
- [type attribute is required for "typeMismatch" validation](https://reflex.dev/docs/library/forms/form.md)
- [Input](https://reflex.dev/docs/library/forms/input.md)
- [Radio Group](https://reflex.dev/docs/library/forms/radio-group.md)
- [Select](https://reflex.dev/docs/library/forms/select.md)
- [Slider](https://reflex.dev/docs/library/forms/slider.md)
- [Switch](https://reflex.dev/docs/library/forms/switch.md)
- [Text Area](https://reflex.dev/docs/library/forms/text-area.md)
- [File Upload](https://reflex.dev/docs/library/forms/upload.md)
- [Area Chart](https://reflex.dev/docs/library/graphing/charts/areachart.md)
- [Bar Chart](https://reflex.dev/docs/library/graphing/charts/barchart.md)
- [Composed Chart](https://reflex.dev/docs/library/graphing/charts/composedchart.md)
- [Error Bar](https://reflex.dev/docs/library/graphing/charts/errorbar.md)
- [Funnel Chart](https://reflex.dev/docs/library/graphing/charts/funnelchart.md)
- [Line Chart](https://reflex.dev/docs/library/graphing/charts/linechart.md)
- [Pie Chart](https://reflex.dev/docs/library/graphing/charts/piechart.md)
- [Radar Chart](https://reflex.dev/docs/library/graphing/charts/radarchart.md)
- [Radial Bar Chart](https://reflex.dev/docs/library/graphing/charts/radialbarchart.md)
- [Scatter Chart](https://reflex.dev/docs/library/graphing/charts/scatterchart.md)
- [Axis](https://reflex.dev/docs/library/graphing/general/axis.md)
- [Brush](https://reflex.dev/docs/library/graphing/general/brush.md)
- [- rx.recharts.CartesianAxis](https://reflex.dev/docs/library/graphing/general/cartesiangrid.md)
- [Label](https://reflex.dev/docs/library/graphing/general/label.md)
- [Legend](https://reflex.dev/docs/library/graphing/general/legend.md)
- [Reference](https://reflex.dev/docs/library/graphing/general/reference.md)
- [Graphing Tooltip](https://reflex.dev/docs/library/graphing/general/tooltip.md)
- [Plotly](https://reflex.dev/docs/library/graphing/other-charts/plotly.md)
- [Pyplot](https://reflex.dev/docs/library/graphing/other-charts/pyplot.md)
- [HTML Form Elements](https://reflex.dev/docs/library/html/forms.md)
- [HTML Elements](https://reflex.dev/docs/library/html/html.md)
- [HTML Layout Elements](https://reflex.dev/docs/library/html/layout.md)
- [HTML Media Elements](https://reflex.dev/docs/library/html/media.md)
- [HTML SVG Elements](https://reflex.dev/docs/library/html/svg.md)
- [HTML Table Elements](https://reflex.dev/docs/library/html/tables.md)
- [HTML Text Elements](https://reflex.dev/docs/library/html/text.md)
- [Aspect Ratio](https://reflex.dev/docs/library/layout/aspect-ratio.md)
- [Box](https://reflex.dev/docs/library/layout/box.md)
- [Card](https://reflex.dev/docs/library/layout/card.md)
- [Center](https://reflex.dev/docs/library/layout/center.md)
- [Container](https://reflex.dev/docs/library/layout/container.md)
- [Flex](https://reflex.dev/docs/library/layout/flex.md)
- [Fragment](https://reflex.dev/docs/library/layout/fragment.md)
- [Grid](https://reflex.dev/docs/library/layout/grid.md)
- [Inset](https://reflex.dev/docs/library/layout/inset.md)
- [Section](https://reflex.dev/docs/library/layout/section.md)
- [Separator](https://reflex.dev/docs/library/layout/separator.md)
- [Spacer](https://reflex.dev/docs/library/layout/spacer.md)
- [Stack](https://reflex.dev/docs/library/layout/stack.md)
- [Audio](https://reflex.dev/docs/library/media/audio.md)
- [Image](https://reflex.dev/docs/library/media/image.md)
- [Video](https://reflex.dev/docs/library/media/video.md)
- [Clipboard](https://reflex.dev/docs/library/other/clipboard.md)
- [HTML Embed](https://reflex.dev/docs/library/other/html-embed.md)
- [Memo](https://reflex.dev/docs/library/other/memo.md)
- [Script](https://reflex.dev/docs/library/other/script.md)
- [Skeleton (loading placeholder)](https://reflex.dev/docs/library/other/skeleton.md)
- [Theme](https://reflex.dev/docs/library/other/theme.md)
- [Alert Dialog](https://reflex.dev/docs/library/overlay/alert-dialog.md)
- [Context Menu](https://reflex.dev/docs/library/overlay/context-menu.md)
- [Dialog](https://reflex.dev/docs/library/overlay/dialog.md)
- [Drawer](https://reflex.dev/docs/library/overlay/drawer.md)
- [Dropdown Menu](https://reflex.dev/docs/library/overlay/dropdown-menu.md)
- [Hovercard](https://reflex.dev/docs/library/overlay/hover-card.md)
- [Popover](https://reflex.dev/docs/library/overlay/popover.md)
- [Toast](https://reflex.dev/docs/library/overlay/toast.md)
- [Tooltip](https://reflex.dev/docs/library/overlay/tooltip.md)
- [Data Editor](https://reflex.dev/docs/library/tables-and-data-grids/data-editor.md)
- [Data Table](https://reflex.dev/docs/library/tables-and-data-grids/data-table.md)
- [Table](https://reflex.dev/docs/library/tables-and-data-grids/table.md)
- [Blockquote](https://reflex.dev/docs/library/typography/blockquote.md)
- [Code](https://reflex.dev/docs/library/typography/code.md)
- [Em (Emphasis)](https://reflex.dev/docs/library/typography/em.md)
- [Heading](https://reflex.dev/docs/library/typography/heading.md)
- [rx.text.kbd (Keyboard)](https://reflex.dev/docs/library/typography/kbd.md)
- [Link](https://reflex.dev/docs/library/typography/link.md)
- [Markdown](https://reflex.dev/docs/library/typography/markdown.md)
- [Quote](https://reflex.dev/docs/library/typography/quote.md)
- [Strong](https://reflex.dev/docs/library/typography/strong.md)
- [Text](https://reflex.dev/docs/library/typography/text.md)

### Pages

- [Dynamic Routes](https://reflex.dev/docs/pages/dynamic-routing.md)
- [Pages](https://reflex.dev/docs/pages/overview.md)

### Recipes

- [Login Form](https://reflex.dev/docs/recipes/auth/login-form.md)
- [Sign up Form](https://reflex.dev/docs/recipes/auth/signup-form.md)
- [Forms](https://reflex.dev/docs/recipes/content/forms.md)
- [Grid Recipe](https://reflex.dev/docs/recipes/content/grid.md)
- [Multi-column and row layout](https://reflex.dev/docs/recipes/content/multi-column-row.md)
- [Stats](https://reflex.dev/docs/recipes/content/stats.md)
- [Top Banner](https://reflex.dev/docs/recipes/content/top-banner.md)
- [Footer Bar](https://reflex.dev/docs/recipes/layout/footer.md)
- [Navigation Bar](https://reflex.dev/docs/recipes/layout/navbar.md)
- [Sidebar](https://reflex.dev/docs/recipes/layout/sidebar.md)
- [Smart Checkboxes Group](https://reflex.dev/docs/recipes/others/checkboxes.md)
- [Chips](https://reflex.dev/docs/recipes/others/chips.md)
- [Dark Mode Toggle](https://reflex.dev/docs/recipes/others/dark-mode-toggle.md)
- [Pricing Cards](https://reflex.dev/docs/recipes/others/pricing-cards.md)
- [Speed Dial](https://reflex.dev/docs/recipes/others/speed-dial.md)

### State

- [State Overview](https://reflex.dev/docs/state/overview.md)

### State Structure

- [Component State](https://reflex.dev/docs/state-structure/component-state.md)
- [State Mixins](https://reflex.dev/docs/state-structure/mixins.md)
- [State Structure Overview](https://reflex.dev/docs/state-structure/overview.md)
- [Shared State](https://reflex.dev/docs/state-structure/shared-state.md)

### Styling

- [Style and Layout Props](https://reflex.dev/docs/styling/common-props.md)
- [Custom Stylesheets](https://reflex.dev/docs/styling/custom-stylesheets.md)
- [Layout Components](https://reflex.dev/docs/styling/layout.md)
- [Styling Overview](https://reflex.dev/docs/styling/overview.md)
- [Responsive](https://reflex.dev/docs/styling/responsive.md)
- [Tailwind](https://reflex.dev/docs/styling/tailwind.md)
- [Theming](https://reflex.dev/docs/styling/theming.md)

### UI

- [UI Overview](https://reflex.dev/docs/ui/overview.md)

### Utility Methods

- [Exception handlers](https://reflex.dev/docs/utility-methods/exception-handlers.md)
- [Lifespan Tasks](https://reflex.dev/docs/utility-methods/lifespan-tasks.md)
- [Other Methods](https://reflex.dev/docs/utility-methods/other-methods.md)
- [State Utility Methods](https://reflex.dev/docs/utility-methods/router-attributes.md)

### Vars

- [Base Vars](https://reflex.dev/docs/vars/base-vars.md)
- [Computed Vars](https://reflex.dev/docs/vars/computed-vars.md)
- [Custom Vars](https://reflex.dev/docs/vars/custom-vars.md)
- [Var Operations](https://reflex.dev/docs/vars/var-operations.md)

### Wrapping React

- [Custom Code And Hooks](https://reflex.dev/docs/wrapping-react/custom-code-and-hooks.md)
- [Complex Example](https://reflex.dev/docs/wrapping-react/example.md)
- [Styles and Imports](https://reflex.dev/docs/wrapping-react/imports-and-styles.md)
- [Find The Component](https://reflex.dev/docs/wrapping-react/library-and-tags.md)
- [Assets](https://reflex.dev/docs/wrapping-react/local-packages.md)
- [More React Libraries](https://reflex.dev/docs/wrapping-react/more-wrapping-examples.md)
- [Wrapping React Overview](https://reflex.dev/docs/wrapping-react/overview.md)
- [Props](https://reflex.dev/docs/wrapping-react/props.md)
- [Serializers](https://reflex.dev/docs/wrapping-react/serializers.md)
- [Step By Step](https://reflex.dev/docs/wrapping-react/step-by-step.md)