@owizzo/dyn-engine-client-ts

React client for the owizzo Dynamic Engine. It renders the forms and tables described by the server, using Ozora components only.

Coming from version 1? See MIGRATION.md.

Installation

npm install @owizzo/dyn-engine-client-ts @owizzo/ozora @heroicons/react

Peer dependencies: React 19 (≥ 19.1.1), Tailwind CSS 4, @owizzo/ozora and @heroicons/react. Both @owizzo packages are served by npmjs, so the app's .npmrc must not point the scope to another registry:

@owizzo:registry=https://registry.npmjs.org/

Like Ozora, the library ships Tailwind classes, not compiled CSS. Add it to the app's Tailwind entry stylesheet:

@import "tailwindcss";
@import "@owizzo/ozora/index.css";
@import "@owizzo/dyn-engine-client-ts/styles.css";

The look comes from the Ozora theme: set the --ozora-* variables to brand it.

Usage

Wrap the app in the provider. It loads the component metadata from <host>/<baseUrl>/metadata:

import { DynComponentProvider } from "@owizzo/dyn-engine-client-ts"

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <DynComponentProvider host="https://api.example.com" baseUrl="api/dynamic-engine">
      {children}
    </DynComponentProvider>
  )
}

| Prop | Description | | ------------------ | ------------------------------------------------------------------------------ | | host | Backend URL. Default: http://localhost:8080. | | baseUrl | Path of the Dynamic Engine on the host. | | withCredentials | Send cookies with the requests. | | axiosInterceptor | Axios interceptors, e.g. for auth. The latest ones are used for every request. | | translation | A DynTranslator. Default: new DynTranslatorImpl("en"); de is included. | | uiComponents | Replaces parts of the UI, see below. Read once on mount. |

Then render components anywhere below it:

import { DynComponent, type DynComponentEvent, type DynComponentHandle } from "@owizzo/dyn-engine-client-ts"

export default function Page() {
  const table = useRef<DynComponentHandle>(null)
  return (
    <DynComponent
      ref={table}
      groupId="crm"
      componentId="customers"
      metadataPayload={{ tenant: 1 }}
      onEvent={(event: DynComponentEvent) => {
        if (event.type === "customer-saved") table.current?.reload()
      }}
    />
  )
}

Customizing the UI

Every building block is a component in the DynUi registry. Pass only what differs:

<DynComponentProvider
  uiComponents={{
    core: { components: { loader: { providerLoader: MyLoader } } },
    form: { inputs: { text: MyTextInput } },
    table: { columnComponents: { text: MyTextColumn } },
  }}
>

Inputs receive value, onChange(value), spec, validation and component; columns receive entry, spec, onEvent and component. The form and the table look them up by the field or column type in the server's spec.

The defaults are exported as DynUiComponents.

Development

npm install
npm run playground   # all field and column types against an in-memory backend
npm test
npm run typecheck
npm run build

Node ≥ 22.12 is required for the tooling.