SvelteStorm: Svelte’s First IDE

SvelteStorm
3 min readFeb 24, 2022

--

There’s a storm coming your way…

On February 24, 2022, SvelteStorm launched a new and improved open-source integrated developer environment (IDE). SvelteStorm is specifically tailored to provide all of the essential tools a Svelte developer needs to build a Svelte application. The IDE contains a code editor, a terminal environment, a file directory, a browser view, developer tools, and a component state viewer. SvelteStorm is developed under the Open Source Labs tech accelerator.

Background Information:

In 2016, Svelte made a thunderous entrance as a front-end compiler popularized by its flexibility, allowing developers to handle component state with ease. Svelte is valued in the developer community for three key features: simple and short code, a lack of a virtual DOM, and true reactivity. Writing in Svelte requires fewer lines of code, meaning less bugs and more time saved. The lack of a virtual DOM reduces file size significantly and saves multiple tedious steps found in other front-end frameworks, such as React and Vue. Since Svelte lacks a virtual DOM, reactivity is employed without it, allowing for Svelte to update the DOM at build-time. These invaluable Svelte features contribute to Svelte being named the “most loved Web Framework” on Stack Overflow’s 2021 Developer Survey, with an astounding 71.47% of surveyed developers stating they adore Svelte. Svelte is still perceived as the new kid on the block, but with creator Rich Harris being recently hired by Vercel to work full-time on Svelte, Svelte’s future in the larger developer environment appears promising.

Why We Built SvelteStorm:

With all of the excitement and electricity buzzing in the air, it is time to embrace the storm with SvelteStorm, an IDE designed specifically for Svelte developers. Svelte is a framework built and embraced by the open-source community; SvelteStorm was created with the intention to contribute to that same community. With the new and improved SvelteStorm, it contains a simple, dark-mode UI design, all the dev dependencies up-to-date, and the code editor has been switched from Monaco to CodeMirror. From its modernized and clean UI, to its quick loading time and component state window, SvelteStorm is a rising star in the Svelte community.

The Future of SvelteStorm:

No application is ever fully complete, and there are a few features the team is currently working on now, the most significant being a state and component visualizer. Ideally, developers would be able to easily view their components and states in their files as a visualized tree with moveable nodes. The SvelteStorm team believes this feature would significantly improve the developer experience and transform SvelteStorm into the one-stop-shop for the creation of Svelte applications. With all the dependencies up-to-date, SvelteStorm is the perfect candidate for iteration. If you would like to contribute to SvelteStorm, please visit our links, fork our repository, and add a star for us on GitHub. If you have any questions, feel free to reach out to the makers via our Twitter or LinkedIn accounts.

The Current SvelteStorm Team:

Cayla Co, Miller Johnston, Sina Kahrobaei, and Swetha Kunda

SvelteStorm Links:

GitHub | LinkedIn | Twitter

Thank You:

Big thanks to the original SvelteStorm team of Arron Nester, Aye Moe, Frank Stepanski, Kevin Sarchi and Sam Filip.

Cayla Co | GitHub | LinkedIn

Miller Johnston | GitHub | LinkedIn

Sina Kahrobaei | GitHub | LinkedIn

Swetha Kunda | GitHub | LinkedIn

--

--