From 8c73a4d1867b051c1622a4a4f582055c011a8307 Mon Sep 17 00:00:00 2001
From: botre <git@bjornkrols.com>
Date: Fri, 8 May 2026 14:17:33 +0200
Subject: [PATCH] Fix typos and refresh framework snippets

- Fix typos across notification-email, redirection, additional-workspaces, slack, webhooks
- React: replace removed ReactDOM.render with createRoot
- Vue: convert snippets to <script setup>
- Nuxt: convert to <script setup> with $fetch; rename Nuxt.js to Nuxt
- Svelte: update to Svelte 5 runes ($state, onsubmit)
- Add SvelteKit page; remove Sapper and Gridsome (unmaintained)
---
 docs/.vuepress/config.js                 |  5 +-
 docs/customization/notification-email.md |  2 +-
 docs/customization/redirection.md        |  6 +-
 docs/dashboard/additional-workspaces.md  |  2 +-
 docs/examples/ajax.md                    |  2 +-
 docs/examples/gridsome.md                | 28 -------
 docs/examples/nuxtjs.md                  | 53 ++++++-------
 docs/examples/react.md                   | 12 +--
 docs/examples/sapper.md                  | 42 ----------
 docs/examples/svelte.md                  | 15 ++--
 docs/examples/sveltekit.md               | 57 ++++++++++++++
 docs/examples/vue.md                     | 99 ++++++++++--------------
 docs/integration/slack.md                |  2 +-
 docs/integration/webhooks.md             |  2 +-
 14 files changed, 144 insertions(+), 183 deletions(-)
 delete mode 100644 docs/examples/gridsome.md
 delete mode 100644 docs/examples/sapper.md
 create mode 100644 docs/examples/sveltekit.md

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index dc31fc3..a63e578 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -130,15 +130,14 @@ module.exports = {
           ["/examples/alpinejs", "Alpine.js"],
           ["/examples/framer", "Framer"],
           ["/examples/gatsby", "Gatsby"],
-          ["/examples/gridsome", "Gridsome"],
           ["/examples/hugo", "Hugo"],
           ["/examples/jekyll", "Jekyll"],
           ["/examples/nextjs", "Next.js"],
-          ["/examples/nuxtjs", "Nuxt.js"],
+          ["/examples/nuxtjs", "Nuxt"],
           ["/examples/react", "React"],
           ["/examples/react-native", "React Native"],
-          ["/examples/sapper", "Sapper"],
           ["/examples/svelte", "Svelte"],
+          ["/examples/sveltekit", "SvelteKit"],
           ["/examples/vue", "Vue"],
           ["/examples/webflow", "Webflow"],
           ["/examples/wordpress", "WordPress"],
diff --git a/docs/customization/notification-email.md b/docs/customization/notification-email.md
index 78929a3..decfeca 100644
--- a/docs/customization/notification-email.md
+++ b/docs/customization/notification-email.md
@@ -39,7 +39,7 @@ Create a hidden input with the name `_email.template.title`.
 <input type="hidden" name="_email.template.title" value="My Custom Title" />
 ```
 
-You can remove the title be setting the value to `false`.
+You can remove the title by setting the value to `false`.
 
 ```html
 <input type="hidden" name="_email.template.title" value="false" />
diff --git a/docs/customization/redirection.md b/docs/customization/redirection.md
index 9fc3d16..ea33781 100644
--- a/docs/customization/redirection.md
+++ b/docs/customization/redirection.md
@@ -67,14 +67,14 @@ Formspark has excellent AJAX support, [learn more about it here](/examples/ajax.
 
 ```html
 <!--
-1. If your form is hosted at "https:/my-website.com/newsletter.html"
+1. If your form is hosted at "https://my-website.com/newsletter.html"
 -->
 <form action="https://submit-form.com/your-form-id">
-  <!-- 2. Then you would set the "_redirect" to "https:/my-website.com/newsletter.html" -->
+  <!-- 2. Then you would set the "_redirect" to "https://my-website.com/newsletter.html" -->
   <input
     type="hidden"
     name="_redirect"
-    value="https:/my-website.com/newsletter.html"
+    value="https://my-website.com/newsletter.html"
   />
   <input type="email" name="email" />
   <button type="submit">Subscribe</button>
diff --git a/docs/dashboard/additional-workspaces.md b/docs/dashboard/additional-workspaces.md
index b4b4660..87f0448 100644
--- a/docs/dashboard/additional-workspaces.md
+++ b/docs/dashboard/additional-workspaces.md
@@ -14,7 +14,7 @@ workspace.
 
 ## Steps
 
-1. Press the `+` button to rhe right of your workspace
+1. Press the `+` button to the right of your workspace
 2. Fill the form and press `Create`
 
 ![New workspace](../.vuepress/public/new-workspace.png)
diff --git a/docs/examples/ajax.md b/docs/examples/ajax.md
index dd81cfe..99b502b 100644
--- a/docs/examples/ajax.md
+++ b/docs/examples/ajax.md
@@ -12,7 +12,7 @@ To do so, make a `GET` or `POST` request to your form endpoint (https://submit-f
 Ensure that both the `Content-Type` and `Accept` headers are set to `application/json` (some HTTP libraries do this
 automatically).
 
-We have included examples for: Axios, Fetch, jQuery and Javascript XHR.
+We have included examples for: Axios, Fetch, jQuery and JavaScript XHR.
 
 If you wish to include special fields and customizations, which require hidden fields such as `_email.subject`
 and `_email.from`, include them as a nested object in the payload:
diff --git a/docs/examples/gridsome.md b/docs/examples/gridsome.md
deleted file mode 100644
index dcebd7c..0000000
--- a/docs/examples/gridsome.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Gridsome
-lang: en-US
----
-
-# Gridsome
-
-```vue
-<template>
-  <form method="POST" :action="formActionUrl">
-    <textarea name="message" placeholder="Message" />
-    <button type="submit">Send</button>
-  </form>
-</template>
-
-<script>
-export default {
-  metaInfo: {
-    title: "Contact",
-  },
-  data() {
-    return {
-      formActionUrl: "https://submit-form.com/your-form-id",
-    };
-  },
-};
-</script>
-```
diff --git a/docs/examples/nuxtjs.md b/docs/examples/nuxtjs.md
index e58f220..db580fc 100644
--- a/docs/examples/nuxtjs.md
+++ b/docs/examples/nuxtjs.md
@@ -1,13 +1,35 @@
 ---
-title: Nuxt.js
+title: Nuxt
 lang: en-US
 ---
 
-# Nuxt.js
+# Nuxt
 
 ## Fetch
 
 ```vue
+<script setup>
+import { ref } from "vue";
+
+const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";
+
+const message = ref("");
+
+const submitForm = async () => {
+  await $fetch(FORMSPARK_ACTION_URL, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+    body: {
+      message: message.value,
+    },
+  });
+  alert("Form submitted");
+};
+</script>
+
 <template>
   <form @submit.prevent="submitForm">
     <label>
@@ -17,31 +39,4 @@ lang: en-US
     <button type="submit">Submit</button>
   </form>
 </template>
-
-<script>
-const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";
-
-export default {
-  data() {
-    return {
-      message: "",
-    };
-  },
-  methods: {
-    async submitForm() {
-      await fetch(FORMSPARK_ACTION_URL, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Accept: "application/json",
-        },
-        body: JSON.stringify({
-          message: this.message,
-        }),
-      });
-      alert("Form submitted");
-    },
-  },
-};
-</script>
 ```
diff --git a/docs/examples/react.md b/docs/examples/react.md
index be4045c..590b83a 100644
--- a/docs/examples/react.md
+++ b/docs/examples/react.md
@@ -12,8 +12,8 @@ Check out our official React hooks: [use-formspark](https://github.com/formspark
 :::
 
 ```jsx
