diff --git a/Readme.md b/Readme.md
index 977382d..ddda4ce 100644
--- a/Readme.md
+++ b/Readme.md
@@ -3,4 +3,6 @@
 # Installation
 
 The prototype uses pagedjs-cli to convert the HTML into PDF. In a terminal `cd` into the cloned folder and run:
-`npm install pagedjs-cli`
\ No newline at end of file
+`npm install pagedjs-cli`
+
+*to do* Add instructions on installation of NLTK data
\ No newline at end of file
diff --git a/__pycache__/trees.cpython-38.pyc b/__pycache__/trees.cpython-38.pyc
deleted file mode 100644
index fa384c5..0000000
Binary files a/__pycache__/trees.cpython-38.pyc and /dev/null differ
diff --git a/app.py b/app.py
new file mode 100644
index 0000000..dcbe4e5
--- /dev/null
+++ b/app.py
@@ -0,0 +1,48 @@
+#!/usr/bin/env/ python
+from sys import stdout
+from flask import Flask, Response, render_template, request
+from pagedjs import make_pdf
+from graft_a_tree import graft_a_tree
+from io import StringIO
+import sys
+import textwrap
+
+BASEURL = ''
+MIN_GROW_YEARS = 0
+MAX_GROW_YEARS = 25
+
+app = Flask(__name__)
+
+def wrap (text, width):
+  return'\n'.join([(' \\\n').join(textwrap.wrap(line, width=width - 2)) for line in text.splitlines()])
+
+with open('graft_a_tree.py', 'r') as script:
+  source_code = script.read()
+
+@app.route('{}/'.format(BASEURL))
+def index():
+  return render_template('index.html', BASEURL=BASEURL)
+
+@app.route('{}/graft'.format(BASEURL), methods=['POST'])
+def graft():
+  years = max(MIN_GROW_YEARS, min(MAX_GROW_YEARS, int(request.form['years'])))
+
+  with StringIO() as script_stdout:
+    default_stdout = sys.stdout
+    sys.stdout = script_stdout
+    graft_a_tree(years)
+    content = script_stdout.getvalue()
+    sys.stdout = default_stdout
+
+  html = render_template('book.html', content=content, source_code=wrap(source_code, 100).replace(' ', '&nbsp;').replace('\n', '<br />'))
+  # print(html)
+  print('html rendered')
+  pdf = make_pdf(html)
+  print('made pdf')
+  r = Response(pdf, mimetype='application/pdf')
+
+  r.headers.extend({
+    'Content-Disposition': 'attachment; filename="grafted-tree.pdf"'
+  })
+
+  return r
\ No newline at end of file
diff --git a/growing_a_tree_sketch.py b/graft_a_tree.py
similarity index 54%
rename from growing_a_tree_sketch.py
rename to graft_a_tree.py
index 2d598cb..15ab48f 100644
--- a/growing_a_tree_sketch.py
+++ b/graft_a_tree.py
@@ -37,20 +37,8 @@ from trees import trees
 import os
 import os.path
 
-from colored import fg, attr
-
-## Text attributes
-bold = attr(1)
-underlined = (4)
-reset = attr(0)
-
-## Text colors
-black = fg(0)
-spring_green = fg(48)
-light_gray = fg(7)
-sky_blue = fg(109)
-yellow = fg(3)
-
+import sys
+from io import StringIO
 
 def choose_a_tree(dict):
 	collection = random.choice(list(trees.items()))
@@ -77,7 +65,7 @@ def bio(gardener):
 		bio = wikipedia.page(gardener)
 		short_bio = bio.summary
 	except:
-		short_bio = "{}There is no English Wikipedia page about this person.{}".format(sky_blue, reset)
+		short_bio = "There is no English Wikipedia page about this person."
 	return short_bio
 
 def bio_offline(gardener):
@@ -87,7 +75,7 @@ def bio_offline(gardener):
     with open(filename, 'r') as h:
       return h.read()
   
