Skip to main content

Svelte

Svelte is a framework for building user interfaces on the web. It uses a compiler to turn declarative components written in HTML, CSS and JavaScript.

Usage​

Svelte components can be used as documented in the docs. See below for usage.

Demo​

show code
import { createPlayground } from 'livecodes';

const options = {
  "template": "svelte"
};
createPlayground('#container', options);

CSS Frameworks​

CSS Frameworks supported in LiveCodes (e.g. Tailwind CSS, UnoCSS, WindiCSS) can detect class names added in Svelte components. Make sure that the required utility is enabled (from style editor menu or in processors property of configuration object).

See example below.

Languages and Pre-Processors​

Many of the languages supported in LiveCodes can be used. The value of lang attribute can be the language name (specified in its documentation page) or any of its aliases (extensions).

You may wrap the markup in a template element if you want to specify the lang attribute.

Module Imports​

npm modules can be imported as described in the section about module resolution, including bare module imports and importing from different CDNs. Stylesheets imported in the script block are added as <link rel="stylesheet"> tags in the page head.

Example:

Module imports can be customized using import maps as described in module resolution documentations.

Multiple Components​

Svelte is supported in both markup and script editors.

This allows having a component in the markup editor that imports (and passes props to) a component in the script editor. The opposite is not supported.

This can be done using relative import of a file name in the same directory. Any file name will resolve to the component in the script editor, e.g. ./script.svelte, ./Component.svelte, ./Counter.svelte, etc.

show code
import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "markup": {
      "language": "svelte",
      "content": "<script lang=\"ts\">\nimport Counter from './Counter.svelte';\n</script>\n\n<Counter start=\"5\" />\n"
    },
    "script": {
      "language": "svelte",
      "content": "<script lang=\"ts\">\n  let { start } = $props();\n  let count = $state(start);\n</script>\n\n<div class=\"mt-8 text-center\">\n  <span class=\"text-3xl font-bold\">{count}</span>\n</div>\n<div class=\"mt-4 space-x-4 text-center\">\n  <button on:click={() => count--} class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">-</button>\n  <button on:click={() => count++} class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">+</button>\n</div>\n<div class=\"mt-4 space-x-4 text-center\">\n  <button on:click={() => count = start} class=\"text-md font-medium bg-red-500 hover:bg-red-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">Reset</button>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": "@import \"tailwindcss\";\n"
    },
    "processors": [
      "tailwindcss"
    ]
  }
};
createPlayground('#container', options);

Please note that LiveCodes does not have the concept of a file system. However, you can configure editor options like title, order and hideTitle to simulate multiple files, change editor order or even hide editors.

Example:

show code
import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "markup": {
      "language": "svelte",
      "content": "<script lang=\"ts\">\nimport Counter from './Counter.svelte';\n</script>\n\n<Counter start=\"5\" />\n",
      "title": "App.svelte"
    },
    "script": {
      "language": "svelte",
      "content": "<script lang=\"ts\">\n  let { start } = $props();\n  let count = $state(start);\n</script>\n\n<div class=\"mt-8 text-center\">\n  <span class=\"text-3xl font-bold\">{count}</span>\n</div>\n<div class=\"mt-4 space-x-4 text-center\">\n  <button on:click={() => count--} class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">-</button>\n  <button on:click={() => count++} class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">+</button>\n</div>\n<div class=\"mt-4 space-x-4 text-center\">\n  <button on:click={() => count = start} class=\"text-md font-medium bg-red-500 hover:bg-red-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">Reset</button>\n</div>\n",
      "title": "Counter.svelte"
    },
    "style": {
      "language": "css",
      "content": "@import \"tailwindcss\";\n",
      "title": "styles.css",
      "order": 3
    },
    "processors": [
      "tailwindcss"
    ]
  }
};
createPlayground('#container', options);

When both markup and script editors use Svelte, the component in the markup editor is used as the main component rendered in the root element. To render the component in the script editor, it has to be imported and used by the main component.

Importing External Components​

External Svelte components can be imported. The import URL has to be an absolute URL ending with .svelte extension. Any bare or relative imports in the imported files are resolved and compiled recursively.

Example:

<script>
  import Counter from 'https://raw.githubusercontent.com/user/repo/main/src/Counter.svelte';
</script>

<Counter />

Root Element​

To mount the application instance to a specific DOM element use "livecodes-app" as the element id in the HTML. Otherwise, if that element is not found, a new div element is added to document.body and is used to mount the instance.

Example:

show code
import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "markup": {
      "language": "html",
      "content": "<h1>Custom Root Element</h1>\n<div id=\"livecodes-app\"></div>\n<p>...other page content</p>\n"
    },
    "script": {
      "language": "svelte",
      "content": "<script>\n  let name = $state('Svelte');\n</script>\n\n<div>I'm a {name} component</div>\n"
    }
  }
};
createPlayground('#container', options);

Language Info​

Name​

svelte

Extensions​

.svelte

Editor​

script, markup

Compiler​

The official Svelte compiler.

Version​

svelte: v5.12.0

Code Formatting​

Using Prettier.

Starter Template​

https://livecodes.io/?template=svelte

Sponsors