Class-based SPAs. No bundler.

Write views the way you think

A JOPS screen is a class. Its layout is plain HTML, events bind to methods by name, and the framework calls lifecycle methods you already know from mobile development.

Profile.js

src/Profile.js

import { View, Store } from "jops-core";

export default class Profile extends View {
  async onLayout() {
    // the layout is in the DOM: read initial data
    this.user = await fetch("/api/me").then((r) => r.json());
  }

  onResume() {
    // the view comes to the front
    this.get("name").set(this.user.name);
  }

  onSave() {
    Store.singleton().set("user", this.user);
  }
}

main.html

src/layout/main.html

<header>My App</header>

<Router jops animation="slide">
  <view jops src="/src/Home.js" path="/home"></view>
  <view jops src="/src/Profile.js" path="/profile"
        layout="/src/layout/profile.html"></view>
</Router>

profile.html

src/layout/profile.html

<section class="profile">
  <h1 id="name"></h1>
  <button jops-event-bind onclick="onSave">Save</button>
</section>

index.html

index.html

<script type="importmap">
  { "imports": { "jops-core": "https://cdn.jsdelivr.net/npm/jops-core@latest/lib/jops-core.min.js" } }
</script>
<script type="module"
  src="https://cdn.jsdelivr.net/npm/jops-core@latest/lib/jops-core.min.js"
  data-app="./src/App.js"></script>

Why JOPS

No build step

Native ES modules and an import map. Edit a file, reload the page. Ship the same files you write.

Class-based views

Every screen and component extends View. Inheritance, composition and encapsulation work the way they do in Java, C#, Kotlin or Swift.

Android-style lifecycle

onLayout(), onResume(), onPause(), onBackPressed() — called by the framework at the moments you expect.

Routing built in

Flat hash routes declared in HTML, stacked views with navigate(), slide and fade transitions, and an opt-in screens mode for app-like layouts.

Shared data and events

A Store singleton for shared data and an EventBus with subscriptions that clean up when their view is destroyed.

Safe by default

The layout template tag escapes every value. Opt out explicitly with raw() for trusted HTML.

Runs where your users are

One framework, the same views, many hosts.

WebCDN or npm, any static server.

Hybrid mobileCordova, Ionic and Capacitor, with the Android back button handled.

Desktop (Electron)A JOPS SPA as the UI of an Electron app.

Next.jsA JOPS SPA inside a Next.js page, next to React.

WordPressThe JOPS plugin and its [jops] shortcode, with Elementor.

Any pageEmbed a JOPS app in an existing page with hosted mode.

Where JOPS fits

	No bundler	OOP classes	Declarative view nesting	No element registration
JOPS	✅	✅	✅	✅
Lit	✅	✅	⚠️ Web Components only	❌
Stimulus	✅	✅	❌	✅
Alpine.js	✅	❌	❌	✅
Angular	❌	✅	✅	✅
Svelte	❌ (compiler)	✅	✅	✅

JOPS is made for teams building internal tools, dashboards, embedded WebViews, hybrid mobile apps and desktop apps who want a structured, class-based front end without the bundler toolchain. It doesn’t replace React: in a Next.js app, a JOPS SPA runs next to your React pages and uses Next.js as its backend.

Start in a minute

npm init -y
npm install jops-core
npx jops-core init

Quick startCreate your first JOPS app from a template.

API referenceView, Router, Store, EventBus and every method.