-import React, { useState } from "react";
-import ReactDOM from "react-dom";
+import { useState } from "react";
+import { createRoot } from "react-dom/client";
 import { useFormspark } from "@formspark/use-formspark";
 
 const FORMSPARK_FORM_ID = "your-form-id";
@@ -41,14 +41,14 @@ const Application = () => {
   );
 };
 
-ReactDOM.render(<Application />, document.getElementById("root"));
+createRoot(document.getElementById("root")).render(<Application />);
 ```
 
 ## Fetch
 
 ```jsx
-import React, { useState } from "react";
-import ReactDOM from "react-dom";
+import { useState } from "react";
+import { createRoot } from "react-dom/client";
 
 const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";
 
@@ -78,5 +78,5 @@ const Application = () => {
   );
 };
 
-ReactDOM.render(<Application />, document.getElementById("root"));
+createRoot(document.getElementById("root")).render(<Application />);
 ```
diff --git a/docs/examples/sapper.md b/docs/examples/sapper.md
deleted file mode 100644
index ab44fd2..0000000
--- a/docs/examples/sapper.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: Sapper
-lang: en-US
----
-
-# Sapper
-
-## Fetch
-
-```html
-<script>
-  const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";
-
-  let message = "";
-  let submitting = false;
-
-  async function onSubmit() {
-    try {
-      submitting = true;
-      await fetch(FORMSPARK_ACTION_URL, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Accept: "application/json",
-        },
-        body: JSON.stringify({
-          message,
-        }),
-      });
-      message = "";
-      alert("Form submitted");
-    } finally {
-      submitting = false;
-    }
-  }
-</script>
-
-<form on:submit|preventDefault="{onSubmit}">
-  <textarea bind:value="{message}" />
-  <button type="submit" disabled="{submitting}">Send</button>
-</form>
-```
diff --git a/docs/examples/svelte.md b/docs/examples/svelte.md
index 6b33ad8..9550b64 100644
--- a/docs/examples/svelte.md
+++ b/docs/examples/svelte.md
@@ -7,14 +7,15 @@ lang: en-US
 
 ## Fetch
 
-```html
+```svelte
 <script>
   const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";
 
-  let message = "";
-  let submitting = false;
+  let message = $state("");
+  let submitting = $state(false);
 
-  async function onSubmit() {
+  async function onSubmit(event) {
+    event.preventDefault();
     try {
       submitting = true;
       await fetch(FORMSPARK_ACTION_URL, {
@@ -35,8 +36,8 @@ lang: en-US
   }
 </script>
 
-<form on:submit|preventDefault="{onSubmit}">
-  <textarea bind:value="{message}" />
-  <button type="submit" disabled="{submitting}">Send</button>
+<form onsubmit={onSubmit}>
+  <textarea bind:value={message}></textarea>
+  <button type="submit" disabled={submitting}>Send</button>
 </form>
 ```
