zag

Zag is a JavaScript library of finite state machines for building accessible UI components. Its stated purpose is to avoid reimplementing common component patterns (tabs, menus, modals, tooltips and others) separately in each framework by modelling the interaction logic once in a framework-agnostic way. Core ideas outlined in the README: - Write once, use everywhere: component interactions are modelled independently of any framework, with adapters provided for React, Solid, Svelte and Vue. - Accessibility focus: the project says it handles details such as keyboard interactions, focus management, and ARIA roles and attributes. - Headless: machine APIs are described as completely unstyled, leaving the choice of styling solution to the developer. - State machines: the implementation is built on ideas from statecharts, though the README notes it does not follow the SCXML specification. Usage model: machines are published per component as separate packages, for example @zag-js/dialog and @zag-js/tooltip, installed with npm or yarn. Framework wrappers such as @zag-js/react, @zag-js/vue, @zag-js/solid and @zag-js/svelte let you consume a machine inside an application. The README's React example shows useMachine from @zag-js/react combined with a component package, then connect(service, normalizeProps) to produce a props API, which is spread onto elements such as the root container and each item. Guiding principles stated in the README: machines and tests are modelled after the WAI-ARIA authoring practices; end-to-end tests are written for every component so that behaviour is consistent across frameworks; and machines are intended to stay lightweight and simple, avoiding complex machine concepts such as spawn and nested states. Repository and workflow notes: - Documentation and a changelog are linked from the README (zagjs.com and CHANGELOG.md). - The build uses esbuild and turborepo for concurrent builds across packages, producing CJS, ESM and DTS output. - Starter examples exist for React (Next.js TypeScript), Vue 3, Solid and Svelte. - End-to-end tests use Playwright and are run per framework (React, Vue, Solid). - Generator commands are provided to scaffold a new machine package or a new utility package. - Other commands cover running tests, linting, building and starting the website. The README also credits a number of inspirations, including duplicated code between Chakra UI's React and Vue implementations, pure UI patterns, Material Components Web, Radix UI, XState, Vue.js, Lit and Sonner. Contribution guidance points to a Good First Issue label, issue reporting for bugs and documentation gaps, and feature requests. The project is licensed under MIT and maintained under Chakra Systems Inc.