Update chyron text with text field

src/routes/+page.server.js

@@ -0,0 +1,6 @@
+/** @type {import('./$types').Actions} */
+export const actions = {
+    default: async (event) => {
+      // TODO log the user in
+    }
+  };

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script>
 import Ticker from 'svelte-ticker';
 import {HsvPicker} from 'svelte-color-picker';
+import { enhance } from '$app/forms';
 
 function colorCallback(rgba) {
     let r = rgba.detail.r;
@@ -11,7 +12,10 @@ function colorCallback(rgba) {
     let horizontal = document.querySelector(".horizontal");
     horizontal.style.color = `rgb(${r},${g},${b})`;
 }
-export let chyrontext='chyron text here.  Mooooo.  1234567890. qwertyuyiop. asdfghjkl. zxcvbnm. chyron text here.  Mooooo.  1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.'
+
+/** @type {import('./$types').ActionData} */
+export let form;
+let chyron_text = 'chyron text here.  Mooooo.  1234567890. qwertyuyiop. asdfghjkl. zxcvbnm. chyron text here.  Mooooo.  1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.';
 
 </script>
 
@@ -25,19 +29,14 @@ export let chyrontext='chyron text here.  Mooooo.  1234567890. qwertyuyiop. asdf
 	</div>
     <p></p>
 	<div class="form">
-		<form method="POST">
-			<label>
-			  <p>Text</p>
-			  <input name="chyrontext" type="text">
-			</label>
-			<button>Update</button>
-		  </form>
-	</div>    
+		  <p><input bind:value={chyron_text} placeholder="{chyron_text}">
+		  </p>
+	</div>
+
     <div class="horizontal">
          <!-- delay affects text starting point offset-->
         <Ticker pausing=false duration=60 delay=-5>
-<!-- foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  -->
-			{chyrontext}
+			{chyron_text}
         </Ticker>
     </div>
 </div>