Skip to content
mountly

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

Section titled “Runtime”
Terminal window
pnpm add mountly
# or
npm install mountly
# or
yarn add mountly

Adapter for widget code

Section titled “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.
Terminal window
pnpm add mountly-react   # or mountly-vue, mountly-svelte

The adapter declares the framework as a peer dependency. Install it yourself if the project doesn’t already have it:

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

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

Section titled “Optional: Tailwind preset”

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

Terminal window
pnpm add mountly-tailwind

See Tailwind integration.

CDN (no bundler)

Section titled “CDN (no bundler)”

For prototyping or static hosts, 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

Section titled “Via the CLI”

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

Terminal window
npx mountly init my-widget

See Quick start for what it produces.

Verify the install

Section titled “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 versions

Section titled “Tested versions”

These are the versions exercised in CI and the example matrix:

Framework Versions tested Adapter package
React 18.x, 19.x mountly-react
Vue 3.5.x mountly-vue
Svelte 4.x, 5.x mountly-svelte

Peer builds expect the host import map to pin matching react, react/jsx-runtime, and react-dom/client entries. Run mountly manifest validate or mountly doctor before deploy.

Tested npm path

Section titled “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

Section titled “Next”