Svelte by Example: Data

Svelte uses <script> tags to set up a component. Variables declared in the script tag are made accessible to the template.

In this example, we'll create a component with a task and a checkbox.

To add data to your component, introduce a script tag with a variable. In practice, Svelte components have the script tag at the top of the file.

Print data in templates with curly braces. Data can also be used in attributes.

Todo.svelte

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



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

When the variable name matches the attribute, you can use shorthand notation instead.

<script>
  let checked = false;
</script>

<input type="checkbox" {checked}>

resources://