How to start coding in Svelte? Clean project & write first code

Table of Contents Hide
  1. Code Example
  2. Live Demo

When we install Svelte in a fresh project, we get few files auto filled with demo data. We need to erase this in order to start writing code for our project.


In this file, we don’t need to pass any prop to App.svelte component. So, we can delete that. Our main.js should look like this –

import App from './App.svelte';

const app = new App({
    target: document.body,

export default app;


Delete everything from this file. We will start with a fresh empty file.


We do not want any global css because we will install tailwindcss. So delete everything from this file too.


In this file change the title with the title of your project.

Code Example

Let’s start writing our first code. open App.svelte file and write the below code –

  main {
    font-family: sans-serif;
    text-align: center;

  <h1>Tony Stark is Ironman</h1>

In this file we have included style and html. Similarly, you can include script also. We will discuss in future articles.

    Tweet this to help others

Live Demo

Open Live Demo