Examples

Live demo

JOPS Hello WorldA minimal starter app showing views, layouts, routing and event binding.

The demo is the Hello World template running as is. Open your browser’s developer tools to see the modules and layout files it loads: there is no bundle.

Templates as examples

Every template of npx jops-core init is a complete, working project you can read, run and change. Create one in an empty folder:

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

Template	Shows
1. Empty	The smallest app: an `App.js` entry point and one root layout.
2. Hello World	A header and footer, a `Router` with five routes and a slide animation, views that add sub-views in code (`Features.js`, `DataSection.js`), a view with an HTML layout file and a bound form submit that writes to the `Store` (`Form.js`), styles and images.
3. Next.js JOPS Embedded SPA	A Next.js app with a React-only page and a page hosting a JOPS SPA: a Router with a login screen and a quotes list with status filters, loading data from a Next.js Route Handler.
4. Electron JOPS Desktop App	An Electron Forge app whose UI is a JOPS SPA: a sidebar, a `Router` in screens mode, and two calls to the main process through the preload bridge.

Quick startCreate a project from a template and run it.

Project structureA tour of the Empty and Hello World templates.

Next.jsHow the Next.js template is put together.

ElectronHow the Electron template is put together.

The templates are also in the public repository on GitHub.