+
+ No matching sections. Try a function name, an option or a shorter
+ phrase.
+
+
+ The embedding interface
+
+ A host owns the page and its navigation. Lowcoder owns the app
+ rendered inside one element. For communication, build a
+ module and define its inputs, outputs, events and
+ methods in the editor. Their names form your integration contract.
+
+
+ A regular Lowcoder app can also be mounted, but these module APIs do
+ not give the host arbitrary access to its components, queries or
+ internal state.
+
+
+
+ Use the quickstart for your first embed or
+ jump to the
+ CRM, website, ticketing and POS recipes.
+ This reference covers the complete native embedding interface.
+ Component builders, editor controls, datasource plugin APIs and
+ re-exported utilities in the broader npm package are separate
+ extension APIs.
+
+
+
+ Choose a distribution
+
+ Verified 11 October 2026 The
+ hosted browser SDK and npm package are released separately. This
+ page describes the current hosted SDK, with npm differences called
+ out below.
+
+
+
+ The npm tarball was checked directly against the
+ published 3.0.0 metadata
+ and package contents. Its bundled declarations also omit
+ webUrl and orgId even though the runtime
+ accepts them. Do not infer installed behavior from the repository
+ version number alone.
+
+
+ For the complete lifecycle documented here, use the hosted browser
+ interface. npm users should pin and test their installed version
+ before adopting newer source APIs. The npm build needs a bundler,
+ React and React DOM (declared peers: ≥18), and
+ import 'lowcoder-sdk/dist/style.css'. It is not a
+ standalone script-tag build. Import it only on the client in
+ server-rendered applications.
+
+
+
+ LowcoderSDK.ready
+
+
JavaScript
+
const sdk = await LowcoderSDK.ready;
+// sdk.mount, sdk.unmount and sdk.scan are now available.
+
+ Promise<LowcoderSDK> · Browser only
+
+
+ Resolves after the initial SDK scripts have loaded and the mount API
+ exists. It does not wait for apps discovered by the automatic markup
+ scan, component rendering or queries.
+
+
+ Rejects if an initial chunk fails to load or initialization does not
+ install the mount API. Catch the promise to show a retry message. A
+ repeated bundle.js tag reuses an existing loader and
+ its promise; it does not reset a failed load. After correcting a
+ network or policy failure, reload the page.
+
+
+
+ LowcoderSDK.mount()
+
+
JavaScript
+
const sdk = await LowcoderSDK.ready;
+const app = await sdk.mount("#customer-panel", {
+ appId: "YOUR_PUBLISHED_MODULE_ID",
+ moduleInputs: { customerId: "customer-42" }
+});
+
+ mount(target: string | Element, options: MountOptions):
+ Promise<AppViewInstance>
+
+
+
+ Creates a React root in the element and returns the instance after
+ definition loading and scheduling its render. Calling mount again on
+ an element managed by this facade waits for the previous
+ initialization and destroys its instance before replacing it.
+
+
+ Rejects for a missing/invalid target, invalid selector, missing app
+ ID or an initialization failure. Failed initialization cleans up its
+ root. An initial API 401 instead renders the built-in
+ login prompt and resolves; resolution is not proof of authorization.
+ Later component or query errors are outside this promise.
+
+
+ Give the container dimensions through your host CSS. The SDK has no
+ width, height, timeout or
+ AbortSignal mount options.
+
+
+
+ LowcoderSDK.unmount()
+
+
JavaScript
+
const container = document.querySelector("#customer-panel");
+await LowcoderSDK.unmount(container);
+container.remove(); // The host owns removal of the element.
+
+ unmount(target: string | Element): Promise<void>
+
+
+ Waits for a mount tracked by this browser facade, destroys the
+ instance and removes its tracking entry. The container stays in the
+ DOM. An unknown or already unmounted element is a no-op. A pending
+ initialization failure can reject this promise; an invalid CSS
+ selector can also reject.
+
+
+ Unmount before removing the element, or keep and pass the element
+ reference. A selector cannot find a detached element. Instances
+ created directly with bootstrapAppAt are not tracked
+ here.
+
+
+
+ Every initialization option
+
+
+ appId is additionally required by browser mount and
+ React, and is the first argument to bootstrapAppAt. Use
+ the actual ID of your published app; the local demo uses a synthetic
+ ID because it supplies its own complete definition.
+
+
+ Supplying appDsl skips the initial app-definition
+ request and JavaScript datasource discovery. It does not promise
+ offline execution: queries, remote components, assets or missing
+ nested definitions may still use the network. Keep DSL compatible
+ with the runtime that loads it.
+
+
+ There are no public token, headers,
+ fetch, theme, onReady or
+ onError initialization options.
+
+
+
JavaScript
+
const app = await LowcoderSDK.mount("#module", {
+ appId: "YOUR_PUBLISHED_MODULE_ID",
+ baseUrl: "https://lowcoder.example.com",
+ webUrl: "https://lowcoder.example.com",
+ orgId: "YOUR_WORKSPACE_ID",
+ moduleInputs: { customerId: "customer-42" }
+});
+
instance.ready
+
+
JavaScript
+
await app.ready; // Already fulfilled when hosted sdk.mount() returns.
+
+ Promise<void> · Hosted/current source; absent in
+ npm 3.0.0
+
+
+ Waits for initial definition loading (and datasource discovery when
+ applicable), then schedules rendering. It rejects on initial loading
+ failures. It does not wait for a React commit, lazy
+ components, queries or callable module methods.
+
+
+ There is no universal “everything rendered” event. If the host needs
+ business readiness, design a named output or event in the module,
+ such as dataLoaded. That name is your contract, not a
+ built-in SDK event. Event subscriptions do not replay previous
+ values; an early event can be missed. Do not use a one-time startup
+ event as your only readiness guarantee.
+
+
+
+
+ instance.on()
+
+
JavaScript
+
let latestOutput;
+const stopOutputs = app.on("moduleOutputChange", (output) => {
+ latestOutput = output;
+ console.log("Current module outputs", output);
+});
+const stopEvents = app.on("moduleEventTriggered", (eventName) => {
+ console.log("Module event", eventName);
+});
+
+// When these subscriptions are no longer needed:
+stopOutputs();
+stopEvents();
+
+ on(event, handler?): () => void
+
+
+
+ Each instance has one handler per event type.
+ Registering another replaces the previous one. Fan out within your
+ own handler if several host features need notifications. The
+ returned function removes that subscription; there is no separate
+ off() method.
+
+
+ In the hosted SDK, an old unsubscribe function cannot remove a newer
+ replacement handler. npm 3.0.0 does not have that safeguard. Calling
+ on(event, undefined) returns a no-op function; it does
+ not clear a previous handler.
+
+
+ Subscriptions do not replay a current snapshot. Register immediately
+ after mounting, but do not assume the first output or startup event
+ cannot have occurred already. To exchange results, expose named
+ outputs. There is no atomic event-with-data payload or guaranteed
+ ordering between an event and a separate output update.
+
+
+ Only the two names above are instance events.
+ lowcoder:ready and lowcoder:error belong
+ to the separate
+ browser DOM event interface.
+
+
+
+ instance.invokeMethod()
+
+
JavaScript
+
// In the Lowcoder editor, define a method named "selectCustomer"
+// with parameters in this order: customerId, focusDetails.
+// Call after the user can interact with the rendered module.
+app.invokeMethod("selectCustomer", ["customer-42", true]);
+
+ invokeMethod(methodName: string, params: any[] = []): void
+
+
+ Runs an action exposed as a named module method. Arguments are
+ positional, in the order configured in the editor. A missing,
+ undefined or null argument uses that
+ parameter’s default; 0, false and
+ "" are retained. Extra arguments are ignored.
+
+
+ The name must identify a configured module method, not an arbitrary
+ component function or query. An unknown method, a normal app instead
+ of a module, or a call before the module root exists silently does
+ nothing. Calls are not queued.
+
+
+ No return-value promise. The SDK discards the
+ internal action result.
+ await app.invokeMethod(...) does not wait for the
+ action to finish and does not catch its asynchronous errors. Model
+ completion, results and failures as module outputs/events.
+
+
+ Use a request ID in your module contract when correlating
+ asynchronous work with host actions. For actions such as saving,
+ submitting or charging, perform authoritative validation and state
+ changes on your backend.
+
+
+
+ instance.destroy()
+
+
JavaScript
+
app.destroy(); // Synchronous; safe to call more than once.
+
+ destroy(): void · Hosted/current source; absent in npm
+ 3.0.0
+
+
+ Clears instance handlers, releases the module reference and unmounts
+ its React root. It leaves the host element in place. Further input
+ updates and method calls have no effect.
+
+
+ It does not cancel outstanding HTTP requests or undo shared SDK
+ configuration, global CSS or page-level state. For instances owned
+ by the browser facade, prefer
+ await LowcoderSDK.unmount(container), which also clears
+ that facade’s tracking entry. Do not manually destroy an instance
+ owned by a React wrapper that is managing its lifecycle.
+
+
+
+ Instance & TypeScript types
+
+ AppViewInstance<I, O> represents an embedded app.
+ I describes its input-name map and O its
+ output object. Keep the instance returned by a factory; do not
+ construct a second React root on an element already owned by an
+ embed.
+
+
+ The runtime class constructor is
+ new AppViewInstance(appId, node, root, options = {}),
+ where root is a React DOM Root. It is a
+ low-level implementation surface: use bootstrapAppAt or
+ browser mount so component registration, root creation
+ and initialization cleanup happen together.
+
+
+ -
+
AppViewInstanceOptions<I>: the six
+ initialization options, with moduleInputs?: I.
+
+ -
+
LowcoderAppViewProps<I, O>: those options plus
+ appId, className and the two callbacks.
+
+ -
+
OutputChangeHandler<O> = (output: O) => void.
+
+ -
+
EventTriggerHandler = (eventName: string) => void.
+
+
+
+ InputMap, OutputMap and MountOptions in this reference describe the
+ shapes of values; they are not named npm exports. Generic types do
+ not validate values at runtime. The browser facade is a script
+ global, not an npm export. Published npm 3.0.0 has incomplete
+ declaration routing as well as the missing members listed in the
+ distribution table; verify your toolchain instead of assuming
+ current source declarations are installed.
+
+
+
+ bootstrapAppAt()
+
+
JavaScript
+
import { bootstrapAppAt } from "lowcoder-sdk";
+import "lowcoder-sdk/dist/style.css";
+
+const app = await bootstrapAppAt(
+ "YOUR_PUBLISHED_MODULE_ID",
+ document.getElementById("customer-panel"),
+ { moduleInputs: { customerId: "customer-42" } }
+);
+
+ bootstrapAppAt(appId: string, node: Element, options = {}):
+ Promise<AppViewInstance>
+
+
+ The low-level imperative factory exported by the npm package. Unlike
+ browser mount, it requires an element, not a selector.
+ Supply the same initialization options, with appId as
+ the first argument. The browser bundle also exposes the broader
+ exports through window.$lowcoder_sdk; prefer
+ LowcoderSDK.mount for browser integrations.
+
+
+ In current source, the factory checks for a node, waits for
+ instance.ready, and cleans up on initialization
+ failure. It does not track or replace an existing root on that
+ element. The published npm 3.0.0 factory returns before definition
+ loading finishes, and its instance has neither
+ ready nor destroy. Its declaration
+ requires the options argument, so pass {} when using
+ defaults. Use the hosted facade for screens requiring the documented
+ cleanup lifecycle until an npm release includes those fixes.
+
+
+
+ LowcoderAppView
+
+
React / JSX
+
import { useMemo } from "react";
+import { LowcoderAppView } from "lowcoder-sdk";
+import "lowcoder-sdk/dist/style.css";
+
+export function CustomerPanel({ customerId }) {
+ const inputs = useMemo(() => ({ customerId }), [customerId]);
+ return (
+ <div style={{ minHeight: 360 }}>
+ <LowcoderAppView
+ appId="YOUR_PUBLISHED_MODULE_ID"
+ className="customer-module"
+ moduleInputs={inputs}
+ onModuleOutputChange={(output) => console.log(output)}
+ onModuleEventTriggered={(name) => console.log(name)}
+ />
+ </div>
+ );
+}
+
Lifecycle in current source
+
+ Changes to appId, baseUrl,
+ webUrl or orgId recreate the instance. A
+ new moduleInputs object updates inputs; callback prop
+ changes replace subscriptions. Changes to appDsl or
+ moduleDslMap alone do not reload the app: change the
+ React key when replacing a supplied definition. Cleanup
+ disposes the owned instance.
+
+
+ These lifecycle fixes are not in npm 3.0.0. Do not
+ rely on cleanup or backend switching described above in that
+ published version. The npm React wrapper also does not provide the
+ new instance readiness/disposal API.
+
+
+ Arbitrary HTML props such as style and
+ id are not forwarded; put them on your host wrapper.
+ There is no public onError prop. The current wrapper
+ logs initial mount failures to the console. Use the hosted
+ imperative API if the host needs to own loading, failure and retry
+ UI.
+
+
+ The wrapper uses the same single event-handler slots as
+ instance.on. Registering a second handler through the
+ ref can replace the corresponding callback prop subscription.
+
+
+
+ LowcoderSDK.scan()
+
+
JavaScript
+
await LowcoderSDK.ready;
+await LowcoderSDK.scan(document.getElementById("new-widgets"));
+
+ scan(root: ParentNode = document): Promise<void[]>
+
+
+ Finds descendant .lowcoder-module-container elements
+ and mounts their display elements. The root itself is not included.
+ The browser entry scans the document automatically at DOM readiness.
+ Call this again for markup inserted later.
+
+
+ Skips containers without a display element and display elements
+ already tracked by the facade. It returns an array of undefined
+ results, not app instances. Individual JSON or mount errors are
+ caught and emitted on the affected container as
+ lowcoder:error; the scan can resolve even if an embed
+ failed. An invalid root can reject.
+
+
+ Listen directly to each container for its events. Use explicit mount
+ when you need an instance, individual failure handling or lifecycle
+ control.
+
+
+
+ Declarative HTML contract
+
+
HTML
+
<div class="lowcoder-module-container" id="customer-widget">
+ <input type="hidden" class="module-id" value="YOUR_PUBLISHED_MODULE_ID">
+ <input type="hidden" class="module-input" value='{"customerId":"customer-42"}'>
+ <input type="hidden" class="locoder-backend-url" value="https://api-service.lowcoder.cloud">
+ <input type="hidden" class="locoder-frontend-url" value="https://app.lowcoder.cloud">
+ <input type="hidden" class="locoder-org-id" value="YOUR_WORKSPACE_ID">
+ <div class="lowcoder-module-display"></div>
+</div>
+<script src="https://sdk.lowcoder.cloud/bundle.js"></script>
+
+ The historical spelling locoder-… is required. Changing
+ a hidden field after mounting does not update that instance; the
+ scanner skips existing mounts. Unmount its display element before
+ scanning again, or use explicit mount and
+ setModuleInputs.
+
+
+ The scanner also calls optional globals
+ window.opChange(output) and
+ window.onModuleEventTriggered(eventName). They are
+ shared across all scanned embeds and carry no instance identity.
+ Prefer listeners on the individual container. A throwing global
+ callback can interrupt subsequent container event delivery.
+
+
+
+ Browser DOM events
+
+
+
JavaScript
+
const container = document.getElementById("customer-widget");
+container.addEventListener("lowcoder:output", (event) => {
+ console.log(event.detail);
+});
+container.addEventListener("lowcoder:error", (event) => {
+ console.error("This embed failed", event.detail);
+});
+
+ These CustomEvents do not bubble. Register on the
+ stated target before the event can fire. Explicit
+ mount() does not emit the scanner’s container events;
+ subscribe on its returned instance instead. Prefer the ready promise
+ to a window readiness listener that could be attached too late.
+
+
+
+ Authentication & deployment boundaries
+
+ The initial app request uses credentials/cookies. An initial
+ 401 displays a built-in login prompt. Login opens
+ {webUrl}/user/auth/login, or
+ {webUrl}/org/{orgId}/auth/login when a workspace is
+ supplied. The prompt’s Refresh action reloads the
+ entire host page. Other initial failures, including
+ 403, reject hosted mounting.
+
+
+ Configure backend CORS and cookie settings for the actual host
+ origin, and test the browser’s cross-site cookie behavior. CORS on
+ the SDK’s static files does not grant access to the Lowcoder API.
+ There is no public bearer-token option, request-header hook, logout
+ method or automatic transfer of your host’s SSO session.
+
+
+ Multiple embeds can coexist, but the runtime shares configuration,
+ Redux state, history and CSS. Use one Lowcoder deployment per page.
+ Passing a different backend to each instance does not provide
+ independent isolation. Native DOM integration is not a Shadow DOM or
+ CSS sandbox; test host styles, overlays and routing.
+
+
+ To self-host, serve bundle.js with its complete emitted
+ asset directory. The loader resolves chunks relative to its own URL.
+ Retain old hashed assets during upgrades so already open pages can
+ still load their lazy chunks. The loader propagates its script nonce
+ to initial scripts; this is not a guarantee that the full runtime
+ supports your strict CSP.
+
+
+
+ Troubleshooting by symptom
+
+
+ This reference is derived from the browser facade, loader,
+ AppViewInstance, bootstrap factory, React wrapper and
+ module input/method implementations in
+ the Lowcoder client source. The distribution notes record the separately inspected npm
+ artifact. Repository changes and published artifacts can differ; the
+ version table makes that distinction explicit.
+
+
+
+ 
+ Built visually.