@dynamic-widget/js

Vanilla JavaScript host for Dynamic Widget — createDynamicWidget for runtime widgets and createSchemaDesigner for a visual form builder, built on @dynamic-widget/core and optional @dynamic-widget/enterprise.

Current release: 1.2.0 — Depends on @dynamic-widget/core ^1.2.0. See monorepo CHANGELOG.

Live demo & docs: https://dynamic-widget-app.vercel.app/ — try the interactive demo, /designer, or read the vanilla JS API guide.

What's new in 1.2.0

• createSchemaDesigner — toolbar (templates, undo/redo, import), field rail, live preview, import modal with merge/replace summary.
• getController() — headless SchemaDesignerController for custom UIs.
• Full field-type modal: prefer Angular dw-schema-designer or React SchemaDesigner for richest editing.

Adds @dynamic-widget/core automatically. Enterprise is an optional peer — install @dynamic-widget/enterprise when using enterpriseLicenseKey.

Keywords: dynamic-widget javascript vanilla-js schema-driven forms dashboard web-components

Install

npm install @dynamic-widget/js @dynamic-widget/themes
# Adds @dynamic-widget/core automatically.
# Optional enterprise:
npm install @dynamic-widget/enterprise

Usage

import { createDynamicWidget } from "@dynamic-widget/js";
import "@dynamic-widget/themes/dynamic-widget.css";

const host = document.getElementById("app")!;

const instance = createDynamicWidget(host, {
  schema: {
    widgets: [{ id: "notes", type: "textarea", field: "notes", label: "Notes" }],
  },
  values: {},
  onValuesChange: (values) => console.log(values),
  onEvent: (event) => console.log(event),
  enterpriseLicenseKey: "",
  dark: false,
});

// Later:
instance.refresh();
instance.api.validate();
instance.destroy();

// Change licence at runtime (recreates engine with updated rules / wizard flags)
instance.setEnterpriseLicenseKey("YOUR-LICENSE-KEY");

i18n (language dropdown)

Wire a <select> (or similar) to update locale and recreate the widget, or pass locale on each createDynamicWidget call:

let locale = "en";
const schema = {
  defaultLocale: "en",
  locales: { en: { "form.notes": "Notes" }, de: { "form.notes": "Notizen" } },
  widgets: [{ id: "notes", type: "textarea", field: "notes", labelKey: "form.notes" }]
};

document.querySelector("#lang")!.addEventListener("change", (e) => {
  locale = (e.target as HTMLSelectElement).value;
  instance.destroy();
  instance = createDynamicWidget(host, { schema, locale, values, onValuesChange });
});

See i18n guide.

Async binding

import { createFetchDataProvider } from "@dynamic-widget/core";

const instance = createDynamicWidget(host, {
  schema,
  dataProvider: createFetchDataProvider(),
  onValuesChange: (v) => console.log(v)
});

optionsFrom on select/radio nodes; URL templates support {field} placeholders. Demo: Async binding at /demo.

Also supports Community markdown and fileUpload widgets; enterprise virtual tables via enterpriseLicenseKey.

Re-exports all public symbols from @dynamic-widget/core.

Visual schema designer

import { createSchemaDesigner } from "@dynamic-widget/js";
import "@dynamic-widget/themes/dynamic-widget.css";

const designer = createSchemaDesigner(document.getElementById("designer")!, {
  schema: { title: "My form", widgets: [] },
  onSchemaChange: (schema) => console.log(schema),
  enterpriseLicenseKey: "",
  locale: "en",
});

designer.getController().applyPreset("contact-form");
designer.refresh();
designer.destroy();

Import dynamic-widget.css only — it already @imports schema designer styles. Optional: @dynamic-widget/themes/schema-designer.css if you skip the main bundle.

See schema designer guide.

createSchemaDesigner(container, options)

| Option | Type | Description | | --- | --- | --- | | schema | WidgetSchema | Initial form schema. | | values | WidgetValues | Preview values. | | onSchemaChange | (schema) => void | Schema updates (edit, import, undo). | | onValuesChange | (values) => void | Preview value changes. | | palette | SchemaDesignerPaletteGroup[] | Custom palette groups. | | readonly | boolean | Disable editing. | | embedded | boolean | Compact layout. | | previewTitle | string | Preview heading. | | showJsonPanel | boolean | JSON panel (default true). | | locale | string | Preview locale. | | dataProvider | DataProvider | optionsFrom in preview. | | enterpriseLicenseKey | string | Chart/plugin preview flags. | | dark | boolean | Dark preview theme. |

Returns { getController(), refresh(), destroy() }. Use getController() for undo, redo, previewImportSchemaJson, importSchemaJson, etc.

API

createDynamicWidget(container, options)

| Option | Type | Description | | --- | --- | --- | | schema | WidgetSchema | Required. Root widget tree. | | locale | string | Locale tag for labelKey resolution (ar enables RTL when unset on schema). | | dataProvider | DataProvider | Fetches JSON for optionsFrom URLs. | | values | WidgetValues | Initial field values. | | onValuesChange | (values) => void | Value change callback. | | onEvent | (event) => void | Widget / tab events. | | enterpriseLicenseKey | string | Registers license via enterprise package. | | dark | boolean | Dark theme. | | rules | WidgetRule[] | Rules engine input. | | onToast | (message) => void | Toast callback. |

Returns:

interface DynamicWidgetInstance {
  api: WidgetApi;
  refresh(): void;
  destroy(): void;
}

Browser support

Requires a modern browser with DOM APIs (Chrome, Edge, Firefox, Safari). Intended for SPA pages, embedded widgets, and legacy stacks without React or Angular.

Related packages

• @dynamic-widget/core — framework-agnostic engine (auto-installed as a dependency).
• @dynamic-widget/themes — shared CSS.
• @dynamic-widget/enterprise — optional licensing and gated APIs.
• @dynamic-widget/react — React component on the same core.
• @dynamic-widget/angular — Angular standalone component on the same core.

License

MIT