Installation

mountly is a runtime plus optional framework adapters. Install depends on what the repo owns.

• A widget repo installs mountly, one adapter, and that framework.
• A host-only repo that only loads already-built widget bundles usually installs mountly only.
• A repo that both builds widgets and hosts them installs both sides.

Runtime

pnpm add mountly
# or
npm install mountly
# or
yarn add mountly

Adapter for widget code

Framework	Package	Notes
React	mountly-react	React 18 or 19.
Vue	mountly-vue	Vue 3.
Svelte	mountly-svelte	Auto-detects v4 (class) vs v5 (functional) component shape.
TSRX	mountly-tsrx	Adapts TSRX render/lifecycle output.

pnpm add mountly-react   # or mountly-vue, mountly-svelte, mountly-tsrx

The adapter declares the framework as a peer dependency — install it yourself if it isn’t already in the project:

pnpm add react react-dom         # for mountly-react
pnpm add vue                     # for mountly-vue
pnpm add svelte                  # for mountly-svelte

mountly-tsrx has no framework peer dependency. It expects your TSRX compiler output to expose either a render() object or mount/update/unmount lifecycle object.

Widget entry:

import { createWidget } from 'mountly-react'; // or mountly-vue / mountly-svelte
import Component from './Component';

export default createWidget(Component);

Host entry:

<signup-card trigger="idle" props='{"plan":"pro"}'></signup-card>

<script type="module">
  import { defineMountlyFeature } from 'mountly';

  defineMountlyFeature('/widgets/signup-card/dist/index.js');
</script>

The host does not need mountly-react, react, vue, or svelte unless it also builds the widget. The built widget bundle owns its framework runtime unless you intentionally externalize shared dependencies.

Optional: Tailwind preset

mountly-tailwind is a Tailwind v4 preset that ships design tokens you can opt into. It is not required.

pnpm add mountly-tailwind

See Tailwind integration.

CDN (no bundler)

For prototyping or static hosts, you can load mountly directly:

<script type="module">
  import { createOnDemandFeature } from 'https://cdn.jsdelivr.net/npm/mountly@0.1/dist/index.js';
  // …
</script>

For multi-widget pages, set up an import map so several widgets share one runtime — see installRuntime.

If the browser host imports mountly/* subpaths directly, map those subpaths too (for example mountly/attach, mountly/elements, mountly/shadow, mountly/assets, mountly/adapter) to concrete .js files.

Via the CLI

The fastest path is the scaffolder, which lays down the runtime, the React adapter, the build pipeline, and a working host page:

npx mountly init my-widget

See Quick start for what it produces.

Verify the install

import { createOnDemandFeature } from 'mountly';
import { createWidget } from 'mountly-react';

console.log(typeof createOnDemandFeature, typeof createWidget);
// "function" "function"

If both log "function", you’re set.

Tested npm path

The repo has an external-consumer Playwright test that packs the publish artifacts, installs them into a clean Vite project with npm install, builds the consumer app, and renders React, Vue, Svelte, and TSRX widgets through defineMountlyFeature. That test is the release gate for package install DX.

Next

• Quick start — scaffold your first widget.
• React adapter — createWidget patterns.
• API reference — every exported symbol.