diff --git a/doc/content/api-reference/settings.rst b/doc/content/api-reference/settings.rst
index 4cc89e23..613e4eb1 100644
--- a/doc/content/api-reference/settings.rst
+++ b/doc/content/api-reference/settings.rst
@@ -134,6 +134,25 @@ Client
     :name: CLIENT_DEBUG
     :path: lona.default_settings.CLIENT_DEBUG
 
+.. setting::
+    :name: CLIENT_AUTO_RECONNECT
+    :path: lona.default_settings.CLIENT_AUTO_RECONNECT
+
+    When set to ``True`` the client will try to reconnect to the server
+    periodically when the websocket connection closes
+
+.. setting::
+    :name: CLIENT_AUTO_RECONNECT_TIMEOUT
+    :path: lona.default_settings.CLIENT_AUTO_RECONNECT_TIMEOUT
+
+    Auto reconnect timeout in ms
+
+.. setting::
+    :name: CLIENT_TITLE
+    :path: lona.default_settings.CLIENT_TITLE
+
+    Default tab title
+
 .. setting::
     :name: CLIENT_VIEW_START_TIMEOUT
     :path: lona.default_settings.CLIENT_VIEW_START_TIMEOUT
@@ -344,4 +363,4 @@ Feature Flags
     When ``settings.USE_FUTURE_NODE_CLASSES`` is set to ``True``:
 
 
-      1. ``lona.html.Select2`` gets used instead of ``lona.html.Select``
\ No newline at end of file
+      1. ``lona.html.Select2`` gets used instead of ``lona.html.Select``
diff --git a/doc/content/cookbook/auto-reconnect.rst b/doc/content/cookbook/auto-reconnect.rst
deleted file mode 100644
index 6ad87a74..00000000
--- a/doc/content/cookbook/auto-reconnect.rst
+++ /dev/null
@@ -1,58 +0,0 @@
-
-
-Auto-Reconnect
-==============
-
-For development or kiosk applications it can be useful to have a frontend that
-reconnects automatically when the server restarts.
-
-This example implements a simple clock that updates the current time once per
-second. The script adds a simple snipped to the frontend, which uses the
-`server disconnect hook </api-reference/frontends.html#server-disconnect>`_
-to try to reconnect the Lona client once per second, when the server restarts.
-
-
-.. code-block:: python
-
-    from datetime import datetime
-
-    from lona import LonaApp, LonaView
-    from lona.html import HTML, H1, P
-
-    app = LonaApp(__file__)
-
-
-    @app.route('/')
-    class MyLonaView(LonaView):
-        def handle_request(self, request):
-            timestamp = P()
-
-            html = HTML(
-                H1('Clock'),
-                timestamp,
-            )
-
-            while True:
-                timestamp.set_text(str(datetime.now()))
-
-                self.show(html)
-
-                self.sleep(1)
-
-
-    app.add_template('lona/frontend.js', """
-        lona_context.add_disconnect_hook(function(lona_context, event) {
-            document.querySelector('#lona').innerHTML = `
-                Server disconnected <br> Trying to reconnect...
-            `;
-
-            setTimeout(function() {
-                lona_context.reconnect();
-
-            }, 1000);
-        });
-    """)
-
-
-    if __name__ == '__main__':
-        app.run(port=8080)
diff --git a/doc/settings.py b/doc/settings.py
index aa194c7d..1450aba2 100644
--- a/doc/settings.py
+++ b/doc/settings.py
@@ -103,7 +103,6 @@
             ['Writing A Traditional Form',
             'cookbook/writing-a-traditional-form.rst'],
 
-            ['Auto-Reconnect', 'cookbook/auto-reconnect.rst'],
             ['URL Reverse Resolving', 'cookbook/url-reverse-resolving.rst'],
             ['Using Server State', 'cookbook/using-server-state.rst'],
 
