Snippets Collections
  async function harryPotterStudents() {
      const res = await fetch('');
      const json = await res.json()

      if (res.ok) {
          return json
      } else {
          throw new Error(json)

  let promise = harryPotterStudents()

<h2>Estudiantes de la saga Harry Potter (promesas)</h2>
{#await promise}
  <p>Esperando resultados...</p>
{:then students}
  <p>Total estudiantes: {students.length}</p>
  {#each students as {name: alt, house, image: src}}
    {#if src}
      <h3>{alt} ({house})</h3>
      <img height="100" {src} {alt} />
{:catch error}
  <p style="color: red">{error.message}</p>
import groceryData from '$lib/data.json';
let groceryItems = groceryData;
const sleep = (ms: number) =>
	new Promise((resolve) =>
	setTimeout(resolve, ms),

{#await data.streamed.members}
	{#await sleep (200) then _}
	    Loading data
{:then value}
  {#each value as { id, full_name }}
  	{id}: {full_name}
  import ExperimentOne from './ExperimentOne.svelte';
  import ExperimentTwo from './ExperimentTwo.svelte';
  let component = (Math.random() * 100) > 50 ? 
    ExperimentTwo :
<svelte:component this={component} />
  import { Button } from "@dztek/ui-components";

<Button class={className} {iconLeft} {iconRight} {value} {iconSize} />
    const sections = {
        "Title 1": "paragraph",
        "Title 2": "paragraph",
        "Title 3": "paragraph",
        "Title 4": "paragraph",
        "Title 5": "paragraph"
    // Object.entries() converts an Object into an array of arrays, 
    // each sub array first index is the a key and the second index is a value
    // Object.entries({key: value, key:value}) => [[key, value], [key,value]]

{#each Object.entries(sections) as [title, paragraph]}
	// Import markdown conversion library
  import marked from 'marked'
	// Declare a variable to store the markdown data. Set a default value
  let markdown = "# Example Title\n\n- this\n- is\n- a list"

<!-- Declare a textarea where the user can enter markdown, and bind it to the variable `markdown` -->
<textarea bind:value={markdown} placeholder="Enter markdown here"/>

<!-- Convert the markdown to HTML and display it -->
<div class="preview">{@html marked(markdown)}</div>

<!-- Make it look (slightly) nicer ;) -->
	textarea, .preview {
		box-sizing: border-box;
		display: block;
		width: 100%;
	.preview {
	textarea {
		font-family: monospace, Roboto;
		height: 25%;
		border: none;
		margin: 0;
	.preview {
		height: 75%;
		padding: 2rem;
		border-top: solid 2px #888;
	:global(body) {
		padding: 0;
  import Toggle from "svelte-toggle@1.0.0";

  let toggled = false;

	<!-- override REPL button margin rule -->
  label="My toggle label"
  bind:toggled />

Mon May 27 2024 03:07:54 GMT+0000 (Coordinated Universal Time)

#javascript #svelte

Mon May 20 2024 01:21:44 GMT+0000 (Coordinated Universal Time)


Tue Oct 17 2023 07:59:00 GMT+0000 (Coordinated Universal Time)

#svelte #delay-loading-spinner

Fri Sep 08 2023 13:14:00 GMT+0000 (Coordinated Universal Time)

#javascript #svelte

Thu May 05 2022 06:09:45 GMT+0000 (Coordinated Universal Time)


Sun Jul 25 2021 12:17:04 GMT+0000 (Coordinated Universal Time)


Mon Oct 26 2020 11:41:17 GMT+0000 (Coordinated Universal Time)


Mon Oct 26 2020 11:39:34 GMT+0000 (Coordinated Universal Time)

#svelte #javascript

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension