Using builderio as lowcode app builder with own custom angular components & their variants

I get that the main target of is marketing pages and landing pages, but still I’d like to ask:

What are you trying to accomplish
How good a choice is as a low(-er)code app/pages builder with enphasis on CRUD (Create,Read,Update,Delete) operations using our own Angular components (“components only mode”)…?
The idea: in typical lowcode development way: having users who are not necessarly developers (“citizen developers”) build the majority of a webapp (=collection of pages) leveraging our own custom Angular components which are well adapted to our backend(s) we use already (think data tables and edition etc)

For custom logic in the app I guess the “best” builderio offers out of the box (compared to other lowcode solutions with somehting like micro-workflows perhaps) is custom JavaScript code (which with examples and some light training can still be manageable for non-developers and for most of typical use cases…?).

Other ex: how easy would it be for a user in the drag-n-drop editor to take one of our custom table components and check/uncheck a few options and change a few properties to use differents variants of the same component depending on the need…?

How good a fit is builderio if I try to use it that way or would I be trying to “bend”, or “force” the framework too much?

Thanks for your input and help.

Code stack you are integrating Builder with
Angular own components tightly integrated with own (custom) backend, in a “lowcode” app builder kinda way.

Hi @fab Welcome to Forum! can indeed be a good fit for developing CRUD-heavy applications with Angular components, particularly when leveraging Components-Only Mode. This mode is designed to enable development teams to integrate their custom components while allowing non-developers to create and manage content within a low-code environment. Here are detailed insights on how well can meet your needs and some best practices for achieving this:

Key Features Supporting Your Requirements

  1. Components-Only Mode
  2. Custom Components Registration
  3. Custom JavaScript Logic
  4. Flexible Data Binding
  5. User Roles and Permissions

1. Components-Only Mode

Components-Only Mode allows you to restrict to use only your custom Angular components, making it an ideal environment for non-developers (citizen developers) to build pages using pre-defined, integrated components that are well-suited to your backend.

Steps to Enable Components-Only Mode:

  1. Enable Components-Only Mode in
    • Go to your Builder settings.
    • Set the environment to use Components-Only Mode, ensuring only your custom components are available for use.

Documentation: Components-Only Mode

2. Custom Components Registration

Custom Angular components can be registered with, allowing you to use them within the visual editor. Here’s how you can register your custom components and initialize them:

Register an Angular Component Example:

// angular-project/src/app/builder.service.ts
import { Builder } from '';
import { Injectable } from '@angular/core';

  providedIn: 'root',
export class BuilderService {
  constructor() {
    // Initialize Builder with your Public API Key
    // Register your custom component
      name: 'CustomTableComponent',
      inputs: [
          name: 'data',
          type: 'list',
          subFields: [
            { name: 'name', type: 'string' },
            { name: 'age', type: 'number' },
        { name: 'title', type: 'string' },

Usage in Angular Component:

import { Component, Input } from '@angular/core';

  selector: 'app-custom-table',
  template: `
      <h1>{{ title }}</h1>
        <tr *ngFor="let item of data">
export class CustomTableComponent {
  @Input() data: any[];
  @Input() title: string;

Node: Replace CustomTableComponent with your desired component and configure it according to your project’s needs.

3. Custom JavaScript Logic supports custom JavaScript code, which can be embedded within the visual editor. This is particularly useful for adding conditional logic, event handling, and integrating custom workflows:

Example of Adding Custom JavaScript:

// Example script running on a specific user action or event
export function customLogic(input) {
  if (input.condition) {

4. Flexible Data Binding

Data binding in allows you to bind data dynamically to your components. You can create sophisticated setups where non-developers can configure the data source and properties of each component via easy-to-use forms:

Example of Data Binding in Custom Component:

  selector: 'app-data-table',
  template: `
    <div *ngIf="data">
            <th *ngFor="let heading of headings">{{ heading }}</th>
          <tr *ngFor="let row of data">
            <td *ngFor="let cell of row">{{ cell }}</td>
export class DataTableComponent {
  @Input() data: any[];
  @Input() headings: string[];

In the Builder UI, non-developers can configure the data input to use different datasets for the table.

5. User Roles and Permissions allows you to set user roles and permissions, ensuring that only authorized users can make changes to critical parts of your application. This is vital for maintaining the integrity of your low-code app while empowering non-developers to build and manage content.

Steps to Manage Roles and Permissions:

  1. Navigate to Settings: Go to your account settings.
  2. Manage Users and Roles: Assign appropriate roles to users to control their permissions.

Documentation: Roles and Permissions

Conclusion can indeed be a good choice for creating and maintaining a low-code application with an emphasis on CRUD operations using your custom Angular components. By utilizing Components-Only Mode, custom component registration, flexible data binding, and custom JavaScript logic, you can create an environment where non-developers can effectively build and manage sophisticated web applications.


  1. Components-Only Mode: Restrict to only use custom Angular components.
  2. Custom Components Registration: Register custom components with to be used within the visual editor.
  3. Custom JavaScript Logic: Embed custom JavaScript for advanced logic and workflows.
  4. Flexible Data Binding: Enable non-developers to bind data dynamically to components.
  5. User Roles and Permissions: Manage user access and permissions for secure content management.

For more details, refer to our extensive documentation and explore the SDK to find additional customization options tailored to your needs.