livecode-static/docs/languages/svelte.html.md

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

import LiveCodes from '../../src/components/LiveCodes.tsx'; import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';

CSS Frameworks

CSS Frameworks#css-processors) 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#processors)).

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.

export const processorsDemo = { svelte: <template lang="pug">\nh1 {msg}\n</template>\n\n<script lang="ts">\n let msg: string = 'Hello!'\n</script>\n\n<style lang="scss">\n $primary-color: #555;\n h1 {\n color: $primary-color;\n }\n</style>\n, };

<RunInLiveCodes params={processorsDemo} code={processorsDemo.svelte} language="html" formatCode={false}

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:

export const importsDemo = { svelte: `\n

You clicked {count} times.

Click me

`, };

<RunInLiveCodes params={importsDemo} code={importsDemo.svelte} language="html" formatCode={false}

Module imports can be customized using import maps as described in module resolution#custom-module-resolution) documentations.

Multiple Components

Svelte is supported in both markup#markup-editor) and script#script-editor) 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.

export const multi = { markup: { language: 'svelte', content: `

`, }, script: { language: 'svelte', content: `

{count}

count--} class="text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl">- count++} class="text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl">+

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

`, }, style: { language: 'css', content: '@import "tailwindcss";\n', }, processors: ['tailwindcss'], }

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

Example:

export const multiFiles = { ...multi, markup: { ...multi.markup, title: 'App.svelte', }, script: { ...multi.script, title: 'Counter.svelte', }, style: { ...multi.style, title: 'styles.css', order: 3, }, };

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:

export const customRoot = { markup: { language: 'html', content: `

Custom Root Element

...other page content

`, }, script: { language: 'svelte', content: `\n

I'm a {name} component

`, }, };

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

Links

• Svelte
• Svelte documentations