-  return "{}There is no English Wikipedia page about this person.{}".format(sky_blue, reset)
+  return "There is no English Wikipedia page about this person."
 
 
 """
@@ -106,52 +94,54 @@ def grow_new_branch (bud):
 # Turn nltk tree back into a sentence
 def trim_tree (branches):
   tree = " ".join([branch[0] for branch in branches])
+  # Remove spaces in html tags
+  tree = re.sub(r'\<\s*(\/?\w+)\s*\>', '<\\1>', tree)
   return re.sub(r'\s[\.,:;\(\)]', '', tree)
 
-def show (state, length=1):
-  os.system('clear')
-  # Optionally vertically align here
-  print(state)
-  time.sleep(length)
-
-def grow (tree, generation = 1):
-  branches = nltk.pos_tag(word_tokenize(tree))
-  # Filter out nouns, pick one
-  position, bud = random.choice([(position, bud[0]) for position, bud in enumerate(branches) if bud[1] == 'NN'])
-
-  # Make new tree placeholder for the bud show we can show it in two states and then grow out
-  next_tree = '{} {{}} {}'.format(trim_tree(branches[:max(0, position)]), trim_tree(branches[position+1:]))
-  new_branch = grow_new_branch(bud)
-
-  show(tree, 3 if generation == 1 else 1)
-  # Mark the bud, underlined and orange
-  show(next_tree.format("{}{}{}{}{}".format(bold, yellow, bud, reset, black)), 2)
-  # Mark the new branch green
-  show(next_tree.format("{}{}{}".format(spring_green, new_branch, black)), 2)
-  show(next_tree.format("{}{}{}".format(fg(82), new_branch, black)), 1)
-  show(next_tree.format("{}{}{}".format(fg(120), new_branch, black)), 1)
-  show(next_tree.format("{}{}{}".format(fg(157), new_branch, black)), 1)
-  show(next_tree.format("{}{}{}".format(fg(195), new_branch, black)), 1)
-  # Let it grow again
-
-  return next_tree.format(new_branch)
+def graft_a_tree (years = 3):
+  gardener, source, tree = choose_a_tree(trees)
+  short_bio = bio_offline(gardener)
+
+  print(
+    '<section>'
+    + 'Using a quote by <em>{}</em><br><br>'.format(gardener) \
+    + short_bio
+    + '</section>'
+  )
+
+  year = 1
+
+  print('<p class="tree first">{}</p>'.format(tree))
+
+  while year <= years:
+    branches = nltk.pos_tag(word_tokenize(tree))
+    # Filter out nouns, pick one
+    position, bud = random.choice([(position, bud[0]) for position, bud in enumerate(branches) if bud[1] == 'NN'])
+
+    tree_with_bud = '{} <em>{}</em> {}'.format(
+      trim_tree(branches[:max(0, position)]),
+      bud.strip(),
+      trim_tree(branches[position+1:]))
+
+    print('<p class="tree" data-year="{}">{}</p>'.format(year, tree_with_bud))
+
+    # Make new tree placeholder for the bud show we can show it in two states and then grow out
+    grown_tree = '{} <strong>{}</strong> {}'.format(
+      trim_tree(branches[:max(0, position)]),
+      grow_new_branch(bud).strip(),
+      trim_tree(branches[position+1:]))
+    # Let it grow again
+
+    print('<p class="tree" data-year="{}">{}</p>'.format(year, grown_tree))
+
+    grown_tree = re.sub(r'\<\/?\w+\>', '', grown_tree)
+
+    if grown_tree == tree:
+      break
+    else:
+      tree = grown_tree
+
+    year += 1
 
 if __name__ == '__main__':
-  while True:
-    gardener, source, tree = choose_a_tree(trees)
-    short_bio = bio_offline(gardener)
-
-    show(
-      'Using a quote by {}{}{}\n\n'.format(bold, gardener, reset) \
-      + short_bio, 3
-    )
-
-    generation = 1
-
-    while len(tree) < 1500:
-      next_tree = grow(tree, generation)
-      if next_tree == tree:
-        break
-      else:
-        tree = next_tree
-      generation += 1
\ No newline at end of file
+  graft_a_tree(3)
\ No newline at end of file
diff --git a/test.py b/pagedjs.py
similarity index 97%
rename from test.py
rename to pagedjs.py
index adadee5..6fb6774 100644
--- a/test.py
+++ b/pagedjs.py
@@ -65,7 +65,7 @@ def make_pdf (html, path_out=None, extra_scripts=[]):
           shutil.copy(name_out, path_out)
           return path_out
         else:
-          with open(name_out) as generated_pdf:
+          with open(name_out, 'rb') as generated_pdf:
             return generated_pdf.read()
 
 if __name__ == '__main__':
diff --git a/requirements.txt b/requirements.txt
index e69de29..5ac81d0 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -0,0 +1,3 @@
+nltk
+wikipedia
+flask
\ No newline at end of file
diff --git a/run.sh b/run.sh
new file mode 100644
index 0000000..a1709d8
--- /dev/null
+++ b/run.sh
@@ -0,0 +1,3 @@
+export FLASK_APP=app.py
+export FLASK_ENV=development
+flask run
\ No newline at end of file
diff --git a/templates/book.html b/templates/book.html
new file mode 100644
index 0000000..1d41a42
--- /dev/null
+++ b/templates/book.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    body, html {
+      font-size: 120%;
+    }
+
+    h1 {
+      page-break-after: right;
+    }
+
+    .tree{
+      page-break-before: always;
+      page: tree;
+    }
+
+    code {
+      page-break-before: right;
+      font-size: 57.5%;
+      line-height: 1.2;
+    }
+
+    .tree.first {
+      page-break-before: right;
+      page: initial;
+    }
+
+
+    .tree[data-year] {
+      string-set: year attr(data-year);
+    }
+
+    @page {
+      size: a5 portrait;
+    }
+
+  </style>
+</head>
+<body>
+  <h1>Grafted tree</h1>
+
+  {% autoescape false %}
+  {{ content }}
+
+  <code>{{ source_code }}</code>
+  {% endautoescape %}
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..dd0f0de
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    [data-message] {
+      display: none;
+      font-size: var(--font-size-smaller);
+      line-height: var(--line-height--smaller);
+      font-style: italic;
+      margin: var(--line-height--smaller) 0;
+    }
+
+    [data-message][data-active] {
+      display: block;
+    }
+
+  </style>
+</head>
+<body>
+  <h1>Grafting a tree</h1>
+  <p>
+    <form action="{{ BASEURL }}/graft" method="POST">
+      Graft a tree for <input type="number" name="years" value="3" max="25" min="0" size="4" /> years.
+      <button type="submit">Graft</button>
+    </form>
+  </p>
+  <p data-message="working">
+    Grafting your tree. This might take a while.
+  </p>
+  <p data-message="error">
+    Something went wrong.
+  </p>
+  <script>
+    function getFilename (headers, fallback) {
+      if (headers.has('Content-Disposition')) {
+        header = headers.get('Content-Disposition')
+        matches = header.match(/filename="(.+)"/)
+        
+        if (matches.length == 2) {
+          return matches[1]
+        }
+      }
+
+      return fallback;
+    }
+
+    (function () {
+      if (fetch) {
+        var form = document.querySelector('form'),
+            button = form.querySelector('button'),
+            messageWorking = document.querySelector('[data-message="working"]'),
+            messageError = document.querySelector('[data-message="error"]');
+
+        form.addEventListener('submit', function (e) {
+          e.preventDefault();
+          button.disabled = true;
+          delete messageError.dataset.active;
+          messageWorking.dataset.active = true;
+          const data = new FormData(form);
+  
+          fetch(form.action, {
+            method: "POST",
+            body: data
+          }).then(function (r) {
+            console.log(r);
+            r.blob().then(function (blob) {
+              var filename = getFilename(r.headers, 'Grafted-tree.pdf');
+              const a = document.createElement('a');
+              a.setAttribute('href', URL.createObjectURL(blob));
+              a.setAttribute('download', filename);
+              
+              if (document.createEvent) {
+                const event = document.createEvent('MouseEvents');
+                event.initEvent('click', true, true);
+                a.dispatchEvent(event);
+              }
+              else {
+                a.click();
+              }
+              delete messageWorking.dataset.active;
+              button.disabled = false;
+            });
+          }).catch(function() {
+            delete messageWorking.dataset.active;
+            messageError.dataset.active = true;
+            button.disabled = false;
+          });
+        });
+      }
+    })();
+  </script>
+</body>
+</html>
\ No newline at end of file