Other frameworks This page covers Preact, Solid, Qwik, Lit, Ember, Alpine, htmx, and any other framework that puts elements in a document. They all follow the same three rules and need nothing else. The three rules Strings go through attributes. Everything else goes through properties. An attribute is a string, so assign an array, an object, or a function to the element as a property. Most frameworks do this for you when the element has a matching property. element.items = tabs Bind events with addEventListener, using the event's own name. Helix event names, such as helix-before-open, helix-before-change, and helix-select, are lowercase and hyphenated. They have no camel-case variant. Your framework's on* syntax needs to pass that exact name through. element.addEventListener('helix-before-change', (event) => console.log(event.detail)) A declared value, open, checked, or active is a seed. The element starts with that value and then manages its own state, as <input value="Ada"> does. To refuse one change, listen for the matching helix-before-* event and call preventDefault(). To own the state fully, refuse every change and assign your own value. A reset returns to default-value, default-open, and the similar attributes. State and control explains the model in full. Notes for each framework FrameworkNotesAlpine, htmxMarkup and attributes only, which work with every component. Refusing a change needs scriptEmberAngle-bracket invocation passes attributes only, so set properties from a modifierLit.prop=, ?bool=, and @helix-before-change= work with no setupPreactSets a property when the element has one, and an attribute otherwise. onhelix-before-change binds the literal name. Typings says how to type the tagsQwikWorks as JSX. Bind with document:on… or a ref, since a plain on* prop is normalizedSolidSets properties on custom elements by default. Use prop: to force one and attr: to force the other. on:helix-before-change binds the literal name. Typings says how to type the tags We do not test these frameworks, so they share one page. If your framework needs something the three rules do not cover, tell us. It is a gap in this page or in the library. Typings @fusion.dev/helix/jsx types the tags for React, Preact, and Solid, and it is the base for typing any other framework that uses JSX. The Svelte typings read their props from it. It needs only the types of the framework you use, and it compiles with skipLibCheck: false. ref and style take the types of the framework the tag is written in: React: React's Ref and CSSProperties. Preact: Preact's Ref, and the style a <div> takes, which is a string or an object. Solid: the element or a callback that receives it, and the style a <div> takes, which is a string or an object. Any other framework: the element or a callback that receives it, and an object of style properties. In Preact and Solid, import the typings once, anywhere TypeScript sees it: import '@fusion.dev/helix/jsx' Preact reads the tags with jsxImportSource: "preact" and with h as the JSX factory. If your paths alias react to preact/compat, the tags take ref and style as preact/compat types React's, so style takes an object. Solid reads the tags with jsxImportSource: "solid-js", and each tag also takes prop:, attr:, and on: forms of its props and events. With jsxImportSource: "solid-js/h", Solid runs without its compiler, and the same import types the tags. Each prop also takes a function that returns its value, and h calls that function again when a signal it reads changes. A property whose value is a function, such as a slider's formatter, takes only a function that returns it, because h calls any function it is given: <helix-slider disabled={() => busy()} formatter={() => format} label="Volume" /> ref, children, and the handlers named on…, such as on:helix-before-change, take their values as they are. If your framework needs a different format, use the manifest at @fusion.dev/helix/custom-elements.json. It describes every tag, prop, event, and part, and we generate all our typings from it. Register the elements import '@fusion.dev/helix/button' import '@fusion.dev/helix/dialog' Import each family you use once, anywhere that runs in the browser. The stylesheets are the same in every framework, and they are the part most often left out. See Installation for the stylesheets.