Part 1 / Introduction / Your first component

In Svelte, an application is composed from one or more components. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a .svelte file. The App.svelte file, open in the code editor to the right, is a simple component.

Adding data

A component that just renders some static markup isn't very interesting. Let's add some data.

First, add a script tag to your component and declare a name variable:

<script>
	let name = 'Svelte';
</script>

<h1>Hello world!</h1>

Then, we can refer to name in the markup:

<h1>Hello {name}!</h1>

Inside the curly braces, we can put any JavaScript we want. Try changing name to name.toUpperCase() for a shoutier greeting.

<h1>Hello {name.toUpperCase()}!</h1>