Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
<script>
let key = $state();
let keyCode = $state();

function handleKeydown(event) {
key = event.key;
keyCode = event.keyCode;
}
</script>

<svelte:window onkeydown={handleKeydown} />

<div style="text-align: center">
{#if key}
<kbd>{key === ' ' ? 'Space' : key}</kbd>
<p>{keyCode}</p>
{:else}
<p>Focus this window and press any key</p>
{/if}
</div>

<style>
div {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
flex-direction: column;
}

kbd {
background-color: #eee;
border-radius: 4px;
font-size: 6em;
padding: 0.2em 0.5em;
border-top: 5px solid rgba(255, 255, 255, 0.5);

Error compiling component

WebAssembly.instantiateStreaming(): value type opcode @+13
import 'svelte/internal/disclose-version';
import * as $ from 'svelte/internal/client';

var root_1 = $.template(`<kbd class="svelte-17uh762"> </kbd> <p> </p>`, 1);
var root_2 = $.template(`<p>Focus this window and press any key</p>`);
var root = $.template(`<div style="text-align: center" class="svelte-17uh762"><!></div>`);

export default function App($$anchor) {
let key = $.state(undefined);
let keyCode = $.state(undefined);

function handleKeydown(event) {
$.set(key, $.proxy(event.key));
$.set(keyCode, $.proxy(event.keyCode));
}

var div = root();

$.event('keydown', $.window, handleKeydown);

var node = $.child(div);

{
var consequent = ($$anchor) => {
var fragment = root_1();
var kbd = $.first_child(fragment);
var text = $.child(kbd, true);

$.reset(kbd);

var p = $.sibling(kbd, 2);
var text_1 = $.child(p, true);

$.reset(p);

$.template_effect(() => {
result = svelte.compile(source, {
generate: ,
});

div.svelte-17uh762 {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
flex-direction: column;
}

kbd.svelte-17uh762 {
background-color: #eee;
border-radius: 4px;
font-size: 6em;
padding: 0.2em 0.5em;
border-top: 5px solid rgba(255, 255, 255, 0.5);
border-left: 5px solid rgba(255, 255, 255, 0.5);
border-right: 5px solid rgba(0, 0, 0, 0.2);
border-bottom: 5px solid rgba(0, 0, 0, 0.2);
color: #555;
}

		
			
				
  • Root {
    • css: StyleSheet {...}
      • type: "StyleSheet"
      • start: 369
      • end: 814
      • attributes: []
      • children: [...] (2)
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 378
            • end: 381
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 378
                • end: 381
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • TypeSelector {...}
                        • type: "TypeSelector"
                        • name: "div"
                        • start: 378
                        • end: 381
                        }
                      ]
                    • start: 378
                    • end: 381
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 382
            • end: 495
            • children: [...] (5)
              • Declaration {...}
                • type: "Declaration"
                • start: 386
                • end: 399
                • property: "display"
                • value: "flex"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 403
                • end: 415
                • property: "height"
                • value: "100%"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 419
                • end: 438
                • property: "align-items"
                • value: "center"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 442
                • end: 465
                • property: "justify-content"
                • value: "center"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 469
                • end: 491
                • property: "flex-direction"
                • value: "column"
                }
              ]
            }
          • start: 378
          • end: 495
          }
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 498
            • end: 501
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 498
                • end: 501
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • TypeSelector {...}
                        • type: "TypeSelector"
                        • name: "kbd"
                        • start: 498
                        • end: 501
                        }
                      ]
                    • start: 498
                    • end: 501
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 502
            • end: 805
            • children: [...] (9)
              • Declaration {...}
                • type: "Declaration"
                • start: 506
                • end: 528
                • property: "background-color"
                • value: "#eee"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 532
                • end: 550
                • property: "border-radius"
                • value: "4px"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 554
                • end: 568
                • property: "font-size"
                • value: "6em"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 572
                • end: 592
                • property: "padding"
                • value: "0.2em 0.5em"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 596
                • end: 642
                • property: "border-top"
                • value: "5px solid rgba(255, 255, 255, 0.5)"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 646
                • end: 693
                • property: "border-left"
                • value: "5px solid rgba(255, 255, 255, 0.5)"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 697
                • end: 739
                • property: "border-right"
                • value: "5px solid rgba(0, 0, 0, 0.2)"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 743
                • end: 786
                • property: "border-bottom"
                • value: "5px solid rgba(0, 0, 0, 0.2)"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 790
                • end: 801
                • property: "color"
                • value: "#555"
                }
              ]
            }
          • start: 498
          • end: 805
          }
        ]
      • content: {...}
        • start: 376
        • end: 806
        • styles: "\n\tdiv {\n\t\tdisplay: flex;\n\t\theight: 100%;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tflex-direction: column;\n\t}\n\n\tkbd {\n\t\tbackground-color: #eee;\n\t\tborder-radius: 4px;\n\t\tfont-size: 6em;\n\t\tpadding: 0.2em 0.5em;\n\t\tborder-top: 5px solid rgba(255, 255, 255, 0.5);\n\t\tborder-left: 5px solid rgba(255, 255, 255, 0.5);\n\t\tborder-right: 5px solid rgba(0, 0, 0, 0.2);\n\t\tborder-bottom: 5px solid rgba(0, 0, 0, 0.2);\n\t\tcolor: #555;\n\t}\n"
        • comment: null
        }
      }
    • js: []
    • start: 149
    • end: 367
    • type: "Root"
    • fragment: Fragment {...}
      • type: "Fragment"
      • nodes: [...] (5)
        • Text {...}
          • type: "Text"
          • start: 147
          • end: 149
          • raw: "\n\n"
          • data: "\n\n"
          }
        • SvelteWindow {...}
          • type: "SvelteWindow"
          • start: 149
          • end: 192
          • name: "svelte:window"
          • attributes: [...] (1)
            • Attribute {...}
              • type: "Attribute"
              • start: 164
              • end: 189
              • name: "onkeydown"
              • value: ExpressionTag {...}
                • type: "ExpressionTag"
                • start: 174
                • end: 189
                • expression: Identifier {...}
                  • type: "Identifier"
                  • start: 175
                  • end: 188
                  • loc: {...}
                    • start: {...}
                      • line: 11
                      • column: 26
                      }
                    • end: {...}
                      • line: 11
                      • column: 39
                      }
                    }
                  • name: "handleKeydown"
                  }
                }
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: []
            }
          }
        • Text {...}
          • type: "Text"
          • start: 192
          • end: 194
          • raw: "\n\n"
          • data: "\n\n"
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 194
          • end: 367
          • name: "div"
          • attributes: [...] (2)
            • Attribute {...}
              • type: "Attribute"
              • start: 199
              • end: 225
              • name: "style"
              • value: [...] (1)
                • Text {...}
                  • start: 206
                  • end: 224
                  • type: "Text"
                  • raw: "text-align: center"
                  • data: "text-align: center"
                  }
                ]
              }
            • Attribute {...}
              • type: "Attribute"
              • start: -1
              • end: -1
              • name: "class"
              • value: [...] (1)
                • Text {...}
                  • type: "Text"
                  • data: "svelte-17uh762"
                  • raw: "svelte-17uh762"
                  • start: -1
                  • end: -1
                  }
                ]
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (3)
              • Text {...}
                • type: "Text"
                • start: 226
                • end: 228
                • raw: "\n\t"
                • data: "\n\t"
                }
              • IfBlock {...}
                • type: "IfBlock"
                • elseif: false
                • start: 228
                • end: 360
                • test: Identifier {...}
                  • type: "Identifier"
                  • start: 233
                  • end: 236
                  • loc: {...}
                    • start: {...}
                      • line: 14
                      • column: 6
                      }
                    • end: {...}
                      • line: 14
                      • column: 9
                      }
                    }
                  • name: "key"
                  }
                • consequent: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (5)
                    • Text {...}
                      • type: "Text"
                      • start: 237
                      • end: 240
                      • raw: "\n\t\t"
                      • data: "\n\t\t"
                      }
                    • RegularElement {...}
                      • type: "RegularElement"
                      • start: 240
                      • end: 280
                      • name: "kbd"
                      • attributes: [...] (1)
                        • Attribute {...}
                          • type: "Attribute"
                          • start: -1
                          • end: -1
                          • name: "class"
                          • value: [...] (1)
                            • Text {...}
                              • type: "Text"
                              • data: "svelte-17uh762"
                              • raw: "svelte-17uh762"
                              • start: -1
                              • end: -1
                              }
                            ]
                          }
                        ]
                      • fragment: Fragment {...}
                        • type: "Fragment"
                        • nodes: [...] (1)
                          • ExpressionTag {...}
                            • type: "ExpressionTag"
                            • start: 245
                            • end: 274
                            • expression: ConditionalExpression {...}
                              • type: "ConditionalExpression"
                              • start: 246
                              • end: 273
                              • loc: {...}
                                • start: {...}
                                  • line: 15
                                  • column: 8
                                  }
                                • end: {...}
                                  • line: 15
                                  • column: 35
                                  }
                                }
                              • test: BinaryExpression {...}
                                • type: "BinaryExpression"
                                • start: 246
                                • end: 257
                                • loc: {...}
                                  • start: {...}
                                    • line: 15
                                    • column: 8
                                    }
                                  • end: {...}
                                    • line: 15
                                    • column: 19
                                    }
                                  }
                                • left: Identifier {...}
                                  • type: "Identifier"
                                  • start: 246
                                  • end: 249
                                  • loc: {...}
                                    • start: {...}
                                      • line: 15
                                      • column: 8
                                      }
                                    • end: {...}
                                      • line: 15
                                      • column: 11
                                      }
                                    }
                                  • name: "key"
                                  }
                                • operator: "==="
                                • right: Literal {...}
                                  • type: "Literal"
                                  • start: 254
                                  • end: 257
                                  • loc: {...}
                                    • start: {...}
                                      • line: 15
                                      • column: 16
                                      }
                                    • end: {...}
                                      • line: 15
                                      • column: 19
                                      }
                                    }
                                  • value: " "
                                  • raw: "' '"
                                  }
                                }
                              • consequent: Literal {...}
                                • type: "Literal"
                                • start: 260
                                • end: 267
                                • loc: {...}
                                  • start: {...}
                                    • line: 15
                                    • column: 22
                                    }
                                  • end: {...}
                                    • line: 15
                                    • column: 29
                                    }
                                  }
                                • value: "Space"
                                • raw: "'Space'"
                                }
                              • alternate: Identifier {...}
                                • type: "Identifier"
                                • start: 270
                                • end: 273
                                • loc: {...}
                                  • start: {...}
                                    • line: 15
                                    • column: 32
                                    }
                                  • end: {...}
                                    • line: 15
                                    • column: 35
                                    }
                                  }
                                • name: "key"
                                }
                              }
                            }
                          ]
                        }
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 280
                      • end: 283
                      • raw: " "
                      • data: " "
                      }
                    • RegularElement {...}
                      • type: "RegularElement"
                      • start: 283
                      • end: 299
                      • name: "p"
                      • attributes: []
                      • fragment: Fragment {...}
                        • type: "Fragment"
                        • nodes: [...] (1)
                          • ExpressionTag {...}
                            • type: "ExpressionTag"
                            • start: 286
                            • end: 295
                            • expression: Identifier {...}
                              • type: "Identifier"
                              • start: 287
                              • end: 294
                              • loc: {...}
                                • start: {...}
                                  • line: 16
                                  • column: 6
                                  }
                                • end: {...}
                                  • line: 16
                                  • column: 13
                                  }
                                }
                              • name: "keyCode"
                              }
                            }
                          ]
                        }
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 299
                      • end: 301
                      • raw: "\n\t"
                      • data: "\n\t"
                      }
                    ]
                  }
                • alternate: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (3)
                    • Text {...}
                      • type: "Text"
                      • start: 308
                      • end: 311
                      • raw: "\n\t\t"
                      • data: "\n\t\t"
                      }
                    • RegularElement {...}
                      • type: "RegularElement"
                      • start: 311
                      • end: 353
                      • name: "p"
                      • attributes: []
                      • fragment: Fragment {...}
                        • type: "Fragment"
                        • nodes: [...] (1)
                          • Text {...}
                            • type: "Text"
                            • start: 314
                            • end: 349
                            • raw: "Focus this window and press any key"
                            • data: "Focus this window and press any key"
                            }
                          ]
                        }
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 353
                      • end: 355
                      • raw: "\n\t"
                      • data: "\n\t"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 360
                • end: 361
                • raw: "\n"
                • data: "\n"
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 367
          • end: 369
          • raw: "\n\n"
          • data: "\n\n"
          }
        ]
      }
    • options: null
    • instance: Script {...}
      • type: "Script"
      • start: 0
      • end: 147
      • context: "default"
      • content: Program {...}
        • type: "Program"
        • start: 8
        • end: 138
        • loc: {...}
          • start: {...}
            • line: 1
            • column: 0
            }
          • end: {...}
            • line: 9
            • column: 0
            }
          }
        • body: [...] (3)
          • VariableDeclaration {...}
            • type: "VariableDeclaration"
            • start: 10
            • end: 29
            • loc: {...}
              • start: {...}
                • line: 2
                • column: 1
                }
              • end: {...}
                • line: 2
                • column: 20
                }
              }
            • declarations: [...] (1)
              • VariableDeclarator {...}
                • type: "VariableDeclarator"
                • start: 14
                • end: 28
                • loc: {...}
                  • start: {...}
                    • line: 2
                    • column: 5
                    }
                  • end: {...}
                    • line: 2
                    • column: 19
                    }
                  }
                • id: Identifier {...}
                  • type: "Identifier"
                  • start: 14
                  • end: 17
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 5
                      }
                    • end: {...}
                      • line: 2
                      • column: 8
                      }
                    }
                  • name: "key"
                  }
                • init: CallExpression {...}
                  • type: "CallExpression"
                  • start: 20
                  • end: 28
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 11
                      }
                    • end: {...}
                      • line: 2
                      • column: 19
                      }
                    }
                  • callee: Identifier {...}
                    • type: "Identifier"
                    • start: 20
                    • end: 26
                    • loc: {...}
                      • start: {...}
                        • line: 2
                        • column: 11
                        }
                      • end: {...}
                        • line: 2
                        • column: 17
                        }
                      }
                    • name: "$state"
                    }
                  • arguments: []
                  • optional: false
                  }
                }
              ]
            • kind: "let"
            }
          • VariableDeclaration {...}
            • type: "VariableDeclaration"
            • start: 31
            • end: 54
            • loc: {...}
              • start: {...}
                • line: 3
                • column: 1
                }
              • end: {...}
                • line: 3
                • column: 24
                }
              }
            • declarations: [...] (1)
              • VariableDeclarator {...}
                • type: "VariableDeclarator"
                • start: 35
                • end: 53
                • loc: {...}
                  • start: {...}
                    • line: 3
                    • column: 5
                    }
                  • end: {...}
                    • line: 3
                    • column: 23
                    }
                  }
                • id: Identifier {...}
                  • type: "Identifier"
                  • start: 35
                  • end: 42
                  • loc: {...}
                    • start: {...}
                      • line: 3
                      • column: 5
                      }
                    • end: {...}
                      • line: 3
                      • column: 12
                      }
                    }
                  • name: "keyCode"
                  }
                • init: CallExpression {...}
                  • type: "CallExpression"
                  • start: 45
                  • end: 53
                  • loc: {...}
                    • start: {...}
                      • line: 3
                      • column: 15
                      }
                    • end: {...}
                      • line: 3
                      • column: 23
                      }
                    }
                  • callee: Identifier {...}
                    • type: "Identifier"
                    • start: 45
                    • end: 51
                    • loc: {...}
                      • start: {...}
                        • line: 3
                        • column: 15
                        }
                      • end: {...}
                        • line: 3
                        • column: 21
                        }
                      }
                    • name: "$state"
                    }
                  • arguments: []
                  • optional: false
                  }
                }
              ]
            • kind: "let"
            }
          • FunctionDeclaration {...}
            • type: "FunctionDeclaration"
            • start: 57
            • end: 137
            • loc: {...}
              • start: {...}
                • line: 5
                • column: 1
                }
              • end: {...}
                • line: 8
                • column: 2
                }
              }
            • id: Identifier {...}
              • type: "Identifier"
              • start: 66
              • end: 79
              • loc: {...}
                • start: {...}
                  • line: 5
                  • column: 10
                  }
                • end: {...}
                  • line: 5
                  • column: 23
                  }
                }
              • name: "handleKeydown"
              }
            • expression: false
            • generator: false
            • async: false
            • params: [...] (1)
              • Identifier {...}
                • type: "Identifier"
                • start: 80
                • end: 85
                • loc: {...}
                  • start: {...}
                    • line: 5
                    • column: 24
                    }
                  • end: {...}
                    • line: 5
                    • column: 29
                    }
                  }
                • name: "event"
                }
              ]
            • body: BlockStatement {...}
              • type: "BlockStatement"
              • start: 87
              • end: 137
              • loc: {...}
                • start: {...}
                  • line: 5
                  • column: 31
                  }
                • end: {...}
                  • line: 8
                  • column: 2
                  }
                }
              • body: [...] (2)
                • ExpressionStatement {...}
                  • type: "ExpressionStatement"
                  • start: 91
                  • end: 107
                  • loc: {...}
                    • start: {...}
                      • line: 6
                      • column: 2
                      }
                    • end: {...}
                      • line: 6
                      • column: 18
                      }
                    }
                  • expression: AssignmentExpression {...}
                    • type: "AssignmentExpression"
                    • start: 91
                    • end: 106
                    • loc: {...}
                      • start: {...}
                        • line: 6
                        • column: 2
                        }
                      • end: {...}
                        • line: 6
                        • column: 17
                        }
                      }
                    • operator: "="
                    • left: Identifier {...}
                      • type: "Identifier"
                      • start: 91
                      • end: 94
                      • loc: {...}
                        • start: {...}
                          • line: 6
                          • column: 2
                          }
                        • end: {...}
                          • line: 6
                          • column: 5
                          }
                        }
                      • name: "key"
                      }
                    • right: MemberExpression {...}
                      • type: "MemberExpression"
                      • start: 97
                      • end: 106
                      • loc: {...}
                        • start: {...}
                          • line: 6
                          • column: 8
                          }
                        • end: {...}
                          • line: 6
                          • column: 17
                          }
                        }
                      • object: Identifier {...}
                        • type: "Identifier"
                        • start: 97
                        • end: 102
                        • loc: {...}
                          • start: {...}
                            • line: 6
                            • column: 8
                            }
                          • end: {...}
                            • line: 6
                            • column: 13
                            }
                          }
                        • name: "event"
                        }
                      • property: Identifier {...}
                        • type: "Identifier"
                        • start: 103
                        • end: 106
                        • loc: {...}
                          • start: {...}
                            • line: 6
                            • column: 14
                            }
                          • end: {...}
                            • line: 6
                            • column: 17
                            }
                          }
                        • name: "key"
                        }
                      • computed: false
                      • optional: false
                      }
                    }
                  }
                • ExpressionStatement {...}
                  • type: "ExpressionStatement"
                  • start: 110
                  • end: 134
                  • loc: {...}
                    • start: {...}
                      • line: 7
                      • column: 2
                      }
                    • end: {...}
                      • line: 7
                      • column: 26
                      }
                    }
                  • expression: AssignmentExpression {...}
                    • type: "AssignmentExpression"
                    • start: 110
                    • end: 133
                    • loc: {...}
                      • start: {...}
                        • line: 7
                        • column: 2
                        }
                      • end: {...}
                        • line: 7
                        • column: 25
                        }
                      }
                    • operator: "="
                    • left: Identifier {...}
                      • type: "Identifier"
                      • start: 110
                      • end: 117
                      • loc: {...}
                        • start: {...}
                          • line: 7
                          • column: 2
                          }
                        • end: {...}
                          • line: 7
                          • column: 9
                          }
                        }
                      • name: "keyCode"
                      }
                    • right: MemberExpression {...}
                      • type: "MemberExpression"
                      • start: 120
                      • end: 133
                      • loc: {...}
                        • start: {...}
                          • line: 7
                          • column: 12
                          }
                        • end: {...}
                          • line: 7
                          • column: 25
                          }
                        }
                      • object: Identifier {...}
                        • type: "Identifier"
                        • start: 120
                        • end: 125
                        • loc: {...}
                          • start: {...}
                            • line: 7
                            • column: 12
                            }
                          • end: {...}
                            • line: 7
                            • column: 17
                            }
                          }
                        • name: "event"
                        }
                      • property: Identifier {...}
                        • type: "Identifier"
                        • start: 126
                        • end: 133
                        • loc: {...}
                          • start: {...}
                            • line: 7
                            • column: 18
                            }
                          • end: {...}
                            • line: 7
                            • column: 25
                            }
                          }
                        • name: "keyCode"
                        }
                      • computed: false
                      • optional: false
                      }
                    }
                  }
                ]
              }
            }
          ]
        • sourceType: "module"
        }
      • attributes: []
      }
    }
The AST is not public API and may change at any point in time
<svelte:window> • Playground • Svelte