+
+
-
-# **Reflex**
-**✨ Performant, customizable web apps in pure Python. Deploy in seconds.**
-
-📑 [Docs](https://reflex.dev/docs/getting-started/introduction) 📱 [Component Library](https://reflex.dev/docs/library) 🖼️ [Gallery](https://reflex.dev/docs/gallery) 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy)
-
+### **✨ Performant, customizable web apps in pure Python. Deploy in seconds. ✨**
[](https://badge.fury.io/py/reflex)
+[](https://reflex.dev/docs/getting-started/introduction)
[](https://discord.gg/T5WSbC2YtQ)
-
-### README in different language
-
---
-
[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md)
-
---
+## ⚙️ Installation
-## 📦 1. Install
+Open a terminal and run (Requires Python 3.7+):
-Reflex requires the following to get started:
-
-- Python 3.7+
-- [Node.js 16.8.0+](https://nodejs.org/en/) (Don't worry, you won’t have to write any JavaScript!)
-
-```
+```bash
pip install reflex
```
-## 🥳 2. Create your first app
+## 🥳 Create your first app
-Installing `reflex` also installs the `reflex` command line tool. Test that the install was successful by creating a new project.
+Installing `reflex` also installs the `reflex` command line tool.
-Replace my_app_name with your project name:
+Test that the install was successful by creating a new project. (Replace `my_app_name` with your project name):
-```
+```bash
mkdir my_app_name
cd my_app_name
reflex init
```
-When you run this command for the first time, we will download and install [bun](https://bun.sh/) automatically.
-
-This command initializes a template app in your new directory.
-
-## 🏃 3. Run your app
+This command initializes a template app in your new directory.
You can run this app in development mode:
-```
+```bash
reflex run
```
@@ -66,7 +51,8 @@ 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
+
+## 🫧 Example App
Let's go over an example: creating an image generation UI around DALL·E. For simplicity, we just call the OpenAI API, but you could replace this with an ML model run locally.
@@ -133,14 +119,14 @@ def index():
)
# Add state and page to the app.
-app = rx.App(state=State)
+app = rx.App()
app.add_page(index, title="reflex:DALL·E")
app.compile()
```
-Let's break this down.
+## Let's break this down.
-### **UI In Reflex**
+### **Reflex UI**
Let's start with the UI.
@@ -196,26 +182,38 @@ Our DALL·E. app has an event handler, `get_image` to which get this image from
### **Routing**
-Finally, we define our app and pass it our state.
+Finally, we define our app.
```python
-app = rx.App(state=State)
+app = rx.App()
```
-We add a route from the root of the app to the index component. We also add a title that will show up in the page preview/browser tab.
+We add a page from the root of the app to the index component. We also add a title that will show up in the page preview/browser tab.
```python
app.add_page(index, title="DALL-E")
app.compile()
```
-You can create a multi-page app by adding more routes.
+You can create a multi-page app by adding more pages.
-## Status
+## 📑 Resources
+
+
+
+
+
+
+
+## ✅ Status
Reflex launched in December 2022 with the name Pynecone.
-As of June 2023, we are in the **Public Beta** stage.
+As of July 2023, we are in the **Public Beta** stage.
- :white_check_mark: **Public Alpha**: Anyone can install and use Reflex. There may be issues, but we are working to resolve them actively.
- :large_orange_diamond: **Public Beta**: Stable enough for non-enterprise use-cases.
diff --git a/docs/images/cones.png b/docs/images/cones.png
deleted file mode 100644
index f3ed674c4..000000000
Binary files a/docs/images/cones.png and /dev/null differ
diff --git a/docs/images/counter.gif b/docs/images/counter.gif
deleted file mode 100644
index 8755baa4c..000000000
Binary files a/docs/images/counter.gif and /dev/null differ
diff --git a/docs/images/logo.png b/docs/images/logo.png
deleted file mode 100644
index 03165a4bb..000000000
Binary files a/docs/images/logo.png and /dev/null differ
diff --git a/docs/images/logo.svg b/docs/images/logo.svg
deleted file mode 100644
index 662658e7f..000000000
--- a/docs/images/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/images/logo_white.png b/docs/images/logo_white.png
deleted file mode 100644
index 6d57dea24..000000000
Binary files a/docs/images/logo_white.png and /dev/null differ
diff --git a/docs/images/logo_white.svg b/docs/images/logo_white.svg
deleted file mode 100644
index 6704635c6..000000000
--- a/docs/images/logo_white.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/images/reflex.png b/docs/images/reflex.png
index 356046ccd..5812af7d8 100644
Binary files a/docs/images/reflex.png and b/docs/images/reflex.png differ
diff --git a/docs/images/reflex_dark.svg b/docs/images/reflex_dark.svg
new file mode 100644
index 000000000..0aeffe591
--- /dev/null
+++ b/docs/images/reflex_dark.svg
@@ -0,0 +1,8 @@
+
diff --git a/docs/images/reflex_light.svg b/docs/images/reflex_light.svg
new file mode 100644
index 000000000..63876bdd1
--- /dev/null
+++ b/docs/images/reflex_light.svg
@@ -0,0 +1,8 @@
+
+
-