diff --git a/lona/default_settings.py b/lona/default_settings.py
index dee98f8e..e41e5238 100644
--- a/lona/default_settings.py
+++ b/lona/default_settings.py
@@ -48,6 +48,9 @@
 CLIENT_VIEW_START_TIMEOUT = 2
 CLIENT_INPUT_EVENT_TIMEOUT = 2
 CLIENT_PING_INTERVAL = 60
+CLIENT_AUTO_RECONNECT = True
+CLIENT_AUTO_RECONNECT_TIMEOUT = 1000
+CLIENT_TITLE = 'Lona'
 
 
 # sessions
diff --git a/lona/templates/lona/disconnect-message.html b/lona/templates/lona/disconnect-message.html
new file mode 100644
index 00000000..5b9084eb
--- /dev/null
+++ b/lona/templates/lona/disconnect-message.html
@@ -0,0 +1,4 @@
+<h1>Server Disconnected</h1>
+{% if Lona.settings.CLIENT_AUTO_RECONNECT %}
+    Trying to reconnect...
+{% endif %}
diff --git a/lona/templates/lona/frontend.html b/lona/templates/lona/frontend.html
index 2d1ac26a..b9153441 100644
--- a/lona/templates/lona/frontend.html
+++ b/lona/templates/lona/frontend.html
@@ -12,19 +12,73 @@
     {% include "lona/footer.html" %}
     {{ Lona.load_scripts() }}
     <script>
-      window.addEventListener('load', function() {
-        var lona_context = new Lona.LonaContext({
+      window.addEventListener('load', () => {
+        const lona_context = new Lona.LonaContext({
           target: '#lona',
-          title: 'Lona',
+          title: '{{ Lona.settings.CLIENT_TITLE }}',
           update_address_bar: true,
           update_title: true,
           follow_redirects: true,
           follow_http_redirects: true,
         });
 
-        {% include "lona/frontend.js" %}
+        {% if Lona.settings.CLIENT_AUTO_RECONNECT %}
+          const auto_reconnect = true;
+        {% else %}
+          const auto_reconnect = false;
+        {% endif %}
 
+        let first_connect = true;
+
+        lona_context.add_connect_hook((lona_context) => {
+
+          // reconnect
+          // reload whole page in case static files changed
+          if(!first_connect) {
+            window.location = window.location;
+
+            return;
+          }
+
+          // first connect
+          first_connect = false;
+        });
+
+        // disconnect
+        lona_context.add_disconnect_hook((lona_context) => {
+          document.querySelector('#lona').innerHTML = `
+            {% include "lona/disconnect-message.html" %}
+          `;
+
+          if(!auto_reconnect) {
+            return;
+          }
+
+          setTimeout(() => {
+            lona_context.reconnect({
+
+              // we don't create a window and start a view on the server
+              // since we reload the page once the client reconnects anyway
+              create_window: false,
+            });
+          }, {{ Lona.settings.CLIENT_AUTO_RECONNECT_TIMEOUT }});
+        });
+
+        // waiting for server messages
+        lona_context.add_view_timeout_hook((lona_context, lona_window) => {
+          lona_window.set_html(`
+            {% include "lona/waiting-for-server-message.html" %}
+          `);
+        });
+
+        lona_context.add_input_event_timeout_hook((lona_context, lona_window) => {
+          alert('{% include "lona/waiting-for-server-message.html" %}');
+        });
+
+        // setup
         lona_context.setup();
+
+        window['lona_context'] = lona_context;
       });
     </script>
   </body>
diff --git a/lona/templates/lona/frontend.js b/lona/templates/lona/frontend.js
deleted file mode 100644
index d2dc82d5..00000000
--- a/lona/templates/lona/frontend.js
+++ /dev/null
@@ -1,3 +0,0 @@
-lona_context.add_disconnect_hook(function(lona_context, event) {
-    document.querySelector('#lona').innerHTML = 'Server disconnected';
-});
diff --git a/lona/templates/lona/waiting-for-server-message.html b/lona/templates/lona/waiting-for-server-message.html
new file mode 100644
index 00000000..822b970d
--- /dev/null
+++ b/lona/templates/lona/waiting-for-server-message.html
@@ -0,0 +1 @@
+Waiting for Server...