Call a server-side script from the sidebar.

sidebar/src/App.svelte

@@ -1,10 +1,15 @@
 <script>
-	export let name;
+  export let name;
+
+  const insertHelloWorld = () => {
+    google.script.run.insertText("Hello World.");
+  }
 </script>
 
 <main>
 	<h1>Hello {name}!</h1>
 	<p>Visit the <a href="https://svelte.dev/tutorial" target="_blank">Svelte tutorial</a> to learn how to build Svelte apps.</p>
+  <button on:click={insertHelloWorld} class="blue">Insert Hello World.</button>
 </main>
 
 <style>

src/index.ts

@@ -54,4 +54,9 @@ const showSidebar = () => {
  * Parses the file with the given file name. This is used to inject CSS and Javascript
  * in an HTML file.
  */
-const include = (filename: string) => HtmlService.createHtmlOutputFromFile(filename).getContent();
+const include = (filename: string) => HtmlService.createHtmlOutputFromFile(filename).getContent();
+
+/**
+ * Inserts the given text into the active document.
+ */
+const insertText = (text: string) => TextInserter.insertText(text);

src/text-inserter.ts

@@ -0,0 +1,6 @@
+namespace TextInserter {
+  export const insertText = (text: string) => {
+    const currentDate = new Date();
+    DocumentApp.getActiveDocument().getBody().appendParagraph(`${text} It is ${currentDate.toDateString()}`);
+  }
+}