How to iterate over an object reactively?
I need to iterate over an object. The object is declared with:const obj = $state({ one: { checked: true }, two: { checked: false }, three: { checked: true } });In my Svelte templating code, I do...
View ArticleHow do I correctly validate svelte5 props with zod?
I'm new to svelte having previously worked in react and I ran into something that confused me when trying to use zod to ensure proper (runtime) typesafety of my svelte components.My typical approach is...
View ArticleTrying to load a custom .glb file but constantly getting an HTML/404 response...
Cannot work out where to put the model.glb file.Error:Error in asyncWritable: Unexpected token '<', "<!doctype "... is not valid JSON.Created the project with - 'npm create...
View ArticleUsing $env with SvelteKit and Docker
SvelteKit provides a good and easy way to use ENV variables:https://learn.svelte.dev/tutorial/env-static-publicIm using Docker in a CI pipeline to create images. However when running RUN npm run build...
View ArticleHow to monitor changes to a Svelte writeable?
Currently I have this code:File A.js:import { writable, derived } from "svelte/store";export const notify = writable(false)File B.svelte:import { notify } from '$lib/store';$effect(() => { if...
View Article@rollup/plugin-typescript TS2307: Cannot find module...
TS FILEimport App from "../xxx/HelloWorld.svelte";const app = new App({ target: document.body,});export default app;TSCONFIG.JSON{"extends": "@tsconfig/svelte/tsconfig.json","include": ["./**/*",...
View ArticleMy tooltip isn't working on android as getBoundingClientRect is returning 0
I'm implementing a tooltip feature on my page and encountered a specific issue on Android devices. While the tooltips work perfectly on desktop, iOS, and even in resized browser windows, they behave...
View ArticleonMount called after function call from parent component
I have the following minimal example:Component A:<script lang="ts"> import {tick} from 'svelte'; import LocationSelector from './LocationSelector.svelte'; let locationSelector: LocationSelector;...
View ArticleHow to display Portable Text block content images in SvelteKit
I'm trying to render a blog post from Sanity Studio in my SvelteKit project.Currently, all of the text etc is being displayed, but images within the block content aren't. Below is what I have tried so...
View ArticleAutoPlay Slides not working for Swiper JS
I am currently working with svelte to create a smooth auto slider using SwiperJs. It seems that I am unable to create that animation.When loading the page, the autoPlay dosen't seem to work.Below is...
View Article@rollup/plugin-typescript TS2307: Cannot find module or its corresponding...
main.ts fileimport App from "../components/HelloWorld.svelte";const app = new App({ target: document.body, });export default app;rollup.config.json fileimport svelte from "rollup-plugin-svelte";import...
View ArticleHow to properly wrap a WebComponent in Svelte(kit) 5
I need to use some WebComponents at $JOB inside SvelteKit, built as a SPA.Supposing that <my-web-component> has:API attributes (like disabled, but custom ones)MethodsEventsWhat could be the best...
View ArticleEscape Root Layout Svelte Sveltekit
According to the new routing system you can now group routes and have specific layout files in each group. These files inherit for their parent layout files. You can omit this, by using...
View ArticleSvelte KaTeX automatic line breaks
I am generating random math expressions and displaying them on a website using Svelte and KaTeX. Sometimes, the generated formula becomes too long for its container, but instead of automatically...
View Articlewails dev Call from terminal unable to find wails.json
I am using a copy of the Wails + Svelte hello world app and I am using it to do a Svelte tutorial.(Tutorial Link)https://svelte.dev/tutorial/svelte/nested-componentsUp until I reached this particular...
View ArticleHow to handle expired http requests in Svelte?
The way I have it set up is a class that handles all the api calls. In this class I keep a map for GET requests, key is url, value is AbortController.If a request is being sent and another one of the...
View ArticleHow to handle large number of data coming from back-end, without pagination
Let's say I call an API to fetch some data from the database, based on certain query parameters, and that API queries the database and gets a large number of results, for example 1 million.Whats the...
View ArticleAccessing SvelteKit vite local development server from Android phone
I have built a landing page with Sveltekit, and I want to test the website on my Android phone while developing the mobile view, is there any way to do this?Before using Svelte (when I used plain HTML,...
View ArticleSvelte multiple small components vs regular html elements
Does it affect performance having svelte components instead of regular HTML elements, for small things like buttons, links etc?Wrapping these elements in a svelte component would make it more...
View ArticleAccess URL query string in svelte
How should I access the the query string parameters from svelte? I'd like my script to behave differently when "?beta" has been appended to the URL.My intuitive approach would be to use the standard...
View ArticleHow do I use tailwindcss @apply directive inside a svelte component
This works:<div class="list p-2" />This doesn't work:<style lang="postcss"> @tailwind base; @tailwind components; @tailwind utilities; @layer components { .list { @apply p-2; }...
View ArticleAstro + Svelte: Imported Svelte Components Have No Type Checking in VSCode
I'm using VSCode, and I've noticed that when I import Svelte components into my Astro components, they are typed as any, and TypeScript does not type-check the props.I have set up my project...
View ArticleHow to set dynamic html tag according to props in Svelte
I'm creating a Heading component in svelte as a part of learning the basics of this framework. The component behavior is pretty straight-forward. The component will have a prop named level, which will...
View ArticleSvelte 5 Unsafe State Mutation at Tree Component
I need help with Svelte components. I've built a tree that should allow users to check nodes and update related nodes. When a node is checked, its parents and children should react accordingly....
View ArticleSvelte input blur triggered when element is focused
Maybe its not related to svelte, but if do some DOM changes after input is focused, for example<input onfocus={() => toggleVisibiltyOfOtherElement = true } onblur={() => console.log("blur")}...
View ArticleClik here to view.
How to Create my own Svelte Embed Component
Certain platforms like GitBook allow you to insert an embed URL, like https://www.youtube.com/embed/eGUEAvNpz48, and it displays as a component on that website, as seen here:I want to create my own...
View ArticleHaving trouble promisifying Google ReCAPTCHA v2 Invisible in Svelte 5 /...
I have been trying to get Google ReCAPTCHA v2 invisible work with sveltekit 2 / svelte 5 and I have run into a few issuesFirst of all this is the documentation for how to load CAPTCHA in your...
View ArticleHow to trigger LayoutServerLoad on every navigation in SvelteKit?
I want to add a JWT verification/refresh in +layout.server.ts that is called on every navigation action.I've got following code and noticed that the console.log() statement is only ran, when I reload...
View ArticleSvelte (vite?) installing static resources
How can I make static resources (e.g. fonts/images) in a node_modules package available in a Svelte application?I'd like the process to be automatic so you don't have to do anything manual if you use a...
View ArticleParameters in svelte action not reactive
Svelte action that does things when keys are pressed:import type { Action } from "svelte/action"export const keys: Action<HTMLElement, boolean> = (node, active?: boolean) => { function...
View Article