npm create svelte@latest myapp

Basic structure of an application

<script>
// put your variables here
</script>
,
<main>
// html goes here. Could also be different tags.
</main>

<style>
// only applies to this component!
</style>

Basic example of variables

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

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

// You can put any javascript that you want in those brackets.
// Like: <h1>Hello {name.toUpperCase()}!</h1>

Images

// Short hand attribute for src in images
<img {src} alt="A man dances." />

Using Components

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

<p>This is a paragraph.</p>
<Nested />

Reactivity

<script>
	let count = 0;

	function incrementCount() {
		count += 1;
	}
</script>

<button on:click={incrementCount}>
	Clicked {count}
	{count === 1 ? 'time' : 'times'}
</button>

<style>
	button {
		width:200px;
	}
</style>

$ = 're-run this code whenever any of the referenced values change'.