@webnesting/sandframe

Sandframe is the modern WebNesting front-end runtime: a bundle of TypeScript-powered behavior plus a scoped SCSS design system. The package ships as a slim ESM build with a single CSS artifact so you can drop it into any Vite-, Rollup-, or Webpack-based project.

Installation

npm install @webnesting/sandframe

What you get

• Framework runtime – a lightweight FrameworkRuntime that boots once, exposes itself on window.sandframe, and lazily hydrates every Sandframe component via data attributes or explicit mounts.
• Ready-to-use components – accordions, tabs, slideshows, lazy loading, AJAX blocks, popovers, modals, headers, alerts, and more.
• First-class templating hooks – the runtime ships with loaders for Handlebars and Mustache. Consumers can register additional loaders through window.sandframe.loaders.
• Composable SCSS system – global primitives (variables, mixins, typography, grid, utilities) combined with component-level styles.
• TypeScript definitions – full type declarations for runtime APIs and component contracts.

Basic usage

Import the runtime and the compiled stylesheet once in your application entry point:

import "@webnesting/sandframe";
import "@webnesting/sandframe/style.css";

This bootstraps the default runtime which:

1. Sets up a shared FrameworkRuntime instance.
2. Registers every first-party component with sensible priorities.
3. Exposes window.sandframe.ready === true once initialization finishes and emits a sandframe:ready event on window.

Extending or composing components

import "@webnesting/sandframe";

const runtime = window.sandframe?.runtime ?? window.FrameworkRuntime;

runtime?.registerComponent({
  name: "component:my-widget",
  priority: 10,
  async loader(ctx) {
    const { initMyWidget } = await import("./my-widget");
    initMyWidget(ctx);
  }
});

Working with templates

Need to lazy-load template renderers (Handlebars, Mustache, or your own)? Use the loader hook the runtime installs:

const templateRenderer = await window.sandframe?.loaders?.templateRenderer?.();
templateRenderer?.render(/* ... */);

If you provide your own renderer, assign window.sandframe.loaders.templateRenderer before importing @webnesting/sandframe and the runtime will respect your implementation.

License

MIT