arizona-framework · williamthome · Oct 7, 2025 · Oct 5, 2025 · Oct 7, 2025 · Oct 7, 2025
diff --git a/priv/templates/arizona.frontend.template b/priv/templates/arizona.frontend.template
@@ -15,8 +15,6 @@
 
 %% /priv
 
-{file, "arizona.frontend/priv/static/assets/app.css", "{{name}}/priv/static/assets/app.css"}.
-{file, "arizona.frontend/priv/static/assets/app.js", "{{name}}/priv/static/assets/app.js"}.
 {file, "arizona.frontend/priv/static/favicon.ico", "{{name}}/priv/static/favicon.ico"}.
 {file, "arizona.frontend/priv/static/images/arizona-hero-bg.jpg", "{{name}}/priv/static/images/arizona-hero-bg.jpg"}.
 {file, "arizona.frontend/priv/static/robots.txt", "{{name}}/priv/static/robots.txt"}.

diff --git a/priv/templates/arizona.frontend/README.md b/priv/templates/arizona.frontend/README.md
@@ -2,9 +2,21 @@
 
 An Arizona application.
 
-## Build
+## Getting Started
 
+1. Install dependencies:
 ```bash
-$ rebar3 compile
-$ npm install
+npm install
 ```
+
+2. Build frontend assets:
+```bash
+npm run build
+```
+
+3. Start the application:
+```bash
+rebar3 shell
+```
+
+The application will be available at [http://localhost:1912](http://localhost:1912)
diff --git a/priv/templates/arizona.frontend/assets/js/main.js b/priv/templates/arizona.frontend/assets/js/main.js
@@ -1,3 +1,4 @@
-import Arizona from '@arizona-framework/client';
-globalThis.arizona = new Arizona({ logLevel: 'debug' });
-arizona.connect({ wsPath: '/live' });
+import { Arizona, ArizonaConsoleLogger, LOG_LEVELS } from '@arizona-framework/client';
+const logger = new ArizonaConsoleLogger({ logLevel: LOG_LEVELS.debug });
+globalThis.arizona = new Arizona({ logger });
+arizona.connect('/live');
diff --git a/priv/templates/arizona.frontend/package.json b/priv/templates/arizona.frontend/package.json
@@ -14,6 +14,6 @@
     "tailwindcss": "^4.1.13"
   },
   "dependencies": {
-    "@arizona-framework/client": "^0.1.2"
+    "@arizona-framework/client": "^0.2.1"
   }
 }
diff --git a/priv/templates/arizona.frontend/src/layout.erl b/priv/templates/arizona.frontend/src/layout.erl
@@ -8,7 +8,7 @@ render(Bindings) ->
         ~"fault-tolerant real-time applications on the BEAM"
     ],
     Image = ~"images/arizona-hero-bg.jpg",
