Introduction for developers

NGX View Builder is an Angular library with two halves, and each half is its own npm package:

• ngx-view-builder-runtime: the engine that renders a saved view definition (JSON) to end users. Free forever, no license key.
• ngx-view-builder-designer: the visual editor your creators use to design those views. Commercially licensed, and it depends on the runtime.

Install one or both depending on what your app does. Most applications render views and never open the editor, so they only need the runtime. See Installation for the split, and Architecture for why the line falls where it does.

You embed the components you need as standalone components, persist the JSON wherever you like, and control everything else (data, theming, custom elements, plugins) through providers and a typed API service.

The five components

Component	Selector	Package	Purpose
Designer	<ngx-view-builder-designer>	designer	Full editing shell: canvas, sidebars, tabs, history
Runtime	<ngx-view-builder-runtime>	runtime	Renders a view definition with live logic and data
Unified	<ngx-view-builder>	runtime	Runtime-oriented host that can also take a BuilderModel
Renderer	<ngx-view-builder-renderer>	runtime	Low-level renderer used by the unified wrapper
Validator	<ngx-view-builder-validator>	runtime	Headless validation for server-side scenarios

The flow

Creator designs in <ngx-view-builder-designer>       ← designer package
        │  (structureChanged) → IStructure JSON
        ▼
Your backend / storage
        │  [pageJson]
        ▼
<ngx-view-builder-runtime> renders to end users      ← runtime package
        │  values, events, validation
        ▼
Your app (via outputs and NgxViewBuilderApiService)

The JSON in the middle is the whole contract between the two packages, which is why an app on either side of it can be deployed and licensed independently of the other.

What you can extend

Extension	How
Custom elements (component + model + properties)	Custom elements
Expression functions	Custom functions
Extra/changed element properties	Custom properties
SVG icons	Icons
Theme tokens, light/dark palettes	Theming
Builder UI language	UI translations
Whole builder tabs	Plugins

Reading order

1. Installation: which packages to install, providers, initialization.
2. Embedding the builder and Rendering views.
3. API service overview: the programmatic surface.
4. Extensions overview: one config object for everything custom.