DEV Community

Cover image for Getting Started With Svelte.js
Chris Connelly
Chris Connelly

Posted on

Getting Started With Svelte.js

What Is Svelte

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

Why Svelte

✅ Works on DOM, no Virtual DOM
✅ Svelte files has .svelte extension
✅ Each written in svelte files are scoped css.
✅ You can use its internal store apis. No need to install an external library
✅ Build by Rollup with default configuration. However, you can also use Parsel and Webpack.
✅ You can subscribe any variable easily, but it has some hacky ways to detect array mutations. (This one which i didnt like)
✅ You can write both javascript, html and styles in svelte files like you are writing a html file. ( has minor difference)
✅ You access DOM events with on: prefix such as,
✅ You do not need to pass callbacks from child to parents.
✅ You can use createEventDispatcher.
✅ You start a block with {#} and ends with {/} such as {#if}…{/if}

Getting Started With Svelte

Using NPX

You can use this command to start a to do list app

npx degit sveltejs/template svelte-todo-list
Enter fullscreen mode Exit fullscreen mode

Online REPL

In my opinion the best way to get to started is the REPL

Alt Text

Once you are happy with your app you can download all the code for your app in a zip file. Once you've unzipped your file, CD into the folder and run

npm install && npm run dev
Enter fullscreen mode Exit fullscreen mode

you can save your app in the REPL or edit it from your code editor from there.

I made a quick app on the REPL


  import ContactCard from "./ContactCard.svelte";

  let name = "Max";
  let title = "";
  let image = "";
  let description = "";
  let formState = "empty";

  let createdContacts = [];

  function addContact() {
    if (
      name.trim().length == 0 ||
      title.trim().length == 0 ||
      image.trim().length == 0 ||
      description.trim().length == 0
    ) {
      formState = "invalid";
    createdContacts = [
        id: Math.random(),
        name: name,
        jobTitle: title,
        imageUrl: image,
        desc: description
    formState = "done";

  function deleteFirst() {
    createdContacts = createdContacts.slice(1);

  function deleteLast() {
    createdContacts = createdContacts.slice(0, -1);

  #form {
    width: 30rem;
    max-width: 100%;

<div id="form">
  <div class="form-control">
    <label for="userName">User Name</label>
    <input type="text" bind:value={name} id="userName" />
  <div class="form-control">
    <label for="jobTitle">Job Title</label>
    <input type="text" bind:value={title} id="jobTitle" />
  <div class="form-control">
    <label for="image">Image URL</label>
    <input type="text" bind:value={image} id="image" />
  <div class="form-control">
    <label for="desc">Description</label>
    <textarea rows="3" bind:value={description} id="desc" />

<button on:click={addContact}>Add Contact Card</button>
<button on:click={deleteFirst}>Delete First</button>
<button on:click={deleteLast}>Delete Last</button>

{#if formState === 'invalid'}
  <p>Invalid input.</p>
  <p>Please enter some data and hit the button!</p>

{#each createdContacts as contact, i (}
  <h2># {i + 1}</h2>
    userImage={contact.imageUrl} />
  <p>Please start adding some contacts, we found none!</p>
Enter fullscreen mode Exit fullscreen mode


  export let userName;
  export let jobTitle;
  export let description;
  export let userImage;

  const initialName = userName;

  .contact-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
    max-width: 30rem;
    border-radius: 5px;
    margin: 1rem 0;
    background: white;

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 7rem;

  .thumb {
    width: 33%;
    height: 100%;

  .thumb-placeholder {
    background: #ccc;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;

  .user-data {
    width: 67%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 1rem;

  h1 {
    font-size: 1.25rem;
    font-family: "Roboto Slab", sans-serif;
    margin: 0.5rem 0;

  h2 {
    font-size: 1rem;
    font-weight: normal;
    color: #5a5a5a;
    margin: 0;
    margin-bottom: 0.5rem;

  .description {
    border-top: 1px solid #ccc;
    padding: 1rem;

<div class="contact-card">
    <div class="thumb" class:thumb-placeholder="{!userImage}">
      <img src={userImage} alt={userName} />
    <div class="user-data">
      <h1>{userName} / {initialName}</h1>
  <div class="description">

Enter fullscreen mode Exit fullscreen mode

as a fairly new developer and someone who is new to react I found svelte way easier to understand. In terms of making your app reactive I feel svelte is a great way to go especially if you aren't a huge fan of react.

Top comments (0)