Drag-and-drop form and view builder for Angular

Design the screen.Ship the JSON.

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.

Try the builder Developer guide

npm i @ngxviewbuilder/runtime

Works with Angular 22 or newer.

Example views. Each one is a single JSON file.

Menus, tables, forms with live totals, filtered lists and charts, all in one view. Each example gets its look from design tokens and a little view CSS, with no custom components. Click through them, then copy the JSON and paste it into the builder.

ledger.example.com 5 screens · 40 elements · 7 rules

Someone designs it. Git keeps it. Angular renders it.

A 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.

Design it in the builder
An analyst, a designer or you. Drag elements onto the page or double click them in, set labels, rules and data sources from the property panel, then preview it on desktop, tablet and phone. No development environment needed.
Keep it in a file
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.
views/new-starter.json+3−1
```
  "startDate": {
    "type": "datepicker",
    "label": "Start date",
-   "placeholder": ""
+   "placeholder": "Select date",
+   "visibleIf": "{team} != 'contractor'"
  },
  "laptop": {
    "type": "select",
+   "requireIf": "{team} == 'engineering'",
```
Contractors skip the start date, engineers must pick a laptop

Render it in your app

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.

new-starter.page.ts

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 */ }
}

Rules you can read out loud.

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.

70+: functions for dates, text, numbers and repeater rows
6: kinds of rule: show, require, disable, read only, reset and calculate

Browse the function reference

PropertyRule

visibleIf
{companyPays} == true
Show the company fields only when the company pays.
expression
{attendees} * {ticketPrice}
Keep the total right while people change the numbers.
requireIf
sumArray({lines}, amount) > 500
Ask for an approver once the claim passes €500.
disableIf
age({birthDate}) < 18
Lock the field for anyone under 18.
expression
{isVip} ? 'gold' : 'basic'
Pick a tier in one line.
minValue
addDays(today(), 14)
The earliest delivery date is two weeks out.

Hand the builder to your AI, and watch it work.

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: new fields come in one by one, and the canvas tells you whether the agent is reading, checking or building. It sees what you have selected, so "make this one required" is a complete request. There is no chat window in the builder: you talk to the agent in your own AI app, and it works on your canvas.

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 watch the canvas. A whole build undoes in one step if you do not like it.

Read how AI access works

Builder AI connected

The builder canvas with two fields, Company and VAT code.

48 elements, from a text input to a signature pad.

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

Text and numbers 4

Number inputnumber
Text inputtext
Long text inputtextarea
Phone inputphoneInput

Choices, dates and files 15

Sliderslider
Number steppernumberStepper
Date pickerdatepicker
Date rangedateRange
Select buttonselectButton
Radio inputradio
Checkbox groupcheckbox
Single checkboxsingleCheckbox
Toggle switchtoggleSwitch
Dropdownselect
Autocompleteautocomplete
Multi-choice menumultiSelect
File uploadfileUpload
Time pickertimePicker
List boxlistBox

Layout 9

Panelpanel
Object panelobjectPanel
Splittersplitter
Empty blockemptyBlock
Dynamic paneldynamicPanel
Tabstabs
Dialogdialog
Accordionaccordion
Stepper / TimelineprogressFlow

Tables and lists 3

Dynamic tabledynamicTable
Tabletable
List / GridlistGrid

Content 16

Rich text editorrichText
HTMLcustomHtml
HTML viewerrichTextViewer
Message cardmessageCard
Status badgebadge
Stats cardstatsCard
Progress barprogressBar
Chartchart
Imageimage
Video / YouTubevideo
IFrameiframe
Router outletrouterOutlet
Dividerdivider
Spacerspacer
Page titlepageTitle
Signature padsignaturePad

Actions 1

Buttonbutton

Two packages. Your users only ever load the free one.

The 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

The builder

€399once, per developer

Includes updates and support for the first 12 months.

The whole visual editor, nothing held back
Every built-in plugin included Logic map, view docs and the OpenAPI tab, all on the same license key. Templates are free for everyone.
No watermarks, nag screens or license banners
A perpetual license Every builder version released during your 12 months keeps working forever.
Elements, functions or plugins built on request When they make sense for everyone using the library.
Support for 12 months
AI access over MCP, with nothing extra to buy

Buy a license

@ngxviewbuilder/runtime

The runtime

€0no key, no expiry

Not a launch offer. The runtime stays free.

The complete runtime, nothing held back
Unlimited apps, views and end users
Commercial and production use
Every runtime version, forever
Bug reports and questions on GitHub

npm i @ngxviewbuilder/runtime

@ngxviewbuilder/designer

Renewal Optional

€199per developer, per year

From your second year, instead of buying the license again.

Another 12 months of builder updates Every version released in that year is yours to keep, forever.
Another 12 months of support
Skip a year and nothing breaks The versions you already have keep working without a watermark.

Prices include VAT in the EU, the UK and other countries where prices are usually shown with tax. Elsewhere, sales tax is added at checkout where it applies. With a valid EU VAT number the VAT is taken off at checkout. Payment and invoices are handled by Paddle.

What the license actually covers

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.

Free is not the same as open source. The runtime and the Templates plugin cost nothing and need no key, but none of the packages is open source: each one ships its terms in its own LICENSE.md.

How the license works

From 1.0.0 the builder asks for a license key. The runtime does not, and never will.
Builder versions released before 1.0.0 stay free to keep using.
Without a key the builder still runs in full, with a watermark on the canvas and a banner above it. See what users see.
Every builder version released during your 12 months keeps working, without a watermark, forever. Read the full license terms.