diff --git a/kalk_web/README.md b/kalk_web/README.md
index 3ddbb7c..2ffebd1 100644
--- a/kalk_web/README.md
+++ b/kalk_web/README.md
@@ -39,6 +39,7 @@ The colours in the component can be changed by using these attributes.
 ```html
 <kalk-calculator
     hinttext="Type something..." 
+    autofocus="true"
     identifiercolor="cornflowerblue"
     operatorcolor="darkorange"
     promptcolor="mediumseagreen"
diff --git a/kalk_web/package.json b/kalk_web/package.json
index a0085c8..bf5bb2a 100644
--- a/kalk_web/package.json
+++ b/kalk_web/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@paddim8/kalk-component",
-	"version": "1.0.4",
+	"version": "1.0.6",
 	"description": "A Svelte component for kalk, a calculator that supports user-defined functions and variables.",
 	"svelte": "src/main.ts",
 	"main": "public/build/bundle.js",
diff --git a/kalk_web/public/index.html b/kalk_web/public/index.html
index bc82e33..fe33f6c 100644
--- a/kalk_web/public/index.html
+++ b/kalk_web/public/index.html
@@ -37,7 +37,7 @@
 <body>
 	<section id="wrapper">
 		<div class="calculator">
-			<kalk-calculator hinttext="test">
+			<kalk-calculator hinttext="test" autofocus="true">
 				<console-line>kalk</console-line>
 				<console-line>
 					<span class="hint">Type 'help' for instructions.</span>
diff --git a/kalk_web/src/KalkCalculator.svelte b/kalk_web/src/KalkCalculator.svelte
index 46a164e..ef48ef5 100644
--- a/kalk_web/src/KalkCalculator.svelte
+++ b/kalk_web/src/KalkCalculator.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { afterUpdate } from "svelte";
-    import ConsoleLine from "./ConsoleLine.svelte";
     import type { Context } from "@paddim8/kalk";
 
     // Props, HTML doesn't recognise them if they're not like this
@@ -10,6 +9,7 @@
     export let errorcolor = "tomato";
     export let linkcolor = "cornflowerblue";
     export let hinttext = "";
+    export let autofocus = false;
 
     type Kalk = typeof import("@paddim8/kalk");
 
@@ -114,6 +114,10 @@
         setCursorPos(target, cursorPos - offset);
     }
 
+    function focus(element: HTMLInputElement) {
+        if (autofocus) element.focus();
+    }
+
     function getCursorPos(element: HTMLInputElement): number {
         const selection = window.getSelection();
         if (selection.rangeCount !== 0) {
@@ -316,6 +320,7 @@
                 contenteditable="true"
                 class="input"
                 placeholder={hinttext}
+                use:focus
                 on:keydown={(event) => handleKeyDown(event, kalk)}
                 on:keyup={handleKeyUp}
                 on:input={handleInput}
