1.0.0 ships on 1 November 2026.
Drag-and-drop form and view builder for Angular
NGX View Builder is a drag-and-drop builder and a native Angular runtime for whole screens: forms, dashboards, data tables and guided flows. The screen is saved as one JSON document, and your app renders it with one component.
npm i @ngxviewbuilder/runtimeWorks with Angular 22 or newer.
Change a label, delete a visibleIf, add a field. The right side is the actual runtime, re-rendering from your JSON.
<ngx-view-builder-runtime>Live, not a screenshotA view goes through three hands, and none of them needs the other two to be in the room. That is the whole idea: the screen is data, so it moves like data.
An analyst, a designer or you. Drag elements onto the page, set labels, rules and data sources from the property panel, then preview it on desktop, tablet and phone. No development environment needed.
Save it to your database or commit it next to your code. Changes show up in pull requests like any other diff, and you can generate a view from a script or let an AI draft one.
"startDate": { "type": "datepicker", "label": "Start date", - "placeholder": "" + "placeholder": "Select date", + "visibleIf": "{team} != 'contractor'" }, "laptop": { "type": "select", + "requireIf": "{team} == 'engineering'",
One component, inside your own app: your router, your HTTP layer, your auth and your design tokens. Hand it the saved JSON and your data, and listen for what the user changes.
import { IStructure, IValueChangedEvent, NgxViewBuilderRuntime, } from '@ngxviewbuilder/runtime'; @Component({ imports: [NgxViewBuilderRuntime], template: ` <ngx-view-builder-runtime [pageJson]="view()" [dataJson]="starter" (valueChanged)="save($event)" /> `, }) export class NewStarterPage { // resolved by the router from your API view = input.required<IStructure>(); starter = { team: 'engineering' }; save(event: IValueChangedEvent) { /* your API */ } }
Show, hide, require, lock and calculate with a small expression language. Field names go in braces, and the rest reads close to plain English. For people who would rather click than type, a visual condition builder writes the same rules.
visibleIf{companyPays} == trueShow the company fields only when the company pays.
expression{attendees} * {ticketPrice}Keep the total right while people change the numbers.
requireIfsumArray({lines}, amount) > 500Ask for an approver once the claim passes €500.
disableIfage({birthDate}) < 18Lock the field for anyone under 18.
expression{isVip} ? 'gold' : 'basic'Pick a tier in one line.
minValueaddDays(today(), 14)The earliest delivery date is two weeks out.
The builder speaks MCP, so any MCP client can drive it: Claude, Codex, Cursor or your own agent. Pair it and the agent can read the view, add fields, wire up rules and rename labels while the canvas changes in front of you. It sees what you have selected, so "make this one required" is a complete request.
In the builder, open Settings, then AI access (MCP), and press Connect.
Give your AI client the session key, something like NVB-7QK2-M4XD-9HPA. Keys expire after 24 hours, and a new key cuts off every earlier pairing.
Ask for the change in plain words, and keep an eye on the canvas.
Enough to build whole screens rather than just forms: repeaters, server-side tables, charts, tabs, dialogs and steppers. When your domain needs something the list does not have, register your own Angular component and it joins the same sidebar, with its own properties.
How custom elements work
numbertexttextareaphoneInputslidernumberStepperdatepickerdateRangeselectButtonradiocheckboxsingleCheckboxtoggleSwitchselectautocompletemultiSelectfileUploadtimePickerlistBoxpanelobjectPanelsplitteremptyBlockdynamicPaneltabsdialogaccordionprogressFlowdynamicTabletablelistGridrichTextcustomHtmlrichTextViewermessageCardbadgestatsCardprogressBarchartimagevideoiframerouterOutletdividerspacerpageTitlesignaturePadbuttonThe runtime renders your views to your users. The builder is where your team designs them. Only the builder is licensed, and the builder imports the runtime, never the other way round.
@ngxviewbuilder/designer€399once, per developer
Includes updates and support for the first 12 months.
@ngxviewbuilder/runtime€0no key, no expiry
Not a launch offer. This is the model, before and after 1.0.0.
npm i @ngxviewbuilder/runtime@ngxviewbuilder/designer€299per developer, per year
From your second year, instead of buying the license again.
Nothing is for sale yet. Until 1.0.0 on 1 November 2026 the builder is free for everyone, with no key and no watermark. The price is published now so you can plan a budget around it. Checkout opens at 1.0.0.
The paid license does not unlock hidden features. The free build and the licensed build of the builder are the same package. What you pay for is the right to use the builder without a watermark, and to keep the versions released during your license term.
The runtime is a separate package. It never checks a license and never expires, so shipping it to production and to your customers costs nothing. An app that only renders views installs the runtime alone, so there is nothing to audit and no key to manage.