diff --git a/app.py b/app.py
index 50ecb2ee14f3eddbf1b3877f82d28318ee252cde..3c30a89c8bf6936b6df8b8cdc15445ea9867ebf8 100644
--- a/app.py
+++ b/app.py
@@ -165,11 +165,21 @@ def drawing(id):
         params = params,
         svg = svg)
 
+#   __             _                     _    _             
+#  / _| ___  _ __ | |_   _ __ ___   __ _| | _(_)_ __   __ _ 
+# | |_ / _ \| '_ \| __| | '_ ` _ \ / _` | |/ / | '_ \ / _` |
+# |  _| (_) | | | | |_  | | | | | | (_| |   <| | | | | (_| |
+# |_|  \___/|_| |_|\__| |_| |_| |_|\__,_|_|\_\_|_| |_|\__, |
+#                                                     |___/ 
+# 
+# EDITING A FIGGONT ON A PAD TO THEN USE IT
+
 @app.route("/font.html")
 def font():
 
     params = {
-        'pad': request.args.get('p') or 'default',
+        'text': request.args.get('t') or 'Cobbled Paths',
+        'pad': request.args.get('p') or 'standard',
         'weight': request.args.get('w') or '3',
     }
     params['pad-full'] = etherpad + prefix + params['pad']
@@ -179,6 +189,42 @@ def font():
         title = title,
         params = params)
 
+@app.route("/writing/<id>")
+def writing(id):
+
+    params = {
+        'text': request.args.get('t') or 'Cobbled Paths',
+        'pad': id or 'standard',
+        'weight': request.args.get('w') or '3',
+    }
+    params['pad-full'] = etherpad + prefix + params['pad']
+
+    # get pad content
+    print('  getting ' + params['pad-full'])
+    pad_export = requests.get(params['pad-full'] + '/export/txt')
+    ascii_input = pad_export.text
+
+    # store as a temporary file
+    print('--- saving figfont as temp ---')
+    (figfont_file, figfont_path) = tempfile.mkstemp(suffix='.flf')
+    print(figfont_path)
+    with open(figfont_path, 'w') as figfont_file:
+        figfont_file.write(ascii_input)
+
+    print('--- opening the figfont ---')
+    f = {}
+    f['ascii'] = text2figlet(params['text'], figfont_path)
+    print(f['ascii'])
+
+    print('--- rendering to svg ---')
+    svg = ascii2svg(f['ascii'], params['weight'])
+
+    return render_template(
+        'drawing.html',
+        title = title,
+        params = params,
+        svg = svg)
+
 #            _        _                        
 #   ___ __ _| |_ __ _| | ___   __ _ _   _  ___ 
 #  / __/ _` | __/ _` | |/ _ \ / _` | | | |/ _ \
@@ -235,12 +281,12 @@ def catalogue():
         params = params)
 
 
-#            _        _                        
-#   ___ __ _| |_ __ _| | ___   __ _ _   _  ___ 
-#  / __/ _` | __/ _` | |/ _ \ / _` | | | |/ _ \
-# | (_| (_| | || (_| | | (_) | (_| | |_| |  __/
-#  \___\__,_|\__\__,_|_|\___/ \__, |\__,_|\___|
-#                             |___/  
+#  _                 _                              _   
+# | |__  _ __   __ _| |   _____  ___ __   ___  _ __| |_ 
+# | '_ \| '_ \ / _` | |  / _ \ \/ / '_ \ / _ \| '__| __|
+# | | | | |_) | (_| | | |  __/>  <| |_) | (_) | |  | |_ 
+# |_| |_| .__/ \__, |_|  \___/_/\_\ .__/ \___/|_|   \__|
+#       |_|    |___/              |_|   
 # 
 # FIGLET 2 SVGBOB INTERACTIVE CATALOGUE
 
diff --git a/templates/font.html b/templates/font.html
index 5aee8d43f1792b65874c780104573acc7526e53c..bdc66381dd6cf12681cdb22f718255ef4b958e79 100644
--- a/templates/font.html
+++ b/templates/font.html
@@ -10,11 +10,11 @@
     <button id="button-pad" data-use="pad-name">go</button>
 
     <hr>
-    
-    <input class="get-input" type="text" value="{{params['text']}}" data-name="t"/>
 
     <button id="button-svg">generate</button>
 
+    <input class="get-input" type="text" value="{{params['text']}}" data-name="t" data-frame="svg-iframe"/>
+
     <label>weight</label>
     <input class="get-input" type="range" min="1" max="8" value="{{params['weight']}}" data-name="w" data-frame="svg-iframe"/>
 
@@ -64,23 +64,27 @@
 
         // --- svg generation button
         button_svg.addEventListener('click', function(){
-            let svg_iframe = document.getElementById('svg-iframe');
-            svg_iframe.contentWindow.location.reload();
+          let svg_iframe = document.getElementById('svg-iframe');
+          console.log("IFRAME RELOAD");
+          svg_iframe.contentWindow.location.reload();
         });
 
         // --- get-input but on the pad and checkbox but on the pad
         let inputs = document.getElementsByClassName('get-input');
         for(let input of inputs){
-          input.addEventListener('change', function(){
+          input.addEventListener('input', function(){
             let frame = document.getElementById(input.dataset.frame);
             const url = new URL(frame.src);
+
             if(input.type == 'checkbox'){
               url.searchParams.set(input.dataset.name, input.checked);
             }
             else{
               url.searchParams.set(input.dataset.name, input.value);
             }
-            frame.src = url;
+            console.log(url);
+            // frame.contentWindow.history.replaceState(null, null, url);
+            frame.src = url
           });
         }
     </script>
@@ -90,7 +94,7 @@
     <iframe class="f-ascii" id="pad-iframe" src="{{params['pad-full']}}">
     </iframe>
     <div class="f-svg">
-        <iframe id="svg-iframe" src="/drawing/{{params['pad']}}">
+        <iframe id="svg-iframe" src="/writing/{{params['pad']}}">
         </iframe>
     </div>
   </div>