Flujo de Datos Bidireccional Simplificado

En la mayoría de los frameworks, los datos fluyen en una sola dirección: del estado del componente al DOM. Cuando un usuario escribe en un campo de entrada, debes escuchar manualmente los eventos y actualizar el estado. Este patrón — aunque explícito — genera código repetitivo que oscurece la intención y hace que las interacciones simples se sientan laboriosas.

Considera este escenario común: tienes una entrada de búsqueda y quieres filtrar una lista mientras el usuario escribe. Sin binding, necesitas manejadores de eventos, actualizaciones de estado y una coordinación cuidadosa:

<script>
	let searchTerm = $state('')

	function handleInput(event) {
		searchTerm = event.target.value
	}
</script>

<input value={searchTerm} oninput={handleInput} />

La directiva bind: de Svelte elimina esta fricción al establecer un enlace de datos bidireccional: cuando el estado cambia, la UI se actualiza automáticamente, y cuando el usuario interactúa con los elementos enlazados, el estado se actualiza automáticamente. Esta sincronización bidireccional transforma patrones comunes como el manejo de formularios de una coreografía en múltiples pasos a una simplicidad declarativa:

<script>
	let searchTerm = $state('')
</script>

<input bind:value={searchTerm} />

Una sola línea. Sin manejadores de eventos. Sin ceremonias. El estado y la entrada permanecen perfectamente sincronizados.

Por qué esto importa: El enlace bidireccional no se trata de escribir menos código — se trata de expresar la intención con claridad. Cuando escribes bind:value={searchTerm}, estás declarando una relación: "esta entrada y esta variable son dos vistas del mismo dato." Svelte maneja toda la mecánica de sincronización por ti.

Este tutorial explora la directiva bind: de manera exhaustiva: desde los bindings básicos de entrada hasta los bindings avanzados de props de componentes, desde las propiedades de medios de solo lectura hasta las medidas de dimensiones, desde los comportamientos de reinicio de formularios hasta la optimización de rendimiento. Comprenderás no solo la sintaxis, sino el modelo mental que hace que los bindings sean poderosos y los patrones que los mantienen fáciles de mantener.

Entendiendo el Flujo de Datos

El Flujo de Datos Unidireccional por Defecto

Por defecto, los datos en Svelte (y en la mayoría de los frameworks reactivos) fluyen hacia abajo:

<script>
	let name = $state('Alice')
</script>

<p>Hello, {name}!</p>

Cuando name cambia, el párrafo se actualiza. Simple, predecible y unidireccional. Esto funciona perfectamente para mostrar datos, pero ¿qué hay de la entrada del usuario?

Sin binding, capturar la entrada del usuario requiere un manejo explícito de eventos:

<script>
	let name = $state('Alice')

	function handleInput(event) {
		name = event.target.value
	}
</script>

<input value={name} oninput={handleInput} /><p>Hello, {name}!</p>

Estás cerrando el ciclo manualmente: estado → DOM (mediante value), y DOM → estado (mediante oninput). Este patrón es verboso pero transparente; puedes ver exactamente qué está sucediendo.

El Atajo del Enlace Bidireccional

La directiva bind: automatiza este ciclo:

<script>
	let name = $state('Alice')
</script>

<input bind:value={name} /><p>Hello, {name}!</p>

Detrás de escena, Svelte crea el listener de eventos por ti. Cuando la entrada dispara un evento input, Svelte actualiza name. Cuando tu código actualiza name, Svelte actualiza la propiedad value de la entrada. Los dos permanecen sincronizados automáticamente.

Modelo mental: Piensa en bind: como si crease una "conexión en vivo" entre una variable y una propiedad del DOM. Cualquier cambio en cualquiera de los extremos se propaga al otro de forma instantánea.

Cuándo Usar Cada Enfoque

Usa bind: cuando:

La relación es sencilla: "esta entrada controla esta variable"
No necesitas transformar, validar o interceptar el valor durante las actualizaciones
Estás construyendo formularios, paneles de configuración o controles interactivos

Usa manejadores de eventos explícitos cuando:

Necesitas transformar la entrada (p. ej., recortar, convertir a minúsculas, sanear)
Necesitas validación antes de aceptar cambios
Necesitas disparar efectos secundarios (llamadas a API, analíticas)
La lógica es lo suficientemente compleja como para que la explicitud ayude a la comprensión

Ambos enfoques son válidos. Usa bind: para simplicidad, y manejadores de eventos para control.

Bindings Básicos de Entrada

Entradas de Texto: `bind:value`

El binding más común sincroniza el valor de un elemento <input> con una variable:

<script>
	let username = $state('')
	let email = $state('')
	let bio = $state('')
</script>

<form>
	<label>
		Username:
		<input type="text" bind:value={username} />
	</label>

	<label>
		Email:
		<input type="email" bind:value={email} />
	</label>

	<label>
		Bio:
		<textarea bind:value={bio}></textarea>
	</label>
</form>

<div class="preview">
	<p><strong>Username:</strong> {username || '(empty)'}</p>
	<p><strong>Email:</strong> {email || '(empty)'}</p>
	<p><strong>Bio:</strong> {bio || '(empty)'}</p>
</div>

Cómo funciona: Svelte escucha el evento input en el elemento. Cada vez que el usuario escribe, el evento se dispara y Svelte lee event.target.value y lo asigna a tu variable. Si cambias la variable de forma programática (p. ej., username = 'Bob'), Svelte actualiza la propiedad value de la entrada y el DOM refleja el cambio.

Sintaxis abreviada: Cuando el nombre de la variable coincide con el nombre de la propiedad, puedes omitir el valor:

<input bind:value />
<!-- Same as: -->
<input bind:value />

Esto solo funciona cuando la variable se llama literalmente value. Es una pequeña conveniencia para casos comunes.

Entradas Numéricas: Coerción de Tipo Automática

Para <input type="number"> y <input type="range">, Svelte convierte automáticamente el valor de cadena a número:

<script>
	let quantity = $state(1)
	let price = $state(9.99)
	let discount = $state(0)

	let total = $derived((quantity * price * (1 - discount / 100)).toFixed(2))
</script>

<div class="calculator">
	<label>
		Quantity:
		<input type="number" bind:value={quantity} min="1" />
	</label>

	<label>
		Price per item: $
		<input type="number" bind:value={price} min="0" step="0.01" />
	</label>

	<label>
		Discount: {discount}%
		<input type="range" bind:value={discount} min="0" max="50" />
	</label>

	<p class="total">Total: ${total}</p>
</div>

Por qué importa la coerción automática: En HTML, todos los valores de formulario son cadenas. Sin coerción, tendrías que llamar manualmente a parseFloat() o parseInt() en cada valor. Svelte maneja esto por ti, de modo que quantity y price son números reales, no cadenas.

Caso extremo — entradas vacías o inválidas: Si una entrada numérica está vacía o contiene caracteres inválidos, el valor enlazado se convierte en undefined (no en NaN ni en "" como en algunos frameworks). Ten esto en cuenta:

<script>
	let age = $state(undefined)

	let isValid = $derived(age !== undefined && age > 0 && age < 150)
</script>

<input type="number" bind:value={age} placeholder="Your age" />

