Svelte Themes Logo Svelte Themes
SvelteLab screenshot

SvelteLab

Author Avatar Theme by Sveltelab
Updated: 20 Apr 2025
418 Stars

supercharged REPL for Svelte

Github Live Preview

Categories

Vite

Overview:

SvelteLab is a REPL (Read-Eval-Print Loop) tool designed for SvelteKit projects. It allows users to quickly create and share SvelteKit projects with ease. The tool offers a range of features such as light/dark mode, TypeScript error handling, code formatting, templates for various project types, SvelteKit file icons, route generation, package installation, Vim keybindings, and more. SvelteLab is built with and for Svelte, with contributions from Svelte enthusiasts. It is powered by SvelteKit, WebContainers, CodeMirror, Xterm.js, and PocketBase.

Features:

  • Light / Dark Mode: SvelteLab offers both light mode and dark mode interfaces.
  • TypeScript Errors: The tool provides error handling and reporting for TypeScript.
  • Command Palette: Users can access a command palette using the shortcut Ctrl / CMD + Shift + P.
  • Code Formatting: SvelteLab includes code formatting functionality.
  • Templates: Users can choose from pre-defined templates for TypeScript, Tailwind, and mdsvex.
  • SvelteKit File Icons: The tool supports file icons specific to SvelteKit projects.
  • SvelteKit Route Generation: SvelteLab provides a feature for generating routes in SvelteKit projects.
  • Svelte Add: Users can easily add Svelte components to their projects.
  • Install Packages: SvelteLab allows users to install packages for their projects.
  • Vim Keybindings: The tool supports Vim keybindings for enhanced editing experience.
  • Hide Config Clutter: SvelteLab offers an option to hide config clutter and show only the file tree from the /src directory.
  • Made with Svelte: SvelteLab is built using the Svelte framework by Svelte enthusiasts.
  • Powered by SvelteKit, WebContainers, CodeMirror, Xterm.js, and PocketBase: SvelteLab leverages various technologies to provide its functionality.

Installation:

To install SvelteLab, follow these steps:

  1. Update your local master branch to the main branch (if you have a local master branch):
git checkout master
git branch -m main
  1. Download the fitting PocketBase binary and place it in the root directory.
  2. Copy the .env.sample file to .env.
  3. Install the required packages:
npm i
  1. Start the PocketBase server:
./pocketbase serve
  1. Go to http://127.0.0.1:8090/_/ and set up your PocketBase Admin account.
  2. Run the SvelteLab development server:
pnpm dev

Summary:

SvelteLab is a powerful REPL tool specifically designed for SvelteKit projects. It offers a range of features to enhance the development experience, including light/dark mode, TypeScript error handling, code formatting, templates, SvelteKit file icons, route generation, package installation, Vim keybindings, and more. The tool is built by Svelte enthusiasts and powered by SvelteKit, WebContainers, CodeMirror, Xterm.js, and PocketBase. With SvelteLab, developers can quickly create and share SvelteKit projects with ease.