• Stars
    star
    127
  • Rank 276,193 (Top 6 %)
  • Language
    TypeScript
  • Created over 3 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Zero-Configuration Reactive forms for Svelte

Formula + Beaker Ξ”β†’

Reactive Forms for Svelte

The Svelte Formula Logo

svelte-formula

svelte-formula is a Library for use with Svelte that super-charges your ability to create rich data-driven for applications.

Install Instructions

npm i svelte-formula

Usage

All you need is an element container with the Svelte use directive and form input fields with their name property set.

Visit the documentation for more details API instructions.

Formula

Demo

The Svelte Formula Logo

Formula is a library for creating Zero Configuration reactive form components, and fully data-driven applications.

Zero-Configuration means you need nothing more than a well-defined HTML5 form element to have fully reactive stores of data and form states.

Accessing the input requires only setting the name property, and for validation providing attributes like require or minlength. Formula supports single and multi-value inputs across all widely supported HTML inputs and extends them with checkbox groups and radio groups, and composite fields of values like text or number.

Formula creates a form instance that contains Svelte stores that contain value and validation information, and some additional lifecycle methods that allow your to dynamically add and remove customisations, and reset or destroy the form. It also attempts to apply ARIA attributes to help with accessibility.

Extending Formula

Formula also supports a bunch of powerful options that provide additional validation, enrichment and custom messages.

For example with the enrich option and enrichment store you can provide functions that calculate additional computed values based on user input - for example calculating a password strength, or the length of text a user has entered. These are useful.

Validations can be provided at the form and field level, and integrate with in-built browser validations to provide native messages, which can be customised for localisation.

Beaker

Demo

The Svelte Formula Logo

Beaker take Formula and adds another layer for working with collections of data.

Using row-based input you can create full form instances per row that are also fully reactive and feed into Beaker's collection store.

Beaker also provides methods for setting, adding and removing items from the in-built stores, when can be used with Svelte's {#each}{/each} blocks to create a re-usable template in the component

With this you can build applications such as multi-row editable tables or lists. See the documentation for more details and examples.

More Repositories

1

SublimeText-Nodejs

nodejs snippets and bindings for Sublime Text 3
Python
1,127
star
2

obsidian-garden

A knowledge management garden for https://obsidian.md, in which to grow your ideas
JavaScript
211
star
3

node-bitly

A Bit.ly library for node.js - This project is looking for a new maintainer
TypeScript
172
star
4

mm-components

Music Markups components
TypeScript
49
star
5

cloud9-livecoffee-ext

A extension for Cloud9ide for CoffeeScript functionality
CoffeeScript
46
star
6

ngx-tinynodes

Monorepo for components released on NPM @tinynodes
TypeScript
36
star
7

jquery.ui.pwstrength

jQueryUI Password Strength Meter
JavaScript
29
star
8

npm-lint

A linter for npm & node package.json files with a focus on dependency security
TypeScript
26
star
9

dokku-parse-server

JavaScript
22
star
10

steal-ur-stuff

Steal Ur Stuff
21
star
11

sublime-todomanager

A simple ToDo list manager
Python
21
star
12

quorra

Hapi route handler that makes react-router your isomorphic server side router.
JavaScript
15
star
13

robots-webpack-plugin

A webpack plugin to output a robots.txt file with options per environment
JavaScript
14
star
14

web-serial-controller

A Web Serial API application inspired by Windows XP - Built with Svelte and RxJS Ninja
JavaScript
13
star
15

node-gitio

A nodejs module for accessing the git.io URL shortner
JavaScript
13
star
16

hapi-react-handler

A handler for rendering react files via react-router
JavaScript
13
star
17

cloud9-scratchpad

A scratchpad for random text and code you need to work with
CoffeeScript
13
star
18

webfs

Node.js FS API wrapper for the Web File System
JavaScript
12
star
19

nell

An opinionated nodejs clone of Octopress
JavaScript
10
star
20

Stochastic-Parrot

Polly The Stochastic Parrot - a Mastodon Bot that uses empty ChatGPT prompts to generate Toots.
JavaScript
8
star
21

dnode-upload-example

ABANDONED - A quick nodejs example of using Connect, Formidable + Dnode to handle uploads and return response of upload progress
JavaScript
7
star
22

pastemonkey

ABANDONED - An Ajax Pastebin for storing code snippets
PHP
6
star
23

browser-band

A Garageband-like app that plays any sound instruments via the browser midi interface
JavaScript
5
star
24

dnode-mediaplayer

ABANDONED - An attempt at streaming audio data over RPC
HTML
3
star
25

techmech

PoC for a meta tool for Battletech
CSS
2
star
26

jmaps

ABANDONED - jMaps Google Maps library for jQuery < 1.5
JavaScript
2
star
27

learning-android

ABANDONED - The source project for Learning Android
Java
1
star
28

jquery-password-meter

ABANDONED - Old code for a jQuery password meter. May do something with it one day
JavaScript
1
star
29

typedoc-plugin-ghpages-cname

A Typedoc Plugin for adding a CNAME file for Github Docs
TypeScript
1
star
30

node-simplesmtp

ABANDONED - A real simple SMTP client for node.js, handy for debugging
JavaScript
1
star
31

gml-helpers

A collection of my helpers for Game Maker Studio 2
Game Maker Language
1
star
32

obsidian-gpt-helper

TypeScript
1
star
33

octopress_server

ABANDONED - This is a simple Express + Socket.IO server I am running my static Octopress site behind, to give it little more kick
JavaScript
1
star
34

astro-ssr-express-2

Tentei melhorar o astrojs-ssr-expressjs 1.
Astro
1
star