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

Tagged in:

About the Author


I am Akash Mittal, an overall computer scientist. If you want to guest post, need help in your projects, want to advertise, Feel free to contact me at [email protected]

View All Articles