Installation

JOPS is a single ES module. You can load it from a CDN with two tags, or install it with npm and let the CLI set up your project. Both give you the same library.

CDN

The fastest way to start. Add these two tags to any HTML page:

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>

No build step, no npm, no bundler. Write your app files next to the page and serve the folder.

npm

For new projects that want local tooling and scaffolding:

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

npx jops-core init asks which template to start from, then:

• copies (vendors) the library to lib/jops-core.min.js in your project,
• creates or updates index.html with the import map and the module script,
• adds build and postinstall scripts to package.json.

The Quick start walks through the templates.

How the two tags work

The import map maps the bare name "jops-core" to the library file. That is what lets every module of your app write:

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

without a bundler resolving the name. The import map must be in the page before any module script that imports jops-core.

The module script loads the library and starts your app. Its data-app attribute points to your entry point.

App.js is your entry point: a file you provide that creates your root View and renders it to the page. Put it wherever you like and point data-app to it; without data-app, JOPS loads ./src/App.js. A minimal one:

src/App.js

import { View } from "jops-core";

export default class App {
  constructor() {
    const root = new View();
    (async () => {
      await root.loadLayout("./src/layout/mainlayout.html");
      root.render();
    })();
  }
}

Rendering into an element: data-root

By default the app renders into <body>. To render it into one element instead, and keep the rest of the page as it is, add data-root with the element’s id:

index.html

<div id="app"></div>
<script type="module" src="https://cdn.jsdelivr.net/npm/jops-core@latest/lib/jops-core.min.js" data-app="./src/App.js" data-root="app"></script>

Tip

To start and stop an app from your own code, for example inside a page another framework controls, use hosted mode with mount() and unmount(). See Hosted mode and Embedding.

Pinning a version

@latest always loads the newest release. For production, replace it with a specific version in both the import map and the script tag:

https://cdn.jsdelivr.net/npm/jops-core@1.1.10/lib/jops-core.min.js

JOPS stays backwards compatible within a major version, so jops-core@1 is a good middle ground: you get fixes and new features, and you decide when to move to the next major version.

Caution

Use the same URL in the import map and in the script tag. Two different URLs make the browser load two separate copies of the library.

With npm, the version is the one in your package.json. See Updating JOPS.

Paths in your app

Paths you give to JOPS (data-app, src=, layout=, loadLayout(), setStyle()) resolve against the HTML page, not against the file they are written in:

• Library from the CDN: write ./src/.... The app works at the site root and in a subfolder (example.com/my-app/).
• Vendored library (/lib/jops-core.min.js, from npx jops-core init): ./src/... and /src/... both resolve from the site root, so serve the app from the root of your server.

Other setups (Electron, Next.js, WordPress) have their own rules, described on each platform page.

Serve over HTTP

ES modules need an HTTP server

Open your project through a local server, not by double-clicking index.html. Browsers block import on file:// URLs.

npx serve

Any static server works. (Electron is the exception: it loads pages from file:// and JOPS works there. See Electron.)

Editor types with a CDN setup

Using the CDN does not mean you lose autocomplete. Add jops-core as a dev dependency:

npm i -D jops-core

Your editor picks up lib/jops-core.d.ts through the "types" field of the package, and shows inline docs for every class and method. Nothing from node_modules is loaded by the browser. More in Editor setup.

Next steps

Quick startScaffold a project from a template and run it.

Project structureWhat each generated file does.