JOPS 1.1.2: embed a JOPS SPA in WordPress pages (Elementor and the block editor)

[arkwld]

Hi everyone 👋

JOPS 1.1.2 is out. As for what's new: we made a small detour before finishing our Electron integration and made a short stop for WordPress integration 🙂 A JOPS SPA can now run inside a WordPress page, next to the theme and the page's other content.

🧱 WordPress integration

WordPress stays what it is: the CMS, the theme, the editor and the backend. JOPS adds a class-based SPA with an Android-style lifecycle on the pages that need one. The app's files are served as static files from a folder in the WordPress root.

• One shortcode: [jops app="/jops-spa/src/App.js" id="jops-spa-root"] in Elementor's Shortcode widget, or the block editor's Shortcode block.
• The plugin includes the library: the page needs nothing else. No import map or script tags to write by hand.
• Clear ownership: WordPress owns the path (/my-page/), and JOPS owns the hash (/my-page/#details?id=7).
• Editor-friendly: in the Elementor editor the widget shows a placeholder, and the app runs on the published page.
• WordPress is the backend: the SPA calls the WordPress REST API with fetch("/wp-json/…").

We tested it on WordPress 7.1 with Elementor (4.3 and the 4.4 beta) and the Hello Elementor theme. The installs we tested were a wp-env project, a Docker WordPress, and a plain wp-admin upload.

📦 Install the plugin

Without npm (hosting with wp-admin only, XAMPP, MAMP, LocalWP, …):

1. Download jops-wordpress.zip. This link always serves the newest version.
2. In wp-admin, go to Plugins → Add New Plugin → Upload Plugin and choose the zip.
3. Activate the plugin.

With npm:

npx jops-core init --wp

This works in a wp-env project, where it adds the plugin to .wp-env.json. It also works anywhere inside a WordPress folder (Bedrock included), where it finds WordPress for you; --wp-root <path> points to it yourself.

Then put your app folder in the WordPress root (e.g. jops-spa/), use root-based paths (/jops-spa/src/...), and add the shortcode to a page. The README section "WordPress Integration" has the full guide. It also shows how to use an Elementor HTML widget without the plugin, and how to run a separate JOPS app from its own folder.

🧩 Also in this release

• View.removeSubViews(condition?): removes and destroys every subview, or only the ones that match, e.g. this.removeSubViews((v) => v instanceof Row).
• Fix: the jops:ready event now fires after jops-core has fully loaded. Calling mount() from the listener no longer fails.

⬆️ How to upgrade

npm:

npm i jops-core@latest
npx jops-core update

update also refreshes an installed JOPS WordPress plugin.

WordPress without npm: upload the newer zip the same way and choose Replace current with uploaded.

CDN: @latest serves 1.1.2. If you pin a version, use @1.1.2 in both the import map and the script tag.

---

Running WordPress sites? Tell us what you'd build with JOPS in Ideas. Questions go to Q&A, and bugs to Issues.

Previous announcement: JOPS 1.1.0 and Next.js · Full changelog: CHANGELOG.md · Release: v1.1.2