diff --git a/docs/examples/sveltekit.md b/docs/examples/sveltekit.md
new file mode 100644
index 0000000..3016739
--- /dev/null
+++ b/docs/examples/sveltekit.md
@@ -0,0 +1,57 @@
+---
+title: SvelteKit
+lang: en-US
+---
+
+# SvelteKit
+
+## HTML form
+
+The simplest integration is a plain HTML form that posts directly to Formspark.
+No JavaScript is required.
+
+```svelte
+<!-- src/routes/contact/+page.svelte -->
+<form method="POST" action="https://submit-form.com/your-form-id">
+  <textarea name="message"></textarea>
+  <button type="submit">Send</button>
+</form>
+```
+
+## Fetch
+
+```svelte
+<!-- src/routes/contact/+page.svelte -->
+<script>
+  const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";
+
+  let message = $state("");
+  let submitting = $state(false);
+
+  async function onSubmit(event) {
+    event.preventDefault();
+    try {
+      submitting = true;
+      await fetch(FORMSPARK_ACTION_URL, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+        body: JSON.stringify({
+          message,
+        }),
+      });
+      message = "";
+      alert("Form submitted");
+    } finally {
+      submitting = false;
+    }
+  }
+</script>
+
+<form onsubmit={onSubmit}>
+  <textarea bind:value={message}></textarea>
+  <button type="submit" disabled={submitting}>Send</button>
+</form>
+```
diff --git a/docs/examples/vue.md b/docs/examples/vue.md
index 10a082c..b744f9b 100644
--- a/docs/examples/vue.md
+++ b/docs/examples/vue.md
@@ -13,49 +13,55 @@ functions: [vue-use-formspark](https://github.com/formspark/vue-use-formspark).
 :::
 
 ```vue
-<template>
-  <form @submit="onSubmit">
-    <textarea v-model="message" @input="onInput" />
-    <button type="submit" :disabled="submitting">Send</button>
-  </form>
-</template>
-
-<script>
+<script setup>
 import { ref } from "vue";
 import { useFormspark } from "@formspark/vue-use-formspark";
 
-export default {
-  setup() {
-    const message = ref("");
-
-    const [submit, submitting] = useFormspark({
-      formId: "your-form-id",
-    });
-
-    const onInput = (e) => {
-      message.value = e.target.value;
-    };
-
-    const onSubmit = async (e) => {
-      e.preventDefault();
-      await submit({ message: message.value });
-      message.value = "";
-    };
-
-    return {
-      message,
-      onInput,
-      onSubmit,
-      submitting,
-    };
-  },
+const message = ref("");
+
+const [submit, submitting] = useFormspark({
+  formId: "your-form-id",
+});
+
+const onSubmit = async () => {
+  await submit({ message: message.value });
+  message.value = "";
 };
 </script>
+
+<template>
+  <form @submit.prevent="onSubmit">
+    <textarea v-model="message" />
+    <button type="submit" :disabled="submitting">Send</button>
+  </form>
+</template>
 ```
 
 ## Fetch
 
 ```vue
+<script setup>
+import { ref } from "vue";
+
+const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";
+
+const message = ref("");
+
+const submitForm = async () => {
+  await fetch(FORMSPARK_ACTION_URL, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+    body: JSON.stringify({
+      message: message.value,
+    }),
+  });
+  alert("Form submitted");
+};
+</script>
+
 <template>
   <form @submit.prevent="submitForm">
     <label>
@@ -65,33 +71,6 @@ export default {
     <button type="submit">Submit</button>
   </form>
 </template>
-
-<script>
-const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";
-
-export default {
-  data() {
-    return {
-      message: "",
-    };
-  },
-  methods: {
-    async submitForm() {
-      await fetch(FORMSPARK_ACTION_URL, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Accept: "application/json",
-        },
-        body: JSON.stringify({
-          message: this.message,
-        }),
-      });
-      alert("Form submitted");
-    },
-  },
-};
-</script>
 ```
 
 ## petite-vue and Fetch
diff --git a/docs/integration/slack.md b/docs/integration/slack.md
index 031f9bd..8c7a174 100644
--- a/docs/integration/slack.md
+++ b/docs/integration/slack.md
@@ -12,7 +12,7 @@ Slack.
 
    ![Connect with Slack](../.vuepress/public/connect-with-slack.png)
 
-2. Allow Formspark to access your slack workspace.
+2. Allow Formspark to access your Slack workspace.
 
    ![Connect with Slack](../.vuepress/public/allow-slack.png)
 
diff --git a/docs/integration/webhooks.md b/docs/integration/webhooks.md
index 31ef9c7..5454f45 100644
--- a/docs/integration/webhooks.md
+++ b/docs/integration/webhooks.md
@@ -26,7 +26,7 @@ Given the following form:
 </form>
 ```
 
-The body of the POST request will looks as follows:
+The body of the POST request will look as follows:
 
 ```json
 {