A premium, professional Angular drag-and-drop form builder and dynamic schema viewer.
npm install form-schema-libA high-performance, professional-grade Angular library for building and rendering dynamic forms using a standardized JSON schema. Designed for flexibility, speed, and premium aesthetics.


---
- Intuitive Visual Designer: A spacious "Big Canvas" designer with smooth drag-and-drop mechanics.
- Dynamic Render Engine: Instant form generation from JSON schemas with full Reactive Forms support.
- Side-Drawer Properties: Context-aware configuration panel that slides in for a focused editing experience.
- Smart Validation: Built-in logic for field uniqueness, mandatory metadata, and real-time error highlighting.
- Responsive Layouts: Direct integration with the Bootstrap Grid system (col-12, col-6, etc.).
- Zero-Flicker Typing: Optimized change detection for ultra-smooth user interaction in preview mode.
---
``bash`
npm install form-schema-lib
> Note: This library depends on @angular/forms, @angular/cdk, and Bootstrap 5 (CSS) for layout. Ensure they are available in your project.
---
`typescript
import { SchemaFormBuilderComponent } from 'form-schema-lib';
@Component({
selector: 'app-designer',
standalone: true,
imports: [SchemaFormBuilderComponent],
template:
(schemaChange)="handleUpdate($event)">
})
export class DesignerComponent {
mySchema = { fields: [] };
handleUpdate(newSchema: any) {
console.log('Schema updated:', newSchema);
}
}
`
`typescript
import { SchemaFormViewerComponent } from 'form-schema-lib';
@Component({
selector: 'app-form-page',
standalone: true,
imports: [SchemaFormViewerComponent],
template:
(formSubmit)="handleSubmit($event)">
`
})
export class FormPageComponent {
handleSubmit(formData: any) {
console.log('User Input:', formData);
}
}
---
The library uses a simple, flat JSON object to represent your form:
`json`
{
"title": "Registration Form",
"fields": [
{
"key": "user_name",
"label": "Full Name",
"type": "input",
"placeholder": "Enter your name...",
"width": "col-6",
"required": true
},
{
"key": "role",
"label": "User Role",
"type": "select",
"options": [
{ "label": "Admin", "value": "1" },
{ "label": "Editor", "value": "2" }
],
"width": "col-6"
}
]
}
---
The library is designed to inherit your project's typography and colors. You can easily override the designer's internal styles using CSS Variables (coming soon) or global selectors:
`css
/ Customizing the field wrappers in the designer /
.lib-field-wrapper {
border-radius: 12px;
background: #ffffff;
}
/ Customizing the properties drawer width /
.properties-drawer {
width: 450px;
}
`
---
---
`bashBuild the package
ng build form-schema-lib
---