My first Svelte5 reactive component

Welcome to the exciting era of Svelte 5!

After an intensive development period, Svelte 5 has emerged in its beta (next) version, marking a significant milestone for the Svelte community.

As of November 11th, developers now have the opportunity to explore the cutting-edge features and enhancements introduced in this latest iteration.

It's important to note that while Svelte 5 is available for experimentation, it is not recommended for production use at this stage. Several aspects, such as the installer, are still being refined and finalized. As of today, with the release of the "next" version, the installer is not yet available, emphasizing the ongoing nature of development.

We'll explore how you can start exploring the powerful new features, including the revamped and potent reactivity mechanism installing Svelte 5 on your local development environment.

Install the Svelte 5 skeleton project

Because today the Svelte 5 is not yet completed, we are going to install the skeleton project with the current version of Svelte the 4 (latest), and then once the project is created, we will force the upgrade of Svelte 5 (next)

npm create svelte@latest  myapp

cd myapp

npm install

During the execution of npm create svelte@latest, the command will ask you some questions. For now, you can answer in this way:

◇  Which Svelte app template?

│  Skeleton project

│

◇  Add type checking with TypeScript?

│  Yes, using JavaScript with JSDoc comments

│

◇  Select additional options (use arrow keys/space bar)

│  none

After you jump into the new directory project and install all the packages, you need to force the reinstallation of svelte, the next version. Today next refers to the Svelte 5 preview version:

npm i svelte@next 

If you run the command npm list, you can see the version of the svelte package (at the moment, it is [email protected]):

➜  my-first-svelte5-app npm list

[email protected] /Users/roberto/my-first-svelte5-app

├── @sveltejs/[email protected]

├── @sveltejs/[email protected]

├── [email protected]

├── [email protected]

├── [email protected]

└── [email protected] 

Now, if you run npm run dev, you can start using your new fresh Svelte 5 application, typically exposed by default at

Are you playing with the new Svelte 5?

I wrote this small article riding the excitement for the new announcement by Rich Harris on November 11th about Svelte 5:

Please feel free to share your thoughts in the comments section below if you have any feedback. I appreciate your input and value the community's insights. I am committed to keeping this article up-to-date with the latest developments in Svelte 5, so your contributions will be significant in ensuring it's accurate and relevant. Thank you for being part of this journey, and I look forward to exploring the exciting advancements that Svelte 5 has to offer together. Stay tuned for future updates!