PHPackages                             pinkcrab/elm-mount - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Admin Panels](/categories/admin)
4. /
5. pinkcrab/elm-mount

ActiveLibrary[Admin Panels](/categories/admin)

pinkcrab/elm-mount
==================

Mount compiled Elm apps into WordPress admin pages, shortcodes and other surfaces, with standard flags and nonce wiring.

1.0.0(1mo ago)00MITPHPPHP >=8.0.0CI passing

Since Apr 26Pushed 1mo agoCompare

[ Source](https://github.com/Pink-Crab/elm-mount)[ Packagist](https://packagist.org/packages/pinkcrab/elm-mount)[ Docs](https://pinkcrab.co.uk)[ RSS](/packages/pinkcrab-elm-mount/feed)WikiDiscussions master Synced 1w ago

READMEChangelog (1)Dependencies (12)Versions (6)Used By (0)

PinkCrab ElmMount
=================

[](#pinkcrab-elmmount)

[![Latest Stable Version](https://camo.githubusercontent.com/da03d120b8570a312830591717289851d25a1ba489bc27c9dbfc6ee1ef0f97a0/68747470733a2f2f706f7365722e707567782e6f72672f70696e6b637261622f656c6d2d6d6f756e742f76)](https://packagist.org/packages/pinkcrab/elm-mount)[![Total Downloads](https://camo.githubusercontent.com/79e611e2ae78f9b8982a3915c98676766fe0bbb9cf1287b6d59d56b1bd7d14b0/68747470733a2f2f706f7365722e707567782e6f72672f70696e6b637261622f656c6d2d6d6f756e742f646f776e6c6f616473)](https://packagist.org/packages/pinkcrab/elm-mount)[![License](https://camo.githubusercontent.com/b08f507026aac50ef34e731714708679aeb10d965effb4a6caf00b112d4089b7/68747470733a2f2f706f7365722e707567782e6f72672f70696e6b637261622f656c6d2d6d6f756e742f6c6963656e7365)](https://packagist.org/packages/pinkcrab/elm-mount)[![PHP Version Require](https://camo.githubusercontent.com/71473a9019ac33612ffb6f15503e8fafe2bdb54a5995e0f24d949ab1585eb76a/68747470733a2f2f706f7365722e707567782e6f72672f70696e6b637261622f656c6d2d6d6f756e742f726571756972652f706870)](https://packagist.org/packages/pinkcrab/elm-mount)[![GitHub contributors](https://camo.githubusercontent.com/7620093c9023922a40658f2fe47773ae43eeac310767ff53e69883d5238d27df/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f636f6e7472696275746f72732f50696e6b2d437261622f656c6d2d6d6f756e743f6c6162656c3d436f6e7472696275746f7273)](https://camo.githubusercontent.com/7620093c9023922a40658f2fe47773ae43eeac310767ff53e69883d5238d27df/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f636f6e7472696275746f72732f50696e6b2d437261622f656c6d2d6d6f756e743f6c6162656c3d436f6e7472696275746f7273)[![GitHub issues](https://camo.githubusercontent.com/a7acd4af01057895fb964a27cad49ec265fe84db2a39b789362ae226aec4f2f9/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732d7261772f50696e6b2d437261622f656c6d2d6d6f756e74)](https://camo.githubusercontent.com/a7acd4af01057895fb964a27cad49ec265fe84db2a39b789362ae226aec4f2f9/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732d7261772f50696e6b2d437261622f656c6d2d6d6f756e74)

[![WP 6.6 [PHP8.0-8.4] Tests](https://github.com/Pink-Crab/elm-mount/actions/workflows/WP_6_6.yaml/badge.svg)](https://github.com/Pink-Crab/elm-mount/actions/workflows/WP_6_6.yaml)[![WP 6.7 [PHP8.0-8.4] Tests](https://github.com/Pink-Crab/elm-mount/actions/workflows/WP_6_7.yaml/badge.svg)](https://github.com/Pink-Crab/elm-mount/actions/workflows/WP_6_7.yaml)[![WP 6.8 [PHP8.0-8.4] Tests](https://github.com/Pink-Crab/elm-mount/actions/workflows/WP_6_8.yaml/badge.svg)](https://github.com/Pink-Crab/elm-mount/actions/workflows/WP_6_8.yaml)[![WP 6.9 [PHP8.0-8.4] Tests](https://github.com/Pink-Crab/elm-mount/actions/workflows/WP_6_9.yaml/badge.svg)](https://github.com/Pink-Crab/elm-mount/actions/workflows/WP_6_9.yaml)

[![codecov](https://camo.githubusercontent.com/2fe4a3f2e182633b06c22fcec1b9b6cc866e41b441b70a7f8c1e53458f819d3c/68747470733a2f2f636f6465636f762e696f2f67682f50696e6b2d437261622f656c6d2d6d6f756e742f67726170682f62616467652e7376673f746f6b656e3d63575030735171473447)](https://codecov.io/gh/Pink-Crab/elm-mount)

Mount compiled Elm apps into WordPress admin pages, shortcodes and other surfaces. Handles the enqueue, the localized flags blob, and the REST nonce. Bundling your Elm is your job — this package takes the compiled `.js` and wires it into WordPress.

Part of a three-package set:

RolePackagePHP mount helper (this package)[`pinkcrab/elm-mount`](https://github.com/Pink-Crab/elm-mount)JS bootstrap[`@pinkcrab/elm-wp-bootstrap`](https://github.com/Pink-Crab/elm-wp-bootstrap)Elm package[`Pink-Crab/elm-wp`](https://github.com/Pink-Crab/elm-wp)Install
-------

[](#install)

```
composer require pinkcrab/elm-mount
```

Usage
-----

[](#usage)

Build an `Elm_App` once with your script + flags, then call `render()` (echoes) or `parse()` (returns a string) from any WordPress callback that produces output — admin page, shortcode, meta box, widget, REST handler, template part. The same `$app` works for all of them.

```
use PinkCrab\ElmMount\Elm_App;

$app = Elm_App::create( 'my_settings' )
    ->script( plugin_dir_url( __FILE__ ) . 'build/main.js' )
    ->flags( [
        'pageTitle' => __( 'My Settings', 'td' ),
        'canEdit'   => current_user_can( 'manage_options' ),
    ] );

// Admin page / meta box — echo
add_submenu_page(
    'options-general.php',
    'My Settings',
    'My Settings',
    'manage_options',
    'my-settings',
    fn() => $app->render()
);

// Shortcode — return string
add_shortcode( 'my_app', fn() => $app->parse() );
```

Both `render()` and `parse()` enqueue the script, localize the flags blob on `window.my_settings`, and produce `` for Elm to attach to. The mount node id defaults to `{handle}-root`; override with `->mount_node( 'custom-id' )` if needed.

Your compiled Elm bundle reads `window.my_settings` and mounts into `#my_settings-root` — [`@pinkcrab/elm-wp-bootstrap`](https://github.com/Pink-Crab/elm-wp-bootstrap) handles that plumbing automatically.

Contract
--------

[](#contract)

This section is the **authoritative spec** shared by all three packages. Any change here is a contract bump and must be mirrored in the other two repos in lockstep.

### Flags blob

[](#flags-blob)

Emitted via `wp_localize_script( $handle, $handle, $blob )`. The JavaScript side reads it from `window.` and hands it to Elm as flags.

```
{
  "restRoot":     "https://example.test/wp-json/",
  "restNonce":    "abc123...",
  "restNamespace":"wp/v2",
  "ajaxUrl":      "https://example.test/wp-admin/admin-ajax.php",
  "ajaxNonce":    "def456...",
  "mountNode":    "my_settings-root",
  "locale":       "en_GB",
  "currentUser": {
    "id":          1,
    "displayName": "Glynn Quelch",
    "roles":       ["administrator"],
    "capabilities":["manage_options", "edit_posts"]
  },
  "pluginData": {
    "pageTitle": "My Settings",
    "canEdit":   true
  }
}
```

Notes:

- `restNonce` is minted from the `wp_rest` action and is what `wp.apiFetch` needs.
- `ajaxNonce` is minted from a package-specific action (one per handle) for the legacy `admin-ajax.php` path.
- `pluginData` is the only free-form section — user-supplied flags via `->flags( [...] )`.
- `capabilities` is a UI hint for Elm to disable buttons etc; **never trust it for authorisation** (server-side checks are the real gate).

### Port names

[](#port-names)

The JS bootstrap and the Elm package must agree on these names. Changing any is a contract break.

DirectionPort namePurposeElm → JS`wpApiFetch`Outbound REST call via `wp.apiFetch`. Payload: `{ id, method, path, body? }`.JS → Elm`wpApiFetchResult`Paired response. Payload: `{ id, ok, status, body }`.Elm → JS`wpNotice`Show an admin notice. Payload: `{ kind: "success"|"error"|"info"|"warning", message }`.Elm → JS`copyToClipboard`Copy text to clipboard. Payload: `string`.`id` on `wpApiFetch` / `wpApiFetchResult` is a string correlation id the Elm side generates so multiple in-flight requests can be matched to their responses.

### Versioning

[](#versioning)

All three packages share a major version. Within `1.x`, minor and patch versions can move independently per package — compatibility is guaranteed across the same major.

`pinkcrab/elm-mount``@pinkcrab/elm-wp-bootstrap``Pink-Crab/elm-wp``1.x``1.x``1.x`License
-------

[](#license)

MIT © PinkCrab

###  Health Score

36

—

LowBetter than 79% of packages

Maintenance91

Actively maintained with recent releases

Popularity0

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity42

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

44d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/d82b9e8ef7816d3d0b9812ad233f61f6a313f529e0ac85721781b46ad292e1ea?d=identicon)[glynnquelch](/maintainers/glynnquelch)

---

Top Contributors

[![gin0115](https://avatars.githubusercontent.com/u/28779094?v=4)](https://github.com/gin0115 "gin0115 (10 commits)")

---

Tags

wordpressadminshortcodeelm

###  Code Quality

TestsPHPUnit

Static AnalysisPHPStan

Type Coverage Yes

### Embed Badge

![Health badge](/badges/pinkcrab-elm-mount/health.svg)

```
[![Health](https://phpackages.com/badges/pinkcrab-elm-mount/health.svg)](https://phpackages.com/packages/pinkcrab-elm-mount)
```

###  Alternatives

[wecodemore/current-admin-info

Displays info about the current admin screen and its globals, contextual hooks, etc.

852.7k](/packages/wecodemore-current-admin-info)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)