# @xh/hoist > Hoist add-on for building and deploying React Applications. Latest version **89.3.1** (published 2026-10-21) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @xh/hoist pnpm add @xh/hoist yarn add @xh/hoist bun add @xh/hoist ``` Provides the commands `hoist-ts`, `hoist-mcp`, `hoist-docs`. ## Health **Score 60/100 (C)** — status: active. Positive: no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads; no types; no esm support. ## Facts | | | |---|---| | Version | 89.3.1 | | Published | 2026-10-21 | | First published | 2018-07-11 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 62 | | Unpacked size | 7.6 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 31 | | Author | Extremely Heavy Industries, Inc. | | Maintainers | exhi | ## Links - npm: https://www.npmjs.com/package/@xh/hoist - Repository: https://github.com/xh/hoist-react - Homepage: https://xh.io - Issues: https://github.com/xh/hoist-react/issues - npm.io page: https://npm.io/package/@xh/hoist ## Dependencies (62) - [qs](https://npm.io/package/qs.md) ^6.16.0 - [tsx](https://npm.io/package/tsx.md) ^4.23.15 - [zod](https://npm.io/package/zod.md) ^4.6.7 - [mobx](https://npm.io/package/mobx.md) ~7.0.6 - [lodash](https://npm.io/package/lodash.md) ^4.18.1 - [moment](https://npm.io/package/moment.md) ~2.31.0 - [numbro](https://npm.io/package/numbro.md) ~2.5.0 - [semver](https://npm.io/package/semver.md) ^7.8.5 - [store2](https://npm.io/package/store2.md) ^2.14.4 - [swiper](https://npm.io/package/swiper.md) ~14.3.0 - [core-js](https://npm.io/package/core-js.md) ^3.50.0 - [onsenui](https://npm.io/package/onsenui.md) ~2.12.9 - [router5](https://npm.io/package/router5.md) ~7.0.2 - [unified](https://npm.io/package/unified.md) ~11.0.5 - [date-fns](https://npm.io/package/date-fns.md) ^4.4.0 - [filesize](https://npm.io/package/filesize.md) ~11.0.26 - [inter-ui](https://npm.io/package/inter-ui.md) ~4.1.1 - [ts-morph](https://npm.io/package/ts-morph.md) ^28.0.0 - [commander](https://npm.io/package/commander.md) ^15.0.0 - [dompurify](https://npm.io/package/dompurify.md) ^3.4.17 - [classnames](https://npm.io/package/classnames.md) ^2.5.1 - [jwt-decode](https://npm.io/package/jwt-decode.md) ^4.0.0 - [minisearch](https://npm.io/package/minisearch.md) ^7.2.0 - [remark-gfm](https://npm.io/package/remark-gfm.md) ~4.0.1 - [react-select](https://npm.io/package/react-select.md) ~5.10.2 - [react-window](https://npm.io/package/react-window.md) ~2.3.4 - [ua-parser-js](https://npm.io/package/ua-parser-js.md) ^2.0.10 - [react-onsenui](https://npm.io/package/react-onsenui.md) ~1.13.3 - [remark-breaks](https://npm.io/package/remark-breaks.md) ~4.0.0 - [react-dropzone](https://npm.io/package/react-dropzone.md) ~20.1.3 - [react-markdown](https://npm.io/package/react-markdown.md) ~10.1.0 - [fast-deep-equal](https://npm.io/package/fast-deep-equal.md) ^3.1.3 - [mobx-react-lite](https://npm.io/package/mobx-react-lite.md) ~5.1.0 - [short-unique-id](https://npm.io/package/short-unique-id.md) ^5.3.2 - [@codemirror/lint](https://npm.io/package/@codemirror/lint.md) ^6.9.7 - [@codemirror/view](https://npm.io/package/@codemirror/view.md) ^6.43.14 - [@daypicker/react](https://npm.io/package/@daypicker/react.md) ^10.0.2 - [@blueprintjs/core](https://npm.io/package/@blueprintjs/core.md) ^6.21.0 - [@codemirror/state](https://npm.io/package/@codemirror/state.md) ^6.7.6 - [@hello-pangea/dnd](https://npm.io/package/@hello-pangea/dnd.md) ~18.0.1 - [http-status-codes](https://npm.io/package/http-status-codes.md) ^2.3.0 - [lodash-inflection](https://npm.io/package/lodash-inflection.md) ^1.5.0 - [react-grid-layout](https://npm.io/package/react-grid-layout.md) ~2.3.0 - [@azure/msal-common](https://npm.io/package/@azure/msal-common.md) ~16.14.2 - [@floating-ui/react](https://npm.io/package/@floating-ui/react.md) ^0.27.20 - [@auth0/auth0-spa-js](https://npm.io/package/@auth0/auth0-spa-js.md) ~2.28.3 - [@azure/msal-browser](https://npm.io/package/@azure/msal-browser.md) ~5.25.0 - [@codemirror/commands](https://npm.io/package/@codemirror/commands.md) ^6.11.1 - [@codemirror/language](https://npm.io/package/@codemirror/language.md) ^6.13.1 - [sass-material-colors](https://npm.io/package/sass-material-colors.md) ~0.0.5 - [@blueprintjs/datetime](https://npm.io/package/@blueprintjs/datetime.md) ^6.3.0 - [react-windowed-select](https://npm.io/package/react-windowed-select.md) ~5.2.0 - [router5-plugin-browser](https://npm.io/package/router5-plugin-browser.md) ~7.0.2 - [@codemirror/language-data](https://npm.io/package/@codemirror/language-data.md) ^6.5.2 - [@modelcontextprotocol/sdk](https://npm.io/package/@modelcontextprotocol/sdk.md) ^1.32.1 - [@uiw/codemirror-theme-github](https://npm.io/package/@uiw/codemirror-theme-github.md) ~4.25.12 - [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^3.5.0 - [@fortawesome/pro-thin-svg-icons](https://npm.io/package/@fortawesome/pro-thin-svg-icons.md) ^7.3.1 - [@fortawesome/pro-light-svg-icons](https://npm.io/package/@fortawesome/pro-light-svg-icons.md) ^7.3.1 - [@fortawesome/pro-solid-svg-icons](https://npm.io/package/@fortawesome/pro-solid-svg-icons.md) ^7.3.1 - [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^7.3.1 - [@fortawesome/pro-regular-svg-icons](https://npm.io/package/@fortawesome/pro-regular-svg-icons.md) ^7.3.1 ## Recent versions - 89.3.1 (latest) — 2026-10-21 - 90.0.0-SNAPSHOT.1793381787916 (next) — 2026-10-30 - 89.0.0-SNAPSHOT.1792444554362 (experimental) — 2026-10-19 - 84.0.2 (hotfix) — 2026-05-13 - 90.0.0-SNAPSHOT.1793287133404 — 2026-10-29 - 90.0.0-SNAPSHOT.1793209410596 — 2026-10-28 - 90.0.0-SNAPSHOT.1793208183133 — 2026-10-28 - 90.0.0-SNAPSHOT.1793205173586 — 2026-10-28 - 90.0.0-SNAPSHOT.1793191072812 — 2026-10-28 - 90.0.0-SNAPSHOT.1793190124368 — 2026-10-28 - 90.0.0-SNAPSHOT.1793152915223 — 2026-10-28 - 90.0.0-SNAPSHOT.1792892678874 — 2026-10-25 - 90.0.0-SNAPSHOT.1792810317385 — 2026-10-24 - 90.0.0-SNAPSHOT.1792809390818 — 2026-10-24 - 90.0.0-SNAPSHOT.1792798860788 — 2026-10-23 - … 688 more at https://npm.io/package/@xh/hoist/versions ## README # Hoist React [![Unit Tests](https://github.com/xh/hoist-react/actions/workflows/unit-tests.yml/badge.svg?branch=develop)](https://github.com/xh/hoist-react/actions/workflows/unit-tests.yml?query=branch%3Adevelop) A full-stack UI development framework for enterprise web applications, built on React and MobX. Developed by [Extremely Heavy](https://xh.io/) as the client-side complement to [Hoist Core](https://github.com/xh/hoist-core). ## Overview Hoist is a "full stack" UI development framework. It has server and client components that work together. They provide an integrated set of tools and utilities to build sophisticated front-end interfaces, or entire applications, quickly. Hoist focuses on building for the enterprise. For an overview of Hoist as a whole, read the [Hoist Core](https://github.com/xh/hoist-core) README. It covers why Hoist exists, its server-side tech stack, and its general features and capabilities. This repository is *hoist-react*, the current reference client-side implementation of Hoist. React is a strong platform on which to build modern web apps. It is a core part of the toolset that fully functional user interfaces need, but it is only one part. Hoist React brings together a curated set of third-party and custom components, supporting libraries, utilities, and tooling. The result is rapid, ready-to-go development, tightly integrated functionality, and few upfront decisions per app. Hoist React also keeps a high degree of flexibility and extensibility for demanding custom use cases. ### AI-Assisted Development We design and document Hoist for AI-assisted development. Hoist has strong conventions: a consistent Model/Component/Service architecture, element factory patterns, and an opinionated approach to state management. These conventions constrain the solution space, which helps AI coding assistants produce consistent, idiomatic, and maintainable code. The documentation is structured for both human developers and AI agents. See [Documentation](#documentation) for the entry points. AI coding assistants, such as Claude Code and Copilot, can read [AGENTS.md](AGENTS.md) for coding conventions. ## Getting Started Install hoist-react as a dependency: ```bash pnpm add @xh/hoist # or npm install @xh/hoist # or yarn add @xh/hoist ``` Hoist React requires **React ^19.3** and **React DOM ^19.3** as peer dependencies. [Toolbox](https://github.com/xh/toolbox) is XH's reference application. It showcases hoist-react patterns and components, and it is the best starting point for new developers. See [docs/development-environment.md](docs/development-environment.md) for full local development setup, and the [Hoist Core README](https://github.com/xh/hoist-core) for server-side configuration. This repo uses [pnpm](https://pnpm.io). To develop hoist-react locally, run `pnpm install` to install its dependencies. The `packageManager` field in `package.json` pins the required pnpm version. You can let [corepack](https://nodejs.org/api/corepack.html) provide that version automatically (`corepack enable pnpm`), or use a standalone pnpm install of v10+. Applications consuming the published `@xh/hoist` package are free to use pnpm, yarn, or npm. ## Documentation Hoist React has package-level READMEs on architecture and usage patterns, plus cross-cutting concept docs. The primary entry points are: - [docs/README.md](docs/README.md) - documentation index with a task-oriented quick reference - [AGENTS.md](AGENTS.md) - AI coding assistant guidance and coding conventions - [CHANGELOG.md](CHANGELOG.md) - version history and release notes - [docs/build-and-publish.md](docs/build-and-publish.md) - GitHub Actions CI/CD for hoist-react - [docs/build-and-deploy-app.md](docs/build-and-deploy-app.md) - building and deploying Hoist applications - [docs/development-environment.md](docs/development-environment.md) - local development setup - [docs/unit-testing.md](docs/unit-testing.md) - the unit test suite, and how to write tests ## Architecture at a Glance Hoist applications have three core artifact types: **Models**, **Components**, and **Services**. The [`XH`](core/XH.ts) singleton coordinates them and provides the top-level framework API, service access, and common operations. **Models** (`HoistModel`) are class-based objects that manage state and business logic. MobX decorators mark their properties as observable by components and other models. Models form hierarchies that reflect the structure and concerns of the application. This encourages a clean split between logic and presentation. See [/core/README.md](core/README.md). **Components** are React functional components wrapped via `hoistCmp` with Hoist support for MobX reactivity and model lookup. Components reference model properties in their render methods and call model methods in response to user actions, keeping rendering logic thin and declarative. See [/cmp/README.md](cmp/README.md). **Services** (`HoistService`) are singletons that encapsulate data access and app-wide business logic, persisting for the life of the application. An app installs services with `XH.installServicesAsync()`. It then accesses them on `XH`, for example `XH.myCustomService`. See [/svc/README.md](svc/README.md). Hoist includes a wide variety of carefully selected and integrated UI components, ready for immediate use. A central goal of the toolkit is a **managed, normalized, and integrated** set of patterns, APIs, and behaviors on top of the underlying library components. That layer lets the components work together and integrate with core Hoist services. To end users, they appear as one cohesive and highly polished system. **Element factories** are Hoist's preferred way to compose component trees using pure TypeScript/JavaScript, without JSX markup. All Hoist components export a factory alongside the component itself. Hoist also fully supports JSX, and you can use the two interchangeably. Both compile to `React.createElement()` calls. See [/core/README.md](core/README.md) for full details on element factories. **Desktop and mobile** platforms have separate component packages (`/desktop/` and `/mobile/`). Both share the same models, services, and utilities. See [/mobile/README.md](mobile/README.md) for mobile-specific guidance. ## Key Libraries and Dependencies Hoist React builds on a set of third-party libraries that XH selected, combined, and integrated. | Library | Notes | Link | |--------------|---------------------------------------------------------------------------------|-----------------------------------------------------| | React | Core technology for efficient componentization and rendering of modern web apps | [react.dev](https://react.dev/) | | MobX | Flexible, well-balanced state management and smart reactivity | [mobx.js.org](https://mobx.js.org/) | | Rsbuild | Fast Rspack-based bundler and dev server, with SWC for transpilation | [rsbuild.rs](https://rsbuild.rs/) | | AG Grid | High performance, feature-rich data grid | [ag-grid.com](https://www.ag-grid.com/) | | Blueprint | General purpose UI toolkit for data-dense desktop webapps | [blueprintjs.com](https://blueprintjs.com/) | | Highcharts | Proven, well-rounded charting and visualization library | [highcharts.com](https://www.highcharts.com/) | | RGL | Drag-and-drop grid layout for DashCanvas dashboards | [react-grid-layout](https://github.com/react-grid-layout/react-grid-layout) | | Router5 | Flexible routing solution | [router5.js.org](https://router5.js.org/) | | Font Awesome | Icons, icons, icons | [fontawesome.com](https://fontawesome.com/) | ### Library Licensing Considerations The majority of the libraries listed above and included within Hoist React as dependencies are open-source and fully free to use. Wherever possible, we aim to minimize exposure to third-party license costs and restrictions. The sections below list the exceptions to this rule. For these libraries, client application(s) using Hoist React must buy and register appropriate licenses. **AG Grid** uses a dual licensing model. The free community edition has a permissive MIT license, and the enterprise edition requires a [paid license](https://www.ag-grid.com/license-pricing). Applications wishing to use grids in Hoist React will need to provide a licensed version of AG Grid. Many applications will want to license the enterprise version for important extra functionality, including row grouping and tree grids. **Font Awesome** provides a greatly extended set of icons via its [Pro license](https://fontawesome.com/pro), and Hoist React references several of these icons. A Pro license includes access to a private npm repository to download the extended library, accessed via a unique URL. XH can configure appropriate access via npm configuration files or an enterprise npm repository proxy. **Highcharts HighStock** is the primary charting library in Hoist, and offers several [licensing and support options](https://shop.highsoft.com/highstock) for commercial use. Applications wishing to use charts in Hoist will need to provide a licensed version of Highcharts. ## TypeScript and Modern JavaScript Hoist React and Hoist applications are written in TypeScript. The codebase uses TC39 Stage 3 (`2023-11`) decorators, with TypeScript's `experimentalDecorators` flag off. SWC transpiles them within a standardized Rsbuild build process provided by [hoist-dev-utils](https://github.com/xh/hoist-dev-utils). Key language features used throughout Hoist React include: - **Decorators** - a core part of MobX integration and used within Hoist to define observable state, managed resources, and other key behaviors. See [/core/README.md](core/README.md) for reference. - **Classes** - including class fields and carefully considered uses of inheritance. - **Async/await** - for asynchronous operations, with custom Promise extensions for error handling, tracking, and timeouts. See [/promise/README.md](promise/README.md). - **ES Modules** - all dependencies imported via ES modules and resolved by Rsbuild. ## Testing Hoist React has a suite of unit tests, run with `pnpm test` on [Vitest](https://vitest.dev). The tests compile the library with the same SWC decorator settings that apps use. They run Hoist's real services against an in-memory fake of the hoist-core server. CI runs them on every pull request. See [docs/unit-testing.md](docs/unit-testing.md). ## Licensing and Support Currently, only Extremely Heavy develops Hoist. We intend it for XH and our client partners, to build enterprise web applications with XH's guidance and direction. That said, we released the toolkit under the permissive and open Apache 2.0 license. Any developer, XH client or not, can check out, use, modify, and otherwise explore Hoist and its source code. See [LICENSE.md](LICENSE.md) for the full license. We chose an open source license as part of our ongoing commitment to openness, transparency, and ease of use. It also clarifies and emphasizes that Hoist is suitable for a wide variety of enterprise software projects. Note that, at this time, we cannot commit to any particular support or contribution model outside of our consulting work. But if you are interested in Hoist, or think it might help a project, please [contact us](https://xh.io)! --- info@xh.io | https://xh.io Copyright 2026 Extremely Heavy Industries Inc. --- _Source: https://npm.io/package/@xh/hoist · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._