A monorepo containing Angular libraries for JSON Schema editing, visual data mapping, and dynamic form rendering.
| Library | Description | Version |
|---|---|---|
| @expeed/ngx-schema-editor | Visual JSON Schema editor | 1.0.0 |
| @expeed/ngx-data-mapper | Drag-and-drop field mapping | 1.3.3 |
| @expeed/ngx-dyna-form | Dynamic form renderer | 0.0.1 |
These libraries work together to provide a complete schema-driven workflow:
- Define schemas using the visual Schema Editor
- Create mappings between source and target schemas using Data Mapper
- Render forms dynamically from schemas using Dyna Form
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Schema Editor │────▶│ Data Mapper │────▶│ Dyna Form │
│ │ │ │ │ │
│ Create/Edit │ │ Map fields │ │ Render forms │
│ JSON Schemas │ │ Transform data │ │ from schemas │
└─────────────────┘ └─────────────────┘ └─────────────────┘
# Install individual libraries as needed
npm install @expeed/ngx-schema-editor
npm install @expeed/ngx-data-mapper
npm install @expeed/ngx-dyna-formnpm install @angular/cdk @angular/materialFor ngx-dyna-form with rich text support:
npm install ngx-quill quill- Angular 19+
- Angular Material 19+
- Angular CDK 19+
Visual JSON Schema builder with drag-and-drop field organization.
import { SchemaEditorComponent } from '@expeed/ngx-schema-editor';
@Component({
imports: [SchemaEditorComponent],
template: `
<schema-editor
[schema]="schema"
(schemaChange)="onSchemaChange($event)"
/>
`
})Visual field mapping between source and target schemas with transformations.
import { DataMapperComponent } from '@expeed/ngx-data-mapper';
@Component({
imports: [DataMapperComponent],
template: `
<data-mapper
[sourceSchema]="source"
[targetSchema]="target"
(mappingsChange)="onMappingsChange($event)"
/>
`
})Dynamic form renderer from JSON Schema definitions.
import { DynamicFormComponent } from '@expeed/ngx-dyna-form';
@Component({
imports: [DynamicFormComponent],
template: `
<dyna-form
[schema]="schema"
[values]="formValues"
(valuesChange)="onValuesChange($event)"
(validChange)="onValidChange($event)"
/>
`
})npm installnpm run build:libsng build ngx-schema-editor
ng build ngx-data-mapper
ng build ngx-dyna-formng serve demo-app├── projects/
│ ├── ngx-schema-editor/ # Schema editor library
│ ├── ngx-data-mapper/ # Data mapping library
│ ├── ngx-dyna-form/ # Dynamic form library
│ └── demo-app/ # Demo application
├── dist/ # Built libraries
└── package.json
- Angular 19+
- Angular Material
- Angular CDK
- ngx-quill (rich text)
- RxJS
Apache 2.0