From 449183e9d881ba27b7fc0375e2790e41f83027d6 Mon Sep 17 00:00:00 2001 From: Carlos Date: Wed, 21 Jan 2026 17:42:57 +0100 Subject: [PATCH 1/2] ENG-8666: ENG-8667: Update intro docs --- assets/tailwind-theme.css | 2 +- docs/getting_started/installation.md | 112 ++++++++++++--------------- docs/getting_started/introduction.md | 30 +++++-- pcweb/constants.py | 1 + 4 files changed, 75 insertions(+), 70 deletions(-) diff --git a/assets/tailwind-theme.css b/assets/tailwind-theme.css index 33ca88049a..3b69304458 100644 --- a/assets/tailwind-theme.css +++ b/assets/tailwind-theme.css @@ -1696,7 +1696,7 @@ /* max-height: 350px !important; */ border-radius: 0.75rem !important; border: 1px solid var(--c-slate-4); - background: var(--c-slate-2) !important; + background: var(--c-slate-2); color: var(--c-slate-12) !important; resize: none !important; outline: none !important; diff --git a/docs/getting_started/installation.md b/docs/getting_started/installation.md index b1dfdf47c4..b412c738a6 100644 --- a/docs/getting_started/installation.md +++ b/docs/getting_started/installation.md @@ -20,7 +20,8 @@ Reflex requires Python 3.10+. We **highly recommend** creating a virtual environment for your project. -[venv]({constants.VENV_URL}) is the standard option. [conda]({constants.CONDA_URL}) and [poetry]({constants.POETRY_URL}) are some alternatives. +[uv]({constants.UV_URL}) is the recommended modern option. [venv]({constants.VENV_URL}), [conda]({constants.CONDA_URL}) and [poetry]({constants.POETRY_URL}) are some alternatives. + # Install Reflex on your system @@ -29,11 +30,22 @@ We **highly recommend** creating a virtual environment for your project. --tab macOS/Linux ## Install on macOS/Linux -We will go with [venv]({constants.VENV_URL}) here. +We will go with [uv]({constants.UV_URL}) here. ### Prerequisites -macOS (Apple Silicon) users should install [Rosetta 2](https://support.apple.com/en-us/HT211861). Run this command: + +#### Install uv + +```bash +curl -LsSf https://astral.sh/uv/install.sh | sh +``` + +After installation, restart your terminal or run `source ~/.bashrc` (or `source ~/.zshrc` for zsh). + +Alternatively, install via [Homebrew, PyPI, or other methods](https://docs.astral.sh/uv/getting-started/installation/). + +**macOS (Apple Silicon) users:** Install [Rosetta 2](https://support.apple.com/en-us/HT211861). Run this command: `/usr/sbin/softwareupdate --install-rosetta --agree-to-license` @@ -47,60 +59,48 @@ mkdir {app_name} cd {app_name} ``` -### Setup virtual environment +### Initialize uv project ```bash -python3 -m venv .venv -source .venv/bin/activate +uv init ``` - -```md alert info -# Getting `No module named venv`? - -While Python typically ships with `venv` it is not installed by default on some systems. -If so, please install it manually. E.g. on Ubuntu Linux, run `sudo apt-get install python3-venv`. -``` - -### Install Reflex package - -Reflex is available as a [pip]({constants.PIP_URL}) package. +### Add Reflex to the project ```bash -pip install reflex -``` - -```md alert info -# Getting `command not found: pip`? - -While Python typically ships with `pip` as the standard package management tool, it is not installed by default on some systems. -You may need to install it manually. E.g. on Ubuntu Linux, run `apt-get install python3-pip` +uv add reflex ``` -## Initialize the project +### Initialize the Reflex project ```bash -reflex init +uv run reflex init ``` -```md alert warning -# Error `command not found: reflex` Mac / Linux -If you install Reflex with no virtual environment and get this error it means your `PATH` cannot find the reflex package. -A virtual environment should solve this problem, or you can try running `python3 -m` before the reflex command. -``` -- --tab Windows ## Install on Windows -### Prerequisites For Windows users, we recommend using [Windows Subsystem for Linux (WSL)](https://learn.microsoft.com/en-us/windows/wsl/about) for optimal performance. -WSL users should refer to instructions for Linux above. +**WSL users:** Refer to the macOS/Linux instructions above. For the rest of this section we will work with native Windows (non-WSL). -We will go with [venv]({constants.VENV_URL}) here, for virtual environments. +We will go with [uv]({constants.UV_URL}) here. + +### Prerequisites + +#### Install uv + +```powershell +powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex" +``` + +After installation, restart your terminal (PowerShell or Command Prompt). + +Alternatively, install via [WinGet, Scoop, or other methods](https://docs.astral.sh/uv/getting-started/installation/). ### Create the project directory @@ -111,60 +111,46 @@ mkdir {app_name} cd {app_name} ``` -### Setup virtual environment +### Initialize uv project ```bash -py -3 -m venv .venv -.venv\\Scripts\\activate +uv init ``` -### Install Reflex package - -Reflex is available as a [pip](constants.PIP_URL) package. +### Add Reflex to the project ```bash -pip install reflex +uv add reflex ``` -## Initialize the project +### Initialize the Reflex project ```bash -reflex init -``` - -```md alert warning -# Error `command not found: reflex` Windows - -The Reflex framework includes the `reflex` command line (CLI) tool. Using a virtual environment is highly recommended for a seamless experience.", +uv run reflex init ``` ```md alert warning # Error `Install Failed - You are missing a DLL required to run bun.exe` Windows -Bun requires runtime components of Visual C++ libraries to run on windows. This issue is fixed by installing [Microsoft Visual C++ 2015 Redistributable](https://www.microsoft.com/en-us/download/details.aspx?id=53840). +Bun requires runtime components of Visual C++ libraries to run on Windows. This issue is fixed by installing [Microsoft Visual C++ 2015 Redistributable](https://www.microsoft.com/en-us/download/details.aspx?id=53840). ``` -- --- -The command will return several template options to choose from as shown below. +Running `uv run reflex init` will return the option to start with a blank Reflex app, premade templates built by the Reflex team, or to try our [AI builder]({constants.REFLEX_BUILD_URL}). ```bash Initializing the web directory. Get started with a template: -(0) blank (https://blank-template.reflex.run) - A minimal template -(1) dashboard (https://dashboard-new.reflex.run/) - A dashboard with tables and graphs -(2) sales (https://sales-new.reflex.run/) - An app to manage sales and customers -(3) ai_image_gen (https://ai-image-gen.reflex.run/) - An app to generate images using AI -(4) ci_template (https://cijob.reflex.run/) - A template for continuous integration -(5) api_admin_panel (https://api-admin-panel.reflex.run/) - An admin panel for an api. -(6) nba (https://nba-new.reflex.run/) - A data visualization app for NBA data. -(7) customer_data_app (https://customer-data-app.reflex.run/) - An app to manage customer data. +(0) A blank Reflex app. +(1) Premade templates built by the Reflex team. +(2) Try our AI builder. Which template would you like to use? (0): ``` -From here select a template. +From here select an option. ## Run the App @@ -172,7 +158,7 @@ From here select a template. Run it in development mode: ```bash -reflex run +uv run reflex run ``` Your app runs at [http://localhost:3000](http://localhost:3000). @@ -180,7 +166,7 @@ Your app runs at [http://localhost:3000](http://localhost:3000). Reflex prints logs to the terminal. To increase log verbosity to help with debugging, use the `--loglevel` flag: ```bash -reflex run --loglevel debug +uv run reflex run --loglevel debug ``` Reflex will *hot reload* any code changes in real time when running in development mode. Your code edits will show up on [http://localhost:3000](http://localhost:3000) automatically. diff --git a/docs/getting_started/introduction.md b/docs/getting_started/introduction.md index 248c220c58..f4e852cde4 100644 --- a/docs/getting_started/introduction.md +++ b/docs/getting_started/introduction.md @@ -7,8 +7,11 @@ from pcweb.pages.docs.library import library from pcweb.pages.docs import pages from pcweb.pages.docs import vars from pcweb.styles.colors import c_color +from pcweb.pages.docs import styling from pcweb.styles.fonts import base +from pcweb.pages.docs import hosting from pcweb.flexdown import markdown_with_shiki +from pcweb.pages.docs import advanced_onboarding ``` @@ -47,19 +50,22 @@ Here, we go over a simple counter app that lets the user count up or down. class CounterExampleState(rx.State): count: int = 0 + @rx.event def increment(self): self.count += 1 + @rx.event def decrement(self): self.count -= 1 class IntroTabsState(rx.State): """The app state.""" - value = "tab1" - tab_selected = "" + value: str = "tab1" + tab_selected: str = "" - def change_value(self, val): + @rx.event + def change_value(self, val: str): self.tab_selected = f"{val} clicked!" self.value = val @@ -151,9 +157,11 @@ rx.box( """class State(rx.State): count: int = 0 + @rx.event def increment(self): self.count += 1 + @rx.event def decrement(self): self.count -= 1""", background=rx.cond( @@ -241,9 +249,11 @@ Here our state has a single var, `count`, which holds the current value of the c ### Event Handlers ```python +@rx.event def increment(self): self.count += 1 +@rx.event def decrement(self): self.count -= 1 ``` @@ -278,7 +288,7 @@ def index(): This function defines the app's user interface. -We use different components such as `rx.hstack`, `rx.button`, and `rx.heading` to build the frontend. Components can be nested to create complex layouts, and can be styled using the full power of CSS. +We use different components such as `rx.hstack`, `rx.button`, and `rx.heading` to build the frontend. Components can be nested to create complex layouts, and can be styled using the full power of CSS or [Tailwind CSS]({styling.tailwind.path}). Reflex comes with [50+ built-in components]({library.path}) to help you get started. We are actively adding more components. Also, it's easy to [wrap your own React components]({wrapping_react.overview.path}). @@ -327,9 +337,17 @@ app.add_page(index) We've created a simple, yet fully interactive web app in pure Python. -By continuing with our documentation, you will learn how to build awesome apps with Reflex. +By continuing with our documentation, you will learn how to build awesome apps with Reflex. Use the sidebar to navigate through the sections, or search (`Ctrl+K` or `Cmd+K`) to quickly find a page. For a glimpse of the possibilities, check out these resources: * For a more real-world example, check out either the [dashboard tutorial]({getting_started.dashboard_tutorial.path}) or the [chatapp tutorial]({getting_started.chatapp_tutorial.path}). -* We have bots that can answer questions and generate Reflex code for you. Check them out in #ask-ai in our [Discord]({constants.DISCORD_URL})! +* Check out our open-source [templates]({getting_started.open_source_templates.path})! +* We have an AI Builder that can generate full Reflex apps or help with your existing app! Check it out at [Reflex Build]({constants.REFLEX_BUILD_URL})! +* Deploy your app with a single command using [Reflex Cloud]({hosting.deploy_quick_start.path})! + +If you want to learn more about how Reflex works, check out the [How Reflex Works]({advanced_onboarding.how_reflex_works.path}) section. + +## Join our Community + +If you have questions about anything related to Reflex, you're always welcome to ask our community on [GitHub Discussions]({constants.GITHUB_DISCUSSIONS_URL}), [Discord]({constants.DISCORD_URL}), [Forum]({constants.FORUM_URL}), and [X]({constants.TWITTER_URL}). diff --git a/pcweb/constants.py b/pcweb/constants.py index 8ec69e904e..224c7f8a5e 100644 --- a/pcweb/constants.py +++ b/pcweb/constants.py @@ -53,6 +53,7 @@ POETRY_URL = "https://python-poetry.org/" PIPENV_URL = "https://pipenv.pypa.io/en/latest/" PIP_URL = "https://pypi.org/project/pip/" +UV_URL = "https://docs.astral.sh/uv/" VENV_URL = "https://docs.python.org/3/library/venv.html" VIRTUALENV_URL = "https://virtualenv.pypa.io/en/latest/" CONDA_URL = "https://conda.io/" From 09cb1f3c58693e34848ed39558dc78f573230a5c Mon Sep 17 00:00:00 2001 From: Carlos <36110765+carlosabadia@users.noreply.github.com> Date: Wed, 21 Jan 2026 18:41:36 +0100 Subject: [PATCH 2/2] Update accordion styling (#1733) --- pcweb/components/docpage/sidebar/sidebar.py | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/pcweb/components/docpage/sidebar/sidebar.py b/pcweb/components/docpage/sidebar/sidebar.py index 10dea2a9d0..493ab55676 100644 --- a/pcweb/components/docpage/sidebar/sidebar.py +++ b/pcweb/components/docpage/sidebar/sidebar.py @@ -206,7 +206,10 @@ def sidebar_item_comp( type="multiple", collapsible=True, default_value=index[:1].foreach(lambda x: "index" + x.to_string()), - class_name="!my-2 flex flex-col items-start gap-4 !ml-[10px] list-none [box-shadow:inset_1.25px_0_0_0_var(--c-slate-4)_!important] !bg-transparent !rounded-none", + style={ + "box-shadow": "inset 1.25px 0 0 0 var(--c-slate-4) !important" + }, + class_name="!my-2 flex flex-col items-start gap-4 !ml-[10px] list-none !bg-transparent !rounded-none", ), class_name="!p-0 w-full !bg-transparent before:!h-0 after:!h-0", ),