{"id":39002573,"url":"https://github.com/biyonik/zignal-form-builder","last_synced_at":"2026-01-17T17:13:10.619Z","repository":{"id":331644972,"uuid":"1129566966","full_name":"biyonik/zignal-form-builder","owner":"biyonik","description":"🛠️ Visual Drag \u0026 Drop Form Builder - Built with Zignal Form Library","archived":false,"fork":false,"pushed_at":"2026-01-11T03:52:55.000Z","size":744,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-11T04:24:49.698Z","etag":null,"topics":["angular","drag-and-drop","form-builder","typescript","visual-form-builder","zignal"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/biyonik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-07T09:16:52.000Z","updated_at":"2026-01-11T03:52:59.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/biyonik/zignal-form-builder","commit_stats":null,"previous_names":["biyonik/zignal-form-builder"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/biyonik/zignal-form-builder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biyonik%2Fzignal-form-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biyonik%2Fzignal-form-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biyonik%2Fzignal-form-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biyonik%2Fzignal-form-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/biyonik","download_url":"https://codeload.github.com/biyonik/zignal-form-builder/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biyonik%2Fzignal-form-builder/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28512068,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T13:38:16.342Z","status":"ssl_error","status_checked_at":"2026-01-17T13:37:44.060Z","response_time":85,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","drag-and-drop","form-builder","typescript","visual-form-builder","zignal"],"created_at":"2026-01-17T17:13:10.448Z","updated_at":"2026-01-17T17:13:10.553Z","avatar_url":"https://github.com/biyonik.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eZignal Form Builder\u003c/h1\u003e\n  \u003cp\u003e\n    \u003cstrong\u003eTR:\u003c/strong\u003e Profesyonel Gorsel Form Tasarim Araci\u003cbr/\u003e\n    \u003cstrong\u003eEN:\u003c/strong\u003e Professional Visual Form Design Tool\n  \u003c/p\u003e\n\n  \u003cp\u003e\n    \u003ca href=\"https://angular.io/\"\u003e\u003cimg src=\"https://img.shields.io/badge/Angular-17+-DD0031?style=flat-square\u0026logo=angular\" alt=\"Angular 17+\"/\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@biyonik/zignal\"\u003e\u003cimg src=\"https://img.shields.io/badge/Zignal-Form%20Library-blue?style=flat-square\" alt=\"Zignal\"/\u003e\u003c/a\u003e\n    \u003ca href=\"https://zod.dev/\"\u003e\u003cimg src=\"https://img.shields.io/badge/Zod-Validation-3068B7?style=flat-square\" alt=\"Zod\"/\u003e\u003c/a\u003e\n    \u003cimg src=\"https://img.shields.io/badge/License-MIT-green?style=flat-square\" alt=\"MIT License\"/\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n## TR Turkce\n\n### Hakkinda\n\n**Zignal Form Builder**, [@biyonik/zignal](https://www.npmjs.com/package/@biyonik/zignal) form kutuphanesinin tum field tiplerini gorsel olarak tasarlamanizi saglayan profesyonel bir aractir. Drag \u0026 drop ile form olusturun, kosullu mantik ekleyin, gruplar olusturun ve JSON/TypeScript olarak disa aktarin.\n\n### Ozellikler\n\n#### Temel Ozellikler\n- **Drag \u0026 Drop**: Alanlari surukleyip birakarak form olusturma\n- **18+ Field Tipi**: Metin, sayi, tarih, secim, dosya ve daha fazlasi\n- **Gercek Zamanli Onizleme**: Formu aninda goruntuleme\n- **JSON Import/Export**: Schema'yi JSON olarak kaydet ve yukle\n- **TypeScript Export**: Direkt kullanilabilir TypeScript kodu uret\n- **Hazir Sablonlar**: Iletisim, anket, kayit formlari\n- **i18n**: Turkce/Ingilizce arayuz\n\n#### Gelismis Ozellikler\n- **Undo/Redo**: Geri al/ileri al sistemi (Ctrl+Z / Ctrl+Y)\n- **Field Groups**: Alanlari gruplara ayirma (Fieldset/Section)\n- **Conditional Logic Builder**: showWhen/hideWhen/disableWhen editoru\n- **Cross-field Validation**: Alanlar arasi validasyon olusturucu\n- **Theme Switcher**: Light/Dark tema destegi\n- **Keyboard Shortcuts**: Hizli erisim tuslari\n- **Multi-form Support**: Birden fazla form yonetimi\n- **LocalStorage Persistence**: Tasarimlari otomatik kaydetme\n- **Preview Modal**: Tam ekran form onizleme\n- **Live Validation**: Gercek zamanli validasyon testi\n- **Import from URL**: API'den form schemasi cekme\n\n### Klavye Kisayollari\n\n| Kisayol | Islem |\n|---------|-------|\n| `Ctrl + Z` | Geri Al |\n| `Ctrl + Y` | Ileri Al |\n| `Ctrl + S` | Formu Kaydet |\n| `Ctrl + C` | Alani Kopyala |\n| `Ctrl + V` | Alani Yapistir |\n| `Ctrl + D` | Alani Cogalt |\n| `Delete` | Alani Sil |\n| `Escape` | Secimi Kaldir |\n\n### Kurulum\n\n```bash\n# Repoyu klonlayin\ngit clone https://github.com/biyonik/zignal-form-builder.git\ncd zignal-form-builder\n\n# Bagimliliklari yukleyin\nnpm install\n\n# Gelistirme sunucusunu baslatin\nng serve\n```\n\nTarayicida `http://localhost:4200` adresine gidin.\n\n### Desteklenen Field Tipleri\n\n| Kategori | Alanlar |\n|----------|---------|\n| **Temel** | Metin, Cok satirli, Sayi, E-posta, Sifre, URL, Telefon |\n| **Secim** | Dropdown, Coklu Secim, Onay Kutusu |\n| **Gelismis** | Tarih, Saat, Renk, Degerlendirme, Para, Yuzde |\n| **Ozel** | Dosya, Etiketler, URL Slug, JSON |\n\n### Kullanim\n\n1. **Sol Panel**: Alan tiplerini gorun, sablon secin, grup ekleyin\n2. **Orta Panel**: Alanlari surukleyip birakin, gruplar arasinda tasiyin\n3. **Sag Panel - Ayarlar**: Secili alanin/grubun ayarlarini duzenleyin\n4. **Sag Panel - Onizleme**: Formu canli onizleyin, validasyon test edin\n5. **Sag Panel - Export**: JSON veya TypeScript olarak disa aktarin\n6. **Sag Panel - Form Ayarlari**: Genel form ayarlari ve cross-validator ekleyin\n\n### TypeScript Export Ornegi\n\n```typescript\nimport {\n  FormSchema,\n  FormState,\n  StringField,\n  EmailField,\n  SelectField,\n} from '@biyonik/zignal';\n\n/**\n * TR: Form veri tipi\n * EN: Form data type\n */\nexport interface ContactFormFormData {\n  name: string;\n  email: string;\n  country?: string;\n}\n\n/**\n * TR: Form semasi\n * EN: Form schema\n */\nexport const formSchema = new FormSchema\u003cContactFormFormData\u003e({\n  name: new StringField('name', 'Ad Soyad', {\n    required: true,\n    minLength: 2\n  }),\n\n  email: new EmailField('email', 'E-posta', {\n    required: true\n  }),\n\n  country: new SelectField('country', 'Ulke', {\n    options: [\n      { value: 'tr', label: 'Turkiye' },\n      { value: 'us', label: 'USA' }\n    ]\n  }),\n});\n\n/**\n * TR: Form state olusturma\n * EN: Create form state\n */\nexport function createFormState(): FormState\u003cContactFormFormData\u003e {\n  return new FormState\u003cContactFormFormData\u003e(formSchema);\n}\n```\n\n---\n\n## EN English\n\n### About\n\n**Zignal Form Builder** is a professional visual tool that lets you design forms using all field types from the [@biyonik/zignal](https://www.npmjs.com/package/@biyonik/zignal) form library. Create forms with drag \u0026 drop, add conditional logic, create groups, and export as JSON/TypeScript.\n\n### Features\n\n#### Core Features\n- **Drag \u0026 Drop**: Build forms by dragging and dropping fields\n- **18+ Field Types**: Text, number, date, selection, file and more\n- **Real-time Preview**: Instantly view your form\n- **JSON Import/Export**: Save and load schema as JSON\n- **TypeScript Export**: Generate ready-to-use TypeScript code\n- **Ready Templates**: Contact, survey, registration forms\n- **i18n**: Turkish/English interface\n\n#### Advanced Features\n- **Undo/Redo**: Full undo/redo system (Ctrl+Z / Ctrl+Y)\n- **Field Groups**: Organize fields into groups (Fieldset/Section)\n- **Conditional Logic Builder**: showWhen/hideWhen/disableWhen editor\n- **Cross-field Validation**: Create inter-field validators\n- **Theme Switcher**: Light/Dark theme support\n- **Keyboard Shortcuts**: Quick access keys\n- **Multi-form Support**: Manage multiple forms\n- **LocalStorage Persistence**: Auto-save designs\n- **Preview Modal**: Fullscreen form preview\n- **Live Validation**: Real-time validation testing\n- **Import from URL**: Fetch form schema from API\n\n### Keyboard Shortcuts\n\n| Shortcut | Action |\n|----------|--------|\n| `Ctrl + Z` | Undo |\n| `Ctrl + Y` | Redo |\n| `Ctrl + S` | Save Form |\n| `Ctrl + C` | Copy Field |\n| `Ctrl + V` | Paste Field |\n| `Ctrl + D` | Duplicate Field |\n| `Delete` | Delete Field |\n| `Escape` | Deselect |\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone https://github.com/biyonik/zignal-form-builder.git\ncd zignal-form-builder\n\n# Install dependencies\nnpm install\n\n# Start development server\nng serve\n```\n\nNavigate to `http://localhost:4200` in your browser.\n\n### Supported Field Types\n\n| Category | Fields |\n|----------|--------|\n| **Basic** | Text, Textarea, Number, Email, Password, URL, Phone |\n| **Selection** | Dropdown, Multi Select, Checkbox |\n| **Advanced** | Date, Time, Color, Rating, Money, Percent |\n| **Special** | File, Tags, URL Slug, JSON |\n\n### Usage\n\n1. **Left Panel**: View field types, select templates, add groups\n2. **Center Panel**: Drag and drop fields, move between groups\n3. **Right Panel - Config**: Edit selected field/group settings\n4. **Right Panel - Preview**: Live preview form, test validation\n5. **Right Panel - Export**: Export as JSON or TypeScript\n6. **Right Panel - Settings**: Form settings and cross-validators\n\n### TypeScript Export Example\n\n```typescript\nimport {\n  FormSchema,\n  FormState,\n  StringField,\n  EmailField,\n  SelectField,\n} from '@biyonik/zignal';\n\n/**\n * TR: Form veri tipi\n * EN: Form data type\n */\nexport interface ContactFormFormData {\n  name: string;\n  email: string;\n  country?: string;\n}\n\n/**\n * TR: Form semasi\n * EN: Form schema\n */\nexport const formSchema = new FormSchema\u003cContactFormFormData\u003e({\n  name: new StringField('name', 'Full Name', {\n    required: true,\n    minLength: 2\n  }),\n\n  email: new EmailField('email', 'Email', {\n    required: true\n  }),\n\n  country: new SelectField('country', 'Country', {\n    options: [\n      { value: 'tr', label: 'Turkey' },\n      { value: 'us', label: 'USA' }\n    ]\n  }),\n});\n\n/**\n * TR: Form state olusturma\n * EN: Create form state\n */\nexport function createFormState(): FormState\u003cContactFormFormData\u003e {\n  return new FormState\u003cContactFormFormData\u003e(formSchema);\n}\n```\n\n---\n\n## Architecture\n\n```\nsrc/app/form-builder/\n├── form-builder.component.ts    # Ana component (template + styles)\n├── field-types.config.ts        # Field tip tanimlari\n├── models/\n│   └── form-builder.types.ts    # Tip tanimlari\n└── services/\n    ├── form-builder.service.ts  # State yonetimi\n    └── code-generator.service.ts # TypeScript kod uretici\n```\n\n### State Management\n\n- **Angular Signals**: Reaktif state yonetimi\n- **Undo/Redo Stack**: Max 50 snapshot ile geri al/ileri al\n- **LocalStorage**: Otomatik kayit/yukleme\n- **Clipboard**: Alan kopyalama/yapistirma\n\n---\n\n## Tech Stack\n\n- **Framework**: Angular 17+ (Standalone Components)\n- **Form Library**: @biyonik/zignal\n- **Validation**: Zod\n- **State**: Angular Signals\n- **Styling**: CSS Variables (Dark/Light Theme)\n\n---\n\n## License\n\nMIT License - See [LICENSE](LICENSE) file for details.\n\n---\n\n## Links\n\n- **Zignal NPM**: [@biyonik/zignal](https://www.npmjs.com/package/@biyonik/zignal)\n- **Zignal GitHub**: [biyonik/zignal](https://github.com/biyonik/zignal)\n- **KYC Demo**: [zignal-kyc-turkey](https://github.com/biyonik/zignal-kyc-turkey)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003cp\u003eBuilt with Zignal Form Library\u003c/p\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiyonik%2Fzignal-form-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbiyonik%2Fzignal-form-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiyonik%2Fzignal-form-builder/lists"}