diff --git a/README.md b/README.md
index b79d49c40..ec6fbdbb8 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-## What is Writer Framework?
+## What is Framework?
 
 Writer Framework is an open-source framework for creating AI applications. Build user interfaces using a visual editor; write the backend code in Python.
 
diff --git a/docs/framework/authentication.mdx b/docs/framework/authentication.mdx
index f226dafbd..53db8c541 100644
--- a/docs/framework/authentication.mdx
+++ b/docs/framework/authentication.mdx
@@ -4,7 +4,7 @@ title: "Authentication"
 
 The Writer framework authentication module allows you to restrict access to your application.
 
-Writer framework offers either simple password authentication or identity provider authentication (Google, Microsoft, Facebook, Github, Auth0, etc.).
+Framework will be able to authenticate a user through an identity provider such as Google, Microsoft, Facebook, Github, Auth0, etc.
 
 <Warning>
   Authentication is done before accessing the application. It is not possible to
@@ -53,7 +53,7 @@ modifying the value of delay_after_failure.
 Authentication configuration is done in the `server_setup.py` [module](custom-server.md). The configuration depends on your identity provider.
 Here is an example configuration for Google.
 
-![Authentication OIDC Principle](/framework/images/authentication_oidc_principle.png)
+![Authentication OIDC Principle](/framework/images/auth.png)
 
 **server_setup.py**
 
@@ -80,9 +80,9 @@ Writer framework provides pre-configured OIDC providers. You can use them direct
 
  | Provider | Function                 | Description                                                                             |
  | -------- | ------------------------ | --------------------------------------------------------------------------------------- |
- | Google   | `streamsync.auth.Google` | Allow your users to login with their Google Account                                     |
- | Github   | `streamsync.auth.Github` | Allow your users to login with their Github Account                                     |
- | Auth0    | `streamsync.auth.Auth0`  | Allow your users to login with different providers or with login password through Auth0 |
+ | Google   | `writer.auth.Google` | Allow your users to login with their Google Account                                     |
+ | Github   | `writer.auth.Github` | Allow your users to login with their Github Account                                     |
+ | Auth0    | `writer.auth.Auth0`  | Allow your users to login with different providers or with login password through Auth0 |
 
 #### Google
 
diff --git a/docs/framework/backend-driven-ui.mdx b/docs/framework/backend-driven-ui.mdx
index 658da882d..ae09f7c81 100644
--- a/docs/framework/backend-driven-ui.mdx
+++ b/docs/framework/backend-driven-ui.mdx
@@ -2,14 +2,10 @@
 title: "Backend-driven UI"
 ---
 
-Streamsync facilitates backend-initiated user interface modifications. These changes are made possible through **Code-Managed Components** (CMCs), distinct from *Builder-Managed Components* (BMCs). 
+Framework facilitates backend-initiated user interface modifications. These changes are made possible through **Code-Managed Components** (CMCs), distinct from *Builder-Managed Components* (BMCs). 
 
 CMCs, unlike BMCs, are dynamically created and modified via backend code, and cannot be edited (but still can be viewed) within the application builder. It's important to also note that CMCs do not persist in your application's `ui.json` file and exist only during the application runtime, supporting dynamic UI adjustments.
 
