diff --git a/README.md b/README.md
index 27cd467..65c2c3e 100644
--- a/README.md
+++ b/README.md
@@ -63,6 +63,8 @@ See more examples below:
* [`examples/demo_hooks.exs`]
* [`examples/demo_endpoint.exs`]
* [`examples/demo_live_pubsub.exs`]
+ * [`examples/demo_static_files/demo_static_files.exs`]
+ * [`examples/demo_static_files/demo_static_files_test.exs`]
## License
@@ -87,3 +89,5 @@ limitations under the License.
[`examples/demo_hooks.exs`]: examples/demo_hooks.exs
[`examples/demo_endpoint.exs`]: examples/demo_endpoint.exs
[`examples/demo_live_pubsub.exs`]: examples/demo_live_pubsub.exs
+[`examples/demo_static_files/demo_static_files.exs`]: examples/demo_static_files/demo_static_files.exs
+[`examples/demo_static_files/demo_static_files_test.exs`]: examples/demo_static_files/demo_static_files_test.exs
diff --git a/examples/demo_static_files/assets/inc.svg b/examples/demo_static_files/assets/inc.svg
new file mode 100644
index 0000000..c7b2af9
--- /dev/null
+++ b/examples/demo_static_files/assets/inc.svg
@@ -0,0 +1,5 @@
+
diff --git a/examples/demo_static_files/assets/style.css b/examples/demo_static_files/assets/style.css
new file mode 100644
index 0000000..9053a2e
--- /dev/null
+++ b/examples/demo_static_files/assets/style.css
@@ -0,0 +1,49 @@
+/* app.css */
+body {
+ font-family: "Helvetica", "Arial", sans-serif;
+ background-color: #f9fafb;
+ color: #333;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ margin: 1em;
+ padding: 1em;
+}
+
+span {
+ font-size: 2.5rem;
+ font-weight: 600;
+ margin-bottom: 1rem;
+ color: #1e293b;
+}
+
+button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 64px;
+ height: 64px;
+ margin-left: 20px;
+ border-radius: 30%;
+ background-color: #2563eb;
+ cursor: pointer;
+ transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
+}
+
+button img {
+ width: 32px;
+ height: 32px;
+ filter: invert(100%) brightness(200%);
+}
+
+button:hover {
+ background-color: #1d4ed8;
+ transform: scale(1.05);
+}
+
+button:active {
+ background-color: #1e40af;
+ transform: scale(0.98);
+}
diff --git a/examples/demo_static_files/demo_static_files.exs b/examples/demo_static_files/demo_static_files.exs
new file mode 100755
index 0000000..3aa2ca5
--- /dev/null
+++ b/examples/demo_static_files/demo_static_files.exs
@@ -0,0 +1,41 @@
+Mix.install([
+ # TODO: Update when stable/released?
+ # {:phoenix_playground, "~> 0.1.9"}
+ {:phoenix_playground, path: Path.expand("../..", __DIR__)}
+])
+
+defmodule DemoStatic do
+ use Phoenix.LiveView
+
+ def mount(_params, _session, socket) do
+ {:ok, assign(socket, count: 0)}
+ end
+
+ def render(assigns) do
+ ~H"""
+ {@count}
+
+
+
+ """
+ end
+
+ def handle_event("inc", _params, socket) do
+ {:noreply, assign(socket, count: socket.assigns.count + 1)}
+ end
+end
+
+defmodule DemoPlug do
+ use Plug.Builder
+
+ plug Plug.Static, at: "/assets", from: Path.expand("assets", __DIR__)
+end
+
+PhoenixPlayground.start(
+ live: DemoStatic,
+ plug: DemoPlug
+)
diff --git a/examples/demo_static_files/demo_static_files_test.exs b/examples/demo_static_files/demo_static_files_test.exs
new file mode 100644
index 0000000..d9e7bce
--- /dev/null
+++ b/examples/demo_static_files/demo_static_files_test.exs
@@ -0,0 +1,52 @@
+Mix.install([
+ # TODO: Update when stable/released?
+ # {:phoenix_playground, "~> 0.1.9"}
+ {:phoenix_playground, path: Path.expand("../..", __DIR__)}
+])
+
+defmodule DemoStatic do
+ use Phoenix.LiveView
+
+ def mount(_params, _session, socket) do
+ {:ok, assign(socket, count: 0)}
+ end
+
+ def render(assigns) do
+ ~H"""
+ {@count}
+
+
+
+ """
+ end
+
+ def handle_event("inc", _params, socket) do
+ {:noreply, assign(socket, count: socket.assigns.count + 1)}
+ end
+end
+
+defmodule DemoPlug do
+ use Plug.Builder
+
+ plug Plug.Static, at: "/assets", from: Path.expand("assets", __DIR__)
+end
+
+Logger.configure(level: :warning)
+ExUnit.start()
+
+defmodule DemoStaticTest do
+ use ExUnit.Case
+ use PhoenixPlayground.Test, live: DemoStatic, plug: DemoPlug
+
+ test "static assets are served" do
+ conn = get(build_conn(), "/assets/inc.svg")
+ assert response(conn, 200) =~ "