Before you go, check out these stories!

Hackernoon logoSvelte State Management: Creating Contact Form by@the_rock

Svelte State Management: Creating Contact Form

Author profile picture


Software Developer from monday to friday (Healthcare sector), Game Developer in free time

Recently, I came into Svelte and ... I love it.

Hi rocks, Sasha here. Today we are going to do some state management in Svelte.

There are different ways of managing state in Svelte. In this tutorial, we are going to see how to create a mutable state by using a writable object.

The project is going to be a simple page where you can add contacts into a list.

So, letโ€™s start by creating a svelte project: open your terminal, go to the target folder you want to create project in and run:

npx svelte3-app

Once itโ€™s done, you can start a project by running:

npm run dev

It will deploy your app on

and enable hot-reload.


Letโ€™s create our store object under src/store and call it


In there, we are going to define a default value for our store, create a store and expose addContact and reset methods.

import { writable } from 'svelte/store';

//value used as default for the current store
    { name: "John", surname: "Doe", mail: "" },
    { name: "Alice", surname: "Wonderland", mail: "" }

// create a store
// subscribe    -> must be exported, will discuss it in future article
// set          -> allows you to set a value to store
// update       -> receives a current store value as input and returns a new one.
const { subscribe, set, update } = writable(DEFAULT_CONTACTS);

//receives a new contact in input and updates current stored value by pushing a new one
const addContact = contact => update(contacts => {
    //we're returning a new array in order to achieve reactivity
    return [...contacts, contact];

// sets a default value to store
const reset = () => {

//public methods
export default {

So, now we can import our contacts store into components, subscribe to it, add new entries and reset its value.


We are going to create two components:

, for inserting new contacts, and
, for showing the list of stored contacts.


	import contacts from "./store/contacts";

<div id="contactsList">
	{ #each $contacts as contact }
		<p>{} {contact.surname}</p>
		<hr />
	{ /each }

This component will show all contacts and update automatically. You can explicitly subscribe to store, but itโ€™s better to use $ as prefix to contacts. In this way, Svelte will manage subscription automatically.


	import contacts from "./store/contacts";

	// binding values
	let name = "";
	let surname = "";
	let mail = "";

	// submit contact
	const submitContact = () => {
		contacts.addContact({ name, surname, mail });
		// reset values
		name = surname = mail = "";

<div id="contactForm">
	<input type="text" 	bind:value={name} placeholder="Insert name" />
	<input type="text" 	bind:value={surname} placeholder="Insert surname" />
	<input type="email" bind:value={mail} placeholder="Insert mail" />
	<input type="submit" on:click={submitContact} value="Add" />
	<input type="submit" on:click={contacts.reset} value="Reset" />

This component simply binds values and triggers submitContact on Add button press.


Now, you can import both components to App and let the magic happen.

	import ContactsList from "./ContactsList.svelte";
	import ContactForm from "./ContactForm.svelte";

	<h1>State managment!</h1>
	<ContactForm />
	<ContactsList />


Join Hacker Noon

Create your free account to unlock your custom reading experience.