{"id":14962608,"url":"https://github.com/tanepiper/svelte-formula","last_synced_at":"2025-05-07T17:42:31.601Z","repository":{"id":38347671,"uuid":"338457617","full_name":"tanepiper/svelte-formula","owner":"tanepiper","description":"Zero-Configuration Reactive forms for Svelte","archived":false,"fork":false,"pushed_at":"2022-07-01T13:16:07.000Z","size":3480,"stargazers_count":125,"open_issues_count":7,"forks_count":6,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-22T11:59:56.114Z","etag":null,"topics":["forms","html-validations","reactive","reactive-form","reactive-form-validation","reactive-forms","reactive-programming","svelte","svelte-plugins","sveltejs"],"latest_commit_sha":null,"homepage":"https://tanepiper.github.io/svelte-formula/","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/tanepiper.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-12T23:29:24.000Z","updated_at":"2024-12-27T18:26:10.000Z","dependencies_parsed_at":"2022-08-25T01:51:13.605Z","dependency_job_id":null,"html_url":"https://github.com/tanepiper/svelte-formula","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanepiper%2Fsvelte-formula","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanepiper%2Fsvelte-formula/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanepiper%2Fsvelte-formula/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tanepiper%2Fsvelte-formula/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tanepiper","download_url":"https://codeload.github.com/tanepiper/svelte-formula/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252927675,"owners_count":21826535,"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":["forms","html-validations","reactive","reactive-form","reactive-form-validation","reactive-forms","reactive-programming","svelte","svelte-plugins","sveltejs"],"created_at":"2024-09-24T13:30:10.204Z","updated_at":"2025-05-07T17:42:31.569Z","avatar_url":"https://github.com/tanepiper.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv style='text-align: center'\u003e\n\n# Formula + Beaker Δ→\n\n**Reactive Forms for Svelte**\n\n![The Svelte Formula Logo](https://raw.githubusercontent.com/tanepiper/svelte-formula/main/docs/img/logo_256.png)\n\n\u003c/div\u003e\n\n[![svelte-formula](https://img.shields.io/npm/v/svelte-formula?label=svelte-formula)](https://www.npmjs.com/package/svelte-formula)\n\n- [Documentation](https://tanepiper.github.io/svelte-formula)\n- [Changelog](https://github.com/tanepiper/svelte-formula/blob/main/CHANGELOG.md)\n\n`svelte-formula` is a Library for use with [Svelte](https://svelte.dev) that super-charges your ability to create rich\ndata-driven for applications.\n\n## Install Instructions\n\n`npm i svelte-formula`\n\n## Usage\n\nAll you need is an element container with the Svelte [use](https://svelte.dev/docs#use_action) directive and form input\nfields with their `name` property set.\n\nVisit the [documentation](https://tanepiper.github.io/svelte-formula) for more details API instructions.\n\n## Formula\n\n[Demo](https://svelte.dev/repl/dda29ae516284147871b58a4f1966315)\n\n\u003cdiv style='text-align: center; float: left; margin-right: 20px'\u003e\n\n![The Svelte Formula Logo](https://raw.githubusercontent.com/tanepiper/svelte-formula/main/docs/img/formula-small.png)\n\n\u003c/div\u003e\n\n**Formula** is a library for creating _Zero Configuration_ reactive form components, and fully data-driven applications.\n\n**Zero-Configuration** means you need nothing more than a well-defined HTML5 form element to have fully reactive stores\nof data and form states.\n\nAccessing the input requires only setting the `name` property, and for validation providing attributes like `require`\nor `minlength`. Formula supports single and multi-value inputs across all widely supported HTML inputs and extends them\nwith checkbox groups and radio groups, and composite fields of values like text or number.\n\nFormula creates a form instance that contains Svelte [stores](https://tanepiper.github.io/svelte-formula/docs/stores/stores) that\ncontain value and validation information, and some\nadditional [lifecycle methods](https://tanepiper.github.io/svelte-formula/docs/lifecycle) that allow your to dynamically add and\nremove customisations, and reset or destroy the form. It also attempts to apply ARIA attributes to help with\naccessibility.\n\n### Extending Formula\n\nFormula also supports a bunch of [powerful options](https://tanepiper.github.io/svelte-formula/docs/options) that provide additional\nvalidation, enrichment and custom messages.\n\nFor example with the `enrich` [option](https://tanepiper.github.io/svelte-formula/docs/options#enrich)\nand `enrichment` [store](https://tanepiper.github.io/svelte-formula/docs/stores/stores-enrichment) you can provide functions that\ncalculate additional computed values based on user input - for example calculating a password strength, or the length of\ntext a user has entered. These are useful.\n\nValidations can be provided at the form and field level, and integrate with in-built browser validations to provide\nnative messages, which can be customised for localisation.\n\n### Beaker\n\n[Demo](https://svelte.dev/repl/c146c7976360405cba9a696e3fee853b)\n\n\u003cdiv style='text-align: center; float: left; margin-right: 20px'\u003e\n\n![The Svelte Formula Logo](https://raw.githubusercontent.com/tanepiper/svelte-formula/main/docs/img/beaker-small.png)\n\n\u003c/div\u003e\n\n**Beaker** take Formula and adds another layer for working with collections of data.\n\nUsing row-based input you can create full form instances per row that are also fully reactive and feed into Beaker's\ncollection store.\n\nBeaker also provides methods for setting, adding and removing items from the in-built stores, when can be used with\nSvelte's `{#each}{/each}` blocks to create a re-usable template in the component\n\nWith this you can build applications such as multi-row editable tables or lists. See\nthe [documentation](https://tanepiper.github.io/svelte-formula/docs/groups/beaker) for more details and examples.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftanepiper%2Fsvelte-formula","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftanepiper%2Fsvelte-formula","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftanepiper%2Fsvelte-formula/lists"}