JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 17
  • Score
    100M100P100Q42089F
  • License ISC

Nuraly Visual App Builder Runtime - State management, handler execution, and component system with bundled micro-app support

Package Exports

  • @nuraly/runtime
  • @nuraly/runtime/components
  • @nuraly/runtime/handlers
  • @nuraly/runtime/micro-app/bundle
  • @nuraly/runtime/micro-app/bundle.css
  • @nuraly/runtime/micro-app/bundle.umd
  • @nuraly/runtime/redux
  • @nuraly/runtime/redux/actions
  • @nuraly/runtime/redux/handlers
  • @nuraly/runtime/redux/store
  • @nuraly/runtime/state
  • @nuraly/runtime/types
  • @nuraly/runtime/utils

Readme

@nuraly/runtime

Standalone runtime for executing Nuraly micro-apps in any web environment.

Documentation

Why MicroApp?

  • Declarative - Define your entire application as JSON object
  • Framework agnostic - Web Components work everywhere
  • Reactive by default - $variables automatically trigger UI updates
  • Isolated contexts - Multiple micro-apps run independently on the same page
  • AI friendly - LLMs maintain JSON structure more reliably than full implementations

Example

Live Demo

const appComponents = [
  {
    uuid: "comp-001",
    name: "Container",
    component_type: "vertical-container-block",
    application_id: "my-app",
    pageId: "page-001",
    root: true,
    childrenIds: ["comp-002", "comp-005"],
    style: { padding: "20px" },
    input: {},
  },
  {
    uuid: "comp-002",
    name: "Button",
    component_type: "button_input",
    application_id: "my-app",
    pageId: "page-001",
    root: false,
    event: {
      onClick: `$count = ($count || 0) + 1;`,
    },
    input: {
      label: { type: "string", value: "Click Me" },
    },
  },
  {
    uuid: "comp-005",
    name: "Counter Display",
    component_type: "text_label",
    application_id: "my-app",
    pageId: "page-001",
    root: false,
    input: {
      value: {
        type: "handler",
        value: `return "Count: " + ($count || 0);`,
      },
    },
  },
];

const appPages = [
  {
    uuid: "page-001",
    application_id: "my-app",
    name: "Home",
    url: "/home",
    is_default: true,
  },
];

Plain HTML, no framework required:

<div id="app"></div>

<script type="module">
  import "@nuraly/runtime";

  await customElements.whenDefined('micro-app');

  const microApp = document.createElement('micro-app');
  microApp.uuid = "my-app";
  microApp.page_uuid = "page-001";
  microApp.appComponents = appComponents;
  microApp.appPages = appPages;

  document.getElementById('app').appendChild(microApp);
</script>

License

MIT