What are Svelte bindings?
Answer
Svelte bindings create two-way data flow between DOM elements/components and variables. bind:value: <input bind:value={name}> — name updates when the user types; the input value updates when name changes programmatically. Works for <textarea>, <select>, checkboxes (bind:checked), radio buttons, and number inputs. bind:this: <canvas bind:this={canvasEl}> — assigns the DOM element to a variable for direct access. Component bindings: bind to a child's exported variable: <NumberInput bind:value={count} />. Media bindings: bind:currentTime, bind:paused, bind:duration on <video>/<audio>. Bindings make form handling simple — no need for change event handlers just to sync state with inputs.
Previous
What are Svelte conditional and loop template blocks?
Next
What are Svelte transitions and animations?