Can you import local JSON files into Svelte components?

Yes. SvelteKit uses Vite tooling which lets you import JSON files in addition to, for example, all file in a folder matching a pattern (glob imports). Unlike glob imports, there are no promises involved, and you can import an entire JSON file as a default import using the regular syntax: import data from '../data.json'. If you only need part of the file, you can also use a named import to import root level elements from the JSON file.

How do you import part of a JSON file in Vite?

You can import the entire JSON file as the default export. Alternatively, you can import any root level element as a named import. For example, if the JSON file structure is { sponsors: ['sponsor1', 'sponsor2'], clients: ['client1', 'client2']}, both sponsors and clients are root level arrays. You can import either of these as a named import into a Svelte component file, for example, using SvelteKit. That is because SvelteKit uses Vite tooling. The import syntax is just what you will already be familiar with, e.g. import { clients, sponsors } from '../data.json';. Importing named imports in this way can be more efficient as it helps with tress shaking. Tree shaking is just the process of eliminating unused or dead code, to keep apps as lean as they can be.

How do you get types on imported JSON in SvelteKit?

SvelteKit supports JSON imports out-of-the-box. To get types on the imported JSON though, you just need to add a couple of lines of code to `jsconfig.json` or `tsconfig.json` (whichever you have in your project). With those changes, you will get in-editor type checking and be able to display the type of an imported JSON variable by hovering over it. To get this working, just add these two lines under compiler options: `"resolveJsonModule": true,` and `"esModueInterop": true`.

What are the advantages of using JSON input data with SvelteKit?

JSON is easy to read and understand, even by people with little technical expertise. It is also a popular data output format for business apps. Accepting JSON input data can make your app more useful to an end client, allowing them to update inputs themselves, without coding knowledge. There may be small data inputs which live outside a more formal CMS. When these inputs need updating from time-to-time JSON is a nice choice. An example might be the office locations for a small business on their brochure site.

SvelteKit JSON Import: use JSON Data in Svelte # SvelteKit JSON Import: use JSON Data in Svelte #

SvelteKit JSON Import: use JSON Data in Svelte #

Updated 2 years ago

5 minute read

Gunning Fog Index: 5.7 2 comments

Content by Rodney

🖥 SvelteKit JSON Import #

There are many applications for SvelteKit JSON import. You might be building a client site, for example, and want to let the client update data for certain pages from time-to-time. It could also be a business app you are building which you want to read JSON data updated as part of a regular business process. Leaving aside not being able to add comments, JSON is a great format for storing data and is easily human-readable. On top, it can be updated without any JavaScript knowledge and little technical experience.

In this short video, we see how you can import entire JSON files into your Svelte components. On top, Vite makes it possible to extract certain objects or arrays from JSON and import just what you need, keeping your pages lean. If you're ready to see all that, hit play and sit back!

📹 SvelteKit JSON Import: Video #

Please enable JavaScript to watch the video 📼

SvelteKit JSON Import

🗳 Poll #

What’s your “go to” data format?

🖥 SvelteKit JSON Import: Code #

+page.svelte

svelte

    1 <script>
2   // import entire JSON file as a default import
3   import people from '$lib/data/people.json';
4  
5   // import root level object as a named import
6   import { sponsors } from '$lib/data/clientsSponsors.json';
7  
8   import '@fontsource/open-sans/400.css';
9   import '@fontsource/open-sans/700.css';
10  
11   const BULLET_ENTITY = '•';
12   const EM_SPACE_ENTITY = ' ';
13  
14   // we access the root level sponsors element (which is an array) directly in code
15   const sponsorString = sponsors
16     .map((element) => element.name)
17     .join(`${EM_SPACE_ENTITY}${BULLET_ENTITY}${EM_SPACE_ENTITY}`);
18 </script>
19  
20 <svelte:head>
21   <title>About Us</title>
22 </svelte:head>
23  
24 <header class="heading">
25   <div class="title">
26     <h1>About Us</h1>
27   </div>
28 </header>
29 <main>
30   <section class="sponsors">
31     <h2>Our Sponsors</h2>
32     <div class="scrolling-text"><p>{sponsorString}</p></div>
33   </section>
34   <section>
35     <h2>Our People</h2>
36     <div class="people">
37       <!-- We can access the people default import which is an array directly in the code -->
38       {#each people as { firstName, lastName, jobTitle, email }, index}
39         <article aria-posinset={index + 1} aria-setsize={people.length} class="person">
40           <h2>{firstName} {lastName}</h2>
41           <p><strong>{jobTitle}</strong></p>
42           <p>{email}</p>
43         </article>
44       {/each}
45     </div>
46   </section>
47 </main>

Bonus: Typed JSON imports #

You can get types from imported JSON by updating the jsconfig.json or tsconfig.json file in the project root folder. Just add the two highlighted lines:

jsonconfig.json

json

    1 {
2   "compilerOptions": {
3     "baseUrl": ".",
4     "paths": {
5       "$lib": ["src/lib"],
6       "$lib/*": ["src/lib/*"]
7     },
8     "resolveJsonModule": true,
9     "esModueInterop": true
10   },
11   "extends": "./.svelte-kit/tsconfig.json",
12   "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
13 }

🔗 SvelteKit JSON Import: Links #

🏁 Readable and Writable Svelte Stores: Summary #

Can you import local JSON files into Svelte components? #: Yes. SvelteKit uses Vite tooling which lets you import JSON files in addition to, for example, all file in a folder matching a pattern (glob imports). Unlike glob imports, there are no promises involved, and you can import an entire JSON file as a default import using the regular syntax: import data from '../data.json'. If you only need part of the file, you can also use a named import to import root level elements from the JSON file.
How do you import part of a JSON file in Vite? #: You can import the entire JSON file as the default export. Alternatively, you can import any root level element as a named import. For example, if the JSON file structure is { sponsors: ['sponsor1', 'sponsor2'], clients: ['client1', 'client2']}, both sponsors and clients are root level arrays. You can import either of these as a named import into a Svelte component file, for example, using SvelteKit. That is because SvelteKit uses Vite tooling. The import syntax is just what you will already be familiar with, e.g. import { clients, sponsors } from '../data.json';. Importing named imports in this way can be more efficient as it helps with tress shaking. Tree shaking is just the process of eliminating unused or dead code, to keep apps as lean as they can be.
How do you get types on imported JSON in SvelteKit? #: SvelteKit supports JSON imports out-of-the-box. To get types on the imported JSON though, you just need to add a couple of lines of code to `jsconfig.json` or `tsconfig.json` (whichever you have in your project). With those changes, you will get in-editor type checking and be able to display the type of an imported JSON variable by hovering over it. To get this working, just add these two lines under compiler options: `"resolveJsonModule": true,` and `"esModueInterop": true`.
What are the advantages of using JSON input data with SvelteKit? #: JSON is easy to read and understand, even by people with little technical expertise. It is also a popular data output format for business apps. Accepting JSON input data can make your app more useful to an end client, allowing them to update inputs themselves, without coding knowledge. There may be small data inputs which live outside a more formal CMS. When these inputs need updating from time-to-time JSON is a nice choice. An example might be the office locations for a small business on their brochure site.

🙏🏽 Feedback #

If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention, so I can see what you did. Finally, be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.

Just updated the video where we take a look at Vite JSON imports in more detail.

We now use the new SvelteKit routing API.

Hope you find it useful!

#askRodney https://t.co/zDf0vmdrfA
— Rodney (@askRodney) October 17, 2022

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.