{#if age === undefined}
	<p class="hint">Please enter your age</p>
{:else if !isValid}
	<p class="error">Please enter a valid age (1-150)</p>
{:else}
	<p class="success">Age: {age}</p>
{/if}

¿Por qué undefined y no NaN? Svelte trata las entradas numéricas vacías o inválidas como "ningún valor proporcionado" en lugar de "un error de análisis numérico." Esto hace más fácil distinguir entre "el usuario todavía no ha ingresado nada" y "el usuario ingresó algo y es cero."

Valores Predeterminados y Reinicio de Formulario

Desde Svelte 5.6, las entradas pueden tener un atributo defaultValue. Cuando la entrada forma parte de un formulario y este se reinicia, la entrada vuelve a este valor predeterminado en lugar de quedar vacía:

<script>
	let name = $state('') // Starts empty
	let email = $state('user@example.com') // Starts with value
</script>

<form>
	<label>
		Name:
		<input bind:value={name} defaultValue="Guest" />
	</label>

	<label>
		Email:
		<input bind:value={email} defaultValue="user@example.com" />
	</label>

	<button type="reset">Reset Form</button>
</form>

<p>Name: {name || '(empty)'}</p>
<p>Email: {email}</p>

Cómo funciona: Cuando haces clic en "Reset", se dispara el mecanismo de reinicio de formulario integrado del navegador. Svelte intercepta esto y establece los valores enlazados a su defaultValue en lugar de borrarlos. Esto es especialmente útil para formularios que deben revertir a un "estado conocido válido" en lugar de quedar completamente en blanco.

Prioridad en el renderizado inicial: En el primer renderizado, el valor del binding tiene prioridad sobre defaultValue a menos que el binding sea null o undefined. Esto significa:

<script>
	let value1 = $state('initial') // Shows "initial"
	let value2 = $state(null) // Shows "default"
</script>

<input bind:value={value1} defaultValue="default" />
<input bind:value={value2} defaultValue="default" />

Bindings de Casilla de Verificación

Casilla de Verificación Individual: `bind:checked`

Para una casilla de verificación individual, enlaza a un booleano:

<script>
	let accepted = $state(false)
	let newsletter = $state(false)
	let notifications = $state(true)

	let canSubmit = $derived(accepted) // Terms must be accepted
</script>

<form>
	<label>
		<input type="checkbox" bind:checked={accepted} />
		I accept the terms and conditions (required)
	</label>

	<label>
		<input type="checkbox" bind:checked={newsletter} />
		Subscribe to newsletter (optional)
	</label>

	<label>
		<input type="checkbox" bind:checked={notifications} />
		Enable push notifications (optional)
	</label>

	<button type="submit" disabled={!canSubmit}>Submit</button>
</form>

<div class="status">
	<p>Terms accepted: {accepted ? '✓' : '✗'}</p>
	<p>Newsletter: {newsletter ? '✓' : '✗'}</p>
	<p>Notifications: {notifications ? '✓' : '✗'}</p>
</div>

¿Por qué bind:checked y no bind:value? Para las casillas de verificación, la propiedad significativa es checked (un booleano), no value (que típicamente es una cadena estática como "on"). Svelte enlaza a lo que importa.

Reinicio de formulario con defaultChecked: Similar a defaultValue, las casillas de verificación pueden tener un atributo defaultChecked:

<script>
	let enabled = $state(true)
</script>

<form>
	<label>
		<input type="checkbox" bind:checked={enabled} defaultChecked={true} />
		Feature enabled
	</label>

	<button type="reset">Reset to default (checked)</button>
</form>

Cuando el formulario se reinicia, enabled se convierte en true (el valor predeterminado), no en false.

Estado Indeterminado: `bind:indeterminate`

Las casillas de verificación pueden estar en un estado indeterminado — visualmente distinto de marcado o desmarcado. Esto es útil para casillas de verificación de "seleccionar todo" que controlan un grupo:

<script>
	let items = $state([
		{ id: 1, name: 'Item 1', selected: true },
		{ id: 2, name: 'Item 2', selected: false },
		{ id: 3, name: 'Item 3', selected: true }
	])

	let allSelected = $derived(items.every((item) => item.selected))
	let noneSelected = $derived(items.every((item) => !item.selected))
	let someSelected = $derived(!allSelected && !noneSelected)

	function toggleAll() {
		const newState = !allSelected
		items = items.map((item) => ({ ...item, selected: newState }))
	}
</script>

<label>
	<input type="checkbox" checked={allSelected} indeterminate={someSelected} onclick={toggleAll} />
	Select All
</label>

<hr />

{#each items as item}
	<label>
		<input
			type="checkbox"
			checked={item.selected}
			onchange={(e) => {
				items = items.map((i) => (i.id === item.id ? { ...i, selected: e.target.checked } : i))
			}}
		/>
		{item.name}
	</label>
{/each}

<p>Selected: {items.filter((i) => i.selected).length} of {items.length}</p>

Por qué importa el estado indeterminado: Cuando tienes un checkbox padre que controla checkboxes hijos, el padre debería mostrar tres estados:

Marcado: Todos los hijos están seleccionados
Desmarcado: Ningún hijo está seleccionado
Indeterminado: Algunos pero no todos los hijos están seleccionados

Esto le da a los usuarios una retroalimentación visual clara sobre el estado de selección sin ambigüedad.

Nota técnica: El estado indeterminado es puramente visual—no afecta la propiedad checked. Un checkbox puede ser checked={true} e indeterminate={true} simultáneamente. El estilo indeterminado (usualmente un guión) anula visualmente la marca de verificación.

Grupos de Checkboxes: `bind:group`

Cuando múltiples checkboxes deben poblar el mismo array, usa bind:group:

<script>
	let selectedFeatures = $state([])

	let features = [
		{ id: 'wifi', label: 'WiFi', price: 0 },
		{ id: 'bluetooth', label: 'Bluetooth', price: 5 },
		{ id: 'gps', label: 'GPS', price: 10 },
		{ id: '4g', label: '4G LTE', price: 15 }
	]

	let totalPrice = $derived(
		selectedFeatures.reduce((sum, id) => {
			const feature = features.find((f) => f.id === id)
			return sum + (feature?.price || 0)
		}, 0)
	)
</script>

<fieldset>
	<legend>Select Features</legend>

	{#each features as feature}
		<label>
			<input type="checkbox" bind:group={selectedFeatures} value={feature.id} />
			{feature.label}
			{#if feature.price > 0}
				(+${feature.price})
			{/if}
		</label>
	{/each}
</fieldset>

<p>Selected: {selectedFeatures.join(', ') || 'None'}</p>
<p>Additional cost: ${totalPrice}</p>

Cómo funciona bind:group: Todos los checkboxes con bind:group={array} comparten el mismo array. Cuando se marca un checkbox, su atributo value se agrega al array. Cuando se desmarca, se elimina. Svelte maneja la manipulación del array por ti.

¿Por qué no usar booleanos individuales? Podrías crear un booleano separado para cada checkbox, pero entonces tendrías que rastrear manualmente cuáles están marcados y construir el array tú mismo. bind:group elimina ese trabajo contable.

Importante: Todos los checkboxes de un grupo deben estar en el mismo componente de Svelte. Los grupos no funcionan entre límites de componentes (aunque puedes pasar el array como prop a componentes hijos).

Grupos de Botones de Radio

Los botones de radio son mutuamente excluyentes—solo uno puede estar seleccionado a la vez. Usa bind:group con la misma variable para todos los radios del grupo:

<script>
	let shippingMethod = $state('standard')

	let shippingOptions = [
		{ id: 'standard', label: 'Standard (5-7 days)', price: 5.99 },
		{ id: 'express', label: 'Express (2-3 days)', price: 12.99 },
		{ id: 'overnight', label: 'Overnight', price: 24.99 }
	]

	let shippingCost = $derived.by(() => {
		const option = shippingOptions.find((o) => o.id === shippingMethod)
		return option?.price || 0
	})
</script>

<fieldset>
	<legend>Shipping Method</legend>

	{#each shippingOptions as option}
		<label>
			<input type="radio" bind:group={shippingMethod} value={option.id} />
			{option.label} - ${option.price.toFixed(2)}
		</label>
	{/each}
</fieldset>

<p>Selected: {shippingMethod}</p>
<p>Shipping cost: ${shippingCost.toFixed(2)}</p>

¿Por qué bind:group para radios? A diferencia de los checkboxes (donde bind:group puebla un array), los botones de radio con bind:group establecen la variable al value del radio seleccionado. Cuando seleccionas un radio diferente, la variable se actualiza al valor de ese radio.

Modelo mental: Piensa en los botones de radio como un control de "elige una de estas opciones". La variable del grupo contiene el valor de la opción actualmente seleccionada. Cuando el usuario hace clic en un radio diferente, Svelte actualiza la variable. Cuando cambias la variable programáticamente, Svelte marca el radio correspondiente.

Selección predeterminada: Si ningún radio está marcado inicialmente, el valor inicial de la variable determina cuál radio está seleccionado:

<script>
	let method = $state('express') // 'Express' radio will be checked on load
</script>

Si el valor de la variable no coincide con el value de ningún radio, ningún radio estará marcado inicialmente (aunque los usuarios pueden seleccionar uno después).

Listas Desplegables de Selección

Selección Simple: `bind:value`

El enlace de un elemento <select> corresponde a la propiedad value de la <option> seleccionada:

<script>
	let selectedCountry = $state('us')

	let countries = [
		{ code: 'us', name: 'United States' },
		{ code: 'ca', name: 'Canada' },
		{ code: 'uk', name: 'United Kingdom' },
		{ code: 'au', name: 'Australia' },
		{ code: 'de', name: 'Germany' }
	]
</script>

<label>
	Country:
	<select bind:value={selectedCountry}>
		{#each countries as country}
			<option value={country.code}>
				{country.name}
			</option>
		{/each}
	</select>
</label>

<p>You selected: {selectedCountry}</p>

Los valores de las opciones pueden ser de cualquier tipo: A diferencia del HTML plano (donde los valores siempre son cadenas), Svelte te permite usar objetos o números como valores de opciones:

<script>
	let selectedUser = $state(null)

	let users = [
		{ id: 1, name: 'Alice', role: 'Admin' },
		{ id: 2, name: 'Bob', role: 'Editor' },
		{ id: 3, name: 'Charlie', role: 'Viewer' }
	]
</script>

<select bind:value={selectedUser}>
	<option value={null}>-- Select a user --</option>
	{#each users as user}
		<option value={user}>
			{user.name} ({user.role})
		</option>
	{/each}
</select>

{#if selectedUser}
	<p>Selected: {selectedUser.name}, role: {selectedUser.role}</p>
{/if}

Cuando el usuario selecciona una opción, selectedUser se convierte en el objeto de usuario completo, no solo una cadena. Esto elimina la necesidad de búsquedas.

Selección predeterminada con el atributo selected: Puedes marcar una opción como seleccionada inicialmente usando el atributo selected:

<select bind:value={color}>
	<option value="red">Red</option>
	<option value="green" selected>Green</option>
	<option value="blue">Blue</option>
</select>

Cuando se reinicia un formulario que contiene este select, volverá a "Green" (la opción marcada), no a la primera opción.

Prioridad en el renderizado inicial: Al igual que con los inputs, el valor del enlace tiene precedencia sobre el atributo selected a menos que el enlace sea undefined.

Selección Múltiple: `bind:value` con Array

Un elemento <select multiple> se comporta como un grupo de checkboxes—la variable enlazada es un array:

<script>
	let selectedTags = $state(['javascript', 'svelte'])

	let availableTags = [
		'javascript',
		'typescript',
		'svelte',
		'react',
		'vue',
		'angular',
		'node',
		'deno'
	]
</script>

<label>
	Select tags (hold Ctrl/Cmd to select multiple):
	<select bind:value={selectedTags} multiple size="8">
		{#each availableTags as tag}
			<option value={tag}>{tag}</option>
		{/each}
	</select>
</label>

<p>Selected: {selectedTags.join(', ') || 'None'}</p>

Cómo funciona: Cuando se selecciona una opción, su valor se agrega al array. Cuando se deselecciona, se elimina. Svelte mantiene el array sincronizado con las selecciones del usuario.

Nota de usabilidad: Las listas desplegables de selección múltiple son notoriamente difíciles de usar. Considera usar checkboxes o componentes de selección múltiple personalizados para una mejor experiencia de usuario.

Inputs de Archivo: `bind:files`

Los inputs de archivo usan bind:files para acceder al FileList de archivos seleccionados:

<script>
	let files = $state()
	let previewUrls = $state([])

	$effect(() => {
		if (files && files.length > 0) {
			previewUrls = Array.from(files).map((file) => URL.createObjectURL(file))
		} else {
			previewUrls = []
		}

		// Cleanup URLs when files change
		return () => {
			previewUrls.forEach((url) => URL.revokeObjectURL(url))
		}
	})

	function clearFiles() {
		// To clear files, you must create a new FileList via DataTransfer
		files = new DataTransfer().files
	}
</script>

<label for="images">Upload images:</label>
<input id="images" type="file" bind:files accept="image/*" multiple />

<button onclick={clearFiles}>Clear</button>

{#if files && files.length > 0}
	<p>Selected {files.length} file(s):</p>
	<ul>
		{#each Array.from(files) as file}
			<li>{file.name} ({(file.size / 1024).toFixed(2)} KB)</li>
		{/each}
	</ul>

	<div class="previews">
		{#each previewUrls as url}
			<img src={url} alt="Preview" style="max-width: 200px; margin: 8px;" />
		{/each}
	</div>
{/if}

Por qué bind:files es especial: A diferencia de otros enlaces, los inputs de archivo requieren un objeto FileList, que no puede construirse directamente. Para establecer archivos programáticamente, debes crear un objeto DataTransfer y obtener su propiedad files.

Por qué los archivos comienzan como undefined: En entornos de renderizado del lado del servidor, DataTransfer puede no estar disponible. Dejar files sin inicializar previene errores durante el SSR.

Modificar la lista de archivos: FileList es inmutable—no puedes eliminar archivos individuales directamente. Para eliminar un archivo, crea un nuevo DataTransfer, agrega los archivos que quieres conservar y asigna el nuevo FileList:

<script>
	function removeFile(indexToRemove) {
		const dt = new DataTransfer()
		Array.from(files).forEach((file, index) => {
			if (index !== indexToRemove) {
				dt.items.add(file)
			}
		})
		files = dt.files
	}
</script>

Enlaces de Elementos Multimedia

Los elementos multimedia (<audio> y <video>) tienen varias propiedades enlazables. Entender cuáles son bidireccionales y cuáles son de solo lectura es fundamental.

Enlaces Multimedia Bidireccionales

Estas propiedades pueden tanto leerse como establecerse:

<script>
	let currentTime = $state(0)
	let playbackRate = $state(1)
	let paused = $state(true)
	let volume = $state(1)
	let muted = $state(false)
</script>

<video
	src="/sample-video.mp4"
	bind:currentTime
	bind:playbackRate
	bind:paused
	bind:volume
	bind:muted
	controls
></video>

<div class="controls">
	<button onclick={() => (paused = !paused)}>
		{paused ? '▶️ Play' : '⏸️ Pause'}
	</button>

	<button onclick={() => (currentTime = 0)}>⏮️ Restart</button>

	<label>
		Volume: {Math.round(volume * 100)}%
		<input type="range" bind:value={volume} min="0" max="1" step="0.01" />
	</label>

	<label>
		<input type="checkbox" bind:checked={muted} />
		Muted
	</label>

	<label>
		Speed:
		<select bind:value={playbackRate}>
			<option value={0.5}>0.5x</option>
			<option value={1}>1x (Normal)</option>
			<option value={1.25}>1.25x</option>
			<option value={1.5}>1.5x</option>
			<option value={2}>2x</option>
		</select>
	</label>
</div>

Por qué estos son bidireccionales:

currentTime: Puedes buscar un tiempo específico estableciendo este valor
playbackRate: Puedes acelerar o ralentizar la reproducción programáticamente
paused: Establecer paused = false reproduce el video; paused = true lo pausa
volume: Puedes ajustar el volumen programáticamente (0 a 1)
muted: Puedes silenciar/activar el sonido programáticamente

Estos enlaces te permiten construir controles multimedia personalizados que están completamente sincronizados con el estado del elemento multimedia.

Enlaces Multimedia de Solo Lectura

Estas propiedades reflejan el estado del multimedia pero no pueden establecerse:

<script>
	let duration = $state(0)
	let buffered = $state(null)
	let seekable = $state(null)
	let seeking = $state(false)
	let ended = $state(false)
	let readyState = $state(0)
	let played = $state(null)

	let progress = $derived(duration > 0 ? (currentTime / duration) * 100 : 0)
</script>

<audio
	src="/podcast.mp3"
	bind:duration
	bind:buffered
	bind:seekable
	bind:seeking
	bind:ended
	bind:readyState
	bind:played
	controls
></audio>

<div class="info">
	<p>Duration: {Math.floor(duration)}s</p>
	<p>Progress: {progress.toFixed(1)}%</p>
	<p>Ready state: {readyState} (0-4)</p>
	<p>Seeking: {seeking ? 'Yes' : 'No'}</p>
	<p>Ended: {ended ? 'Yes' : 'No'}</p>
</div>

Por qué estos son de solo lectura:

duration: La duración del multimedia está determinada por el archivo en sí
buffered: El almacenamiento en búfer lo maneja el navegador, no tu código
seekable: Qué rangos son buscables depende del formato del multimedia
seeking: Esto refleja si una operación de búsqueda está en progreso
ended: Es verdadero cuando la reproducción ha llegado al final
readyState: Rastrea el estado de carga (0 = nada, 4 = suficiente cargado)
played: TimeRanges que representan qué partes se han reproducido

Estos enlaces son útiles para mostrar información o reaccionar a cambios de estado (mediante $effect), pero no puedes cambiar el multimedia estableciéndolos.

Enlaces Específicos de Video

Los elementos de video tienen dos enlaces de solo lectura adicionales para las dimensiones:

<script>
	let videoWidth = $state(0)
	let videoHeight = $state(0)
</script>

<video src="/movie.mp4" bind:videoWidth bind:videoHeight controls></video>

<p>Video dimensions: {videoWidth} × {videoHeight}</p>

¿Por qué de solo lectura? Las dimensiones intrínsecas del video provienen del propio archivo de video. Puedes estilizar el elemento <video> con CSS para que se muestre en cualquier tamaño, pero la resolución real del video es fija.

Enlaces de Elementos de Imagen

Las imágenes tienen enlaces de solo lectura similares para sus dimensiones naturales (intrínsecas):

<script>
	let naturalWidth = $state(0)
	let naturalHeight = $state(0)
</script>

<img src="/photo.jpg" bind:naturalWidth bind:naturalHeight alt="Sample" style="max-width: 400px;" />

<p>Original image size: {naturalWidth} × {naturalHeight}</p>
<p>Display size: {naturalWidth > 400 ? '400px (scaled)' : naturalWidth + 'px'}</p>

Caso de uso: Estos enlaces son útiles para el manejo de imágenes responsivas, el cálculo de relaciones de aspecto o la validación de dimensiones de imagen antes de subirlas.

Elemento Details: `bind:open`

El elemento <details> tiene un enlace bidireccional open:

<script>
	let detailsOpen = $state(false)
	let faqOpen = $state(false)
</script>

<details bind:open={detailsOpen}>
	<summary>What is Svelte?</summary>
	<p>Svelte is a radical new approach to building user interfaces...</p>
</details>

<details bind:open={faqOpen}>
	<summary>How does binding work?</summary>
	<p>Bindings create a two-way connection between state and DOM properties...</p>
</details>

<button onclick={() => (detailsOpen = !detailsOpen)}>
	{detailsOpen ? 'Collapse' : 'Expand'} first section
</button>

<button
	onclick={() => {
		detailsOpen = true
		faqOpen = true
	}}
>
	Expand all
</button>

<button
	onclick={() => {
		detailsOpen = false
		faqOpen = false
	}}
>
	Collapse all
</button>

Por qué es útil: Puedes controlar mediante programación los widgets de revelación, crear funcionalidad de "expandir todo", o persistir el estado abierto/cerrado en localStorage.

Bindings de Contenteditable

Los elementos con contenteditable="true" pueden enlazarse a tres propiedades de texto diferentes:

<script>
	let htmlContent = $state('<p><strong>Bold</strong> and <em>italic</em> text</p>')
	let innerTextContent = $state('Plain text only')
	let textContentValue = $state('Raw text content')
</script>

<div class="editor-section">
	<h3>innerHTML (preserves HTML tags)</h3>
	<div contenteditable="true" bind:innerHTML={htmlContent} class="editor"></div>
	<pre>{htmlContent}</pre>
</div>

<div class="editor-section">
	<h3>innerText (respects text rendering)</h3>
	<div contenteditable="true" bind:innerText={innerTextContent} class="editor"></div>
	<pre>{innerTextContent}</pre>
</div>

<div class="editor-section">
	<h3>textContent (raw text nodes)</h3>
	<div contenteditable="true" bind:textContent={textContentValue} class="editor"></div>
	<pre>{textContentValue}</pre>
</div>

<style>
	.editor {
		border: 1px solid #ccc;
		padding: 12px;
		min-height: 100px;
		border-radius: 4px;
		margin-bottom: 8px;
	}

	.editor:focus {
		outline: 2px solid #0066cc;
	}
</style>

Diferencias explicadas:

innerHTML: Incluye todas las etiquetas HTML. Útil para editores de texto enriquecido pero peligroso con entrada de usuario (riesgo de XSS)
innerText: Respeta el estilo CSS y la visibilidad. El texto oculto se excluye, <br> se convierte en salto de línea
textContent: Contenido de texto sin procesar de todos los nodos. Incluye texto oculto, ignora el estilo

Advertencia de seguridad: Usar bind:innerHTML con contenido generado por el usuario te expone a ataques XSS. Siempre sanitiza el HTML antes de renderizarlo:

<script>
	import DOMPurify from 'dompurify'

	let userHtml = $state('')
	let sanitizedHtml = $derived(DOMPurify.sanitize(userHtml))
</script>

<div contenteditable bind:innerHTML={userHtml}></div><div>{@html sanitizedHtml}</div>

Bindings de Dimensiones (Solo Lectura)

Todos los elementos visibles pueden enlazarse a sus dimensiones usando un ResizeObserver. Estos bindings son de solo lectura—no puedes redimensionar un elemento estableciendo estos valores:

<script>
	let clientWidth = $state(0)
	let clientHeight = $state(0)
	let offsetWidth = $state(0)
	let offsetHeight = $state(0)
	let contentRect = $state(null)

	let area = $derived(clientWidth * clientHeight)
</script>

<div
	class="measured-box"
	bind:clientWidth
	bind:clientHeight
	bind:offsetWidth
	bind:offsetHeight
	bind:contentRect
>
	<p>Resize your browser window to see measurements update</p>
	<p>clientWidth: {clientWidth}px (content + padding)</p>
	<p>clientHeight: {clientHeight}px</p>
	<p>offsetWidth: {offsetWidth}px (content + padding + border + scrollbar)</p>
	<p>offsetHeight: {offsetHeight}px</p>
	<p>Area: {area.toLocaleString()}px²</p>
</div>

<style>
	.measured-box {
		border: 5px solid #333;
		padding: 20px;
		margin: 20px;
		background: #f0f0f0;
		resize: both;
		overflow: auto;
		min-width: 200px;
		min-height: 150px;
	}
</style>

Entendiendo las dimensiones:

clientWidth/Height: Área de contenido + relleno (excluye borde y barra de desplazamiento)
offsetWidth/Height: Área de contenido + relleno + borde + barra de desplazamiento
contentRect: Un DOMRectReadOnly con mediciones más detalladas
contentBoxSize: Arreglo de objetos ResizeObserverSize
borderBoxSize: Similar, pero incluye el borde
devicePixelContentBoxSize: Dimensiones en píxeles físicos (útil para pantallas de alta densidad)

¿Por qué solo lectura? Estos bindings observan el tamaño del elemento según lo determina el diseño, el CSS y el contenido. No puedes forzar a un elemento a tener un tamaño específico estableciendo estos valores—debes usar CSS o el atributo style.

Casos de uso:

Dimensionamiento responsivo de canvas
Dimensiones dinámicas de gráficos
Renderizado condicional basado en el tamaño del contenedor
Medir texto o contenido antes de tomar decisiones de diseño

Nota de rendimiento: Los bindings de dimensiones usan ResizeObserver, que es muy eficiente. Sin embargo, evita enlazar dimensiones en cientos de elementos simultáneamente—considera usar una lista virtualizada o medir un contenedor en su lugar.

Advertencia importante: Los elementos display: inline no tienen ancho/alto (excepto los elementos con tamaño intrínseco como <img> y <canvas>). Cambia el display del elemento a inline-block o block para medirlo.

Referencias a Elementos: bind:this

La directiva bind:this captura una referencia a un elemento del DOM o a una instancia de componente:

<script>
	let inputRef = $state(null)
	let canvasRef = $state(null)

	function focusInput() {
		inputRef?.focus()
	}

	$effect(() => {
		if (canvasRef) {
			const ctx = canvasRef.getContext('2d')
			ctx.fillStyle = '#ff0000'
			ctx.fillRect(10, 10, 100, 100)
		}
	})
</script>

<input bind:this={inputRef} placeholder="Click button to focus me" />
<button onclick={focusInput}>Focus Input</button>

<canvas bind:this={canvasRef} width="200" height="200"></canvas>

Cuándo usar bind:this:

Llamar a APIs imperativas del DOM (focus, play, pause, select)
Medir elementos que no tienen dimensiones enlazables
Integrar bibliotecas de terceros que necesitan una referencia al DOM
Acceder a elementos de formulario para validación

Tiempo de ciclo de vida: La referencia es undefined hasta que el elemento es montado. Usa siempre encadenamiento opcional (?.) o verifica su existencia:

<script>
	let videoRef = $state(null)

	function playVideo() {
		if (videoRef) {
			videoRef.play()
		}
	}

	// AVOID: This runs during initialization, before mount
	// videoRef.play() // Error: videoRef is undefined

	// PREFERRED: Use $effect or event handlers
	$effect(() => {
		videoRef?.play()
	})
</script>

Referencias a Instancias de Componentes

También puedes enlazarte a instancias de componentes para llamar a sus funciones exportadas. Si bien Svelte 5 fomenta los patrones declarativos, las APIs imperativas siguen siendo útiles para ciertos escenarios como modales y animaciones.

Enfoque Imperativo (usando `bind:this`):

<!-- Modal.svelte -->
<script>
	let { children } = $props()
	let isOpen = $state(false)

	// Functions accessible via bind:this
	function open() {
		isOpen = true
	}

	function close() {
		isOpen = false
	}

	function toggle() {
		isOpen = !isOpen
	}

	// Export functions so parent can call them via bind:this
	export { open, close, toggle }
</script>

{#if isOpen}
	<div class="modal-backdrop" onclick={close}>
		<div class="modal-content" onclick={(e) => e.stopPropagation()}>
			{@render children()}
			<button onclick={close}>Close</button>
		</div>
	</div>
{/if}

<!-- Parent.svelte -->
<script>
	import Modal from './Modal.svelte'

	let modalRef = $state(null)
</script>

<button onclick={() => modalRef?.open()}>Open Modal</button>
<button onclick={() => modalRef?.toggle()}>Toggle Modal</button>

<Modal bind:this={modalRef}>
	<h2>Modal Content</h2>
	<p>This modal was opened programmatically!</p>
</Modal>

Si bien esto funciona, mezcla el control imperativo con el renderizado declarativo, lo que puede generar código más difícil de mantener. En Svelte 5, prefiere usar props $bindable para mayor claridad y facilidad de prueba.

Enfoque Declarativo (preferido en Svelte 5):

<!-- Modal.svelte -->
<script>
	let { open = $bindable(false), children } = $props()

	function close() {
		open = false
	}
</script>

{#if open}
	<div class="modal-backdrop" onclick={close}>
		<div class="modal-content" onclick={(e) => e.stopPropagation()}>
			{@render children()}
			<button onclick={close}>Close</button>
		</div>
	</div>
{/if}

<!-- Parent.svelte -->
<script>
	import Modal from './Modal.svelte'

	let isModalOpen = $state(false)
</script>

<button onclick={() => (isModalOpen = true)}>Open Modal</button>
<button onclick={() => (isModalOpen = !isModalOpen)}>Toggle Modal</button>

<Modal bind:open={isModalOpen}>
	<h2>Modal Content</h2>
	<p>This modal is controlled declaratively!</p>
</Modal>

Con el uso de la directiva $bindable para la prop open, el componente padre gestiona el estado de apertura del modal de forma reactiva. Esto conduce a un flujo de datos más claro y facilita las pruebas.

¿Cuándo usar cada enfoque?

Cada enfoque tiene sus méritos, y entender las compensaciones te ayuda a elegir el patrón correcto para tu caso de uso. La decisión generalmente recae en el flujo de control: ¿quién debe ser dueño del estado, y qué tan complejo es el comportamiento del componente?

Usa el imperativo (bind:this):

Animaciones o transiciones complejas - Cuando necesitas un control preciso sobre el tiempo de las animaciones, la secuenciación o la coordinación entre múltiples elementos. Por ejemplo, un carrusel que necesita pausar, reanudar o saltar a diapositivas específicas mediante programación.
Integración de bibliotecas de terceros - Al envolver componentes de bibliotecas que exponen APIs imperativas (como bibliotecas de gráficos con métodos .update() o .destroy()).
Múltiples acciones no relacionadas - Cuando un componente expone varias operaciones independientes que no se corresponden con un único valor de estado. Por ejemplo, un reproductor de video con play(), pause(), seek(), setPlaybackRate() y captureFrame().
Prueba de internos de componentes - Cuando necesitas acceder al estado interno o desencadenar comportamientos específicos durante las pruebas unitarias, aunque esto debe usarse con moderación.
Componentes heredados o de terceros - Cuando trabajas con componentes existentes que fueron diseñados con APIs imperativas y refactorizarlos no es práctico.

Usa el declarativo (props $bindable):

Gestión de estado simple - Cuando el comportamiento del componente se corresponde claramente con un booleano o valor simple (abierto/cerrado, visible/oculto, valor seleccionado).
Estado controlado por el padre - Cuando el componente padre necesita ser la fuente de verdad del estado, facilitando la coordinación con otras partes de tu aplicación.
Flujo de datos predecible - Cuando quieres cambios de estado explícitos y rastreables que sean más fáciles de depurar y comprender. Cada cambio de estado fluye a través del sistema reactivo del padre.
Mejor capacidad de prueba - Cuando quieres probar el componente simplemente pasando diferentes valores de props en lugar de llamar a métodos y verificar efectos secundarios.
Filosofía de Svelte 5 - El enfoque declarativo se alinea con el movimiento de Svelte 5 hacia patrones más reactivos y menos imperativos. Es más fácil de entender y mantener con el tiempo.

Enfoque híbrido

Para componentes complejos, puedes combinar ambos patrones:

<!-- VideoPlayer.svelte -->
<script>
	let { playing = $bindable(false), volume = $bindable(0.8), currentTime = $bindable(0) } = $props()

	let videoElement = $state(null)

	// Imperative methods for complex operations
	function captureFrame() {
		const canvas = document.createElement('canvas')
		const ctx = canvas.getContext('2d')
		canvas.width = videoElement.videoWidth
		canvas.height = videoElement.videoHeight
		ctx.drawImage(videoElement, 0, 0)
		return canvas.toDataURL('image/png')
	}

	function skipToChapter(chapterIndex) {
		currentTime = chapters[chapterIndex].startTime
	}

	export { captureFrame, skipToChapter }
</script>

<video bind:this={videoElement} bind:paused={!playing} bind:volume bind:currentTime />

Mejor práctica: Comienza con el enfoque declarativo usando props $bindable. Solo agrega métodos imperativos mediante bind:this cuando encuentres operaciones que genuinamente no se correspondan con estado reactivo. La mayoría de los componentes de modal, desplegable y alternancia deberían ser completamente declarativos.

Bindings de Props de Componentes con `$bindable`

Svelte 5 introduce la runa $bindable para el enlace bidireccional entre componentes padre e hijo.

Hacer Props Enlazables

En el componente hijo, marca las props como $bindable:

<!-- Counter.svelte -->
<script>
	let { count = $bindable(0), step = 1 } = $props()
</script>

<div class="counter">
	<button onclick={() => (count -= step)}>−</button>
	<span>{count}</span>
	<button onclick={() => (count += step)}>+</button>
</div>

En el padre, usa bind: para establecer el enlace bidireccional:

<!-- Parent.svelte -->
<script>
	import Counter from './Counter.svelte'

	let value = $state(10)
</script>

<Counter bind:count={value} step={5} />

<p>Value in parent: {value}</p>

<button onclick={() => (value = 0)}>Reset from parent</button>

Cómo funciona: Cuando el componente hijo actualiza count, el value del padre se actualiza automáticamente. Cuando el padre actualiza value, la visualización del hijo se actualiza. Este es un verdadero enlace bidireccional a través de los límites del componente.

Valores de respaldo: Las props enlazables pueden tener valores predeterminados:

<script>
	let { count = $bindable(0) } = $props()
</script>

El valor de respaldo (0) se aplica cuando el padre no enlaza la prop. Si el padre enlaza la prop pero pasa undefined, obtendrás un error en tiempo de ejecución:

<!-- AVOID: This throws an error -->
<Counter bind:count={undefinedValue} />

<!-- PREFERRED: This works -->
<Counter bind:count={zeroValue} />
<Counter />
<!-- Uses fallback: 0 -->

¿Por qué el error? Svelte aplica que si optas por el binding, debes proporcionar un valor definido. Esto evita situaciones confusas donde el valor de respaldo entra en conflicto con un binding indefinido.

Múltiples Props Enlazables

Los componentes pueden tener múltiples props $bindable:

<!-- RangeSlider.svelte -->
<script>
	let { min = $bindable(0), max = $bindable(100), step = 1 } = $props()

	// Ensure min < max
	$effect(() => {
		if (min > max) {
			max = min
		}
	})
</script>

<div class="range-slider">
	<label>
		Min: {min}
		<input type="range" bind:value={min} min="0" max="100" {step} />
	</label>

	<label>
		Max: {max}
		<input type="range" bind:value={max} {min} max="100" {step} />
	</label>
</div>

Uso:

<script>
	import RangeSlider from './RangeSlider.svelte'

	let minPrice = $state(20)
	let maxPrice = $state(80)
</script>

<RangeSlider bind:min={minPrice} bind:max={maxPrice} step={5} />

<p>Price range: ${minPrice} - ${maxPrice}</p>

Componentes de Input Personalizados

Construye componentes de formulario reutilizables con validación y estilos:

<!-- TextField.svelte -->
<script>
	let {
		value = $bindable(''),
		label,
		type = 'text',
		placeholder = '',
		error = '',
		required = false
	} = $props()

	let touched = $state(false)
	let showError = $derived(touched && error)
</script>

<div class="text-field">
	<label>
		{label}
		{#if required}<span class="required">*</span>{/if}
		<input
			{type}
			bind:value
			{placeholder}
			class:error={showError}
			onblur={() => (touched = true)}
		/>
	</label>
	{#if showError}
		<p class="error-message">{error}</p>
	{/if}
</div>

<style>
	.text-field {
		margin-bottom: 16px;
	}

	label {
		display: block;
		font-weight: 500;
		margin-bottom: 4px;
	}

	.required {
		color: #dc2626;
	}

	input {
		width: 100%;
		padding: 8px 12px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 16px;
	}

	input:focus {
		outline: none;
		border-color: #0066cc;
	}

	input.error {
		border-color: #dc2626;
	}

	.error-message {
		color: #dc2626;
		font-size: 14px;
		margin: 4px 0 0;
	}
</style>

Uso con validación:

<script>
	import TextField from './TextField.svelte'

	let formData = $state({
		email: '',
		password: '',
		confirmPassword: ''
	})

	let errors = $derived.by(() => {
		let errs = {}

		if (formData.email && !/\S+@\S+\.\S+/.test(formData.email)) {
			errs.email = 'Please enter a valid email address'
		}

		if (formData.password && formData.password.length < 8) {
			errs.password = 'Password must be at least 8 characters'
		}

		if (formData.confirmPassword && formData.password !== formData.confirmPassword) {
			errs.confirmPassword = 'Passwords do not match'
		}

		return errs
	})
</script>

<form>
	<TextField
		bind:value={formData.email}
		label="Email"
		type="email"
		placeholder="you@example.com"
		error={errors.email}
		required
	/>

	<TextField
		bind:value={formData.password}
		label="Password"
		type="password"
		error={errors.password}
		required
	/>

	<TextField
		bind:value={formData.confirmPassword}
		label="Confirm Password"
		type="password"
		error={errors.confirmPassword}
		required
	/>

	<button type="submit" disabled={Object.keys(errors).length > 0}> Create Account </button>
</form>

Bindings de Funciones (Avanzado)

Desde Svelte 5.9, puedes usar bindings de funciones con la sintaxis bind:property={get, set}. Esto te permite interceptar y transformar valores:

<script>
	let value = $state('HELLO')
</script>

<!-- Two-way binding with transformation -->
<input bind:value={() => value, (v) => (value = v.toUpperCase())} />

<p>Value (always uppercase): {value}</p>

Cómo funciona: La primera función (getter) devuelve el valor actual para mostrar. La segunda función (setter) recibe el nuevo valor y puede transformarlo antes de asignarlo.

Casos de uso:

Normalización de inputs (recorte de espacios, mayúsculas, formato)
Validación antes de aceptar valores
Bindings computados con efectos secundarios

Para bindings de solo lectura: Usa null como getter:

<script>
	let width = $state(0)

	function handleResize(newWidth) {
		console.log('Width changed to:', newWidth)
		width = newWidth
	}
</script>

<div bind:clientWidth={null, handleResize}>Resizable element</div>

Esto es útil cuando quieres reaccionar a cambios de dimensiones pero no necesitas mostrar el valor directamente.

Problemas Comunes y Soluciones

1: Binding a Valores Derivados

Problema: No puedes hacer binding directamente a valores $derived porque son valores computados de solo lectura.

<script>
	let firstName = $state('John')
	let lastName = $state('Doe')

	let fullName = $derived(`${firstName} ${lastName}`)
</script>

<!-- AVOID: Cannot bind to derived value -->
<input bind:value={fullName} />

Solución 1: Hacer binding a las variables de estado subyacentes:

<input bind:value={firstName} placeholder="First name" />
<input bind:value={lastName} placeholder="Last name" />
<p>Full name: {fullName}</p>

Solución 2: Usar la sintaxis de binding de funciones de Svelte 5.9 para vincular una lectura derivada con un setter explícito:

<script>
	let celsius = $state(0)

	// Derived for display
	let fahrenheit = $derived((celsius * 9) / 5 + 32)
</script>

<label>
	Celsius: <input type="number" bind:value={celsius} />
</label>
<label>
	Fahrenheit:
	<!-- getter returns derived, setter writes back through celsius -->
	<input type="number" bind:value={() => fahrenheit, (f) => (celsius = ((f - 32) * 5) / 9)} />
</label>

2: Inputs Numéricos que se Vuelven `undefined`

Problema: Los inputs numéricos vacíos o inválidos se vuelven undefined, lo que puede romper los cálculos.

<script>
	let quantity = $state(0)
	let price = $state(0)

	// AVOID: If either is undefined, total is NaN
	let total = $derived(quantity * price)
</script>

Solución: Usar el operador de fusión nula o verificaciones explícitas:

<script>
	let quantity = $state(0)
	let price = $state(0)

	let total = $derived((quantity ?? 0) * (price ?? 0))
	// Or: isNaN(quantity) || isNaN(price) ? 0 : quantity * price
</script>

3: Binding a Propiedades de Arrays/Objetos

Problema: La mutación directa no dispara la reactividad en Svelte 5.

<script>
	let items = $state([
		{ id: 1, name: 'Item 1', checked: false },
		{ id: 2, name: 'Item 2', checked: false }
	])
</script>

<!-- AVOID: Direct mutation -->
<input
	type="checkbox"
	checked={items[0].checked}
	onchange={(e) => (items[0].checked = e.target.checked)}
/>

Solución: Crear un nuevo array para disparar la reactividad:

<input
	type="checkbox"
	checked={items[0].checked}
	onchange={(e) => {
		items = items.map((item, i) => (i === 0 ? { ...item, checked: e.target.checked } : item))
	}}
/>

Mejor enfoque: Usar bind:checked con un manejador que actualice el estado correctamente:

{#each items as item, i}
	<label>
		<input
			type="checkbox"
			checked={item.checked}
			onchange={(e) => {
				// $state Proxy tracks property mutations automatically
				items[i].checked = e.target.checked
			}}
		/>
		{item.name}
	</label>
{/each}

4: Binding Sin `$bindable`

Problema: Intentar hacer binding a una prop de componente que no está marcada como $bindable.

<!-- AVOID: Child component without $bindable -->
<script>
	let { value } = $props() // Not bindable!
</script>

<!-- AVOID: Parent tries to bind - THIS FAILS -->
<Child bind:value={parentValue} />

Solución: Marcar la prop como $bindable en el componente hijo:

<!-- PREFERRED: Child component with $bindable -->
<script>
	let { value = $bindable(0) } = $props()
</script>

<!-- PREFERRED: Now this works -->
<Child bind:value={parentValue} />

5: Grupo de Checkboxes vs. Booleanos Individuales

Problema: Usar el mismo booleano para múltiples checkboxes hace que se comporten de manera idéntica.

<script>
	let agreed = $state(false)
</script>

<!-- AVOID: Both checkboxes control the same boolean -->
<label><input type="checkbox" bind:checked={agreed} /> Terms</label>
<label><input type="checkbox" bind:checked={agreed} /> Privacy</label>
<!-- Checking one checks both! -->

Solución: Usar bind:group para arrays o booleanos separados:

<script>
	// Option 1: bind:group with array
	let agreements = $state([])
</script>

<label><input type="checkbox" bind:group={agreements} value="terms" /> Terms</label>
<label><input type="checkbox" bind:group={agreements} value="privacy" /> Privacy</label>

<!-- Option 2: Separate booleans -->
<script>
	let agreedTerms = $state(false)
	let agreedPrivacy = $state(false)
</script>

<label><input type="checkbox" bind:checked={agreedTerms} /> Terms</label>
<label><input type="checkbox" bind:checked={agreedPrivacy} /> Privacy</label>

6: El Select No Muestra el Valor Inicial

Problema: El select desplegable no muestra el valor vinculado en el renderizado inicial.

<script>
	let selectedColor = $state('purple') // No matching option!
</script>

<select bind:value={selectedColor}>
	<option value="red">Red</option>
	<option value="green">Green</option>
	<option value="blue">Blue</option>
</select>
<!-- Shows blank because "purple" doesn't exist -->

Solución: Asegurarse de que el valor inicial coincida con una opción, o proporcionar un placeholder:

<script>
	let selectedColor = $state('red') // Matches first option
</script>

<select bind:value={selectedColor}>
	<option value="">-- Select a color --</option>
	<option value="red">Red</option>
	<option value="green">Green</option>
	<option value="blue">Blue</option>
</select>

Patrones del Mundo Real

1. Input de Búsqueda con Debounce

El Problema: Cuando los usuarios escriben en un campo de búsqueda conectado a una API, hacer una petición en cada pulsación de tecla sobrecarga tu servidor. Un usuario escribiendo "svelte" dispara 6 llamadas a la API—una por cada letra. Esto provoca carga innecesaria en el servidor, ancho de banda desperdiciado y posibles condiciones de carrera.

La Solución: El debounce retrasa la llamada a la API hasta que el usuario hace una pausa al escribir, reduciendo las peticiones de 6 a 1 mientras se mantiene una UX responsiva.

<script>
	let searchQuery = $state('')
	let debouncedQuery = $state('')
	let results = $state([])
	let isSearching = $state(false)
	let debounceTimer

	// Debounce the search query
	$effect(() => {
		clearTimeout(debounceTimer)
		isSearching = true

		debounceTimer = setTimeout(() => {
			debouncedQuery = searchQuery
		}, 300)

		return () => clearTimeout(debounceTimer)
	})

	// Perform search when debounced query changes
	$effect(() => {
		if (debouncedQuery.length < 2) {
			results = []
			isSearching = false
			return
		}

		isSearching = true

		fetch(`/api/search?q=${encodeURIComponent(debouncedQuery)}`)
			.then((r) => r.json())
			.then((data) => {
				results = data
				isSearching = false
			})
			.catch(() => {
				results = []
				isSearching = false
			})
	})
</script>

<div class="search-container">
	<input
		type="search"
		bind:value={searchQuery}
		placeholder="Search products..."
		class="search-input"
	/>

	{#if isSearching}
		<div class="loading">Searching...</div>
	{:else if searchQuery.length > 0}
		{#if results.length > 0}
			<ul class="results-list">
				{#each results as result}
					<li><a href="/product/{result.id}">{result.name}</a></li>
				{/each}
			</ul>
		{:else if searchQuery.length >= 2}
			<div class="no-results">No results found for "{searchQuery}"</div>
		{/if}
	{/if}
</div>

<style>
	.search-container {
		position: relative;
		max-width: 500px;
	}

	.search-input {
		width: 100%;
		padding: 12px;
		font-size: 16px;
		border: 2px solid #ccc;
		border-radius: 8px;
	}

	.results-list {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin-top: 4px;
		background: white;
		border: 1px solid #ccc;
		border-radius: 8px;
		max-height: 300px;
		overflow-y: auto;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		list-style: none;
		padding: 0;
	}

	.results-list li {
		padding: 12px;
		border-bottom: 1px solid #eee;
	}

	.results-list li:hover {
		background: #f5f5f5;
	}

	.loading,
	.no-results {
		padding: 12px;
		text-align: center;
		color: #666;
	}
</style>

Cómo funciona paso a paso:

searchQuery se vincula directamente al input para retroalimentación visual instantánea
$effect observa searchQuery y establece un timeout de 300ms para actualizar debouncedQuery
Si el usuario escribe de nuevo, cancelamos el timeout anterior y comenzamos uno nuevo
La función de limpieza previene pérdidas de memoria al desmontar
Un $effect separado observa debouncedQuery y dispara la llamada a la API
El estado isSearching proporciona retroalimentación de carga

Técnicas clave: bind:value para retroalimentación inmediata, limpieza de $effect para gestión de timers, separación del estado de búsqueda del estado con debounce, validación de longitud mínima de consulta.

Variantes: Retrasos adaptativos basados en la longitud de la consulta, AbortController para cancelación de peticiones, caché de resultados, autocompletado desde búsquedas recientes.

2. Panel de Configuración con Sincronización en localStorage

El Problema: Los usuarios personalizan configuraciones (tema, tamaño de fuente, notificaciones) pero todo se reinicia al actualizar la página, obligándolos a reconfigurar en cada sesión.

La Solución: Persistir en localStorage, cargar al montar, guardar en cada cambio y aplicar la configuración al DOM de inmediato.

<script>
	import { browser } from '$app/environment'

	let settings = $state({
		theme: 'light',
		fontSize: 16,
		notifications: true,
		autoSave: true,
		language: 'en'
	})

	// Load from localStorage on mount
	if (browser) {
		const saved = localStorage.getItem('app-settings')
		if (saved) {
			try {
				settings = { ...settings, ...JSON.parse(saved) }
			} catch (e) {
				console.error('Failed to parse saved settings')
			}
		}
	}

	// Save to localStorage whenever settings change
	$effect(() => {
		if (browser) {
			localStorage.setItem('app-settings', JSON.stringify(settings))

			// Apply theme
			document.documentElement.setAttribute('data-theme', settings.theme)
			document.documentElement.style.fontSize = `${settings.fontSize}px`
		}
	})
</script>

<div class="settings-panel">
	<h2>Settings</h2>

	<div class="setting">
		<label>
			Theme
			<select bind:value={settings.theme}>
				<option value="light">Light</option>
				<option value="dark">Dark</option>
				<option value="auto">Auto</option>
			</select>
		</label>
	</div>

	<div class="setting">
		<label>
			Font Size: {settings.fontSize}px
			<input type="range" bind:value={settings.fontSize} min="12" max="24" />
		</label>
	</div>

	<div class="setting">
		<label>
			<input type="checkbox" bind:checked={settings.notifications} />
			Enable notifications
		</label>
	</div>

	<div class="setting">
		<label>
			<input type="checkbox" bind:checked={settings.autoSave} />
			Auto-save changes
		</label>
	</div>

	<div class="setting">
		<label>
			Language
			<select bind:value={settings.language}>
				<option value="en">English</option>
				<option value="es">Español</option>
				<option value="fr">Français</option>
				<option value="de">Deutsch</option>
			</select>
		</label>
	</div>
</div>

<div class="preview">
	<p>This text respects your font size setting</p>
</div>

<style>
	.settings-panel {
		max-width: 500px;
		padding: 24px;
		background: var(--bg-secondary);
		border-radius: 8px;
	}

	.setting {
		margin-bottom: 20px;
	}

	label {
		display: block;
		font-weight: 500;
	}

	select,
	input[type='range'] {
		width: 100%;
		margin-top: 8px;
	}

	.preview {
		margin-top: 24px;
		padding: 20px;
		background: var(--bg-primary);
		border-radius: 8px;
	}
</style>

Cómo funciona paso a paso:

Inicializar la configuración con valores predeterminados en $state
Cargar desde localStorage al montar, combinar con los valores predeterminados
$effect observa el objeto de configuración y lo guarda en localStorage
El mismo $effect aplica la configuración al DOM (tema, tamaño de fuente)
Verificar el contexto browser para compatibilidad con SSR
Try-catch alrededor del parsing de JSON maneja la corrupción de datos

Técnicas clave: Combinación de bind:value/bind:checked para diferentes entradas, $effect para persistencia dual + aplicación, verificaciones de navegador para SSR, propagación de objetos para fusión de datos parciales.

Consideraciones de producción: Estrategia de migración para nuevas configuraciones, validación contra esquema, monitoreo de cuota de almacenamiento, sincronización entre pestañas mediante el evento storage, cumplimiento del RGPD.

Variaciones: Sincronización con backend para múltiples dispositivos, importación/exportación como JSON, presets de configuración, vista previa en tiempo real, pestañas categorizadas.

3. Formulario Multi-Paso con Validación

El Problema: Los formularios largos abruman a los usuarios. Necesitan indicación de progreso, capacidad de revisar pasos anteriores, retroalimentación de validación y confianza en que sus datos no se perderán.

La Solución: Patrón de asistente con pasos lógicos, validación independiente por paso, progreso visual, navegación hacia adelante solo cuando es válido, navegación hacia atrás sin restricciones.

<script>
	let currentStep = $state(1)
	let formData = $state({
		// Step 1: Personal
		firstName: '',
		lastName: '',
		email: '',
		// Step 2: Address
		street: '',
		city: '',
		zipCode: '',
		country: 'us',
		// Step 3: Preferences
		newsletter: false,
		notifications: true,
		theme: 'light'
	})

	let step1Valid = $derived(
		formData.firstName.length > 0 &&
			formData.lastName.length > 0 &&
			/\S+@\S+\.\S+/.test(formData.email)
	)

	let step2Valid = $derived(
		formData.street.length > 0 && formData.city.length > 0 && /^\d{5}$/.test(formData.zipCode)
	)

	let canProceed = $derived(currentStep === 1 ? step1Valid : currentStep === 2 ? step2Valid : true)

	function nextStep() {
		if (currentStep < 3) currentStep++
	}

	function prevStep() {
		if (currentStep > 1) currentStep--
	}

	function handleSubmit(e) {
		e.preventDefault()
		console.log('Form submitted:', formData)
	}
</script>

<div class="wizard">
	<div class="progress">
		<div class="step" class:active={currentStep === 1} class:complete={currentStep > 1}>
			<span class="step-number">1</span>
			<span class="step-label">Personal</span>
		</div>
		<div class="step" class:active={currentStep === 2} class:complete={currentStep > 2}>
			<span class="step-number">2</span>
			<span class="step-label">Address</span>
		</div>
		<div class="step" class:active={currentStep === 3}>
			<span class="step-number">3</span>
			<span class="step-label">Preferences</span>
		</div>
	</div>

	<form onsubmit={handleSubmit}>
		{#if currentStep === 1}
			<div class="form-section">
				<h2>Personal Information</h2>
				<input bind:value={formData.firstName} placeholder="First Name" required />
				<input bind:value={formData.lastName} placeholder="Last Name" required />
				<input bind:value={formData.email} type="email" placeholder="Email" required />
			</div>
		{:else if currentStep === 2}
			<div class="form-section">
				<h2>Address</h2>
				<input bind:value={formData.street} placeholder="Street Address" required />
				<input bind:value={formData.city} placeholder="City" required />
				<input bind:value={formData.zipCode} placeholder="ZIP Code" pattern="\d{5}" required />
				<select bind:value={formData.country}>
					<option value="us">United States</option>
					<option value="ca">Canada</option>
					<option value="uk">United Kingdom</option>
				</select>
			</div>
		{:else}
			<div class="form-section">
				<h2>Preferences</h2>
				<label>
					<input type="checkbox" bind:checked={formData.newsletter} />
					Subscribe to newsletter
				</label>
				<label>
					<input type="checkbox" bind:checked={formData.notifications} />
					Enable notifications
				</label>
				<label>
					Theme:
					<select bind:value={formData.theme}>
						<option value="light">Light</option>
						<option value="dark">Dark</option>
						<option value="auto">Auto</option>
					</select>
				</label>
			</div>
		{/if}

		<div class="actions">
			{#if currentStep > 1}
				<button type="button" onclick={prevStep}>← Back</button>
			{/if}
			{#if currentStep < 3}
				<button type="button" onclick={nextStep} disabled={!canProceed}> Next → </button>
			{:else}
				<button type="submit">Complete</button>
			{/if}
		</div>
	</form>
</div>

<style>
	.wizard {
		max-width: 600px;
		margin: 0 auto;
	}

	.progress {
		display: flex;
		justify-content: space-between;
		margin-bottom: 32px;
	}

	.step {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		position: relative;
	}

	.step:not(:last-child)::after {
		content: '';
		position: absolute;
		top: 20px;
		left: 50%;
		width: 100%;
		height: 2px;
		background: #e5e5e5;
		z-index: -1;
	}

	.step.complete::after {
		background: #16a34a;
	}

	.step-number {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #e5e5e5;
		font-weight: bold;
		margin-bottom: 8px;
	}

	.step.active .step-number {
		background: #0066cc;
		color: white;
	}

	.step.complete .step-number {
		background: #16a34a;
		color: white;
	}

	.form-section {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-bottom: 24px;
	}

	input,
	select {
		padding: 12px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 16px;
	}

	.actions {
		display: flex;
		gap: 12px;
		justify-content: space-between;
	}

	button {
		padding: 12px 24px;
		background: #0066cc;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 16px;
	}

	button:disabled {
		background: #ccc;
		cursor: not-allowed;
	}

	button[type='button'] {
		background: #666;
	}
</style>

Cómo funciona paso a paso:

Un único objeto formData contiene todos los campos a través de los pasos
currentStep controla la visibilidad mediante condicionales
Cada paso tiene un validador $derived solo para los campos relevantes
"Siguiente" deshabilitado hasta que el paso actual sea válido; "Atrás" siempre habilitado
Las clases CSS muestran el estado visual activo/completo/pendiente
El botón de envío solo en el paso final garantiza que toda la validación se haya superado

Técnicas clave: Fuente única de verdad para los datos del formulario, validación granular por paso, divulgación progresiva mediante {#if}, clases CSS reactivas, estados de botón condicionales.

Mejores prácticas de UX: Siempre permitir navegación hacia atrás, validación estricta hacia adelante, seguimiento claro del progreso, persistencia de datos entre pasos, errores de campo en línea.

Accesibilidad: Puntos de referencia ARIA progressbar, navegación por teclado, anuncios de lector de pantalla mediante aria-live, gestión del foco en cambios de paso, resumen de errores para lectores de pantalla.

Mejoras de producción: Autoguardado en localStorage, enrutamiento basado en URL para los pasos, validación de campos en vivo (con debounce), omisión de pasos para usuarios avanzados, visualización de porcentaje de progreso, advertencia de beforeunload.

Variaciones: Navegación no lineal, pasos condicionales basados en respuestas, paso de revisión antes del envío, guardar y reanudar con URLs únicas, lógica de ramificación para diferentes rutas.

4. Constructor de Formularios Dinámico con Gestión Flexible de Campos

El Problema: Las aplicaciones necesitan formularios donde los usuarios puedan agregar/eliminar campos dinámicamente, configurar propiedades y reordenar elementos. Los formularios estáticos no pueden manejar constructores de encuestas, registros personalizados ni recolección de datos configurada por administradores.

La Solución: Sistema de meta-formulario que separa la configuración de campos de los datos del formulario. Los usuarios agregan/eliminan/configuran campos dinámicamente mientras todos los valores permanecen enlazados y reactivos.

<script>
	let fields = $state([
		{ id: 1, type: 'text', label: 'Name', value: '', required: true },
		{ id: 2, type: 'email', label: 'Email', value: '', required: true }
	])

	let nextId = $state(3)

	function addField(type) {
		fields = [
			...fields,
			{
				id: nextId++,
				type,
				label: `New ${type} field`,
				value: type === 'checkbox' ? false : '',
				required: false
			}
		]
	}

	function removeField(id) {
		fields = fields.filter((f) => f.id !== id)
	}

	function updateField(id, updates) {
		fields = fields.map((f) => (f.id === id ? { ...f, ...updates } : f))
	}

	let formValues = $derived(
		fields.reduce((acc, field) => {
			acc[field.label] = field.value
			return acc
		}, {})
	)

	let isValid = $derived(
		fields.every((field) => !field.required || (field.value && field.value !== ''))
	)
</script>

<div class="form-builder">
	<h2>Form Builder</h2>

	<div class="toolbar">
		<button onclick={() => addField('text')}>+ Text</button>
		<button onclick={() => addField('email')}>+ Email</button>
		<button onclick={() => addField('number')}>+ Number</button>
		<button onclick={() => addField('checkbox')}>+ Checkbox</button>
		<button onclick={() => addField('textarea')}>+ Text Area</button>
	</div>

	<form>
		{#each fields as field (field.id)}
			<div class="field-row">
				<input
					type="text"
					value={field.label}
					oninput={(e) => updateField(field.id, { label: e.target.value })}
					placeholder="Label"
				/>

				<label>
					<input
						type="checkbox"
						checked={field.required}
						onchange={(e) => updateField(field.id, { required: e.target.checked })}
					/>
					Required
				</label>

				{#if field.type === 'checkbox'}
					<label>
						<input type="checkbox" bind:checked={field.value} />
						{field.label}
					</label>
				{:else if field.type === 'textarea'}
					<textarea bind:value={field.value} placeholder={field.label}></textarea>
				{:else}
					<input type={field.type} bind:value={field.value} placeholder={field.label} />
				{/if}

				<button onclick={() => removeField(field.id)}>×</button>
			</div>
		{/each}
	</form>

	<div class="output">
		<h3>Form Data:</h3>
		<pre>{JSON.stringify(formValues, null, 2)}</pre>
		<p>Valid: {isValid ? '✓' : '✗'}</p>
	</div>
</div>

<style>
	.field-row {
		display: flex;
		gap: 8px;
		margin-bottom: 12px;
		padding: 12px;
		background: #f9f9f9;
		border-radius: 4px;
	}
	button {
		padding: 8px 12px;
		cursor: pointer;
	}
</style>

Cómo funciona: Metadatos de campo en un array, adición/eliminación dinámica mediante operaciones de array, etiquetas editables, renderizado específico por tipo, valores enlazados, payload de envío derivado.

Técnicas clave: Array de campos heterogéneo, enlace a elementos del array, $derived para transformación, #each con clave mediante IDs, renderizado condicional por tipo.

Casos de uso: Constructores de encuestas, personalización de CRM, registro de eventos, herramientas de recolección de datos, configuración de formularios por administradores.

Mejoras de producción: Plantillas de campos, arrastrar y soltar, lógica condicional, validación avanzada, agrupación de campos, guardar como plantilla, colaboración en tiempo real.

Consideraciones de Rendimiento

Si bien los enlaces de Svelte están altamente optimizados, comprender sus características de rendimiento te ayuda a crear aplicaciones más rápidas. La idea clave: los enlaces son solo azúcar sintáctico sobre escuchadores de eventos y asignaciones reactivas. Cuando se usan de manera inteligente, son extremadamente eficientes. Cuando se usan mal con cálculos complejos o listas grandes, pueden convertirse en cuellos de botella.

Esta sección cubre las trampas de rendimiento más comunes y sus soluciones, ayudándote a escribir enlaces que escalen desde prototipos hasta producción.

1. Debounce de Operaciones Costosas

El Problema: Cada carácter escrito en un campo enlazado activa un evento input, que actualiza tu estado, que activa cualquier expresión $derived que dependa de él. Si ese cálculo derivado es costoso (filtrar miles de elementos, cálculos complejos, llamadas a API), estás realizando trabajo costoso en cada pulsación de tecla.

Escenario de ejemplo: Un usuario escribe "svelte" en un campo de búsqueda. Son 6 pulsaciones, activando 6 filtros completos de la lista, 6 operaciones de regex, 6 actualizaciones del DOM. Si tu lista tiene 10,000 elementos, acabas de realizar 60,000 operaciones de filtro innecesariamente.

La Solución: Aplica debounce a las operaciones costosas para esperar hasta que el usuario deje de escribir antes de realizar el trabajo pesado.

<!-- AVOID: Expensive operation on every keystroke -->
<script>
	let searchTerm = $state('')
	let products = $state([/* 10,000 products */])

	// This runs on EVERY keystroke - very expensive!
	let filtered = $derived(
		products.filter(product => {
			// Complex filtering logic
			const matchesName = product.name.toLowerCase().includes(searchTerm.toLowerCase())
			const matchesTags = product.tags.some(tag => tag.includes(searchTerm))
			const matchesDescription = product.description.toLowerCase().includes(searchTerm.toLowerCase())
			return matchesName || matchesTags || matchesDescription
		})
	)
</script>

<input bind:value={searchTerm} placeholder="Search products..." />
<p>{filtered.length} results</p>

<!-- PREFERRED: Debounce the expensive computation -->
<script>
	let searchTerm = $state('') // Updates instantly for UI feedback
	let debouncedSearch = $state('') // Updates after user stops typing
	let debounceTimer

	// Debounce the search term
	$effect(() => {
		clearTimeout(debounceTimer)
		debounceTimer = setTimeout(() => {
			debouncedSearch = searchTerm
		}, 300) // Wait 300ms after last keystroke

		// Cleanup function prevents memory leaks
		return () => clearTimeout(debounceTimer)
	})

	// Expensive operation only runs when debouncedSearch changes
	let filtered = $derived(
		products.filter(product => {
			const matchesName = product.name.toLowerCase().includes(debouncedSearch.toLowerCase())
			const matchesTags = product.tags.some(tag => tag.includes(debouncedSearch))
			const matchesDescription = product.description.toLowerCase().includes(debouncedSearch.toLowerCase())
			return matchesName || matchesTags || matchesDescription
		})
	)
</script>

<input bind:value={searchTerm} placeholder="Search products..." />
<p>{filtered.length} results</p>

Por qué funciona:

searchTerm se actualiza de inmediato → el usuario ve lo que escribe sin retraso
debouncedSearch se actualiza 300ms después de que termina de escribir → el trabajo costoso se ejecuta una vez, no 6 veces
La función de limpieza garantiza que los temporizadores se cancelen correctamente al desmontar el componente

Impacto en el rendimiento: Para una lista de 10,000 elementos con una búsqueda de 6 caracteres, esto reduce las operaciones de 60,000 a 10,000—una mejora de 6x. Los usuarios no notan el retraso de 300ms porque siguen escribiendo.

Ajuste del retraso de debounce:

100-200ms: Bueno para escritores rápidos, se siente muy responsivo
300-400ms: Estándar, funciona para la mayoría de los casos de uso
500ms+: Se siente lento, usar solo para operaciones muy costosas

Alternativa: Throttling

Mientras que el debounce espera hasta que se deja de escribir, el throttling limita las actualizaciones a una frecuencia máxima:

<script>
	let searchTerm = $state('')
	let debouncedSearch = $state('')
	let lastUpdate = 0

	$effect(() => {
		const now = Date.now()
		if (now - lastUpdate > 300) {
			debouncedSearch = searchTerm
			lastUpdate = now
		}
	})
</script>

El throttling proporciona actualizaciones periódicas durante la escritura, lo que puede sentirse más responsivo para búsquedas en vivo.

2. Evitar Enlaces en Listas Grandes

El Problema: Cuando enlazas propiedades dentro de un bucle #each con cientos o miles de elementos, Svelte crea esa cantidad de enlaces bidireccionales. Cada enlace agrega un escuchador de eventos, y cuando los elementos se actualizan, todos esos escuchadores se activan. Esto puede causar problemas de rendimiento durante actualizaciones rápidas.

Escenario de ejemplo: Una lista de tareas con 1,000 elementos, cada uno con una casilla de verificación. Al hacer clic en "Seleccionar todo" se activan 1,000 actualizaciones de enlace individuales, cada una potencialmente activando la reactividad por separado.

<!-- AVOID: Bindings in large lists can be slow -->
<script>
	let todos = $state(Array.from({ length: 1000 }, (_, i) => ({
		id: i,
		text: `Todo ${i}`,
		completed: false
	})))

	function toggleAll() {
		const allCompleted = todos.every(todo => todo.completed)
		todos = todos.map(todo => ({ ...todo, completed: !allCompleted }))
	}
</script>

<!-- This creates 1,000 two-way bindings -->
{#each todos as todo (todo.id)}
	<label>
		<input type="checkbox" bind:checked={todo.completed} />
		{todo.text}
	</label>
{/each}

<!-- PREFERRED: Use event handlers for batch updates -->
<script>
	let todos = $state(Array.from({ length: 1000 }, (_, i) => ({
		id: i,
		text: `Todo ${i}`,
		completed: false
	})))

	function toggleTodo(id, completed) {
		// Create new array to trigger reactivity
		todos = todos.map(todo =>
			todo.id === id ? { ...todo, completed } : todo
		)
	}

	function toggleAll() {
		const allCompleted = todos.every(todo => todo.completed)
		todos = todos.map(todo => ({ ...todo, completed: !allCompleted }))
	}
</script>

{#each todos as todo (todo.id)}
	<label>
		<input
			type="checkbox"
			checked={todo.completed}
			onchange={(e) => toggleTodo(todo.id, e.target.checked)}
		/>
		{todo.text}
	</label>
{/each}

Por qué funciona:

Sin enlaces bidireccionales significa menos escuchadores de eventos
Las actualizaciones por lotes se pueden optimizar (actualizar múltiples elementos en un solo paso)
Más fácil agregar registro, analíticas o validación

Cuándo los enlaces siguen siendo válidos:

Listas de menos de ~100 elementos (los enlaces son muy eficientes a esta escala)
Los elementos se actualizan con poca frecuencia (el usuario marca casillas manualmente)
La simplicidad importa más que las micro-optimizaciones

Avanzado: Listas Virtuales

Para listas verdaderamente grandes (10,000+ elementos), considera la virtualización:

<script>
	import VirtualList from 'svelte-virtual-list'

	let items = $state(
		Array.from({ length: 100000 }, (_, i) => ({
			id: i,
			text: `Item ${i}`,
			selected: false
		}))
	)
</script>

<!-- Only renders visible items + buffer -->
<VirtualList {items} let:item height="400px">
	<label>
		<input
			type="checkbox"
			checked={item.selected}
			onchange={(e) => {
				item.selected = e.target.checked
				items = items
			}}
		/>
		{item.text}
	</label>
</VirtualList>

3. Enlaces vs. Manejadores de Eventos: Cuándo Usar Cada Uno

El Equilibrio: Los enlaces son concisos y declarativos, pero los manejadores de eventos te dan más control. Entender cuándo usar cada uno mejora tanto la claridad del código como el rendimiento.

Usa bind: cuando:

Sincronización simple sin transformación
La relación es puramente declarativa: "este input controla esta variable"
No se necesita validación ni efectos secundarios
Prototipado rápido donde la simplicidad importa

<!-- PREFERRED: Perfect use of bind: -->
<script>
	let username = $state('')
	let age = $state(0)
	let newsletter = $state(false)
</script>

<input type="text" bind:value={username} />
<input type="number" bind:value={age} />
<input type="checkbox" bind:checked={newsletter} />

Usa manejadores de eventos cuando:

Necesitas transformar o validar la entrada
Se requieren efectos secundarios (llamadas a API, analíticas)
Actualizaciones condicionales (actualizar solo si pasa la validación)
Lógica de negocio compleja rodea la actualización

<!-- PREFERRED: Event handler for complex logic -->
<script>
	let username = $state('')
	let usernameError = $state('')

	function handleUsernameInput(e) {
		let value = e.target.value

		// Transform: trim and lowercase
		value = value.trim().toLowerCase()

		// Validate
		if (value.length < 3) {
			usernameError = 'Username must be at least 3 characters'
		} else if (!/^[a-z0-9_]+$/.test(value)) {
			usernameError = 'Only letters, numbers, and underscores allowed'
		} else if (value.length > 20) {
			usernameError = 'Username too long'
			return // Don't update if too long
		} else {
			usernameError = ''
		}

		// Side effect: check availability
		checkUsernameAvailability(value)

		// Only update if valid
		username = value
	}
</script>

<input type="text" value={username} oninput={handleUsernameInput} aria-invalid={!!usernameError} />
{#if usernameError}
	<p class="error">{usernameError}</p>
{/if}

Comparación de rendimiento:

<!-- bind: is equivalent to this: -->
<input
	value={variable}
	oninput={(e) => {
		variable = e.target.value
	}}
/>

No hay diferencia de rendimiento entre bind: y una asignación simple con manejador de eventos. Las consideraciones de rendimiento provienen de lo que haces después de la asignación (derivaciones costosas, llamadas a API, etc.).

4. Memoización para Valores Derivados Costosos

El Problema: Las expresiones $derived recalculan cada vez que cambian sus dependencias. Si un valor derivado depende de un input enlazado Y ese cálculo es costoso, estás realizando trabajo costoso en cada pulsación de tecla.

<!-- AVOID: Expensive calculation on every keystroke -->
<script>
	let csvData = $state('')

	// Parses CSV on every character typed!
	let parsedData = $derived.by(() => {
		const rows = csvData.split('\n')
		return rows.map((row) => row.split(','))
	})
</script>

<textarea bind:value={csvData}></textarea>

Solución: podemos usar debounce y memoización

<!-- PREFERRED: Debounce + memoization -->
<script>
	let csvData = $state('')
	let debouncedCsv = $state('')
	let debounceTimer

	$effect(() => {
		clearTimeout(debounceTimer)
		debounceTimer = setTimeout(() => {
			debouncedCsv = csvData
		}, 500)
		return () => clearTimeout(debounceTimer)
	})

	// Only parses when user stops typing
	let parsedData = $derived.by(() => {
		if (!debouncedCsv) return []
		const rows = debouncedCsv.split('\n')
		return rows.map((row) => row.split(','))
	})
</script>

<textarea bind:value={csvData}></textarea><p>Rows: {parsedData.length}</p>

5. Actualizaciones por Lotes para Múltiples Enlaces

El Problema: Cuando múltiples valores enlazados cambian simultáneamente (por ejemplo, al reiniciar un formulario), cada enlace activa la reactividad de forma independiente. Esto puede causar re-renderizados innecesarios.

<!-- AVOID: Multiple separate updates -->
<script>
	let firstName = $state('')
	let lastName = $state('')
	let email = $state('')

	function resetForm() {
		firstName = '' // Triggers reactivity
		lastName = '' // Triggers reactivity
		email = '' // Triggers reactivity
		// 3 separate updates!
	}
</script>

Solución: Usar actualización por lotes

<!-- PREFERRED: Batch update with object state -->
<script>
	let formData = $state({
		firstName: '',
		lastName: '',
		email: ''
	})

	function resetForm() {
		// Single object update triggers reactivity once
		formData = { firstName: '', lastName: '', email: '' }
	}
</script>

<input bind:value={formData.firstName} />
<input bind:value={formData.lastName} />
<input bind:value={formData.email} />

Por qué funciona: La reactividad de Svelte es suficientemente inteligente para agrupar actualizaciones al mismo objeto, reduciendo la sobrecarga de re-renderizado.

6. Evitar Enlaces de Dimensiones Innecesarios

El Problema: Los enlaces de dimensiones (clientWidth, offsetHeight, etc.) usan ResizeObserver, que ejecuta callbacks en cada cambio de tamaño. Enlazar dimensiones en muchos elementos puede afectar el rendimiento.

<!-- PREFERRED: Bind only to the container -->
<script>
	let containerWidth = $state(0)
	let containerHeight = $state(0)
</script>

<!-- AVOID: Binding dimensions on every item -->
{#each items as item}
	<div bind:clientWidth={item.width} bind:clientHeight={item.height}>
		{item.content}
	</div>
{/each}

<div bind:clientWidth={containerWidth} bind:clientHeight={containerHeight}>
	{#each items as item}
		<div>
			{item.content}
			<!-- Calculate item size based on container -->
		</div>
	{/each}
</div>

Principio clave: Mide una vez a nivel del contenedor, calcula los tamaños de los elementos hijos con CSS o JavaScript.

Resumen de Rendimiento

HAZ:

Aplica debounce a las operaciones costosas activadas por enlaces
Usa manejadores de eventos para lógica compleja en lugar de enlaces
Agrupa actualizaciones reuniendo el estado relacionado en objetos
Mide el rendimiento con datos reales (no optimices prematuramente)
Considera listas virtuales para 1,000+ elementos

NO HAGAS:

Enlazar a cálculos $derived costosos que se ejecutan en cada pulsación de tecla
Usar enlaces en listas grandes sin medir el rendimiento primero
Enlazar dimensiones en cada elemento de una lista
Optimizar enlaces antes de tener un problema de rendimiento

Recuerda: Los enlaces de Svelte están altamente optimizados. La mayoría de los problemas de rendimiento provienen de cálculos costosos o renderizado de listas grandes—no de los enlaces en sí mismos. Perfila tu aplicación antes de optimizar.

Mejores Prácticas de Accesibilidad

Los enlaces no hacen que los formularios sean accesibles automáticamente. Sigue siempre estas pautas:

1. Usar etiquetas apropiadas

Cada input debe tener una etiqueta asociada:

<!-- AVOID: No label -->
<input bind:value={email} />

<!-- PREFERRED: Explicit label -->
<label for="email">Email</label>
<input id="email" type="email" bind:value={email} />

<!-- PREFERRED: Implicit label -->
<label>
	Email
	<input type="email" bind:value={email} />
</label>

2. Proporcionar retroalimentación de errores

Usa atributos ARIA para anunciar errores a los lectores de pantalla:

<script>
	let email = $state('')
	let touched = $state(false)
	let isValid = $derived(/\S+@\S+\.\S+/.test(email))
	let showError = $derived(touched && !isValid && email.length > 0)
</script>

<label for="email">Email</label>
<input
	id="email"
	type="email"
	bind:value={email}
	onblur={() => (touched = true)}
	aria-invalid={showError}
	aria-describedby={showError ? 'email-error' : undefined}
/>

{#if showError}
	<p id="email-error" role="alert">Please enter a valid email address</p>
{/if}

3. Usar fieldsets para grupos

Agrupa inputs relacionados con <fieldset> y <legend>:

<fieldset>
	<legend>Shipping Method</legend>

	<label>
		<input type="radio" bind:group={shipping} value="standard" />
		Standard (5-7 days)
	</label>

	<label>
		<input type="radio" bind:group={shipping} value="express" />
		Express (2-3 days)
	</label>
</fieldset>

Resumen de buenas prácticas

Usa bind: para sincronización bidireccional simple: Los formularios e inputs se benefician de la brevedad del binding
Prefiere manejadores de eventos para lógica compleja: La validación, el formateo y los efectos secundarios requieren control explícito
Marca las props del componente como $bindable: Habilita el binding bidireccional padre-hijo cuando sea apropiado
Protégete contra undefined en inputs numéricos: Los inputs numéricos vacíos se convierten en undefined—maneja esto explícitamente
Usa bind:group para grupos de checkboxes/radio: Gestiona arrays de selecciones de forma limpia
Aplica debounce a operaciones costosas: No recalcules en cada pulsación de tecla
Siempre proporciona etiquetas: La accesibilidad no es negociable
Valida los valores iniciales de select: Asegúrate de que los valores enlazados coincidan con los valores de las opciones
Usa bind:this para acceder al DOM: Captura referencias para APIs imperativas
Combina bindings con validación: Muestra retroalimentación clara a los usuarios

Referencia rápida

<!-- Text inputs -->
<input type="text" bind:value={text} />
<textarea bind:value={text}></textarea>

<!-- Number inputs (auto-convert to number) -->
<input type="number" bind:value={number} />
<input type="range" bind:value={number} min="0" max="100" />

<!-- Single checkbox (boolean) -->
<input type="checkbox" bind:checked={boolean} />
<input type="checkbox" bind:indeterminate />

<!-- Checkbox group (array) -->
<input type="checkbox" bind:group={array} value="option1" />
<input type="checkbox" bind:group={array} value="option2" />

<!-- Radio buttons (string/number/object) -->
<input type="radio" bind:group={selected} value="a" />
<input type="radio" bind:group={selected} value="b" />

<!-- Select dropdown -->
<select bind:value={selected}>
	<option value="a">A</option>
	<option value="b" selected>B</option>
</select>

<!-- Select multiple (array) -->
<select bind:value={array} multiple>
	<option value="a">A</option>
	<option value="b">B</option>
</select>

<!-- File input -->
<input type="file" bind:files accept="image/*" multiple />

<!-- Details element -->
<details bind:open={isOpen}>
	<summary>Click to toggle</summary>
	<p>Content</p>
</details>

<!-- Contenteditable -->
<div contenteditable bind:innerHTML={html}></div>
<div contenteditable bind:innerText={text}></div>
<div contenteditable bind:textContent={text}></div>

<!-- Media (two-way) -->
<video bind:currentTime bind:playbackRate bind:paused bind:volume bind:muted></video>

<!-- Media (readonly) -->
<video
	bind:duration
	bind:buffered
	bind:seeking
	bind:ended
	bind:readyState
	bind:videoWidth
	bind:videoHeight
></video>

<!-- Image (readonly) -->
<img bind:naturalWidth bind:naturalHeight />

<!-- Dimensions (readonly) -->
<div bind:clientWidth bind:clientHeight bind:offsetWidth bind:offsetHeight bind:contentRect></div>

<!-- Element reference -->
<input bind:this={inputElement} />

<!-- Component binding -->
<Child bind:value={parentValue} />

<!-- Function binding (Svelte 5.9+) -->
<input bind:value={() => value, (v) => (value = v.toUpperCase())} />

Conclusión

La directiva bind: representa una de las características más poderosas de Svelte para construir interfaces de usuario interactivas: flujo de datos bidireccional que sincroniza automáticamente el estado del DOM con el estado del componente. Al abstraer el cableado manual de listeners de eventos, la extracción de valores y las actualizaciones de estado requeridas en JavaScript puro, bind: transforma lo que serían docenas de líneas de código imperativo en un único atributo declarativo. Desde inputs de formularios simples hasta composiciones de componentes complejas, el binding bidireccional proporciona la base para interfaces reactivas e interactivas.

Dominar bind: requiere comprender sus diversas formas y casos de uso apropiados. Los bindings de elementos de formulario (bind:value, bind:checked) manejan la entrada del usuario. Los bindings de dimensiones (bind:clientWidth) habilitan layouts responsivos. Los bindings de componentes con $bindable() crean patrones poderosos de comunicación padre-hijo. La clave está en reconocer cuándo el binding bidireccional simplifica tu código versus cuándo el flujo de datos unidireccional con manejadores de eventos explícitos proporciona una mejor arquitectura. Al combinar bind: con $derived para transformaciones calculadas y $effect para efectos secundarios ante cambios en valores enlazados, puedes construir sistemas reactivos sofisticados y mantenibles.

Puntos clave

bind: crea flujo de datos bidireccional sincronizando automáticamente los valores del DOM con el estado del componente y viceversa, eliminando el código repetitivo de listeners de eventos y actualizaciones de estado manuales
Los bindings de elementos de formulario manejan la entrada del usuario con bind:value para inputs de texto/número, bind:checked para checkboxes, bind:group para botones de radio, y bind:files para inputs de archivos
Los bindings de dimensiones proporcionan datos para layouts responsivos - bind:clientWidth, bind:clientHeight, bind:offsetWidth, bind:offsetHeight rastrean las dimensiones de los elementos de forma reactiva
Los bindings de componentes requieren props $bindable() en el componente hijo para optar por el binding bidireccional: let { value = $bindable() } = $props()
bind:this captura referencias a elementos para acceso programático al DOM: let element; bind:this={element} almacena el nodo DOM en una variable
La coerción de tipos ocurre automáticamente con type="number" convirtiendo inputs de cadena a números, <input bind:value={numericState} type="number"> popula el estado con tipos numéricos
Los bindings de grupo habilitan conjuntos de radio/checkbox - múltiples elementos con bind:group={selectedValue} se sincronizan con una única variable de estado, almacenando el/los valor(es) seleccionado(s)
Los bindings de función transforman valores (Svelte 5.9+): bind:value={(() => getter, (v) => setter)} aplica lógica personalizada durante las operaciones de get/set

Ver también

Documentación oficial de Svelte 5 - bind:
$state - Estado reactivo que los bindings actualizan
$bindable() - Hacer bindables las props de componentes
$derived - Valores calculados a partir del estado enlazado
$effect - Efectos secundarios disparados por cambios en valores enlazados
Validación de formularios - Patrones de validación de formularios del lado del cliente
MDN - Tipos de input - Comprensión de los tipos de elementos input en HTML

Flujo de Datos Bidireccional Simplificado

Entendiendo el Flujo de Datos

El Flujo de Datos Unidireccional por Defecto

El Atajo del Enlace Bidireccional

Cuándo Usar Cada Enfoque

Bindings Básicos de Entrada

Entradas de Texto: bind:value

Entradas Numéricas: Coerción de Tipo Automática

Valores Predeterminados y Reinicio de Formulario

Bindings de Casilla de Verificación

Casilla de Verificación Individual: bind:checked

Estado Indeterminado: bind:indeterminate

Grupos de Checkboxes: bind:group

Grupos de Botones de Radio

Listas Desplegables de Selección

Selección Simple: bind:value

Selección Múltiple: bind:value con Array

Inputs de Archivo: bind:files

Enlaces de Elementos Multimedia

Enlaces Multimedia Bidireccionales

Enlaces Multimedia de Solo Lectura

Enlaces Específicos de Video

Enlaces de Elementos de Imagen

Elemento Details: bind:open

Bindings de Contenteditable

Bindings de Dimensiones (Solo Lectura)

Referencias a Elementos: bind:this

Referencias a Instancias de Componentes

Enfoque Imperativo (usando bind:this):

Enfoque Declarativo (preferido en Svelte 5):

¿Cuándo usar cada enfoque?

Enfoque híbrido

Bindings de Props de Componentes con $bindable

Hacer Props Enlazables

Múltiples Props Enlazables

Componentes de Input Personalizados

Bindings de Funciones (Avanzado)

Problemas Comunes y Soluciones

1: Binding a Valores Derivados

2: Inputs Numéricos que se Vuelven undefined

3: Binding a Propiedades de Arrays/Objetos

4: Binding Sin $bindable

5: Grupo de Checkboxes vs. Booleanos Individuales

6: El Select No Muestra el Valor Inicial

Patrones del Mundo Real

1. Input de Búsqueda con Debounce

2. Panel de Configuración con Sincronización en localStorage

3. Formulario Multi-Paso con Validación

4. Constructor de Formularios Dinámico con Gestión Flexible de Campos

Consideraciones de Rendimiento

1. Debounce de Operaciones Costosas

2. Evitar Enlaces en Listas Grandes

3. Enlaces vs. Manejadores de Eventos: Cuándo Usar Cada Uno

4. Memoización para Valores Derivados Costosos

5. Actualizaciones por Lotes para Múltiples Enlaces

6. Evitar Enlaces de Dimensiones Innecesarios

Resumen de Rendimiento

Mejores Prácticas de Accesibilidad

1. Usar etiquetas apropiadas

2. Proporcionar retroalimentación de errores

3. Usar fieldsets para grupos

Resumen de buenas prácticas

Referencia rápida

Conclusión

Puntos clave

Ver también

Entradas de Texto: `bind:value`

Casilla de Verificación Individual: `bind:checked`

Estado Indeterminado: `bind:indeterminate`

Grupos de Checkboxes: `bind:group`

Selección Simple: `bind:value`

Selección Múltiple: `bind:value` con Array

Inputs de Archivo: `bind:files`

Elemento Details: `bind:open`

Enfoque Imperativo (usando `bind:this`):

Bindings de Props de Componentes con `$bindable`

2: Inputs Numéricos que se Vuelven `undefined`

4: Binding Sin `$bindable`