Svelte import '@fusion.dev/helix/svelte' Add this types-only import once. It augments SvelteHTMLElements, so every Helix tag is typed in a component. Svelte binds a handler as onhelix-before-change={…}, which is the shape the JSX typings already describe, so the Svelte typings read each tag's props from @fusion.dev/helix/jsx. The two cannot disagree. The typings need only Svelte's own types, and they compile with skipLibCheck: false. Pass props and bind events <helix-input label="Name" onchange={(event) => (name = event.currentTarget.value)} value={name} ></helix-input> Svelte sets a property when the element has one, and an attribute otherwise. It binds on* with addEventListener. Svelte shows no unknown-element warning, and you do not need a compiler flag. Read the value from event.currentTarget, which is typed as the element. event.target is an EventTarget | null, which has no value. Svelte passes objects and arrays as properties on its own: <helix-data-table label="People" rows={people}></helix-data-table> Svelte's own attributes are typed on every Helix tag as well, so onclick, class, and a style string check as they do on a div. Hold the element bind:this holds the element, typed as its class: <script lang="ts"> import type { HelixInput } from '@fusion.dev/helix' let input: HelixInput | undefined = $state() </script> <helix-input bind:this={input} label="Name"></helix-input> Type a handler in the script A handler written on the tag takes its event type from the tag. A handler written in the script names its event type, which @fusion.dev/helix/jsx exports for each element and event: <script lang="ts"> import type { HelixInputHelixBeforeChangeElementEvent } from '@fusion.dev/helix/jsx' const refuseLong = (event: HelixInputHelixBeforeChangeElementEvent) => { if (event.detail.value.length > 40) { event.preventDefault() } } </script> <helix-input label="Handle" onhelix-before-change={refuseLong}></helix-input> Ignore the click warnings on a control svelte-check warns about an onclick on any Helix element. Its accessibility check reads the tag, and the button a Helix control renders is in its shadow root, with its role and its keys. On a control that renders a button, such as helix-button or helix-icon-button, ignore the two warnings on that element: <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions --> <helix-icon-button label="Close" onclick={close}></helix-icon-button> On an element that renders no control, such as helix-tag, the warning is right. Use a control there. Read values and refuse changes These two rules apply in every framework. Two-way bindings do not work on a Helix control, because custom elements have no two-way binding convention to opt into. Svelte accepts bind:value only on <input>, <textarea>, and <select>, and bind:checked only on <input>. Read the value from the event. A declared value, open, checked, or active is a seed. The element starts with that value and then applies its own changes. To refuse a change, cancel the matching helix-before-* event. Skipping a state update does not refuse it. See State and control.