Appearance

npm

NGX View BuilderThe visual form, view & dashboard builder for Angular

Design entire pages (forms, dashboards, data tables, guided flows) in a drag-and-drop, low-code builder, ship them as JSON, and render them natively in your Angular app. One library, a full runtime, and a typed API for everything.

Try the live demo
Start as a Creator
Developer guide
A dashboard of charts and a data table built with NGX View BuilderA dashboard of charts and a data table built with NGX View Builder
Public beta

NGX View Builder is in public beta

Build and test with the full builder and runtime for free, right now, in the live demo. Commercial licenses aren't for sale yet. We're finishing pricing and checkout before general availability. See the pricing page for current status.

Everything a real screen needs, in three moves.

A view is one JSON document. You compose it, connect it to your systems, and ship it inside your own Angular app, with no separate runtime to host and no black box.

Compose

  • Whole pages, not just forms47 elements: inputs, choice controls, data tables, charts, KPI cards, tabs, dialogs, and steppers, with responsive layout per breakpoint.
  • Enterprise-grade data tablesServer-side paging, saved filters, per-user column settings, inline editing, row expansion, bulk actions, and status rules.
  • Logic without codeShow, hide, require, disable, and calculate with a concise expression language, 69 functions, and a visual condition builder.

Connect

  • Live data, first-classREST, route, and local sources feed options, tables, and values. Dependent fields, lazy tables, param mapping, and auto-reload are built in.
  • Extensible at every layerRegister your own elements, expression functions, properties, icons, themes, and whole builder tabs. Capability gating hides absent features cleanly.
  • AI-assisted buildingA built-in chat edits the view from plain-language requests, screenshots, or documents, wired to your own backend and model.

Ship

  • Angular-native architectureStandalone components, signals, zoneless-ready. A typed API service exposes every structure, data, and lifecycle operation, with 59 events.
  • Ready for real productsMulti-language content, locale-aware formatting, light/dark theming with design tokens, headless validation, and a template library.
  • Idea to production, fastAnalysts build screens visually; developers embed them with one component. Version, review, and deploy a view like any other artifact.

Built for both sides of the team ​

Creators get a professional visual workspace: drag elements onto pages, configure every property from a searchable sidebar, preview on desktop/tablet/mobile, and test with live data. No development environment required.

Developers get a serious integration surface instead of a black box:

ts
import { NgxViewBuilderRuntime, NgxViewBuilderApiService } from 'ngx-view-builder';

@Component({
  imports: [NgxViewBuilderRuntime],
  template: `<ngx-view-builder-runtime [pageJson]="view" [dataJson]="data" theme="dark" />`,
})
export class ClientPage {
  private api = inject(NgxViewBuilderApiService);

  ngOnInit() {
    this.api.onComplete.add(async ({ isValid, data }) => {
      if (isValid) await this.save(data);
    });
  }
}

Everything the builder does is available programmatically: read and mutate structures, set values, reload data sources, switch themes and languages, validate headlessly, and observe 59 typed events. See the API service reference.

The ideas it's built on ​

  • Views are data, not code. A page is one JSON document, so you can store it in your database, template it, migrate it, diff it in code review, or generate it with AI. Nothing is compiled into your bundle at design time.
  • It runs in your app, not ours. Views render inside your Angular app, using your router, your HTTP layer, your auth, and your design tokens. There is no hosted runtime to depend on and no vendor to route your data through.
  • The tedious parts are already solved. Dependent dropdowns, server-side tables, wizard navigation, validation summaries, translations, and per-user table preferences are configured, not hand-coded for the hundredth time.
  • It scales from a form to an admin panel. Start with a single contact form and grow into a builder-driven internal tool where your own domain elements sit in the sidebar next to the built-in ones.

Take the 5-minute first form tutorial, embed the runtime, or explore the live demo.

Community & feedback ​

Everything public about NGX View Builder lives in the community repository:

  • Found a bug? Open an issue. A minimal structure JSON that reproduces it makes fixes much faster.
  • Have an idea or feature request? File it as an issue too. Real-world use cases directly shape the roadmap.
  • Questions and discussions are welcome in the same repository.

Built on excellent open source ​

NGX View Builder stands on the shoulders of a small set of battle-tested open-source libraries. Thank you to their authors and maintainers.

CodeMirror 6MIT

Powers the JSON, HTML, and JavaScript editors inside the builder: syntax highlighting, autocompletion, and editing commands.

JexlMIT

The engine behind the expression language. Every visibleIf, calculated value, and condition is evaluated by Jexl.

PrettierMIT

Formats structure JSON and code snippets in the editors so what you read is always tidy.

LodashMIT

Utility functions (lodash-es) used across the library for safe, predictable data handling.