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

<input bind:value={name}>

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

In the DOM, everything is a string. That’s unhelpful when you’re dealing with numeric inputs — type="number" and type="range" — as it means you have to remember to coerce input.value before using it.

With bind:value, Svelte takes care of it for you:

<input type=number bind:value={a} min=0 max=10>
<input type=range bind:value={a} min=0 max=10>

bind works across pretty much everything you expect it to including textarea input select and even on elements that support textContent with contenteditable. useful for when binding innerHTML:

<div
	contenteditable="true"
	bind:innerHTML={html}
></div>

Svelte provides reactive bindings to audio and video elements The complete set of bindings for <audio> and <video> is as follows — six readonly bindings…

…and five two-way bindings:

Videos additionally have readonly videoWidth and videoHeight bindings.


get a reference to a DOM elements using bind:this={canvas}. This similar to refs in React.

Note interacting with reference needs to be done after the component is mounted. Therefore, the logic all needs to happen within the onMount lifecycle hook.


component bindings are kinda mind blowing. It provides an API to get access to a childs prop

I’m still trying to get my head around binding to component instances - https://svelte.dev/tutorial/component-this


Lifecycle events are almost the same as vue.js

onMount & onDestroy - do something after component is mounted and when it is unmounted/destroyed

beforeUpdate & afterUpdate - Do something before or after the component is updated great example use case here https://svelte.dev/tutorial/update.

tick - is a promise that can be called anytime to ensure that any pending updates have been completed before running something next. - https://svelte.dev/tutorial/tick


svelte stores is sveltes built-in global state management solution. Sort of like react context or Vuex, but it’s much easier to reason with!

writables - is a mutable reactive object which has a set , and update methods

readables - is a read only object. It is instantiated as a function , first arg is the inital value, the second is a callback which provides a set and stop functions. set is called on the first subscription. stop is called on the last unsubscribe

derived - is a way to leverage the value from a different store - https://svelte.dev/tutorial/derived-stores

Nice way to keep store logic “clean” - https://svelte.dev/tutorial/custom-stores . A “custom” svelte store only needs to be an object that exposes a subscribe method and it is automatically a svelte store.

bind works on writable svelte stores - https://svelte.dev/tutorial/store-bindings