@ngxviewbuilder/designer

The visual editor half of NGX View Builder: a drag-and-drop workspace where an Angular screen (forms, dashboards, data tables, multi-step flows) is composed, previewed and saved as a plain JSON document.

It runs on top of @ngxviewbuilder/runtime, which renders what you design. The two are versioned in lockstep. Install this package only where people actually edit views, so the editor stays out of your production bundle.

Requirements

Angular 22 or newer, plus @ngxviewbuilder/runtime at the same version. @angular/common, @angular/core, @angular/cdk and @angular/forms are peer dependencies.

This package carries the code editor, so it installs CodeMirror and Prettier on top of tslib and lodash-es. That is the reason to install it only where views are actually edited.

Install

npm i @ngxviewbuilder/runtime @ngxviewbuilder/designer

The designer needs the runtime's providers and stylesheet, because it renders real elements in the canvas and preview.

import { bootstrapApplication } from '@angular/platform-browser';
import { provideNgxViewBuilderRuntime } from '@ngxviewbuilder/runtime';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [provideNgxViewBuilderRuntime()],
});

@import '@ngxviewbuilder/runtime/styles/index.css';

Embed the designer

import { Component } from '@angular/core';
import { NgxViewBuilderDesigner, BuilderModel, IStructure } from '@ngxviewbuilder/designer';

@Component({
  selector: 'app-designer',
  imports: [NgxViewBuilderDesigner],
  template: `
    <ngx-view-builder-designer
      [model]="model"
      [runtimeSettings]="{ licenseKey: licenseKey }"
      (saveRequested)="save()" />
  `,
})
export class DesignerComponent {
  licenseKey = 'your-key';
  model = new BuilderModel();

  save() {
    const structure: IStructure = this.model.getJson();
    // Persist wherever you like: database, file, API.
  }
}

Two things that catch people out:

• Give the host element real height. The designer fills its container, and a container of height 0 renders an empty strip.
• BuilderModel is constructed empty. Load an existing view with model.setJson(raw), which takes the JSON as a string; getJson() returns a parsed IStructure.

That is the whole setup. Settings, theming, custom header actions, templates and the rest are covered in the developer guide.

Runtime API

The runtime's public API is re-exported here, so a host that embeds the designer can take IStructure, BuilderModel, NgxViewBuilderApiService and the rest from one import site. Code that only renders views should import from @ngxviewbuilder/runtime directly, which is what keeps the designer out of your production bundle.

Documentation

https://ngxviewbuilder.io

• Developer guide: https://ngxviewbuilder.io/developers/
• Creator guide: https://ngxviewbuilder.io/creators/
• Live demo: https://ngxviewbuilder.io/demo

License

Commercial software. Terms in LICENSE.md. The designer is what a license key covers; the runtime is free.

Pricing and keys: https://ngxviewbuilder.io/pricing