Embed Apps in React

Native embedding in your React-based Web App

First, install the Lowcoder SDK. Lowcoder publishes with every Version Release a new version of Lowcoder SDK too. https://www.npmjs.com/package/lowcoder-sdk


yarn add lowcoder-sdk


npm install lowcoder-sdk

Integrate an Lowcoder App or Module into your existing app

  1. Publish your app/module in Lowcoder.

  2. Set the app/module's access privilege as public.

  3. Add code in your existing app as below.

Import CSS styles

import "lowcoder-sdk/dist/style.css";

For React app:

import { LowcoderAppView } from "lowcoder-sdk";

<LowcoderAppView appId="{YOUR_APPLICATION_ID}" />;


NameTypeDescriptionDefault value



The app's id is required!




The api base url of the Lowcoder Instance.



(eventName: string) => void

(Only for Modules) Triggered when module's custom event is triggered. Works only when the app is a module.



(output: any) => void

(Only for Modules) Triggered when module's outputs change. Works only when the app is a module.


Modules are special Apps, which make bidirectional communication between your app and the Lowcoder Module possible. You can send data to Module-Inputs and receive Data back via Module Outputs. Also, you can trigger Methods and listen to Events.

Invoke module methods

import { useRef } from "ref";
import { LowcoderAppView } from "lowcoder-sdk";

function MyExistingAppPage() {
  const appRef = useRef();
  return (
      <LowcoderAppView appId={YOUR_APPLICATION_ID} ref={appRef} />;
      <button onClick={() => appRef.current?.invokeMethod("some-method-name")}>
        Invoke method

For vanilla js:

import { bootstrapAppAt } from "lowcoder-sdk";

const node = document.querySelector("#my-app");

async function bootstrap() {
  const instance = await bootstrapAppAt(YOUR_APPLICATION_ID, node);

  // set module inputs
  instance.setModuleInputs({ input1: "xxx", input2: "xxx" });

  // invoke module methods
  instance.setModuleInputs({ input1: "xxx", input2: "xxx" });

  // listen module event trigger
  instance.on("moduleEventTriggered", (eventName) => {
    console.info("event triggered:", eventName);

  // listen module output change
  instance.on("moduleOutputChange", (data) => {
    console.info("output data:", data);

Last updated


© Lowcoder Software LTD