Svelte by Example: Components & Props

Components are reusable building blocks of a user interface. Svelte components are created in files with a .svelte extension.

In this example, we'll create a Todo component that accepts task and completed props. We'll then render it in a TodoList component.

Components receive props with the $props rune. Runes are Svelte's instructions for the compiler. They don't need to be imported.

Default values can be set when destructuring props.

Todo.svelte

<script>
  let {
    task,



    completed = false,
  } = $props();
</script>

<p>
  <input type="checkbox" checked={completed}>
  {task}
</p>

Components can be imported to use in other components.

Components are rendered using PascalCase. Pass props as attributes.

TodoList.svelte

<script>
  import Todo from './Todo.svelte';
</script>



<Todo task="Mow lawn" />
<Todo task="Walk dog" />
<Todo task="Read newspaper" />

Data & its shorthand notation can also be used for props.

TodoList.svelte

<script>
  import Todo from './Todo.svelte';

  let task = 'Mow lawn';
</script>

<Todo {task} />

Multiple props can be passed at once with the spread operator ....

TodoList.svelte

<script>
  import Todo from './Todo.svelte';

  let todo = {
    task: 'Mow lawn',
    completed: false,
  };
</script>

<Todo {...todo} />

resources://