Skip to main content

Prefabs

In WaveMaker, Prefabs are reusable, distributable components that encapsulate UI, business logic, and service integration into a single modular unit. They act as custom widgets or composite components that can be independently developed, tested, and embedded into multiple applications with minimal effort. Prefabs simplify complex UI and backend interactions while promoting reuse across projects.

What are prefabs?​

A Prefab is a self-contained part of an application that can interact with data sources, REST APIs, and backend services. Once created and published, it can be imported and used like any other widget in WaveMaker Studio by dragging it onto a page. They are ideal for encapsulating commonly used functionality such as comment panels, maps, social feeds, or any reusable UI pattern.

Key characteristics​

  • Reusable: Prefabs can be used across multiple apps and pages.
  • Modular: They encapsulate UI elements, services, properties, events, and methods.
  • Distributable: Once published, prefabs can be shared within your workspace, team, or enterprise.

Why use prefabs?​

Prefabs accelerate application development by:

  • Abstracting complex UI and backend interactions into reusable components.
  • Enabling developers to build new widgets by composing existing widgets or third-party libraries.
  • Allowing integration of REST APIs without writing repetitive code.
  • Supporting reusable backend services through Java libraries within prefab logic.

Prefabs panel in WaveMaker Studio showing reusable prefab components

Prefab features​

Prefabs, like standard widgets, offer configurable features that make them flexible and reusable within applications:

  • Properties: If a prefab exposes properties, configure them in the Properties panel. For complex prefabs, you may bind property values from page logic.
  • Events: Default lifecycle events include onLoad (when the prefab is added to a page) and onDestroy (when it is removed). Custom events from the prefab author are also available for binding.
  • Methods: Methods exposed by the prefab author can be invoked from page events or other widgets.

Creating prefabs​

To create a prefab:

  1. Open Project Dashboard → Prefab tab.
  2. Click Create, and enter name, icon, description, and package or copyright info.
  3. Click Save to proceed.

Learn more in Creating prefabs.

Publishing prefabs​

WaveMaker supports several publishing scopes:

  • Project: Prefab available only within the current project.
  • Workspace: Prefab available across all projects in the workspace.
  • Team (Enterprise): Prefab shared across team members.
  • Enterprise repository (EDN): Prefab available for import in any enterprise project.

Learn more in Package and publish prefabs.

Prefab storage and structure​

When a prefab is imported into a WaveMaker project, it is stored at:

src/main/webapp/WEB-INF/prefabs/{prefab-name}

Each prefab folder includes:

  • config: Configuration files for properties, metadata, and settings.
  • lib: Library dependencies required by the prefab.
  • webapp: UI pages, templates, styles, scripts, and other resources.
note

Prefabs are modular by design. Deleting the prefab folder removes the prefab entirely, including configuration, libraries, and UI resources.

This structure supports import, reuse, and maintenance across applications while keeping each prefab self-contained.

Summary​

Prefabs are reusable, modular components that encapsulate UI, custom logic, and API integrations. You can create and publish them as standalone units, import them into apps, and drag them onto pages like standard widgets. They simplify development, promote consistency, and speed up delivery of complex mobile experiences.