diff --git a/README.md b/README.md
index 0ec3724..ef9ebaa 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,12 @@
-# Vaul Vue
+# Former
 
 Vaul Vue is an unstyled drawer component for Vue that can be used as a Dialog replacement on tablet and mobile devices.
 It uses [Radix Vue's Dialog primitive](https://www.radix-vue.com/components/dialog.html) under the hood and is a feature complete port of [Emil Kowalski's Vaul library](https://github.com/emilkowalski/vaul) (built for React).
 
+## Playground
+
+Create and test your own form at [playground](https://geprog.github.io/former).
+
 ## Installation
 
 ```bash
@@ -41,5 +45,4 @@ import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger }
 
 All credits go to these open-source works and resources
 
-- Major credits go to [Emil Kowalski](https://emilkowal.ski/) for the original [Vaul library](https://github.com/emilkowalski/vaul).
-- [Radix Vue](https://www.radix-vue.com/) for the Dialog primitive used under the hood.
+-
\ No newline at end of file
diff --git a/packages/formkit-app/.gitignore b/packages/former/.gitignore
similarity index 100%
rename from packages/formkit-app/.gitignore
rename to packages/former/.gitignore
diff --git a/packages/formkit-app/.vscode/extensions.json b/packages/former/.vscode/extensions.json
similarity index 100%
rename from packages/formkit-app/.vscode/extensions.json
rename to packages/former/.vscode/extensions.json
diff --git a/packages/formkit-app/README.md b/packages/former/README.md
similarity index 100%
rename from packages/formkit-app/README.md
rename to packages/former/README.md
diff --git a/packages/formkit-app/formkit.config.ts b/packages/former/formkit.config.ts
similarity index 100%
rename from packages/formkit-app/formkit.config.ts
rename to packages/former/formkit.config.ts
diff --git a/packages/formkit-app/formkit.theme.ts b/packages/former/formkit.theme.ts
similarity index 100%
rename from packages/formkit-app/formkit.theme.ts
rename to packages/former/formkit.theme.ts
diff --git a/packages/formkit-app/index.html b/packages/former/index.html
similarity index 100%
rename from packages/formkit-app/index.html
rename to packages/former/index.html
diff --git a/packages/formkit-app/package.json b/packages/former/package.json
similarity index 100%
rename from packages/formkit-app/package.json
rename to packages/former/package.json
diff --git a/packages/formkit-app/postcss.config.cjs b/packages/former/postcss.config.cjs
similarity index 100%
rename from packages/formkit-app/postcss.config.cjs
rename to packages/former/postcss.config.cjs
diff --git a/packages/formkit-app/public/vite.svg b/packages/former/public/vite.svg
similarity index 100%
rename from packages/formkit-app/public/vite.svg
rename to packages/former/public/vite.svg
diff --git a/packages/formkit-app/src/App.vue b/packages/former/src/App.vue
similarity index 93%
rename from packages/formkit-app/src/App.vue
rename to packages/former/src/App.vue
index 4aa85ee..f33dc76 100644
--- a/packages/formkit-app/src/App.vue
+++ b/packages/former/src/App.vue
@@ -8,6 +8,11 @@
         height="50"
         class="mx-auto mb-8 w-48"
       >
+      <FormKit
+        type="button"
+        :label="isEdit ? 'Edit' : 'Preview'"
+        :onClick="() => isEdit = !isEdit"
+        />
       <div ref="el">
         <FormKitSchema :schema :library />
       </div>
@@ -36,23 +41,20 @@
 </template>
 
 <script setup lang="ts">
-import { FormKitSchema } from '@formkit/vue'
-import { ref } from 'vue';
+import { FormKitSchema, FormKit } from '@formkit/vue'
+import { ref,computed, provide  } from 'vue';
 import type { FormKitSchemaNode } from '@formkit/core';
 import { useSortable } from '@vueuse/integrations/useSortable';
 import { markRaw } from 'vue';
 import FormKitEdit from './components/FormKitEdit.vue';
-import { computed } from 'vue';
 import TextEditForm from './components/TextEditForm.vue';
 
-// async function submit() {
-//   await new Promise(r => setTimeout(r, 1000))
-//   alert('Submitted! 🎉')
-// }
+const isEdit = ref(true);
+provide('isEdit', isEdit);
 
 const library = markRaw({
   FormKit: FormKitEdit,
-})
+});
 
 const editingId = ref<number>();
 
diff --git a/packages/formkit-app/src/assets/main.css b/packages/former/src/assets/main.css
similarity index 100%
rename from packages/formkit-app/src/assets/main.css
rename to packages/former/src/assets/main.css
diff --git a/packages/formkit-app/src/assets/vue.svg b/packages/former/src/assets/vue.svg
similarity index 100%
rename from packages/formkit-app/src/assets/vue.svg
rename to packages/former/src/assets/vue.svg
diff --git a/packages/formkit-app/src/components/FormKitEdit.vue b/packages/former/src/components/FormKitEdit.vue
similarity index 76%
rename from packages/formkit-app/src/components/FormKitEdit.vue
rename to packages/former/src/components/FormKitEdit.vue
index 9e750cc..7f3755c 100644
--- a/packages/formkit-app/src/components/FormKitEdit.vue
+++ b/packages/former/src/components/FormKitEdit.vue
@@ -6,7 +6,7 @@
         <FormKit v-bind="$attrs" />
       </div>
 
-      <div class="flex ml-auto gap-4">
+      <div class="ml-auto gap-4 hidden group-hover:flex">
         <FormKit
         type="button"
         label="Edit"
@@ -33,6 +33,9 @@
 
 <script setup lang="ts">
 import { FormKit } from '@formkit/vue';
+import { inject, type Ref } from 'vue';
 
-defineProps<{ isEdit?: boolean; onDelete?: () => void; addAfter?: () => void; edit?: () => void }>();
+const isEdit = inject<Ref<boolean>>('isEdit');
+
+defineProps<{ onDelete?: () => void; addAfter?: () => void; edit?: () => void }>();
 </script>
diff --git a/packages/formkit-app/src/components/TextEditForm.vue b/packages/former/src/components/TextEditForm.vue
similarity index 100%
rename from packages/formkit-app/src/components/TextEditForm.vue
rename to packages/former/src/components/TextEditForm.vue
diff --git a/packages/formkit-app/src/main.ts b/packages/former/src/main.ts
similarity index 100%
rename from packages/formkit-app/src/main.ts
rename to packages/former/src/main.ts
diff --git a/packages/formkit-app/src/style.css b/packages/former/src/style.css
similarity index 100%
rename from packages/formkit-app/src/style.css
rename to packages/former/src/style.css
diff --git a/packages/formkit-app/src/vite-env.d.ts b/packages/former/src/vite-env.d.ts
similarity index 100%
rename from packages/formkit-app/src/vite-env.d.ts
rename to packages/former/src/vite-env.d.ts
diff --git a/packages/formkit-app/tailwind.config.js b/packages/former/tailwind.config.js
similarity index 100%
rename from packages/formkit-app/tailwind.config.js
rename to packages/former/tailwind.config.js
diff --git a/packages/formkit-app/tsconfig.json b/packages/former/tsconfig.json
similarity index 100%
rename from packages/formkit-app/tsconfig.json
rename to packages/former/tsconfig.json
diff --git a/packages/formkit-app/tsconfig.node.json b/packages/former/tsconfig.node.json
similarity index 100%
rename from packages/formkit-app/tsconfig.node.json
rename to packages/former/tsconfig.node.json
diff --git a/packages/formkit-app/vite.config.ts b/packages/former/vite.config.ts
similarity index 100%
rename from packages/formkit-app/vite.config.ts
rename to packages/former/vite.config.ts