# NGX View Builder

> NGX View Builder is a visual builder for complete Angular views: forms, dashboards, data tables, and guided flows are designed in a drag-and-drop builder, stored as JSON, and rendered natively in an Angular app. This file indexes the documentation an AI agent should read, most important first.

## AI reference (machine-first, start here)

- [Live builder command API](https://ngxviewbuilder.io/ai/command-api): How an agent drives an open builder directly, instead of only emitting structure JSON.
- [AI reference](https://ngxviewbuilder.io/ai/): The canonical, indexed knowledge base an AI agent needs to generate or modify NGX View Builder structure JSON.
- [AI: Generation contract](https://ngxviewbuilder.io/ai/generation-contract): How an AI agent must behave when generating, modifying, reviewing NGX View Builder JSON or consulting on integration questions.
- [AI: Layout model (pages, rows, columns, elementRef)](https://ngxviewbuilder.io/ai/layout-model): The exact layout tree an AI agent must produce. How pages, rows, columns and elementRef relate to the flat elements map, how containers nest, and where widths belong.
- [AI: JSON authoring rules](https://ngxviewbuilder.io/ai/json-authoring-rules): The structure skeleton and hard rules an AI agent must follow when constructing NGX View Builder JSON.
- [AI: Element selection map](https://ngxviewbuilder.io/ai/element-selection-map): How an AI agent maps user intent to the right NGX View Builder element type.
- [AI: Logic and expression properties](https://ngxviewbuilder.io/ai/logic-and-expressions): Which expression fields an AI agent may use in NGX View Builder JSON and the rules they must follow.
- [AI: Element rules and value shapes](https://ngxviewbuilder.io/ai/element-rules): AI-oriented summary of the primary NGX View Builder elements, their usage rules and value shapes.
- [AI: Canonical properties reference](https://ngxviewbuilder.io/ai/properties-reference): The authoritative property reference for AI JSON generation. Only properties listed here are supported.
- [AI: Common mistakes and anti-patterns](https://ngxviewbuilder.io/ai/common-mistakes): Known anti-patterns AI agents repeat when generating NGX View Builder JSON, with corrections.
- [AI: Verified example structures](https://ngxviewbuilder.io/ai/examples): A library of complete, verified NGX View Builder JSON examples covering layout, every element family, the full table feature set, dynamic tables and panels, data sources, runtime variables and expressions.
- [AI: Legacy form migration](https://ngxviewbuilder.io/ai/legacy-form-migration): How an AI agent converts a legacy form-builder JSON format to NGX View Builder JSON, covering element, property, and expression mapping.

## Developer documentation

- [Angular form & view builder for developers](https://ngxviewbuilder.io/developers/): Embed the Angular form and view builder, render saved views with a native runtime, and extend it with custom elements, functions, themes, and plugins.
- [AI command API](https://ngxviewbuilder.io/developers/ai-command-api): A JSON command surface that lets an external agent read and edit a view while the builder is open.
- [API service reference](https://ngxviewbuilder.io/developers/api-service): Every public method of NgxViewBuilderApiService, area by area.
- [Architecture](https://ngxviewbuilder.io/developers/architecture): How the builder, runtime, shared core, and plugins fit together.
- [Embedding the builder](https://ngxviewbuilder.io/developers/builder-integration): Host the visual builder, persist structures, and customize the header.
- [Custom CSS](https://ngxviewbuilder.io/developers/custom-css): Per-view and host-injected CSS on top of the theme system.
- [Custom elements](https://ngxviewbuilder.io/developers/custom-elements): Build your own element (model, component, properties) and register it.
- [Custom expression functions](https://ngxviewbuilder.io/developers/custom-functions): Add project-specific functions to the expression language.
- [Custom properties](https://ngxviewbuilder.io/developers/custom-properties): Add or override properties in the sidebar, per element type or globally.
- [Custom validator types](https://ngxviewbuilder.io/developers/custom-validators): Register your own named validation rules so creators pick them from the Type list instead of writing regular expressions.
- [Data source integration](https://ngxviewbuilder.io/developers/data-sources): Host-side concerns, including defaults, auth, interceptors, and observability.
- [Events reference](https://ngxviewbuilder.io/developers/events): Every event exposed by NgxViewBuilderApiService.
- [Extensions overview](https://ngxviewbuilder.io/developers/extensions): One config object registers everything custom, from elements and functions to properties, icons, and tabs.
- [Custom SVG icons](https://ngxviewbuilder.io/developers/icons): Register icons by name for elements, buttons, and the builder UI.
- [Installation](https://ngxviewbuilder.io/developers/installation): Install the package, register providers, and initialize the runtime.
- [Licensing](https://ngxviewbuilder.io/developers/licensing): Supplying and validating the license key.
- [Building a plugin](https://ngxviewbuilder.io/developers/plugin-development): Ship your own builder tab as a reusable package.
- [Templates plugin reference](https://ngxviewbuilder.io/developers/plugin-templates): Full syntax reference for the Templates plugin  control flow, translations, click actions  plus how to persist templates to your own database.
- [Using plugins](https://ngxviewbuilder.io/developers/plugins): The official Templates plugin and how the plugin system works.
- [Rendering views (runtime)](https://ngxviewbuilder.io/developers/runtime-integration): Render saved view definitions to end users and collect their data.
- [Runtime variables](https://ngxviewbuilder.io/developers/runtime-variables): Inject route params, user context, and derived values into views.
- [Schema versioning](https://ngxviewbuilder.io/developers/schema-versioning): How stored views survive library upgrades, what schemaVersion means, and how to add your own migrations.
- [Standalone element examples](https://ngxviewbuilder.io/developers/standalone-elements-examples): Working recipes for using the built-in elements inside your own templates.
- [Standalone elements](https://ngxviewbuilder.io/developers/standalone-elements): Use the built-in elements directly in your own templates, without rendering a saved view.
- [Structure JSON](https://ngxviewbuilder.io/developers/structure-json): The IStructure document, covering settings, pages, elements, data sources, and localization.
- [Theming & design tokens](https://ngxviewbuilder.io/developers/theming): Light/dark modes, token overrides, and full custom themes.
- [UI translations](https://ngxviewbuilder.io/developers/ui-translations): Translate the builder interface itself (tabs, buttons, property labels).
- [Upgrading to 0.4.0](https://ngxviewbuilder.io/developers/upgrading-0-4-0): Every class and custom property is now prefixed with nvb-. What breaks and how to fix it.
- [Headless validation](https://ngxviewbuilder.io/developers/validator): Validate structure + data without rendering a visible view.

## Creator documentation

- [Angular form builder for creators](https://ngxviewbuilder.io/creators/): Build Angular forms, dashboards, and data views without writing code. Drag elements onto a canvas, set their properties in a sidebar, and save the result as JSON.
- [Calculated values](https://ngxviewbuilder.io/creators/calculated-values): Expression and Default value, for computing field values from other fields.
- [Expression cheat sheet](https://ngxviewbuilder.io/creators/cheat-sheet): The most common expression patterns, copy-paste ready.
- [Conditional logic](https://ngxviewbuilder.io/creators/conditional-logic): Show, hide, require, disable, lock, and reset fields based on other answers.
- [Data sources](https://ngxviewbuilder.io/creators/data-sources): Every field of the DataSources editor and the element binding panel, for REST, route, and local sources.
- [Buttons & actions](https://ngxviewbuilder.io/creators/elements/buttons): The Button element and how it triggers actions.
- [Choice inputs](https://ngxviewbuilder.io/creators/elements/choices): Select, Multi-select, Autocomplete, Checkbox, Radio, Select button, Toggles, and List box, with full property tables.
- [Containers](https://ngxviewbuilder.io/creators/elements/containers): Panel, Tabs, Accordion, Dynamic panel, Dialog, Splitter, Spacer, and Divider, with full property tables.
- [Content & media](https://ngxviewbuilder.io/creators/elements/content): Rich text, Custom HTML, Image, Video, Iframe, Icon, Avatar, Page title, Breadcrumbs, and Chart, with full property tables.
- [Date & time inputs](https://ngxviewbuilder.io/creators/elements/date-time): Datepicker, Date range, and Time picker, with full property tables.
- [Feedback & status](https://ngxviewbuilder.io/creators/elements/feedback): Badge, Message card, Toast, Stats card, Progress bar, and Stepper/Timeline, with full property tables.
- [Elements overview](https://ngxviewbuilder.io/creators/elements/): The full element catalogue, grouped by purpose.
- [Text & number inputs](https://ngxviewbuilder.io/creators/elements/inputs): Text, Textarea, Number, Number stepper, Phone input, and Slider.
- [Special inputs](https://ngxviewbuilder.io/creators/elements/special): File upload and Signature pad.
- [Data tables & lists](https://ngxviewbuilder.io/creators/elements/tables): Table, Dynamic table, and List grid, with the complete property reference for each.
- [Events & actions](https://ngxviewbuilder.io/creators/events-actions): Every field of the action editor (triggers, action types, confirmation, response handling, toasts) with JSON examples.
- [Expressions basics](https://ngxviewbuilder.io/creators/expressions): How to reference fields and write conditions in NGX View Builder.
- [Your first form](https://ngxviewbuilder.io/creators/first-form): Build a working client registration form in ten minutes.
- [Form settings](https://ngxviewbuilder.io/creators/form-settings): Every field of the Settings tab, from status and language to width, header, navigation, buttons, and dialog mode.
- [Expression functions](https://ngxviewbuilder.io/creators/functions): All built-in expression functions with examples.
- [JSON editor](https://ngxviewbuilder.io/creators/json-editor): Edit the raw view definition when the visual editor is slower.
- [Layout & containers](https://ngxviewbuilder.io/creators/layout): Rows, columns, responsive widths, and how containers organise a view.
- [Pages & navigation](https://ngxviewbuilder.io/creators/pages): Multi-page views, steppers, and page-level states.
- [Preview & testing](https://ngxviewbuilder.io/creators/preview): Test the view like an end user before handing it off.
- [Common properties](https://ngxviewbuilder.io/creators/properties): Every property shared by most elements, from identity and state to limits, validation, logic, actions, design, and data.
- [Dynamic text & templates](https://ngxviewbuilder.io/creators/templates): Placeholders in text, and the reusable HTML template library.
- [Translations](https://ngxviewbuilder.io/creators/translations): Multi-language views with the Translations tab.
- [Form validation](https://ngxviewbuilder.io/creators/validation): Required fields, validator rules, custom conditions, and error messages, covering every field of the validator editor.
- [Variables](https://ngxviewbuilder.io/creators/variables): Route params, host context, constants, and computed values available to every expression.
- [The builder workspace](https://ngxviewbuilder.io/creators/workspace): The main areas of the NGX View Builder screen and what each one does.

## Product & pricing

- [Live demo](https://ngxviewbuilder.io/demo): Try the Angular form and view builder in your browser. Build a view in the Builder tab, then switch to Runtime to see it exactly as your end users would.
- [Angular Form, View & Dashboard Builder | NGX View Builder](https://ngxviewbuilder.io/): Product homepage: what NGX View Builder is, key features, and links to get started.
- [Pricing](https://ngxviewbuilder.io/pricing): The runtime that renders your views in production is free forever and never needs a license key. The builder is free to use today and becomes a licensed product at the 1.0.0 release.
- [Privacy Policy](https://ngxviewbuilder.io/privacy): How ngxviewbuilder.io handles analytics, cookies, and the data you enter in the live demo.

## Single-file bundles

- [JSON authoring reference](https://ngxviewbuilder.io/llms-authoring.txt): every AI reference page in one file. Paste this when the task is writing or fixing NGX View Builder structure JSON.
- [Everything](https://ngxviewbuilder.io/llms-full.txt): the full site, including host integration, theming and plugins.
- [Machine index](https://ngxviewbuilder.io/ai/retrieval-map.json): JSON map of request profiles to source files.