Your First SvelteKit App

SvelteKit is a powerful framework for building fast and efficient web applications. Let’s create a simple “To-Do List” app.

1. Create a Project:

   npm create svelte@latest my-todo-app
   cd my-todo-app
   npm install

2. Create a Component: Create src/components/TodoList.svelte:

   <script>
     let todos = [];
     let newItem = '';
   
     function addItem() {
       if (newItem) {
         todos = [...todos, { text: newItem, completed: false }];
         newItem = '';
       }
     }
   
     function toggleComplete(index) {
       todos[index].completed = !todos[index].completed;
       todos = todos; // Trigger reactivity
     }
   </script>
   
   <h1>To-Do List</h1>
   
   <input type="text" bind:value={newItem} placeholder="Add a new item" />
   <button on:click={addItem}>Add</button>
   
   <ul>
     {#each todos as todo, index}
       <li class:completed={todo.completed} on:click={() => toggleComplete(index)}>
         {todo.text}
       </li>
     {/each}
   </ul>
   
   <style>
     .completed {
       text-decoration: line-through;
       color: gray;
     }
   </style>

3. Use the Component: In src/routes/+page.svelte:

   <script>
     import TodoList from '../components/TodoList.svelte';
   </script>
   
   <TodoList />

4. Run the Development Server:

   npm run dev -- --open

This will open your browser with the running application. You can now add and mark items as complete. This is a very basic example, but it demonstrates the core concepts of SvelteKit components and reactivity. You can expand this app by adding features like local storage persistence.