-<Warning>
-Experimental feature! This Streamsync feature is still evolving. You may encounter unexpected behaviour. Your feedback is invaluable — please feel free to [share your experience and suggestions](https://github.com/streamsync-cloud/streamsync/discussions). 
-</Warning>
-
 <Note> 
 To summarise:
 
@@ -26,16 +22,16 @@ To summarise:
 
 ## UI manager
 
-Streamsync provides two independent approaches for managing your application's UI: initializing a base UI and making session-specific updates.
+Framework provides two independent approaches for managing your application's UI: initializing a base UI and making session-specific updates.
 
 ### Initializing base UI
 
 The `init_ui()` method sets up a UI manager to configure UI components at the application's startup. This creates a component set that is accessible across all sessions:
 
 ```python
-import streamsync as ss
+import writer as wf
 
-with ss.init_ui() as ui:
+with wf.init_ui() as ui:
     with ui.Page(id="my-page"):
         ui.Header({"text": "Hello World!"})
         ui.ColumnContainer(id="column-container")
@@ -179,13 +175,13 @@ In addition to `content`, a set of fields which is specific to the component typ
     def increment(state):
         state["counter"] += 1
 
-    initial_state = ss.init_state({"counter": 0})
+    initial_state = wf.init_state({"counter": 0})
 
     ...
     
     ui.Button(
         {"text": "My Counter: @{counter}"}, 
-        handlers={"ss-click": increment}
+        handlers={"wf-click": increment}
         )
     # You have two options for adding a function 
     # to the `handlers` dictionary: 
@@ -196,7 +192,7 @@ In addition to `content`, a set of fields which is specific to the component typ
     *A component can be linked to multiple event handlers.*
 - **`binding: dict[str, str]`**: Links the component to a state variable via [binding](https://www.streamsync.cloud/builder-basics.html#binding). The dictionary key is the bindable event, and the value is the state variable's name:
     ```python
-    initial_state = ss.init_state({
+    initial_state = wf.init_state({
         "header_text": "Default Text"
         "counter": 0
         })
@@ -205,14 +201,14 @@ In addition to `content`, a set of fields which is specific to the component typ
 
     ui.TextInput(
         {"label": "Bound Text"}, 
-        binding={"ss-change": "header_text"}
+        binding={"wf-change": "header_text"}
         )
     # This input will display "Default Text"
     # Changing the text in this input will modify the `header_text` variable
 
     ui.SliderInput(
         {"minValue": 0, "maxValue": 300, "stepSize": 1}, 
-        binding={"ss-number-change": "counter"}
+        binding={"wf-number-change": "counter"}
         )
     # This slider will have 0 as a default value
     # Sliding it will modify the `counter` variable
@@ -221,7 +217,7 @@ In addition to `content`, a set of fields which is specific to the component typ
 
 ### Container components
 
-Streamsync provides multiple layout components that can serve as *containers* for other components. 
+Framework provides multiple layout components that can serve as *containers* for other components. 
 
 You can use `with` keyword to define such layouts:
 ```python
diff --git a/docs/framework/backend-initiated-actions.mdx b/docs/framework/backend-initiated-actions.mdx
index a4e34952e..5867571b8 100644
--- a/docs/framework/backend-initiated-actions.mdx
+++ b/docs/framework/backend-initiated-actions.mdx
@@ -2,16 +2,16 @@
 title: "Backend-initiated actions"
 ---
 
-Targeted, backend-initiated actions can be triggered from event handlers, using methods of `state`. Internally, this is achieved using Streamsync's `mail`, ephemeral state that is cleared when it reaches the intended user.
+Targeted, backend-initiated actions can be triggered from event handlers, using methods of `state`. Internally, this is achieved using Framework's `mail`, ephemeral state that is cleared when it reaches the intended user.
 
 ## Triggering a file download
 
-The `file_download` method takes the `data` and `file_name` arguments. The first must contain raw bytes (a `bytes` object) or a packed file. As mentioned in the [Application State](application-state.html#files-and-binary-data) section of the guide, a packed file is obtained using the `ss.pack_file` or `ss.pack_bytes` methods.
+The `file_download` method takes the `data` and `file_name` arguments. The first must contain raw bytes (a `bytes` object) or a packed file. As mentioned in the [Application State](application-state.html#files-and-binary-data) section of the guide, a packed file is obtained using the `wf.pack_file` or `wf.pack_bytes` methods.
 
 ```py
 def handle_file_download(state):
     # Pack the file as a FileWrapper object
-    data = ss.pack_file("assets/story.txt", "text/plain")
+    data = wf.pack_file("assets/story.txt", "text/plain")
     file_name = "thestory.txt"
     state.file_download(data, file_name)
 ```
@@ -20,7 +20,7 @@ def handle_file_download(state):
 
 ![Notifications](./images/backend-initiated-actions.notifications.png)
 
-Streamsync adds notifications when a runtime error takes place. You can add your own notifications using the `add_notification` method, which takes the `type`, `title` and `message` arguments. `type` must be one of `error`, `warning`, `info`, `success`.
+Framework adds notifications when a runtime error takes place. You can add your own notifications using the `add_notification` method, which takes the `type`, `title` and `message` arguments. `type` must be one of `error`, `warning`, `info`, `success`.
 
 ```py
 def notify_of_things_that_happened(state):
@@ -35,8 +35,8 @@ def notify_of_things_that_happened(state):
 Open a URL in a new tab using the `open_url` method, which takes the `url` argument.
 
 ```py
-def handle_open_streamsync_website(state):
-    state.open_url("https://streamsync.cloud")
+def handle_open_website(state):
+    state.open_url("https://writer.com")
 ```
 
 The URL will be safely opened with `noopener` and `noreferrer` options.
diff --git a/docs/framework/builder-basics.mdx b/docs/framework/builder-basics.mdx
index 5eee6a07e..50acc33e7 100644
--- a/docs/framework/builder-basics.mdx
+++ b/docs/framework/builder-basics.mdx
@@ -2,7 +2,7 @@
 title: "Builder basics"
 ---
 
-Streamsync Builder works as an overlay of the running app; you edit your app while it's running. It gives you an accurate representation of what the app will look like and how it'll behave, without the need to constantly preview it. Changes to the user interface are automatically saved to `ui.json`.
+Framework Builder works as an overlay of the running app; you edit your app while it's running. It gives you an accurate representation of what the app will look like and how it'll behave, without the need to constantly preview it. Changes to the user interface are automatically saved to `ui.json`.
 
 ## Modes
 
@@ -10,13 +10,13 @@ You can switch modes between _User Interface_, _Code_ and _Preview_ using the bu
 
 ### User Interface
 
-![Streamsync Builder - Mode: User Interface](/framework/images/builder-basics.ui.png)
+![Framework Builder - Mode: User Interface](/framework/images/builder-basics.ui.png)
 
 The default mode. Allows you to focus on building the interface.
 
 ### Code
 
-![Streamsync Builder - Mode: Code](/framework/images/builder-basics.code.png)
+![Framework Builder - Mode: Code](/framework/images/builder-basics.code.png)
 
 This mode displays the code editor and the application log, while still allowing you to access the _Component Tree_ and _Settings_.
 
@@ -30,7 +30,7 @@ If you need a more powerful editor or if your codebase is distributed across sev
 
 Code changes are automatically detected
 
-The application will reload whenever a change to a `.py` file inside the app folder is detected. This feature only works in Streamsync Builder i.e. `edit` mode, not when running the app in `run` mode.
+The application will reload whenever a change to a `.py` file inside the app folder is detected. This feature only works in Framework Builder i.e. `edit` mode, not when running the app in `run` mode.
 
 </Note>
 
@@ -40,7 +40,7 @@ Exceptions raised by your application are shown here, as log entries. Standard o
 
 ### Preview
 
-![Streamsync Builder - Mode: Preview](/framework/images/builder-basics.preview.png)
+![Framework Builder - Mode: Preview](/framework/images/builder-basics.preview.png)
 
 The _Preview_ mode shows the application exactly like the user will see it. It allocates the whole width of the viewport to the app.
 
@@ -51,7 +51,7 @@ The _Preview_ mode shows the application exactly like the user will see it. It a
 - Certain components have restrictions. For example, a _Column_ can only be added to a _Column Container_. A _Sidebar_ can only be added to a _Page_.
 - By default, components are added in the last position. To add components in a specific position, drag over the desired parent until the insertion lines are shown.
 
-![Streamsync Builder - Insertion position](./images/builder-basics.insertion.gif)
+![Framework Builder - Insertion position](/framework/images/builder-basics.insertion.gif)
 
 - You can drag and drop existing components within the app, from one parent to another, or within the same parent to reposition them.
 - Alternatively, you can use the _Component Tree_ either as source or destination for drag and drop.
@@ -67,7 +67,7 @@ The _Preview_ mode shows the application exactly like the user will see it. It a
 
 Settings are divided into the following sections. Changes to settings can be undone and redone using the buttons on the top bar.
 
-![Streamsync Builder - Component settings](./images/builder-basics.component-settings.png)
+![Framework Builder - Component settings](/framework/images/builder-basics.component-settings.png)
 
 ### Properties
 
@@ -83,7 +83,7 @@ Properties are of different types, such as _Text_, _Color_ and _Number_. All pro
 
 ### Binding
 
-![Streamsync Builder - Binding](./images/builder-basics.binding.png)
+![Framework Builder - Binding](/framework/images/builder-basics.binding.png)
 
 Input components can be bound, in a two-way fashion, to a state element.
 
@@ -107,7 +107,7 @@ Whether the component should be displayed. There are three visibility options:
 
 Perform a variety of operations on existing components. Options will be grayed out when they're not applicable to the relevant component. Most shortcuts can be triggered using the keyboard; hover on them to show the appropriate combination.
 
-![Streamsync Builder - Component shortcuts](./images/builder-basics.component-shortcuts.png)
+![Framework Builder - Component shortcuts](/framework/images/builder-basics.component-shortcuts.png)
 
 - _Add_. Adds a child of a given type to this component.
 - _Move up_. Decrements the position index of the component, used to sort children in the parent container.
diff --git a/docs/framework/custom-components.mdx b/docs/framework/custom-components.mdx
index a10813499..e30f57e2a 100644
--- a/docs/framework/custom-components.mdx
+++ b/docs/framework/custom-components.mdx
@@ -2,7 +2,7 @@
 title: "Custom components"
 ---
 
-It's possible to extend Streamsync with custom component templates. 
+It's possible to extend Framework with custom component templates. 
 
 They're developed using Vue 3 and TypeScript. Once transpiled, they can be used by copying them to the `extensions/` folder of any project.
 
@@ -13,7 +13,7 @@ They are just as performant, can contain other components, and offer the same Bu
 
 ## Architecture
 
-Streamsync frontend compiles to a collection of static assets that is distributed in the Python package. These static assets are then served via FastAPI.
+Framework frontend compiles to a collection of static assets that is distributed in the Python package. These static assets are then served via FastAPI.
 
 During initialisation time, the server scans the `extensions/` folder in the project folder and looks for `.css` and `.js` files. This folder is also served, similarly to `static/`. If it finds any valid files in `extensions/`, it shares the list with clients and tells them to dynamically import these files during runtime.
 
@@ -31,7 +31,7 @@ Dependencies are [_provided_](https://vuejs.org/api/composition-api-dependency-i
 
 A template defines how a certain component is rendered. For example, `corebutton` defines how _Button_ components are rendered.
 
-Streamsync component templates are purely frontend-based. **They are Vue 3 templates that extend the Vue specification** via a [custom option](https://vuejs.org/api/utility-types.html#componentcustomoptions), `streamsync`. This _custom option_ defines all the Streamsync-specific behaviour of the component. For example, its `fields` property establishes which fields will be editable via Builder.
+Framework component templates are purely frontend-based. **They are Vue 3 templates that extend the Vue specification** via a [custom option](https://vuejs.org/api/utility-types.html#componentcustomoptions), `writer`. This _custom option_ defines all the Framework-specific behaviour of the component. For example, its `fields` property establishes which fields will be editable via Builder.
 
 ### Simple example
 
@@ -52,12 +52,12 @@ This example shows a template for _Bubble Message_, a simple demo component with
 
 <script lang="ts">
 export default {    
-    streamsync: {
+    writer: {
 		name: "Bubble Message",
 		description: "Shows a message in the shape of a speech bubble.",
 		category: "Content",
 		
-        // Fields will be editable via Streamsync Builder
+        // Fields will be editable via Framework Builder
         
         fields: {
 			text: {
@@ -98,11 +98,11 @@ The code above will make _Bubble Message_ available in Builder.
 
 ### Run a local server
 
-To get started, clone the [Streamsync repository](https://github.com/streamsync-cloud/streamsync) from GitHub. 
+To get started, clone the [Framework repository](https://github.com/streamsync-cloud/streamsync) from GitHub. 
 
 To develop custom templates, at least in a developer-friendly way, you'll need a frontend development server with instant reloads.
 
-The frontend code for Streamsync can be found in the folder `ui`. With Node and npm in your system, run `npm install` to install dependencies, and start the server with support for custom component templates using `npm run custom.dev`.
+The frontend code for Framework can be found in the folder `ui`. With Node and npm in your system, run `npm install` to install dependencies, and start the server with support for custom component templates using `npm run custom.dev`.
 
 ```sh
 cd ui
@@ -116,14 +116,14 @@ npm run custom.dev
 
 The command above will start a frontend server, but won't be of much use by itself —a backend is needed. The frontend development server proxies backend requests to port 5000.
 
-Start Streamsync via command line, specifying the option `--port 5000`, to provide a backend in that port. It's recommended to create a new app for testing the template you're developing.
+Start Framework via command line, specifying the option `--port 5000`, to provide a backend in that port. It's recommended to create a new app for testing the template you're developing.
 
 ```sh
-streamsync create customtester
-streamsync edit customtester --port 5000
+writer create customtester
+writer edit customtester --port 5000
 ```
 
-You should now be able to access Streamsync via the URL provided by Vite, e.g. `http://localhost:5174`. In Builder's _Toolkit_, you should see the sample component, _Balloon Message_. Add it to your tester application.
+You should now be able to access Framework via the URL provided by Vite, e.g. `http://localhost:5174`. In Builder's _Toolkit_, you should see the sample component, _Balloon Message_. Add it to your tester application.
 
 ### Create a new component
 
@@ -175,4 +175,4 @@ Collect the files from `ui/custom_components_dist` and pack them in a folder suc
 
 ### Try them
 
-The folder containing the generated files, e.g. `my_custom_bubbles`, can now be placed in the `extensions/` folder of any Streamsync project. It'll be automatically detected during server startup.
\ No newline at end of file
+The folder containing the generated files, e.g. `my_custom_bubbles`, can now be placed in the `extensions/` folder of any Framework project. It'll be automatically detected during server startup.
\ No newline at end of file
diff --git a/docs/framework/custom-server.mdx b/docs/framework/custom-server.mdx
index 5c1b11580..742ea73db 100644
--- a/docs/framework/custom-server.mdx
+++ b/docs/framework/custom-server.mdx
@@ -2,27 +2,27 @@
 title: "Custom server"
 ---
 
-Streamsync uses Uvicorn and serves the app in the root path i.e. `/`. If you need to use another ASGI-compatible server or fine-tune Uvicorn, you can easily do so.
+Framework uses Uvicorn and serves the app in the root path i.e. `/`. If you need to use another ASGI-compatible server or fine-tune Uvicorn, you can easily do so.
 
 ## Configure webserver
 
 You can tune your server by adding a `server_setup.py` file to the root 
 of your application, next to the `main.py` and `ui.json` files.
 
-This file is executed before starting streamsync. It allows you to configure [authentication](./authentication.md),
+This file is executed before starting writer. It allows you to configure [authentication](./authentication.md),
 add your own routes and middlewares on FastAPI. 
 
 ```python
 # server_setup.py
 import typing
 
-import streamsync.serve
+import writer.serve
 
 if typing.TYPE_CHECKING:
     from fastapi import FastAPI
 
-# Returns the FastAPI application associated with the streamsync server.
-asgi_app: FastAPI = streamsync.serve.app
+# Returns the FastAPI application associated with the writer server.
+asgi_app: FastAPI = writer.serve.app
 
 @asgi_app.get("/probes/healthcheck")
 def hello():
@@ -31,29 +31,29 @@ def hello():
 
 ::: warning Use `server_setup.py` in `edit` mode
 If you want to use in `edit` mode, 
-you can launch `streamsync edit --enable-server-setup <app>`.
+you can launch `writer edit --enable-server-setup <app>`.
 :::
 
 ## Implement custom server
 
-You can import `streamsync.serve` and use the function `get_asgi_app`. This returns an ASGI app created by FastAPI, which you can choose how to serve.
+You can import `writer.serve` and use the function `get_asgi_app`. This returns an ASGI app created by FastAPI, which you can choose how to serve.
 
 The following code can serve as a starting point. You can save this code as `serve.py` and run it with `python serve.py`.
 
 ```py
 import uvicorn
-import streamsync.serve
+import writer.serve
 
 app_path = "." # . for current working directory
 mode = "run" # run or edit
 
-asgi_app = streamsync.serve.get_asgi_app(app_path, mode)
+asgi_app = writer.serve.get_asgi_app(app_path, mode)
 
 uvicorn.run(asgi_app,
     host="0.0.0.0",
     port=5328,
     log_level="warning",
-    ws_max_size=streamsync.serve.MAX_WEBSOCKET_MESSAGE_SIZE)
+    ws_max_size=writer.serve.MAX_WEBSOCKET_MESSAGE_SIZE)
 ```
 
 Note the inclusion of the imported `ws_max_size` setting. This is important for normal functioning of the framework when dealing with bigger files.
@@ -62,24 +62,24 @@ Fine-tuning Uvicorn allows you to set up SSL, configure proxy headers, etc, whic
 
 ::: tip Use server setup hook
 ```python
-asgi_app = streamsync.serve.get_asgi_app(app_path, mode, enable_server_setup=True)
+asgi_app = writer.serve.get_asgi_app(app_path, mode, enable_server_setup=True)
 ```
 :::
 
 ## Multiple apps at once
 
-Streamsync is built using relative paths, so it can be served from any path. This allows multiple apps to be simultaneously served on different paths.
+Framework is built using relative paths, so it can be served from any path. This allows multiple apps to be simultaneously served on different paths.
 
-The example below uses the `get_asgi_app` function to obtain two separate Streamsync apps, which are then mounted on different paths, `/app1` and `/app2`, of a FastAPI app.
+The example below uses the `get_asgi_app` function to obtain two separate Framework apps, which are then mounted on different paths, `/app1` and `/app2`, of a FastAPI app.
 
 ```py
 import uvicorn
-import streamsync.serve
+import writer.serve
 from fastapi import FastAPI, Response
 
-root_asgi_app = FastAPI(lifespan=streamsync.serve.lifespan)
-sub_asgi_app_1 = streamsync.serve.get_asgi_app("../app1", "run")
-sub_asgi_app_2 = streamsync.serve.get_asgi_app("../app2", "run")
+root_asgi_app = FastAPI(lifespan=writer.serve.lifespan)
+sub_asgi_app_1 = writer.serve.get_asgi_app("../app1", "run")
+sub_asgi_app_2 = writer.serve.get_asgi_app("../app2", "run")
 
 root_asgi_app.mount("/app1", sub_asgi_app_1)
 root_asgi_app.mount("/app2", sub_asgi_app_2)
@@ -94,5 +94,5 @@ uvicorn.run(root_asgi_app,
     host="0.0.0.0",
     port=5328,
     log_level="warning",
-    ws_max_size=streamsync.serve.MAX_WEBSOCKET_MESSAGE_SIZE)
+    ws_max_size=writer.serve.MAX_WEBSOCKET_MESSAGE_SIZE)
 ```
diff --git a/docs/framework/deploy-with-docker.mdx b/docs/framework/deploy-with-docker.mdx
index 47c03f035..0a1be5492 100644
--- a/docs/framework/deploy-with-docker.mdx
+++ b/docs/framework/deploy-with-docker.mdx
@@ -2,7 +2,7 @@
 title: "Deploy with Docker"
 ---
 
-You can use Docker to deploy Streamsync anywhere. If you're an experienced Docker user, you may want to go straight to the provided Dockerfile.
+You can use Docker to deploy Framework anywhere. If you're an experienced Docker user, you may want to go straight to the provided Dockerfile.
 
 ## Creating a Docker image
 
@@ -10,7 +10,7 @@ You can use Docker to deploy Streamsync anywhere. If you're an experienced Docke
 
 - Make sure you have Docker installed.
 - Open a terminal and navigate to your app's folder.
-- Create a `pyproject.toml` using `poetry init` and install `streamsync` using `poetry add streamsync`
+- Create a `pyproject.toml` using `poetry init` and install `writer` using `poetry add writer`
 
 ### Creating a Dockerfile
 
@@ -27,7 +27,7 @@ WORKDIR /app
 RUN pip3 install poetry
 RUN poetry config virtualenvs.create false
 RUN poetry install --only main
-ENTRYPOINT [ "streamsync", "run" ]
+ENTRYPOINT [ "writer", "run" ]
 EXPOSE 8080
 CMD [ ".",  "--port", "8080", "--host", "0.0.0.0" ] 
 ```
@@ -35,7 +35,7 @@ CMD [ ".",  "--port", "8080", "--host", "0.0.0.0" ]
 <Note> 
 This Dockerfile is just a guideline.
 It uses an official Python slim base image with a multistage build to reduce the size of the built image.
-If you're a Docker expert, feel free to work on your own `Dockerfile`. Streamsync is, after all, a standard Python package.
+If you're a Docker expert, feel free to work on your own `Dockerfile`. Framework is, after all, a standard Python package.
 </Note>
 
 ### Building the Docker image
diff --git a/docs/framework/event-handlers.mdx b/docs/framework/event-handlers.mdx
index dc42ffd9e..3d7c7523d 100644
--- a/docs/framework/event-handlers.mdx
+++ b/docs/framework/event-handlers.mdx
@@ -108,7 +108,7 @@ The handler above receives the application state for the relevant session and mu
 
 ## Mutation detection
 
-When communicating with the frontend, Streamsync only sends state elements that have mutated.
+When communicating with the frontend, Framework only sends state elements that have mutated.
 
 To detect which elements have mutated, it relies on assignment (via operators such as `=`, `+=`, etc). This is because Python doesn't offer a performant, reliable mechanism to detect mutations. See the example below.
 
@@ -198,7 +198,7 @@ def handle_fast(state):
     state["y"] += 2
 ```
 
-However, for long-running tasks, Streamsync will periodically check state and provide partial updates to the user.
+However, for long-running tasks, Framework will periodically check state and provide partial updates to the user.
 
 ```py
 def handle_slowly(state):
@@ -212,7 +212,7 @@ The code above will set `message` to "Loading...", then to "Completed".
 
 ## Asynchronous Event Handlers
 
-Streamsync supports asynchronous event handlers, allowing for non-blocking I/O operations directly within event handlers. This is particularly useful for tasks such as fetching data from a database, making HTTP requests, or performing any other I/O bound operation that can benefit from asynchronous execution.
+Framework supports asynchronous event handlers, allowing for non-blocking I/O operations directly within event handlers. This is particularly useful for tasks such as fetching data from a database, making HTTP requests, or performing any other I/O bound operation that can benefit from asynchronous execution.
 
 ### Defining an Asynchronous Handler
 
diff --git a/docs/framework/frontend-scripts.mdx b/docs/framework/frontend-scripts.mdx
index 7aaf021ac..386271dba 100644
--- a/docs/framework/frontend-scripts.mdx
+++ b/docs/framework/frontend-scripts.mdx
@@ -2,11 +2,11 @@
 title: "Frontend scripts"
 ---
 
-Streamsync can import custom JavaScript/ES6 modules from the frontend. Module functions can be triggered from the backend.
+Framework can import custom JavaScript/ES6 modules from the frontend. Module functions can be triggered from the backend.
 
 ## Importing an ES6 module
 
-Similarly to [stylesheets](/stylesheets), frontend scripts are imported via Streamsync's `mail` capability. This allows you to trigger an import for all or specific sessions at any time during runtime. When the `import_frontend_module` method is called, this triggers a dynamic [import()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) call in the frontend.
+Similarly to [stylesheets](/stylesheets), frontend scripts are imported via Framework's `mail` capability. This allows you to trigger an import for all or specific sessions at any time during runtime. When the `import_frontend_module` method is called, this triggers a dynamic [import()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) call in the frontend.
 
 The `import_frontend_module` method takes the `module_key` and `specifier` arguments. The `module_key` is an identifier used to store the reference to the module, which will be used later to call the module's functions. The `specifier` is the path to the module, such as `/static/mymodule.js`. It needs to be available to the frontend, so storing in the `/static/` folder is recommended.
 
@@ -20,7 +20,7 @@ def handle_click(state):
 If you want the module to be imported during initialisation, use the initial state.
 
 ```py
-initial_state = ss.init_state({
+initial_state = wf.init_state({
     "counter": 1
 })
 
@@ -61,10 +61,10 @@ def handle_click(state):
 
 ## Import a JavaScript script
 
-Streamsync can also import and run JavaScript scripts directly, for their side effects. These are imported via the report's `import_script` method. This method takes two arguments. The first, `script_key` is the identifier used to import the script. The second, `path` is the path to the file. The specified path must be available to the frontend, so storing it in your application's `./static` folder is recommended.
+Framework can also import and run JavaScript scripts directly, for their side effects. These are imported via the report's `import_script` method. This method takes two arguments. The first, `script_key` is the identifier used to import the script. The second, `path` is the path to the file. The specified path must be available to the frontend, so storing it in your application's `./static` folder is recommended.
 
 ```py
-initial_state = ss.init_state({
+initial_state = wf.init_state({
     "counter": 1
 })
 
@@ -79,10 +79,10 @@ Importing scripts is useful to import libraries that don't support ES6 modules.
 
 ## Importing a script or stylesheet from a URL
 
-Streamsync can also import scripts and stylesheets from URLs. This is useful for importing libraries from CDNs. The `import_script` and `import_stylesheet` methods take a `url` argument, which is the URL to the script or stylesheet.
+Framework can also import scripts and stylesheets from URLs. This is useful for importing libraries from CDNs. The `import_script` and `import_stylesheet` methods take a `url` argument, which is the URL to the script or stylesheet.
 
 ```python
-initial_state = ss.init_state({
+initial_state = wf.init_state({
     "my_app": {
         "title": "My App"
     },
@@ -93,7 +93,7 @@ initial_state.import_script("lodash", "https://cdnjs.cloudflare.com/ajax/libs/lo
 
 ## Frontend core
 
-You can access Streamsync's frontend core via `globalThis.core`, unlocking all sorts of functionality. Notably, you can use `getUserState()` to get values from state.
+You can access Framework's frontend core via `globalThis.core`, unlocking all sorts of functionality. Notably, you can use `getUserState()` to get values from state.
 
 ```js
 export function alertHueRotationValue() {
@@ -105,5 +105,5 @@ export function alertHueRotationValue() {
 <Warning> 
 Here be dragons
 
-Effectively using Streamsync's core can be challenging and will likely entail reading its [source code](https://github.com/streamsync-cloud/streamsync/blob/master/ui/src/core/index.ts). Furthermore, it's considered an internal capability rather than a public API, so it may unexpectedly change between releases.
+Effectively using Framework's core can be challenging and will likely entail reading its [source code](https://github.com/streamsync-cloud/streamsync/blob/master/ui/src/core/index.ts). Furthermore, it's considered an internal capability rather than a public API, so it may unexpectedly change between releases.
 </Warning>
\ No newline at end of file
diff --git a/docs/framework/handling-inputs.mdx b/docs/framework/handling-inputs.mdx
index 9a9abd482..ec3abdde3 100644
--- a/docs/framework/handling-inputs.mdx
+++ b/docs/framework/handling-inputs.mdx
@@ -2,11 +2,11 @@
 title: "Handling inputs"
 ---
 
-There are two, complementary, ways to handle inputs in Streamsync: via event handlers and via binding.
+There are two, complementary, ways to handle inputs in Framework: via event handlers and via binding.
 
 ## Event handlers
 
-Input components have _change_ events that are dispatched when the value changes. The new value is provided as a payload in the event handler. Change events have slightly different names across components, reflecting the payloads they provide. For example, _Number Input_ and _Slider Input_ use the event `ss-number-change` while _Text Input_ and _Text Area Input_ use the generic `ss-change`.
+Input components have _change_ events that are dispatched when the value changes. The new value is provided as a payload in the event handler. Change events have slightly different names across components, reflecting the payloads they provide. For example, _Number Input_ and _Slider Input_ use the event `wf-number-change` while _Text Input_ and _Text Area Input_ use the generic `wf-change`.
 
 As discussed in the [Event handlers](event-handlers.html) section, the payload can be accessed via the `payload` argument in the event handler.
 
@@ -25,7 +25,7 @@ Bindings automatically handle the _change_ event for the component and set the v
 
 As mentioned in the [Builder basics](builder-basics.html) section of the guide, bindings can be configured in the component settings.
 
-![Repeater example](./images/handling-inputs.binding.png)
+![Repeater example](/framework/images/handling-inputs.binding.png)
 
 The binding above establishes a two-way link between the component and the state element `name`. If `name` changes in the backend, the component changes. If the component changes, the value of `name` changes.
 
@@ -40,9 +40,9 @@ def recalculate(state):
 
 ## Handling inputs safely
 
-Streamsync automatically sanitises the payloads it provides for its built-in events, those that start with `ss-`.
+Framework automatically sanitises the payloads it provides for its built-in events, those that start with `wf-`.
 
-For example, if a _Dropdown Input_ component lists options `high` and `low`, you're guaranteed you won't get a value like `"Robert'); DROP TABLE students;--"` when handling `ss-option-change`. You'll get `"high"`, `"low"` or `None`.
+For example, if a _Dropdown Input_ component lists options `high` and `low`, you're guaranteed you won't get a value like `"Robert'); DROP TABLE students;--"` when handling `wf-option-change`. You'll get `"high"`, `"low"` or `None`.
 
 <Warning> 
 
@@ -55,4 +55,4 @@ As with any application, it's important to be familiar with the risks associated
 
 Input components can be combined with _Message_ and _Button_ components to create forms with messages, indicating whether the submission was successful.
 
-![Form example](./images/handling-inputs.form.png)
+![Form example](/framework/images/handling-inputs.form.png)
diff --git a/docs/framework/images/auth.png b/docs/framework/images/auth.png
new file mode 100644
index 000000000..12ba240bd
Binary files /dev/null and b/docs/framework/images/auth.png differ
diff --git a/docs/framework/images/authentication_oidc.png b/docs/framework/images/authentication_oidc.png
index ad3982978..b0d507607 100644
Binary files a/docs/framework/images/authentication_oidc.png and b/docs/framework/images/authentication_oidc.png differ
diff --git a/docs/framework/images/authentication_oidc_principle.png b/docs/framework/images/authentication_oidc_principle.png
deleted file mode 100644
index 5e28c9f5c..000000000
Binary files a/docs/framework/images/authentication_oidc_principle.png and /dev/null differ
diff --git a/docs/framework/images/builder-basics.binding.png b/docs/framework/images/builder-basics.binding.png
index 99b814e64..79fd15e5e 100644
Binary files a/docs/framework/images/builder-basics.binding.png and b/docs/framework/images/builder-basics.binding.png differ
diff --git a/docs/framework/images/builder-basics.component-settings.png b/docs/framework/images/builder-basics.component-settings.png
index f90b03e66..dd5416d73 100644
Binary files a/docs/framework/images/builder-basics.component-settings.png and b/docs/framework/images/builder-basics.component-settings.png differ
diff --git a/docs/framework/images/builder-basics.component-shortcuts.png b/docs/framework/images/builder-basics.component-shortcuts.png
index 5483ba789..5ff4e51fb 100644
Binary files a/docs/framework/images/builder-basics.component-shortcuts.png and b/docs/framework/images/builder-basics.component-shortcuts.png differ
diff --git a/docs/framework/images/handling-inputs.binding.png b/docs/framework/images/handling-inputs.binding.png
index 72594879d..79fd15e5e 100644
Binary files a/docs/framework/images/handling-inputs.binding.png and b/docs/framework/images/handling-inputs.binding.png differ
diff --git a/docs/framework/images/handling-inputs.form.png b/docs/framework/images/handling-inputs.form.png
index c98d34ca8..792b51cbf 100644
Binary files a/docs/framework/images/handling-inputs.form.png and b/docs/framework/images/handling-inputs.form.png differ
diff --git a/docs/framework/images/stylesheets.applied-classes.png b/docs/framework/images/stylesheets.applied-classes.png
index 89019ab13..265c99ba9 100644
Binary files a/docs/framework/images/stylesheets.applied-classes.png and b/docs/framework/images/stylesheets.applied-classes.png differ
diff --git a/docs/framework/images/stylesheets.component-settings.png b/docs/framework/images/stylesheets.component-settings.png
index 26a1c3fe5..cea084057 100644
Binary files a/docs/framework/images/stylesheets.component-settings.png and b/docs/framework/images/stylesheets.component-settings.png differ
diff --git a/docs/framework/introduction.mdx b/docs/framework/introduction.mdx
index 130eeeaa4..9ac4635bc 100644
--- a/docs/framework/introduction.mdx
+++ b/docs/framework/introduction.mdx
@@ -2,11 +2,11 @@
 title: "Introduction"
 ---
 
-## What is Streamsync?
+## What is Framework?
 
-Streamsync is an open-source framework for creating data apps. Build user interfaces using a visual editor; write the backend code in Python.
+Framework is an open-source framework for creating data apps. Build user interfaces using a visual editor; write the backend code in Python.
 
-![Streamsync Builder screenshot](/framework/public/builder.png)
+![Framework Builder screenshot](/framework/public/builder.png)
 
 It's an alternative to Plotly Dash, Streamlit and Gradio. Its focused on the creation of web applications for data analytics and machine learning.
 
@@ -21,12 +21,12 @@ Event handlers are defined as plain, easily-testable Python functions.
 def handle_increment(state):
     state["counter"] += 1
 
-ss.init_state({
+wf.init_state({
     "counter": 0
 })
 ```
 
-The event handler and state are linked to the UI using Streamsync Builder, the framework's visual editor.
+The event handler and state are linked to the UI using Framework Builder, the framework's visual editor.
 
 ![Counter Increment example](/framework/public/introduction.counter.gif)
 
diff --git a/docs/framework/page-routes.mdx b/docs/framework/page-routes.mdx
index 436b5d73c..6de994b24 100644
--- a/docs/framework/page-routes.mdx
+++ b/docs/framework/page-routes.mdx
@@ -2,7 +2,7 @@
 title: "Page routes"
 ---
 
-Streamsync apps can have multiple pages, with parametrised routes. Pages can be switched from the frontend or the backend.
+Framework apps can have multiple pages, with parametrised routes. Pages can be switched from the frontend or the backend.
 
 ## Basic navigation
 
@@ -33,7 +33,7 @@ def handle_click(state):
 
 You may want to share a URL that links directly to a specific resource within your app. For example, to a specific location or product.
 
-You can do so by specifying parameters in the URL, known as route vars. Streamsync URLs contain the page key, followed by the route vars and their values. For example, `/#detailPage/product_id=32&country=AR`.
+You can do so by specifying parameters in the URL, known as route vars. Framework URLs contain the page key, followed by the route vars and their values. For example, `/#detailPage/product_id=32&country=AR`.
 
 ### Adding vars to the URL from the backend
 
@@ -50,7 +50,7 @@ def change_route_vars(state):
 
 ### Retrieving the values
 
-Streamsync uses the hash portion of the URL to store page and variable data, so even when switching pages or changing variables, the page doesn't reload. To monitor changes to the active URL, set up an event handler for `ss-hashchange` in the _Root_ component.
+Framework uses the hash portion of the URL to store page and variable data, so even when switching pages or changing variables, the page doesn't reload. To monitor changes to the active URL, set up an event handler for `wf-hashchange` in the _Root_ component.
 
 ```py
 # The following event handler reads the product_id route var,
diff --git a/docs/framework/public/components/Select Input.png b/docs/framework/public/components/Select Input.png
new file mode 100644
index 000000000..b44e9d5b8
Binary files /dev/null and b/docs/framework/public/components/Select Input.png differ
diff --git a/docs/framework/public/components/avatar.png b/docs/framework/public/components/avatar.png
index 5182e32be..578eebcd9 100644
Binary files a/docs/framework/public/components/avatar.png and b/docs/framework/public/components/avatar.png differ
diff --git a/docs/framework/public/components/button.png b/docs/framework/public/components/button.png
index d18dc3224..c7bd9631a 100644
Binary files a/docs/framework/public/components/button.png and b/docs/framework/public/components/button.png differ
diff --git a/docs/framework/public/components/chatbot.png b/docs/framework/public/components/chatbot.png
index 8038ff057..82fa74a45 100644
Binary files a/docs/framework/public/components/chatbot.png and b/docs/framework/public/components/chatbot.png differ
diff --git a/docs/framework/public/components/checkboxinput.png b/docs/framework/public/components/checkboxinput.png
index a7aaa6211..f59ad6a3f 100644
Binary files a/docs/framework/public/components/checkboxinput.png and b/docs/framework/public/components/checkboxinput.png differ
diff --git a/docs/framework/public/components/column.png b/docs/framework/public/components/column.png
index 6313f14fd..0dc7c44b5 100644
Binary files a/docs/framework/public/components/column.png and b/docs/framework/public/components/column.png differ
diff --git a/docs/framework/public/components/columns.png b/docs/framework/public/components/columns.png
index 6313f14fd..3784a5f2c 100644
Binary files a/docs/framework/public/components/columns.png and b/docs/framework/public/components/columns.png differ
diff --git a/docs/framework/public/components/dataframe.png b/docs/framework/public/components/dataframe.png
index 2bf334ea3..649801ab7 100644
Binary files a/docs/framework/public/components/dataframe.png and b/docs/framework/public/components/dataframe.png differ
diff --git a/docs/framework/public/components/dateinput.png b/docs/framework/public/components/dateinput.png
index c256d2708..853cea0e2 100644
Binary files a/docs/framework/public/components/dateinput.png and b/docs/framework/public/components/dateinput.png differ
diff --git a/docs/framework/public/components/dropdowninput.png b/docs/framework/public/components/dropdowninput.png
index 9b4060afb..941f46b18 100644
Binary files a/docs/framework/public/components/dropdowninput.png and b/docs/framework/public/components/dropdowninput.png differ
diff --git a/docs/framework/public/components/fileinput.png b/docs/framework/public/components/fileinput.png
index 301f76593..70948f0be 100644
Binary files a/docs/framework/public/components/fileinput.png and b/docs/framework/public/components/fileinput.png differ
diff --git a/docs/framework/public/components/googlemaps.png b/docs/framework/public/components/googlemaps.png
index 0134ca7f3..25d2a656f 100644
Binary files a/docs/framework/public/components/googlemaps.png and b/docs/framework/public/components/googlemaps.png differ
diff --git a/docs/framework/public/components/header.png b/docs/framework/public/components/header.png
index 4ecb0fe78..69222dca4 100644
Binary files a/docs/framework/public/components/header.png and b/docs/framework/public/components/header.png differ
diff --git a/docs/framework/public/components/heading.png b/docs/framework/public/components/heading.png
index fdf4b8fbe..43b36d5e5 100644
Binary files a/docs/framework/public/components/heading.png and b/docs/framework/public/components/heading.png differ
diff --git a/docs/framework/public/components/horizontalstack.png b/docs/framework/public/components/horizontalstack.png
index c493f1bef..9f1f8cd9b 100644
Binary files a/docs/framework/public/components/horizontalstack.png and b/docs/framework/public/components/horizontalstack.png differ
diff --git a/docs/framework/public/components/html.png b/docs/framework/public/components/html.png
index 67395c656..a9aed19de 100644
Binary files a/docs/framework/public/components/html.png and b/docs/framework/public/components/html.png differ
diff --git a/docs/framework/public/components/icon.png b/docs/framework/public/components/icon.png
index 0b9f953ba..3398da5c9 100644
Binary files a/docs/framework/public/components/icon.png and b/docs/framework/public/components/icon.png differ
diff --git a/docs/framework/public/components/iframe.png b/docs/framework/public/components/iframe.png
index d044b7051..bfe4dae48 100644
Binary files a/docs/framework/public/components/iframe.png and b/docs/framework/public/components/iframe.png differ
diff --git a/docs/framework/public/components/image.png b/docs/framework/public/components/image.png
index 31375b487..cb7cdf2d9 100644
Binary files a/docs/framework/public/components/image.png and b/docs/framework/public/components/image.png differ
diff --git a/docs/framework/public/components/link.png b/docs/framework/public/components/link.png
index 00412bcc6..2ef1e61db 100644
Binary files a/docs/framework/public/components/link.png and b/docs/framework/public/components/link.png differ
diff --git a/docs/framework/public/components/mapbox.png b/docs/framework/public/components/mapbox.png
index 11cbe658e..d59959b4d 100644
Binary files a/docs/framework/public/components/mapbox.png and b/docs/framework/public/components/mapbox.png differ
diff --git a/docs/framework/public/components/message.png b/docs/framework/public/components/message.png
index 3eba35704..f9481b63e 100644
Binary files a/docs/framework/public/components/message.png and b/docs/framework/public/components/message.png differ
diff --git a/docs/framework/public/components/metric.png b/docs/framework/public/components/metric.png
index 412b276bf..f64122209 100644
Binary files a/docs/framework/public/components/metric.png and b/docs/framework/public/components/metric.png differ
diff --git a/docs/framework/public/components/multiselectinput.png b/docs/framework/public/components/multiselectinput.png
index e05828308..9b567972f 100644
Binary files a/docs/framework/public/components/multiselectinput.png and b/docs/framework/public/components/multiselectinput.png differ
diff --git a/docs/framework/public/components/numberinput.png b/docs/framework/public/components/numberinput.png
index 544c343d3..5c087e94c 100644
Binary files a/docs/framework/public/components/numberinput.png and b/docs/framework/public/components/numberinput.png differ
diff --git a/docs/framework/public/components/pagination.png b/docs/framework/public/components/pagination.png
index 130788ebe..528405773 100644
Binary files a/docs/framework/public/components/pagination.png and b/docs/framework/public/components/pagination.png differ
diff --git a/docs/framework/public/components/pdf.png b/docs/framework/public/components/pdf.png
index 413b3d784..f6c26ca86 100644
Binary files a/docs/framework/public/components/pdf.png and b/docs/framework/public/components/pdf.png differ
diff --git a/docs/framework/public/components/plotlygraph.png b/docs/framework/public/components/plotlygraph.png
index 3245dc678..693b65103 100644
Binary files a/docs/framework/public/components/plotlygraph.png and b/docs/framework/public/components/plotlygraph.png differ
diff --git a/docs/framework/public/components/radioinput.png b/docs/framework/public/components/radioinput.png
index e24965ff2..41eefd77f 100644
Binary files a/docs/framework/public/components/radioinput.png and b/docs/framework/public/components/radioinput.png differ
diff --git a/docs/framework/public/components/ratinginput.png b/docs/framework/public/components/ratinginput.png
index edc3dcabb..604f2f5ff 100644
Binary files a/docs/framework/public/components/ratinginput.png and b/docs/framework/public/components/ratinginput.png differ
diff --git a/docs/framework/public/components/repeater.png b/docs/framework/public/components/repeater.png
index 7c7bc975f..46c1e7213 100644
Binary files a/docs/framework/public/components/repeater.png and b/docs/framework/public/components/repeater.png differ
diff --git a/docs/framework/public/components/reuse.png b/docs/framework/public/components/reuse.png
index f4f286f8b..a72e5b59b 100644
Binary files a/docs/framework/public/components/reuse.png and b/docs/framework/public/components/reuse.png differ
diff --git a/docs/framework/public/components/section.png b/docs/framework/public/components/section.png
index f390a640e..ca5f68cdd 100644
Binary files a/docs/framework/public/components/section.png and b/docs/framework/public/components/section.png differ
diff --git a/docs/framework/public/components/separator.png b/docs/framework/public/components/separator.png
index 9cfcc88db..d8ff7ef95 100644
Binary files a/docs/framework/public/components/separator.png and b/docs/framework/public/components/separator.png differ
diff --git a/docs/framework/public/components/sidebar.png b/docs/framework/public/components/sidebar.png
index 168b45eb9..fcf50ffc6 100644
Binary files a/docs/framework/public/components/sidebar.png and b/docs/framework/public/components/sidebar.png differ
diff --git a/docs/framework/public/components/sliderinput.png b/docs/framework/public/components/sliderinput.png
index 9f2516083..ab4527598 100644
Binary files a/docs/framework/public/components/sliderinput.png and b/docs/framework/public/components/sliderinput.png differ
diff --git a/docs/framework/public/components/step.png b/docs/framework/public/components/step.png
index 37cf67901..b97dbbb81 100644
Binary files a/docs/framework/public/components/step.png and b/docs/framework/public/components/step.png differ
diff --git a/docs/framework/public/components/steps.png b/docs/framework/public/components/steps.png
index 37cf67901..722960fa9 100644
Binary files a/docs/framework/public/components/steps.png and b/docs/framework/public/components/steps.png differ
diff --git a/docs/framework/public/components/switchinput.png b/docs/framework/public/components/switchinput.png
index 955053c55..9376bb50a 100644
Binary files a/docs/framework/public/components/switchinput.png and b/docs/framework/public/components/switchinput.png differ
diff --git a/docs/framework/public/components/tab.png b/docs/framework/public/components/tab.png
index 1656c45cf..eed3c197e 100644
Binary files a/docs/framework/public/components/tab.png and b/docs/framework/public/components/tab.png differ
diff --git a/docs/framework/public/components/tabs.png b/docs/framework/public/components/tabs.png
index 1656c45cf..d3829fd4b 100644
Binary files a/docs/framework/public/components/tabs.png and b/docs/framework/public/components/tabs.png differ
diff --git a/docs/framework/public/components/tags.png b/docs/framework/public/components/tags.png
index 665796aac..664712be2 100644
Binary files a/docs/framework/public/components/tags.png and b/docs/framework/public/components/tags.png differ
diff --git a/docs/framework/public/components/text.png b/docs/framework/public/components/text.png
index 512dcc9a3..f37436e8d 100644
Binary files a/docs/framework/public/components/text.png and b/docs/framework/public/components/text.png differ
diff --git a/docs/framework/public/components/textareainput.png b/docs/framework/public/components/textareainput.png
index 76d7cfb93..e81f4d16f 100644
Binary files a/docs/framework/public/components/textareainput.png and b/docs/framework/public/components/textareainput.png differ
diff --git a/docs/framework/public/components/textinput.png b/docs/framework/public/components/textinput.png
index ade96da70..eed5553be 100644
Binary files a/docs/framework/public/components/textinput.png and b/docs/framework/public/components/textinput.png differ
diff --git a/docs/framework/public/components/timer.png b/docs/framework/public/components/timer.png
index bfe6f6ac2..972731ff5 100644
Binary files a/docs/framework/public/components/timer.png and b/docs/framework/public/components/timer.png differ
diff --git a/docs/framework/public/components/vegalitechart.png b/docs/framework/public/components/vegalitechart.png
index 5cc70ee10..fd0015015 100644
Binary files a/docs/framework/public/components/vegalitechart.png and b/docs/framework/public/components/vegalitechart.png differ
diff --git a/docs/framework/public/components/videoplayer.png b/docs/framework/public/components/videoplayer.png
index e75f7b7d1..b909ba2cf 100644
Binary files a/docs/framework/public/components/videoplayer.png and b/docs/framework/public/components/videoplayer.png differ
diff --git a/docs/framework/public/components/webcamcapture.png b/docs/framework/public/components/webcamcapture.png
index 4848d275b..f25c74604 100644
Binary files a/docs/framework/public/components/webcamcapture.png and b/docs/framework/public/components/webcamcapture.png differ
diff --git a/docs/framework/quickstart-tutorial.mdx b/docs/framework/quickstart-tutorial.mdx
index a7bdcc2f2..9d2aebcd7 100644
--- a/docs/framework/quickstart-tutorial.mdx
+++ b/docs/framework/quickstart-tutorial.mdx
@@ -1,9 +1,9 @@
 ---
 title: "Quickstart tutorial"
 ---
-In this tutorial, we'll guide you through creating a logistic regression visualisation tool using Streamsync. Logistic regression is a fundamental technique in machine learning for binary classification tasks, and visualising its decision boundary can provide valuable insights into the model's behaviour.
+In this tutorial, we'll guide you through creating a logistic regression visualisation tool using Framework. Logistic regression is a fundamental technique in machine learning for binary classification tasks, and visualising its decision boundary can provide valuable insights into the model's behaviour.
 
-First, make sure you have Streamsync installed. You can install it via pip:
+First, make sure you have Framework installed. You can install it via pip:
 
 ```bash
 pip install "streamsync[ds]"
@@ -41,19 +41,19 @@ After that, we can install our requirements.
 pip install -r requirements.txt
 ```
 
-Once this is done, we can finally run the Streamsync editor using the command:
+Once this is done, we can finally run the Framework editor using the command:
 
 ```bash
 streamsync edit .
 ```
 
-This will run our Streamsync instance. Runtime logs can be observed in the terminal, and the app is available at http://localhost:3006.
+This will run our Framework instance. Runtime logs can be observed in the terminal, and the app is available at http://localhost:3006.
 
 ![newly created application](./images/quickstart/new_app.png)
 
 ## UI Creation
 
-By default, Streamsync creates a simple application with a counter. To keep things easy, let's remove the contents from columns to make space for our new application. If you're unsure where to click to select a specific component on the screen, you can always use the `Component Tree` on the bottom left of the screen. The app should look something like this when you finish.
+By default, Framework creates a simple application with a counter. To keep things easy, let's remove the contents from columns to make space for our new application. If you're unsure where to click to select a specific component on the screen, you can always use the `Component Tree` on the bottom left of the screen. The app should look something like this when you finish.
 
 ![empty app](./images/quickstart/empty_app.png)
 
@@ -109,12 +109,12 @@ It is time to create the application's initial state. Let's open the code editor
 Let's remove all code from there and start with:
 
 ```python
-import streamsync as ss
+import writer as wf
 import plotly.graph_objects as go
 from sklearn.linear_model import LogisticRegression
 from sklearn.datasets import make_blobs
 
-initial_state = ss.init_state({
+initial_state = wf.init_state({
     "my_app": {
         "title": "Logistic Regression Visualiser"
     },
@@ -126,7 +126,7 @@ initial_state = ss.init_state({
     "cluster_std": 2,
 })
 ```
-For now, only the Streamsync import is needed, but the rest will be used later on. Notice that after pasting this code into the editor, when we click on `Save and run`, the header of our application will immediately change to "Logistic regression visualiser". This is because the Header has in its text property the value `@{my_app.title}`, which is a template syntax that uses a value from the state.
+For now, only the Framework import is needed, but the rest will be used later on. Notice that after pasting this code into the editor, when we click on `Save and run`, the header of our application will immediately change to "Logistic regression visualiser". This is because the Header has in its text property the value `@{my_app.title}`, which is a template syntax that uses a value from the state.
 
 The rest of the keys and values from the `initial_state` are names and initial values for components that will be used for communication between the app UI and the backend. Assigning those keys to components is called binding, and it is done by clicking on each component and filling property "State element" in the "Binding" menu. Let's use these bindings for our 3 _Slider Input_ components:
 
@@ -212,7 +212,7 @@ The algorithm will generate one or many lines depending on how many groups we ha
 def _line(x0, coef, intercept, c):
     return (-(x0 * coef[c, 0]) - intercept[c]) / coef[c, 1]
 ```
-This function is a helper function meant to be used on the backend. The underscore at the beginning of its name tells Streamsync that this function is private, and the frontend won't know about its existence.
+This function is a helper function meant to be used on the backend. The underscore at the beginning of its name tells Framework that this function is private, and the frontend won't know about its existence.
 
 To make the plot more readable, let's quickly define some colours for our plots:
 
@@ -288,16 +288,16 @@ Now, let's create a plot for our logistic regressions. For that, we will use `pl
 ```
 After saving and running the code, we should get something like this:
 
-But as you could notice, when we change our slider values, nothing happens. It's because our function is currently called only once on app initialisation and not after input changes. To change this behaviour, let's set the event handler for `ss-number-change` in all slider inputs to `update`, which is the name of our function in the Python code. Notice that `_line` is not visible there because it's private to the backend. If we would change its name to `line`, then it would be visible on this list.
+But as you could notice, when we change our slider values, nothing happens. It's because our function is currently called only once on app initialisation and not after input changes. To change this behaviour, let's set the event handler for `wf-number-change` in all slider inputs to `update`, which is the name of our function in the Python code. Notice that `_line` is not visible there because it's private to the backend. If we would change its name to `line`, then it would be visible on this list.
 
-Set also event handler for dropdown input `ss-option-change` and `ss-click` in the button, also to `update`.
+Set also event handler for dropdown input `wf-option-change` and `wf-click` in the button, also to `update`.
 
 And done! You can have fun with your new application. Feel free to modify and play with other options.
 
 Final code for the application should look something like this:
 
 ```python
-import streamsync as ss
+import writer as wf
 import plotly.graph_objects as go
 from sklearn.linear_model import LogisticRegression
 from sklearn.datasets import make_blobs
@@ -398,7 +398,7 @@ def update(state):
     state['figure'] = fig
 
 
-initial_state = ss.init_state({
+initial_state = wf.init_state({
     "my_app": {
         "title": "Logistic regression visualizer"
     },
@@ -422,7 +422,7 @@ When your code has an error, you will be notified with a notification in the app
 To check some intermediate values in your Python code, you can just use `print()` function. All logs will be available in the terminal.
 
 ## Conclusion
-Congratulations! You've successfully created a logistic regression visualisation tool using Streamsync. You can further customise and enhance this tool to suit your specific needs.
+Congratulations! You've successfully created a logistic regression visualisation tool using Framework. You can further customise and enhance this tool to suit your specific needs.
 
 ## Additional Resources
 - [Scikit-learn Documentation](https://scikit-learn.org/stable/)
diff --git a/docs/framework/repeater.mdx b/docs/framework/repeater.mdx
index 475d68717..a849914d5 100644
--- a/docs/framework/repeater.mdx
+++ b/docs/framework/repeater.mdx
@@ -17,7 +17,7 @@ Each iteration is rendered with a different **context**, a dictionary containing
 Given the state below, the contents of _Repeater_ will be repeated 3 times. For the first iteration, `itemId` will equal `Banana`, and `item` will equal `{"type": "fruit", "colour": "yellow"}`. Components inside _Repeater_ will be able to access this data using references such as `@{itemId}` and `@{item.type}`.
 
 ```py
-ss.init_state({
+wf.init_state({
     "articles": {
         "Banana": {
             "type": "fruit",
diff --git a/docs/framework/sessions.mdx b/docs/framework/sessions.mdx
index 2bd9d5759..d9784a133 100644
--- a/docs/framework/sessions.mdx
+++ b/docs/framework/sessions.mdx
@@ -2,7 +2,7 @@
 title: "Sessions"
 ---
 
-Sessions are designed for advanced use cases, being most relevant when Streamsync is deployed behind a proxy.
+Sessions are designed for advanced use cases, being most relevant when Framework is deployed behind a proxy.
 
 ## Session information in event handlers
 
@@ -23,14 +23,14 @@ This enables you to adapt the logic of an event to a number of factors, such as
 
 You can use session verifiers to accept or deny a session based on headers or cookies, thus making sure that users without the right privileges don't get access to the initial state or components.
 
-Session verifiers are functions decorated with `ss.session_verifier` and are run every time a user requests a session. A `True` value means that the session must be accepted, a `False` value means that the session must be rejected.
+Session verifiers are functions decorated with `wf.session_verifier` and are run every time a user requests a session. A `True` value means that the session must be accepted, a `False` value means that the session must be rejected.
 
 ```py
-import streamsync as ss
+import writer as wf
 
 # Users without the header x-success will be denied the session
 
-@ss.session_verifier
+@wf.session_verifier
 def check_headers(headers):
     if headers.get("x-success") is None:
         return False
diff --git a/docs/framework/state-schema.mdx b/docs/framework/state-schema.mdx
index fa022e3a0..aae9be45a 100644
--- a/docs/framework/state-schema.mdx
+++ b/docs/framework/state-schema.mdx
@@ -2,18 +2,18 @@
 title: "State schema"
 ---
 
-Schema declarations on the [Application state](./application-state) allows Streamsync to handle complex serialisation 
+Schema declarations on the [Application state](./application-state) allows Framework to handle complex serialisation 
 scenarios, while also allowing your IDE and toolchains to provide autocomplete and type checking.
 
 ## Schema declaration
 
 ```python
-import streamsync as ss
+import writer as wf
 
-class AppSchema(ss.StreamsyncState):
+class AppSchema(wf.StreamsyncState):
     counter: int
 
-initial_state = ss.init_state({
+initial_state = wf.init_state({
     "counter": 0
 }, schema=AppSchema)
 
@@ -33,7 +33,7 @@ def increment(state: AppSchema):
 Attributes missing from the schema remain accessible by their key.
 
 ```python
-initial_state = ss.init_state({
+initial_state = wf.init_state({
     "counter": 0,
     "message": None
 }, schema=AppSchema)
@@ -47,14 +47,14 @@ def increment(state: AppSchema):
 Schema composition allows you to model a complex Application state.
 
 ```python
-class MyappSchema(ss.State):
+class MyappSchema(wf.State):
     title: str
 
-class AppSchema(ss.StreamsyncState):
+class AppSchema(wf.StreamsyncState):
     my_app: MyappSchema
     counter: int
 
-initial_state = ss.init_state({
+initial_state = wf.init_state({
     "counter": 0,
     "my_app": {
         "title": "Nested value"
@@ -70,7 +70,7 @@ A schema allows you to specify that an attribute which contains a dictionary
 must be treated as a dictionary, rather than as a group of state.
 
 ```python
-class AppSchema(ss.StreamsyncState):
+class AppSchema(wf.StreamsyncState):
     vegas_graph: dict
 
 # Without schema, this handler is execute only once
@@ -79,7 +79,7 @@ def handle_vega_graph(state: AppSchema):
     graph["data"]["values"][0]["b"] += 1000
     state.vega_graph = graph
     
-initial_state = ss.init_state({
+initial_state = wf.init_state({
     "vegas_graph": {
         "data": {
             "values": [
@@ -110,15 +110,15 @@ apps/myapp/main.py:7: error: "AppSchema" has no attribute "countr"; maybe "count
 Here is the code, can you spot the error ?
 
 ```python
-import streamsync as ss
+import writer as wf
 
-class AppSchema(ss.StreamsyncState):
+class AppSchema(wf.StreamsyncState):
     counter: int
 
 def increment(state: AppSchema):
     state.countr += 1
 
-initial_state = ss.init_state({
+initial_state = wf.init_state({
     "counter": 26,
 }, schema=AppSchema)
 ```
diff --git a/docs/framework/stylesheets.mdx b/docs/framework/stylesheets.mdx
index a26aa3325..ff2e36a9a 100644
--- a/docs/framework/stylesheets.mdx
+++ b/docs/framework/stylesheets.mdx
@@ -6,7 +6,7 @@ The appearance of your application can be fully customised via CSS stylesheets.
 
 ## Importing a stylesheet
 
-Stylesheet imports are triggered via Streamsync's `mail`, similarly to other features discussed in [Backend-initiated actions](/backend-initiated-actions). When the import is triggered, the frontend downloads the specified stylesheet and creates a `style` element with its contents.
+Stylesheet imports are triggered via Framework's `mail`, similarly to other features discussed in [Backend-initiated actions](/backend-initiated-actions). When the import is triggered, the frontend downloads the specified stylesheet and creates a `style` element with its contents.
 
 The `import_stylesheet` method takes the `stylesheet_key` and `path` arguments. The first works as an identifier that will let you override the stylesheet later if needed. The second is the path to the CSS file.The path specified needs to be available to the frontend, so storing it in the `/static` folder of your app is recommended.
 
@@ -20,7 +20,7 @@ def handle_click(state):
 In many cases, you'll want to import a stylesheet during initialisation time, for all users. This is easily achievable via the initial state, as shown below.
 
 ```py
-initial_state = ss.init_state({
+initial_state = wf.init_state({
     "counter": 1
 })
 
@@ -38,11 +38,11 @@ During development time, stylesheets may be cached by your browser, preventing u
 
 You can use the property *Custom CSS classes* in Builder's *Component Settings* to apply classes to a component, separated by spaces. Internally, this will apply the classes to the root HTML element of the rendered component.
 
-![Stylesheets - Component Settings](./images/stylesheets.component-settings.png)
+![Stylesheets - Component Settings](/framework/images/stylesheets.component-settings.png)
 
 ## Tips for effective stylesheets
 
-The CSS code for the class used earlier, `bubblegum`, can be found below. Note how the `!important` flag is used when targetting style attributes that are configurable via Builder. If the flag isn't included, these declarations will not work, because built-in Streamsync styling is of higher specificity. 
+The CSS code for the class used earlier, `bubblegum`, can be found below. Note how the `!important` flag is used when targetting style attributes that are configurable via Builder. If the flag isn't included, these declarations will not work, because built-in Framework styling is of higher specificity. 
 
 ```css
 .bubblegum {
@@ -60,10 +60,10 @@ The CSS code for the class used earlier, `bubblegum`, can be found below. Note h
 <Warning> 
 Component structure may change
 
-When targeting specific HTML elements inside components, take into account that the internal structure of components may change across Streamsync versions.
+When targeting specific HTML elements inside components, take into account that the internal structure of components may change across Framework versions.
 </Warning>
 
-Alternatively, you can override Streamsync's style variables. This behaves slightly differently though; style variables are inherited by children components. For example, if a *Section* has been assigned the `bubblegum` class, its children will also have a pink background by default.
+Alternatively, you can override Framework's style variables. This behaves slightly differently though; style variables are inherited by children components. For example, if a *Section* has been assigned the `bubblegum` class, its children will also have a pink background by default.
 
 ```css
 .bubblegum {
@@ -76,11 +76,11 @@ Alternatively, you can override Streamsync's style variables. This behaves sligh
 
 The class can be used in *Component Settings*. If the stylesheet is imported, the effect will be immediate. In case the stylesheet has been modified since imported, it'll need to be imported again.
 
-![Stylesheets - Applied Classes](./images/stylesheets.applied-classes.png)
+![Stylesheets - Applied Classes](/framework/images/stylesheets.applied-classes.png)
 
 ## Targeting component types
 
-Streamsync components have root HTML elements with a class linked to their type. For example, *Dataframe* components use the class *CoreDataframe*. When writing a stylesheet, you can target all *Dataframe* components as shown below.
+Framework components have root HTML elements with a class linked to their type. For example, *Dataframe* components use the class *CoreDataframe*. When writing a stylesheet, you can target all *Dataframe* components as shown below.
 
 ```css
 .CoreDataframe {
diff --git a/docs/framework/testing.mdx b/docs/framework/testing.mdx
index 112a381a7..7fb49a13f 100644
--- a/docs/framework/testing.mdx
+++ b/docs/framework/testing.mdx
@@ -2,20 +2,20 @@
 title: "Testing"
 ---
 
-Testing a Streamsync application is easy. Given that event handlers are plain Python functions that take arguments such as `state` and `payload`, you can inject your own and test whether the outcome is correct. This section will use `pytest` examples.
+Testing a Framework application is easy. Given that event handlers are plain Python functions that take arguments such as `state` and `payload`, you can inject your own and test whether the outcome is correct. This section will use `pytest` examples.
 
 ## State
 
 ### Accessing the initial state
 
-To get started, import your app's entry point, `main`. This will initialise state and make event handlers available. The initial state is available in the module, at `main.ss.initial_state` provided you imported `streamsync` as `ss`.
+To get started, import your app's entry point, `main`. This will initialise state and make event handlers available. The initial state is available in the module, at `main.wf.initial_state` provided you imported `writer` as `wf`.
 
 ### Creating states
 
-For testing purposes, you can create your own state using the `StreamsyncState` class in `streamsync.core`. Pass a dictionary when constructing it.
+For testing purposes, you can create your own state using the `StreamsyncState` class in `writer.core`. Pass a dictionary when constructing it.
 
 ```py
-from streamsync.core import StreamsyncState
+from writer.core import StreamsyncState
 
 artificial_state = StreamsyncState({
     "a": 3,
@@ -25,7 +25,7 @@ artificial_state = StreamsyncState({
 
 ## Example
 
-The code of a Streamsync application basically consists of two things:
+The code of a Framework application basically consists of two things:
 
 - Initial state
 - Event handlers
@@ -35,12 +35,12 @@ It's straightforward to test both, as shown below.
 ### The app
 
 ```py
-import streamsync as ss
+import writer as wf
 
 def handle_multiplication(state):
     state["n"] = state["a"]*state["b"]
 
-ss.init_state({
+wf.init_state({
     "counter": 0,
     "a": 0,
     "b": 0
@@ -50,14 +50,14 @@ ss.init_state({
 ### The tests
 
 ```py
-from streamsync.core import StreamsyncState
+from writer.core import WriterState
 import main
 
 
 class TestApp:
 
-    initial_state = main.ss.initial_state
-    artificial_state = StreamsyncState({
+    initial_state = main.wf.initial_state
+    artificial_state = WriterState({
         "a": 3,
         "b": 2
     })