-    arizona_template:from_string(~"""
+    arizona_template:from_html(~"""
     <!DOCTYPE html>
     <html lang="en" class="h-full">
     <head>

diff --git a/priv/templates/arizona.frontend/src/view.erl b/priv/templates/arizona.frontend/src/view.erl
@@ -21,7 +21,7 @@ mount(#{title := Title}, _Req) ->
 
 render(Bindings) ->
     Module = ?MODULE,
-    arizona_template:from_string(~""""
+    arizona_template:from_html(~""""
     <div
         id="{arizona_template:get_binding(id, Bindings)}"
         class="min-h-screen relative overflow-hidden bg-arizona-landscape"
@@ -49,7 +49,7 @@ render(Bindings) ->
     """").
 
 hero(_Bindings) ->
-    arizona_template:from_string(~"""
+    arizona_template:from_html(~"""
     <div class="text-center mb-16">
         <div class="inline-block relative">
             <h1 class="text-5xl sm:text-7xl lg:text-8xl font-bold text-pearl mb-8 leading-none">
@@ -80,7 +80,7 @@ hero(_Bindings) ->
 
 welcome_card(_Bindings) ->
     Module = ?MODULE,
-    arizona_template:from_string(~""""
+    arizona_template:from_html(~""""
     <div class="{[
         ~"bg-charcoal/80 backdrop-blur-xl rounded-2xl p-8 sm:p-10 mb-16 shadow-2xl border ",
         ~"border-pearl/10 hover:border-arizona-teal/40 hover:shadow-2xl ",
@@ -102,7 +102,7 @@ welcome_card(_Bindings) ->
         {% Enhanced Quick Links Grid }
         <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
             {arizona_template:render_list(fun(Card) ->
-                arizona_template:from_string(~"""
+                arizona_template:from_html(~"""
                 {arizona_template:render_stateless(Module, quick_link_card, Card)}
                 """)
             end, [
@@ -120,7 +120,7 @@ welcome_card(_Bindings) ->
                 },
                 #{
                     href => ~"https://github.com/arizona-framework/arizona",
-                    icon => arizona_template:from_string(~"""
+                    icon => arizona_template:from_html(~"""
                     <svg class="w-6 h-6 text-pearl" fill="currentColor" viewBox="0 0 24 24">
                         <path d="{[
                             ~"M12 0C5.374 0 0 5.373 0 12 0 17.302 3.438 21.8 8.207 ",
@@ -148,7 +148,7 @@ welcome_card(_Bindings) ->
 
 enhanced_next_steps(_Bindings) ->
     Module = ?MODULE,
-    arizona_template:from_string(~""""
+    arizona_template:from_html(~""""
     <div class="{[
         ~"bg-gradient-to-r from-slate/10 via-charcoal/20 to-slate/10 ",
         ~"backdrop-blur-sm rounded-2xl p-8 border border-pearl/10"
@@ -181,7 +181,7 @@ enhanced_next_steps(_Bindings) ->
         <div class="grid sm:grid-cols-2 gap-4">
             <div class="space-y-4">
                 {arizona_template:render_list(fun(Item) ->
-                    arizona_template:from_string(~"""
+                    arizona_template:from_html(~"""
                     {arizona_template:render_stateless(Module, next_step, Item)}
                     """)
                 end, [
@@ -199,7 +199,7 @@ enhanced_next_steps(_Bindings) ->
 
             <div class="space-y-4">
                 {arizona_template:render_list(fun(Item) ->
-                    arizona_template:from_string(~"""
+                    arizona_template:from_html(~"""
                     {arizona_template:render_stateless(Module, next_step, Item)}
                     """)
                 end, [
@@ -218,7 +218,7 @@ enhanced_next_steps(_Bindings) ->
     """").
 
 next_step(Bindings) ->
-    arizona_template:from_string(~"""
+    arizona_template:from_html(~"""
     <div class="{[
         ~"group flex items-start gap-3 p-4 rounded-lg ",
         ~"hover:bg-obsidian/30 transition-colors duration-200"
@@ -245,7 +245,7 @@ next_step(Bindings) ->
 
 quick_link_card(Bindings) ->
     Module = ?MODULE,
-    arizona_template:from_string(~""""
+    arizona_template:from_html(~""""
     <a
         href="{arizona_template:get_binding(href, Bindings)}"
         target="_blank"
@@ -280,7 +280,7 @@ quick_link_card(Bindings) ->
     """").
 
 arrow_icon(_Bindings) ->
-    arizona_template:from_string(~"""
+    arizona_template:from_html(~"""
     <div class="{[
         ~"w-6 h-6 text-arizona-terracotta opacity-0 group-hover:opacity-100 ",
         ~"transition-opacity duration-300"

diff --git a/priv/templates/arizona.hello_world.template b/priv/templates/arizona.hello_world.template
@@ -16,7 +16,6 @@
 
 {template, "arizona.hello_world/src/app.src", "{{name}}/src/{{name}}.app.src"}.
 {template, "arizona.hello_world/src/app.erl", "{{name}}/src/{{name}}_app.erl"}.
-{template, "arizona.hello_world/src/layout.erl", "{{name}}/src/{{name}}_layout.erl"}.
 {template, "arizona.hello_world/src/view.erl", "{{name}}/src/{{name}}_view.erl"}.
 {template, "arizona.hello_world/src/sup.erl", "{{name}}/src/{{name}}_sup.erl"}.
 

diff --git a/priv/templates/arizona.hello_world/README.md b/priv/templates/arizona.hello_world/README.md
@@ -2,8 +2,11 @@
 
 An Arizona application.
 
-## Build
+## Getting Started
 
+Start the application:
 ```bash
-$ rebar3 compile
+rebar3 shell
 ```
+
+The application will be available at [http://localhost:1912](http://localhost:1912)
diff --git a/priv/templates/arizona.hello_world/config/sys.config b/priv/templates/arizona.hello_world/config/sys.config
@@ -3,9 +3,10 @@
         {server, #{
             enabled => true,
             routes => [
+                {asset, ~"/assets/arizona", {priv_dir, arizona, ~"static/assets"}, []},
+                {websocket, ~"/live", #{}, []},
                 {asset, ~"/favicon.ico", {priv_file, {{name}}, ~"static/favicon.ico"}, []},
                 {asset, ~"/robots.txt", {priv_file, {{name}}, ~"static/robots.txt"}, []},
-                {asset, ~"/assets/app", {priv_dir, {{name}}, ~"static/assets"}, []},
                 {view, ~"/", {{name}}_view, #{title => ~"Arizona Framework"}, []}
             ]
         }}

diff --git a/priv/templates/arizona.hello_world/src/layout.erl b/priv/templates/arizona.hello_world/src/layout.erl
@@ -3,7 +3,7 @@
 -export([render/1]).
 
 render(Bindings) ->
-    arizona_template:from_string(~"""
+    arizona_template:from_html(~"""
     <!DOCTYPE html>
     <html>
     <head>

diff --git a/priv/templates/arizona.hello_world/src/view.erl b/priv/templates/arizona.hello_world/src/view.erl
@@ -2,22 +2,52 @@
 -behaviour(arizona_view).
 -compile({parse_transform, arizona_parse_transform}).
 -export([mount/2]).
+-export([layout/1]).
 -export([render/1]).
+-export([handle_event/3]).
 
 mount(#{title := Title}, _Req) ->
-    Bindings = #{
-        id => ~"view",
-        name => ~"World"
-    },
+    Bindings = #{id => ~"view"},
     Layout =
-        {{{name}}_layout, render, main_content, #{
+        {?MODULE, layout, main_content, #{
             title => Title
         }},
     arizona_view:new(?MODULE, Bindings, Layout).
 
+% Layout is rendered only once when the page loads - it's never updated.
+% Only the view content (inserted via render_slot) receives real-time updates.
+layout(Bindings) ->
+    arizona_template:from_erl([
+        ~"<!DOCTYPE html>",
+        {html, [], [
+            {head, [], [
+                {title, [], ~"Arizona Hello World"},
+                {script, [{type, ~"module"}, async], ~"""
+                import Arizona from '/assets/arizona/js/arizona.min.js';
+                globalThis.arizona = new Arizona();
+                arizona.connect('/live');
+                """}
+            ]},
+            {body, [], arizona_template:render_slot(maps:get(main_content, Bindings))}
+        ]}
+    ]).
+
 render(Bindings) ->
-    arizona_template:from_string(~"""
-    <div id="{arizona_template:get_binding(id, Bindings)}">
-        Hello, {arizona_template:get_binding(name, Bindings)}!
-    </div>
-    """).
+    arizona_template:from_erl(
+        {'div', [{id, arizona_template:get_binding(id, Bindings)}], [
+            case arizona_template:find_binding(name, Bindings) of
+                {ok, Name} ->
+                    [~"Hello, ", Name, ~"!"];
+                error ->
+                    arizona_template:from_erl({button,
+                        [{onclick, ~"arizona.pushEvent('hello_world')"}],
+                        ~"Say Hello!"
+                    })
+            end
+        ]}
+    ).
+
+handle_event(~"hello_world", _Params, View) ->
+    State = arizona_view:get_state(View),
+    UpdatedState = arizona_stateful:put_binding(name, ~"World", State),
+    {[], arizona_view:update_state(UpdatedState, View)}.
diff --git a/priv/templates/arizona.presence/README.md b/priv/templates/arizona.presence/README.md
@@ -2,8 +2,11 @@
 
 An Arizona application.
 
-## Build
+## Getting Started
 
+Start the application:
 ```bash
-$ rebar3 compile
+rebar3 shell
 ```
+
+The application will be available at [http://localhost:1912](http://localhost:1912)
diff --git a/priv/templates/arizona.presence/config/sys.config b/priv/templates/arizona.presence/config/sys.config
@@ -3,14 +3,14 @@
         {server, #{
             enabled => true,
             routes => [
+                {asset, ~"/assets/arizona", {priv_dir, arizona, ~"static/assets"}, []},
+                {websocket, ~"/live", #{}, []},
                 {asset, ~"/favicon.ico", {priv_file, {{name}}, ~"static/favicon.ico"}, []},
                 {asset, ~"/robots.txt", {priv_file, {{name}}, ~"static/robots.txt"}, []},
-                {asset, ~"/assets/app", {priv_dir, {{name}}, ~"static/assets"}, []},
-                {asset, ~"/assets", {priv_dir, arizona, ~"static/assets"}, []},
+                {asset, ~"/assets", {priv_dir, {{name}}, ~"static/assets"}, []},
                 {view, ~"/", {{name}}_view, #{
                     title => ~"Arizona Framework"
-                }, []},
-                {websocket, ~"/live", #{}, []}
+                }, []}
             ]
         }},
         {reloader, #{

diff --git a/priv/templates/arizona.presence/priv/static/assets/js/main.js b/priv/templates/arizona.presence/priv/static/assets/js/main.js
@@ -1,3 +1,3 @@
-import Arizona from '/assets/js/arizona.min.js';
+import Arizona from '/assets/arizona/js/arizona.min.js';
 globalThis.arizona = new Arizona();
-arizona.connect();
+arizona.connect('/live');
diff --git a/priv/templates/arizona.presence/src/counter.erl b/priv/templates/arizona.presence/src/counter.erl
@@ -11,12 +11,12 @@ mount(Bindings) ->
     }).
 
 render(Bindings) ->
-    arizona_template:from_string(~"""
+    arizona_template:from_html(~"""
     <div id="{arizona_template:get_binding(id, Bindings)}">
         <span>Count: {arizona_template:get_binding(count, Bindings)}</span>
         <button
             type="button"
-            onclick="arizona.sendEventTo(
+            onclick="arizona.pushEventTo(
                 '{arizona_template:get_binding(id, Bindings)}',
                 'increment'
             )"

diff --git a/priv/templates/arizona.presence/src/layout.erl b/priv/templates/arizona.presence/src/layout.erl
@@ -3,12 +3,12 @@
 -export([render/1]).
 
 render(Bindings) ->
-    arizona_template:from_string(~"""
+    arizona_template:from_html(~"""
     <!DOCTYPE html>
     <html>
     <head>
         <title>{arizona_template:get_binding(title, Bindings)}</title>
-        <script src="assets/app/js/main.js" type="module"></script>
+        <script src="assets/js/main.js" type="module"></script>
     </head>
     <body>
         {arizona_template:render_slot(arizona_template:get_binding(main_content, Bindings))}

diff --git a/priv/templates/arizona.presence/src/view.erl b/priv/templates/arizona.presence/src/view.erl
@@ -23,7 +23,7 @@ mount(#{title := PageTitle}, _HttpRequest) ->
     arizona_view:new(?MODULE, Bindings, PageLayout).
 
 render(Bindings) ->
-    arizona_template:from_string(~"""
+    arizona_template:from_html(~"""
     <div id="{arizona_template:get_binding(id, Bindings)}">
         {% Counters section }
         <section class="counters">

diff --git a/priv/templates/arizona.svelte/README.md b/priv/templates/arizona.svelte/README.md
@@ -2,9 +2,21 @@
 
 An Arizona application with Svelte integration.
 
-## Build
+## Getting Started
 
+1. Install dependencies:
 ```bash
-$ rebar3 compile
-$ npm install
+npm install
 ```
+
+2. Build frontend assets:
+```bash
+npm run build
+```
+
+3. Start the application:
+```bash
+rebar3 shell
+```
+
+The application will be available at [http://localhost:1912](http://localhost:1912)
diff --git a/priv/templates/arizona.svelte/assets/js/main.js b/priv/templates/arizona.svelte/assets/js/main.js
@@ -1,9 +1,10 @@
-import Arizona from '@arizona-framework/client';
+import { Arizona, ArizonaConsoleLogger, LOG_LEVELS } from '@arizona-framework/client';
 import ArizonaSvelte from '@arizona-framework/svelte';
 import * as components from '../svelte/components';
 
 // Initialize Arizona framework
-globalThis.arizona = new Arizona({ logLevel: 'debug' });
+const logger = new ArizonaConsoleLogger({ logLevel: LOG_LEVELS.debug });
+globalThis.arizona = new Arizona({ logger });
 arizona.connect('/live');
 
 // Initialize ArizonaSvelte with automatic monitoring

diff --git a/priv/templates/arizona.svelte/package.json b/priv/templates/arizona.svelte/package.json
@@ -23,7 +23,7 @@
     "vite": "^7.1.7"
   },
   "dependencies": {
-    "@arizona-framework/client": "^0.2.0",
+    "@arizona-framework/client": "^0.2.1",
     "@arizona-framework/svelte": "^0.2.0"
   }
 }