{"id":23377439,"url":"https://github.com/sesan07/formly-editor","last_synced_at":"2026-01-11T23:56:20.807Z","repository":{"id":201111881,"uuid":"448326484","full_name":"sesan07/formly-editor","owner":"sesan07","description":"A configurable editor for ngx-formly forms.","archived":false,"fork":false,"pushed_at":"2024-07-03T21:55:30.000Z","size":3952,"stargazers_count":7,"open_issues_count":1,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-19T01:12:22.844Z","etag":null,"topics":["editor","formly","ngx-formly"],"latest_commit_sha":null,"homepage":"https://formly-editor.sesan.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sesan07.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2022-01-15T16:12:00.000Z","updated_at":"2024-11-05T17:45:29.000Z","dependencies_parsed_at":"2023-10-19T04:45:28.149Z","dependency_job_id":"a8d4ff79-78c4-44fa-ac99-d00dbad01377","html_url":"https://github.com/sesan07/formly-editor","commit_stats":null,"previous_names":["sesan07/formly-editor"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sesan07%2Fformly-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sesan07%2Fformly-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sesan07%2Fformly-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sesan07%2Fformly-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sesan07","download_url":"https://codeload.github.com/sesan07/formly-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230750974,"owners_count":18274975,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["editor","formly","ngx-formly"],"created_at":"2024-12-21T18:01:22.839Z","updated_at":"2026-01-11T23:56:20.798Z","avatar_url":"https://github.com/sesan07.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Editors"],"readme":"# Formly Editor\n\nA configurable editor for ngx-formly forms.\n\nThis project uses standalone components.\n\nDemo: https://formly-editor.sesan.dev\n\n![Demo Screenshot](docs/img/screenshot.png 'Demo Screenshot')\n\n## How to run\n\n-   Clone this repo: `git clone https://github.com/sesan07/formly-editor.git`\n-   Install dependencies: `npm i`\n-   Start app: `npm start`\n\n## Setup\n\n### Create a config\n\n```typescript\nimport { EditorConfig, createTextProperty } from '@sesan07/ngx-formly-editor';\n\n// Configure input type\nconst inputTypeConfig: FieldTypeOption = {\n    displayName: 'Input', // Name displayed on the UI\n    name: 'input', // Name (type) configured in formly\n    keyGenerationPrefix: 'inp', // Used to generate keys for this field type (optional)\n    defaultConfig: { // Default formly config when creating a field of this type\n        wrappers: ['form-field'],\n        props: {\n            label: 'Label',\n            placeholder: 'Placeholder',\n            description: 'Description',\n            required: true,\n        },\n    },\n    properties: [ // The configurable properties to display on the UI for this field type (optional)\n        createTextProperty({\n            name: 'Type',\n            key: 'props.type',\n        }),\n        ...\n    ],\n};\n\n// Configure card wrapper (custom wrapper)\nconst cardWrapperConfig: FieldWrapperOption = {\n    name: 'card',\n    properties: [ // The configurable properties to display when a field has this wrapper (optional)\n        createTextProperty({\n            name: 'Card Title',\n            key: 'props.cardTitle',\n        }),\n        ...\n    ],\n};\n\n// Configure validator options that can be set\nexport const validatorOptions: ValidatorOption[] = [\n    {\n        name: 'Ip',\n        key: 'ip',\n    }\n    ...\n];\n\nexport const editorConfig: EditorConfig = {\n    id: 'editor',\n    fieldOptions: [ // Configs for fields or field categories\n        { // A field category\n            displayName: 'Input',\n            children: [inputTypeConfig, anotherConfig],\n        },\n        yetAnotherConfig,\n        anotherCategory,\n        ...\n    ],\n    wrapperOptions: [cardWrapperConfig], // configs for wrappers\n    validatorOptions: validatorOptions,\n    defaultForm: {\n        name: 'Form Zero',\n        fields: [...], // Formly field configs\n        model: {...}\n    },\n};\n```\n\nThese helper functions can be used to create properties\n\n-   `createArrayProperty({...})`\n-   `createBooleanProperty({...})`\n-   `createObjectProperty({...})`\n-   `createSelectProperty({...})`\n-   `createTextProperty({...})`\n\n### Provide the Editor config\n\n```typescript\nimport { ApplicationConfig, importProvidersFrom } from '@angular/core';\nimport { FormlyModule } from '@ngx-formly/core';\n\nimport { provideEditor, provideEditorConfig, withConfig } from '@sesan07/ngx-formly-editor';\n\nimport { editorConfig1, editorConfig2 } from './editor.config';\n\n// Single route setup\nexport const appConfig: ApplicationConfig = {\n    providers: [\n        ...\n        // Provide the editor and config\n        provideEditor(withConfig(editorConfig1)),\n        // Ngx-formly configuration\n        importProvidersFrom([\n            FormlyModule.forRoot({ ... }),\n        ]),\n        ...\n    ],\n};\n\n// Multi route setup\nexport const appConfig: ApplicationConfig = {\n    providers: [\n        ...\n        // Provide the editor\n        provideEditor(),\n        provideRouter([\n            {\n                path: 'path1',\n                // Provide editorConfig1 for path1\n                providers: [provideEditorConfig(editorConfig1)],\n            },\n            {\n                path: 'path2',\n                // Provide editorConfig2 for path2\n                providers: [provideEditorConfig(editorConfig2)],\n            },\n        ])\n        // Ngx-formly configuration\n        importProvidersFrom([\n            FormlyModule.forRoot({ ... }),\n        ]),\n        ...\n    ],\n};\n```\n\n`EditorModule.forRoot(config?)` and `EditorModule.forChild(config)` are also available for non standalone apps.\n\n### Use the Editor Component\n\n```typescript\nimport { Component } from '@angular/core';\nimport { EditorComponent } from '@sesan07/ngx-formly-editor';\n\n@Component({\n    selector: 'app-example',\n    template: ` \u003ceditor-main\u003e\u003c/editor-main\u003e `,\n    standalone: true,\n    imports: [EditorComponent],\n})\nexport class ExampleComponent {}\n```\n\n### Import the editor's styles into your app\n\n```scss\n// Styles required by the editor\n@import '@sesan07/ngx-formly-editor/styles';\n\n// Generated tailwind styles for the editor's styling system if using tailwindConfig\n@import '@sesan07/ngx-formly-editor/tailwind';\n```\n\nQuestions or improvement suggestions are welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsesan07%2Fformly-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsesan07%2Fformly-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsesan07%2Fformly-editor/lists"}