@ngxviewbuilder/runtime

Render whole Angular screens from JSON. Forms, dashboards, data tables and multi-step flows are designed once, saved as a plain JSON document, and rendered back inside your own app. Nothing is hosted on our side: views run in your app, on your router, your HTTP layer and your styles.

This package is the runtime half: it renders a saved view and contains no editor code. The visual editor is a separate package, @ngxviewbuilder/designer. An app that only shows views to end users installs this one alone, so the editor never reaches production. The runtime is free and never checks a license key.

Requirements

Angular 22 or newer. @angular/common, @angular/core and @angular/cdk are peer dependencies.

Beyond those it installs three packages: tslib, jexl for expressions, and lodash-es. The code editor and its CodeMirror and Prettier dependencies belong to the designer, so nothing here pulls them in.

Install

npm i @ngxviewbuilder/runtime

Register the providers where you bootstrap the app:

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

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

Import the stylesheet once from a global stylesheet, not from a component:

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

Render a view

Hand the component the JSON you saved from the designer, plus any starting data:

import { Component } from '@angular/core';
import { NgxViewBuilderRuntime, IStructure } from '@ngxviewbuilder/runtime';

@Component({
  selector: 'app-registration',
  imports: [NgxViewBuilderRuntime],
  template: `
    <ngx-view-builder-runtime
      [pageJson]="view"
      [dataJson]="data"
      (valueChanged)="onValueChanged($event)" />
  `,
})
export class RegistrationComponent {
  view!: IStructure;
  data: Record<string, unknown> = { customerEmail: '' };

  onValueChanged(event: unknown) {}
}

pageJson and dataJson take either a parsed object or a raw JSON string, so an API response can go in unparsed.

That is the whole setup. Theming, languages, data sources, custom elements, expressions and the NgxViewBuilderApiService are covered in the developer guide.

Documentation

https://ngxviewbuilder.io

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

License

Terms in LICENSE.md. The runtime is free: rendering views in production, in any number of apps, costs nothing and needs no key. A license covers the designer.

Pricing: https://ngxviewbuilder.io/pricing