← All topics

Svelte Junior interview questions and answers

76 questions for a Svelte (Junior) interview - with correct answers, explanations and links to the docs.

Take this quiz
  1. 1.What is Svelte?
  2. 2.What is SvelteKit?
  3. 3.What is the recommended way to create a new SvelteKit project?
  4. 4.What can a .svelte file contain?
  5. 5.How is CSS in a component's <style> block applied by default?
  6. 6.How do you output a JavaScript value in Svelte markup?
  7. 7.What is the shorthand for <img src={src} alt={alt} />?
  8. 8.Does Svelte use a virtual DOM?
  9. 9.What are runes in Svelte 5?
  10. 10.How do you declare reactive state in Svelte 5?
  11. 11.How do you declare a value computed from other state?
  12. 12.What does $effect do?
  13. 13.How does a component receive props in Svelte 5?
  14. 14.Where can runes be used?
  15. 15.Is an object declared with $state deeply reactive?
  16. 16.What does $inspect(value) do?
  17. 17.How do you render content conditionally?
  18. 18.How do you render a list?
  19. 19.Why shouldn't you use the index as the key in {#each}?
  20. 20.What does the {#await} block do?
  21. 21.How do you handle a click in Svelte 5?
  22. 22.How do you prevent a form's default submission in Svelte 5?
  23. 23.What does bind:value do?
  24. 24.How do you get a reference to a DOM element?
  25. 25.What is the risk of {@html content}?
  26. 26.How can you pass several classes conditionally in Svelte 5?
  27. 27.What does the style: directive do?
  28. 28.How do you use one component inside another?
  29. 29.How does a component render content passed between its tags in Svelte 5?
  30. 30.What is a snippet?
  31. 31.How does a child component tell its parent that something happened in Svelte 5?
  32. 32.How do you allow a parent to use bind:value on your component's prop?
  33. 33.Should a component mutate a prop object it received (not marked $bindable)?
  34. 34.How do you render a component chosen at runtime in Svelte 5?
  35. 35.How can a parent style an element inside a child component without breaking scoping?
  36. 36.When does onMount run?
  37. 37.How do you clean up a timer created in $effect?
  38. 38.What does tick() return?
  39. 39.How do you animate an element appearing and disappearing?
  40. 40.What does animate:flip do in a keyed {#each}?
  41. 41.What is context in Svelte for?
  42. 42.When must setContext / getContext be called?
  43. 43.What is a store in Svelte?
  44. 44.What does the $ prefix do with a store in a component?
  45. 45.How do you share reactive state between components without stores in Svelte 5?
  46. 46.How do you add a listener to window from a component?
  47. 47.How do you set the page title from a component?
  48. 48.What does <svelte:element this={tag}> do?
  49. 49.How are routes defined in SvelteKit?
  50. 50.How do you create a route with a parameter, like /blog/hello-world?
  51. 51.What is +layout.svelte for?
  52. 52.How does a page get data from its load function?
  53. 53.What is the difference between +page.js and +page.server.js?
  54. 54.What file creates an API endpoint in SvelteKit?
  55. 55.How do you show a 404 page from load when a post doesn't exist?
  56. 56.What are form actions in SvelteKit?
  57. 57.How do you navigate between pages in SvelteKit?
  58. 58.What are SvelteKit adapters?
  59. 59.What does export const prerender = true in +page.js do?
  60. 60.What does this code print when the button is clicked twice?
  61. 61.What happens with reactivity here?
  62. 62.What does {@const} do?
  63. 63.What does {#key value} do?
  64. 64.How do you use TypeScript in a Svelte component?
  65. 65.Which Svelte version introduced runes?
  66. 66.Which syntax is legacy (Svelte 4) and should be avoided in new code?
  67. 67.How do you make a checkbox group bound to an array?
  68. 68.What does the use: directive (action) receive?
  69. 69.How do you check Svelte types and templates from the command line?
  70. 70.What does the Svelte compiler warn about with <div onclick={...}>?
  71. 71.What does $state.snapshot(value) return?
  72. 72.How do you read the current URL or route params in a SvelteKit component?
  73. 73.Why are Svelte bundles often small?
  74. 74.Where do static files like favicon.png go in a SvelteKit project?
  75. 75.Which file defines the HTML shell for every SvelteKit page?
  76. 76.What does <svelte:boundary> do?