{"id":5111,"date":"2023-04-13T16:29:26","date_gmt":"2023-04-13T20:29:26","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=5111"},"modified":"2023-04-13T16:30:16","modified_gmt":"2023-04-13T20:30:16","slug":"cross-platform-sveltekit-capacitor-application-yes-its-possible","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible","title":{"rendered":"Cross-Platform Sveltekit &amp; Capacitor Application: Yes It\u2019s Possible!"},"content":{"rendered":"\n<p>A common misconception is that <a href=\"https:\/\/ionic.io\/blog\/capacitor-everything-youve-ever-wanted-to-know\">Capacitor<\/a> ONLY works if you have a React, Vue, or Angular app, but did you know that it works for other frameworks as well? I recently began my journey into learning Sveltekit and discovered that Sveltekit apps can use Capacitor as well as be deployed to iOS and Android just like those other frameworks. Let\u2019s take a look at how you can use Svelte with Capacitor and create cross-platform apps like you can with React, Vue, or Angular. A demo of the project can be found on <a href=\"https:\/\/github.com\/ionic-team\/SvelteCapacitorDemo\">GitHub<\/a>.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Sveltekit<\/h1>\n\n\n\n<p>What is <a href=\"https:\/\/kit.svelte.dev\/\">Sveltekit<\/a>? According to the Sveltekit website, it\u2019s a UI framework that allows you to write concise components with HTML, CSS, and JavaScript built on Svelte and Vite. It\u2019s a completely free open-source software that&#8217;s growing in popularity. While the Sveltekit team classifies it as a <em>love letter to web development<\/em>, I\u2019ve recently discovered that it just might be crushing on cross-platform development with how easy it is to get it to work with Capacitor\u2026 (Don\u2019t worry Sveltekit, your secret is safe with us).<\/p>\n\n\n\n<p>Getting a Sveltekit project setup is incredibly simple. Just start with creating <em>my-app<\/em>:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npm create svelte@latest my-app<\/code><\/pre>\n\n\n\n<p>Select <em>Skeleton Project <\/em>and select <em>Yes, using TypeScript syntax<\/em> if you are using TypeScript:<\/p>\n\n\n\n<p><em><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/lh4.googleusercontent.com\/yHKVekj3UhU7x7v2tppJE8PpRzd-o8M17idPtO-ZE0l1oBW6-RoZK7EILOPxxEr8VvmJ3i9G_m1tHztnj8BwnhsY6xYjRAUuepQCIBgjnPirEfoqG7AQX7CaCkL5C8FHpLv0cQDjFMdSGCj7U5mguNY\" width=\"624\" height=\"128\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 624px; --smush-placeholder-aspect-ratio: 624\/128;\"><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/yHKVekj3UhU7x7v2tppJE8PpRzd-o8M17idPtO-ZE0l1oBW6-RoZK7EILOPxxEr8VvmJ3i9G_m1tHztnj8BwnhsY6xYjRAUuepQCIBgjnPirEfoqG7AQX7CaCkL5C8FHpLv0cQDjFMdSGCj7U5mguNY\" width=\"624\" height=\"128\"><\/noscript><\/em><\/p>\n\n\n\n<p>When prompted for additional options, I selected <em>Add ESLint for code linting <\/em>but select the option that\u2019s best for your project:<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/lh4.googleusercontent.com\/XdFq6gYpDd7-f6ajM-zgxDE-S6q7N2BfTWsGazSgKPfzqg-_q2l4n0KsC7OVq9keUEuPsa18MEcb_WoV-AGcmQGjpUtqBV1E2BM1ENGeVFExDMK1rS_fv25jhoV6iSN5D_2vtFc5T5_4r9ETvrnCheg\" alt=\"\" width=\"629\" height=\"93\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 629px; --smush-placeholder-aspect-ratio: 629\/93;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/XdFq6gYpDd7-f6ajM-zgxDE-S6q7N2BfTWsGazSgKPfzqg-_q2l4n0KsC7OVq9keUEuPsa18MEcb_WoV-AGcmQGjpUtqBV1E2BM1ENGeVFExDMK1rS_fv25jhoV6iSN5D_2vtFc5T5_4r9ETvrnCheg\" alt=\"\" width=\"629\" height=\"93\" \/><\/noscript><\/figure>\n\n\n\n<p>Once that is completed, we\u2019ll need to go into the app directory and install all the boilerplate libraries:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">cd my-app\nnpm install<\/code><\/pre>\n\n\n\n<p>Then open the project in your IDE of choice and run the project from the built-in terminal:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npm run dev -- --open<\/code><\/pre>\n\n\n\n<p>This should open up the application on <a href=\"http:\/\/localhost:5173\/\">http:\/\/localhost:5173\/<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" data-src=\"https:\/\/lh3.googleusercontent.com\/N1Mr9ctL7TuIsrY9hqyPpklapuTMOew8YCD34em_OFUmnyckAVQnzcclKjohpX0a3mxh2vJDml3394VwsyUaM3zt94jQyon7rPxuRwPRVcLY3jbAUVPPWzPlKICvhsDyuJX-j1UTf1kbk9R3zQ0QnDw\" alt=\"\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/N1Mr9ctL7TuIsrY9hqyPpklapuTMOew8YCD34em_OFUmnyckAVQnzcclKjohpX0a3mxh2vJDml3394VwsyUaM3zt94jQyon7rPxuRwPRVcLY3jbAUVPPWzPlKICvhsDyuJX-j1UTf1kbk9R3zQ0QnDw\" alt=\"\" \/><\/noscript><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\">Capacitor<\/h1>\n\n\n\n<p>Once you have your Sveltekit project, we\u2019ll need to get Capacitor running with the default Sveltekit project by installing <em>@capacitor\/core<\/em>, <em>@capacitor\/cli<\/em>, <em>@capacitor\/geolocation <\/em>(we\u2019ll be using geolocation later) and create the config (I\u2019m using the default options so make sure you adjust these to work for your project as they\u2019ll likely vary when\/if you get to mobile deployments):<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npm install @capacitor\/core @capacitor\/cli @capacitor\/geolocation\nnpx cap init<\/code><\/pre>\n\n\n\n<p>Once installed, we\u2019ll need to build the web app to compile everything:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npm run build<\/code><\/pre>\n\n\n\n<p>With the build completed, let\u2019s test add a native Capacitor call to our Sveltekit project by updating <em>src\/routes\/+page.svelte <\/em>file:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">&lt;script&gt;\n    import { Geolocation } from &#039;@capacitor\/geolocation&#039;;\n\n    let loc = null;\n    async function getCurrentPosition(){\n        const res = await Geolocation.getCurrentPosition()\n        loc = res\n    }\n&lt;\/script&gt;\n\n&lt;div&gt;\n    &lt;h1&gt;Geolocation&lt;\/h1&gt;\n    &lt;p&gt;Your location is:&lt;\/p&gt;\n    &lt;p&gt;Latitude: {loc?.coords.latitude}&lt;\/p&gt;\n    &lt;p&gt;Longitude: {loc?.coords.longitude}&lt;\/p&gt;\n\n    &lt;button on:click={getCurrentPosition}&gt;\n        Get Current Location\n    &lt;\/button&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;\n    div {\n        padding-top: 50px;\n    }\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>With the landing page updated, navigate back to <a href=\"http:\/\/localhost:5173\/\">http:\/\/localhost:5173\/<\/a> and we should see the generic Geolocation page. If you click on <em>Get Current Location<\/em> in the browser, you should be prompted to share your location and you\u2019ll get your current coordinates if you agree to share your location:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" data-src=\"https:\/\/lh3.googleusercontent.com\/k45Qfh282mnKYUZwHjUrqxBHiqXBDBZhjM0Yy6e8RnU75Mwpbh5Iwn4XokvRgMY8lXS-jk8KXdyL7RpC9zimJkPDmbRY8A3D2KM-WxVw1BHpzlqiP5u02l74tZ1qXxxF1pzywNsXN3oiYO66KgYcYms\" alt=\"\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/k45Qfh282mnKYUZwHjUrqxBHiqXBDBZhjM0Yy6e8RnU75Mwpbh5Iwn4XokvRgMY8lXS-jk8KXdyL7RpC9zimJkPDmbRY8A3D2KM-WxVw1BHpzlqiP5u02l74tZ1qXxxF1pzywNsXN3oiYO66KgYcYms\" alt=\"\" \/><\/noscript><\/figure>\n\n\n\n<p>If you are just looking to integrate Sveltekit and Capacitor then you are done! However, if you want to take your Sveltekit projects to mobile then continue reading.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Sveltekit On Mobile<\/h1>\n\n\n\n<p>In order to get Sveltekit on mobile, we\u2019ll need to make some changes to our project. First thing is to update our <em>capacitor.config.ts<\/em> file <em>webDir <\/em>config option to \u201cbuild\u201d. Why do we do this? When we alter our Sveltekit project, we\u2019ll be turning it into a static application and it will build our application to a folder called <em>build<\/em>:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">import { CapacitorConfig } from &#039;@capacitor\/cli&#039;;\n\nconst config: CapacitorConfig = {\n  appId: &#039;com.example.app&#039;,\n  appName: &#039;my-app&#039;,\n  webDir: &#039;build&#039;,\n  bundledWebRuntime: false\n};\n\nexport default config;<\/code><\/pre>\n\n\n\n<p>Now that we\u2019ve updated our Capacitor settings, let\u2019s change out Sveltekit project to a static application by downloading the proper static adapter package:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npm i -D @sveltejs\/adapter-static<\/code><\/pre>\n\n\n\n<p>After the package is installed, we\u2019ll need to alter <em>svelte.config.js <\/em>file from the auto-adapter to static:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">import adapter from &#039;@sveltejs\/adapter-static&#039;;\nimport { vitePreprocess } from &#039;@sveltejs\/kit\/vite&#039;;\n\n\/** @type {import(&#039;@sveltejs\/kit&#039;).Config} *\/\nconst config = {\n\t\/\/ Consult https:\/\/kit.svelte.dev\/docs\/integrations#preprocessors\n\t\/\/ for more information about preprocessors\n\tpreprocess: vitePreprocess(),\n\n\tkit: {\n\t\t\/\/ adapter-auto only supports some environments, see https:\/\/kit.svelte.dev\/docs\/adapter-auto for a list.\n\t\t\/\/ If your environment is not supported or you settled on a specific environment, switch out the adapter.\n\t\t\/\/ See https:\/\/kit.svelte.dev\/docs\/adapters for more information about adapters.\n\t\tadapter: adapter({\n\t\t\t\/\/ default options are shown. On some platforms\n\t\t\t\/\/ these options are set automatically \u2014 see below\n\t\t\tpages: &#039;build&#039;,\n\t\t\tassets: &#039;build&#039;,\n\t\t\tfallback: null,\n\t\t\tprecompress: false,\n\t\t\tstrict: true\n\t\t})\n\t}\n};\n\nexport default config;<\/code><\/pre>\n\n\n\n<p>With the <em>svelte.config.js<\/em> updated, we\u2019ll need to add a <em>prerender <\/em>option by creating a <em>+layout.js <\/em>page to <em>src\/routes<\/em> and just add the following export to <em>+layout.js<\/em>:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">export const prerender = true;<\/code><\/pre>\n\n\n\n<p>After adding and updating the <em>+layout.js <\/em>page, we\u2019ll need to add our mobile platforms, re-build our project to create the <em>build <\/em>folder, and sync our web app to Capacitor to get our mobile dependencies updated:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npm install @capacitor\/android\nnpm install @capacitor\/ios\nnpx cap add android\nnpx cap add ios\nnpm run build\nnpx cap sync<\/code><\/pre>\n\n\n\n<p>The next part is dependent on if you\u2019ll be running Android, iOS, or both but you\u2019ll need to configure the permissions to allow Geolocation to run on your device. For more information on native device permission, please visit the <a href=\"https:\/\/capacitorjs.com\/docs\/apis\/geolocation\">@capacitor\/geolocation<\/a> documentation. For Android, you\u2019ll update the AndroidManifest.xml file at <em>android\/app\/src\/main\/AndroidManifest.xml<\/em> in your IDE and for iOS you\u2019ll update the info.plist file once you open the project in XCode.<\/p>\n\n\n\n<p>Open your Sveltekit project in iOS\/Android:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npx cap open ios\nnpx cap open android<\/code><\/pre>\n\n\n\n<p>Run your emulator and your Sveltekit app will be running on mobile!:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" data-src=\"https:\/\/lh4.googleusercontent.com\/0UUyoOofrgP8SeKQwxivg_w89meW0dF9PTdv1uXEq2Yc4_EXFhBzLs6OCiT_2hEzUHfhE1sCssZKYeWg8bRzJM91Eri5RACNlA5QrT1emNoQwIu3Mlhnc67XNTAkfNaNEhHa1sx2vS6sI96xEru8c9U\" alt=\"\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/0UUyoOofrgP8SeKQwxivg_w89meW0dF9PTdv1uXEq2Yc4_EXFhBzLs6OCiT_2hEzUHfhE1sCssZKYeWg8bRzJM91Eri5RACNlA5QrT1emNoQwIu3Mlhnc67XNTAkfNaNEhHa1sx2vS6sI96xEru8c9U\" alt=\"\" \/><\/noscript><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Final Thoughts<\/h2>\n\n\n\n<p>While setting up Sveltekit with Capacitor may be different than React, Vue, or Angular it is entirely possible to make your Sveltekit project cross-platform. All it takes is a little configuration and a few minutes of your time to make your project work on the web or mobile. If you have any questions about getting your Sveltekit project set up with Capacitor feel free to ask the Ionic team at our official Discord <a href=\"https:\/\/ionic.io\/blog\/announcing-official-ionic-discord-server\">server<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to use Sveltekit and Capacitor to build PWAs and mobile applications.<\/p>\n","protected":false},"author":103,"featured_media":5114,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,123,124],"tags":[151,23,33,239],"class_list":["post-5111","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-perspectives","category-tutorials","tag-capacitor","tag-framework","tag-pwa","tag-svelte"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cross-Platform Sveltekit &amp; Capacitor Application: Yes It\u2019s Possible! - Ionic Blog<\/title>\n<meta name=\"description\" content=\"Learn how to use Sveltekit and Capacitor to build simple yet performant PWAs and mobile applications with what you already know.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cross-Platform Sveltekit &amp; Capacitor Application: Yes It\u2019s Possible!\" \/>\n<meta property=\"og:description\" content=\"Learn how to use Sveltekit and Capacitor to build simple yet performant PWAs and mobile applications with what you already know.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-13T20:29:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-13T20:30:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/04\/sveltecap-feature-image-1024x512.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Logan Brade\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@loganbrade\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Logan Brade\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible\"},\"author\":{\"name\":\"Logan Brade\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/07a04c81f6b3180076d1a6ac967bc562\"},\"headline\":\"Cross-Platform Sveltekit &amp; Capacitor Application: Yes It\u2019s Possible!\",\"datePublished\":\"2023-04-13T20:29:26+00:00\",\"dateModified\":\"2023-04-13T20:30:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible\"},\"wordCount\":824,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/04\/sveltecap-feature-image.png\",\"keywords\":[\"Capacitor\",\"Framework\",\"PWA\",\"Svelte\"],\"articleSection\":[\"All\",\"Perspectives\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible\",\"url\":\"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible\",\"name\":\"Cross-Platform Sveltekit &amp; Capacitor Application: Yes It\u2019s Possible! - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/04\/sveltecap-feature-image.png\",\"datePublished\":\"2023-04-13T20:29:26+00:00\",\"dateModified\":\"2023-04-13T20:30:16+00:00\",\"description\":\"Learn how to use Sveltekit and Capacitor to build simple yet performant PWAs and mobile applications with what you already know.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/04\/sveltecap-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/04\/sveltecap-feature-image.png\",\"width\":2240,\"height\":1120},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cross-Platform Sveltekit &amp; Capacitor Application: Yes It\u2019s Possible!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/07a04c81f6b3180076d1a6ac967bc562\",\"name\":\"Logan Brade\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/03\/IMG_2854-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/03\/IMG_2854-150x150.jpg\",\"caption\":\"Logan Brade\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/loganbrade\/\",\"https:\/\/x.com\/loganbrade\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/logan-brade\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Cross-Platform Sveltekit &amp; Capacitor Application: Yes It\u2019s Possible! - Ionic Blog","description":"Learn how to use Sveltekit and Capacitor to build simple yet performant PWAs and mobile applications with what you already know.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible","og_locale":"en_US","og_type":"article","og_title":"Cross-Platform Sveltekit &amp; Capacitor Application: Yes It\u2019s Possible!","og_description":"Learn how to use Sveltekit and Capacitor to build simple yet performant PWAs and mobile applications with what you already know.","og_url":"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible","og_site_name":"Ionic Blog","article_published_time":"2023-04-13T20:29:26+00:00","article_modified_time":"2023-04-13T20:30:16+00:00","og_image":[{"width":1024,"height":512,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/04\/sveltecap-feature-image-1024x512.png","type":"image\/png"}],"author":"Logan Brade","twitter_card":"summary_large_image","twitter_creator":"@loganbrade","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Logan Brade","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible"},"author":{"name":"Logan Brade","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/07a04c81f6b3180076d1a6ac967bc562"},"headline":"Cross-Platform Sveltekit &amp; Capacitor Application: Yes It\u2019s Possible!","datePublished":"2023-04-13T20:29:26+00:00","dateModified":"2023-04-13T20:30:16+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible"},"wordCount":824,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/04\/sveltecap-feature-image.png","keywords":["Capacitor","Framework","PWA","Svelte"],"articleSection":["All","Perspectives","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible","url":"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible","name":"Cross-Platform Sveltekit &amp; Capacitor Application: Yes It\u2019s Possible! - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/04\/sveltecap-feature-image.png","datePublished":"2023-04-13T20:29:26+00:00","dateModified":"2023-04-13T20:30:16+00:00","description":"Learn how to use Sveltekit and Capacitor to build simple yet performant PWAs and mobile applications with what you already know.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/04\/sveltecap-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/04\/sveltecap-feature-image.png","width":2240,"height":1120},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/cross-platform-sveltekit-capacitor-application-yes-its-possible#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Cross-Platform Sveltekit &amp; Capacitor Application: Yes It\u2019s Possible!"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/07a04c81f6b3180076d1a6ac967bc562","name":"Logan Brade","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/03\/IMG_2854-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/03\/IMG_2854-150x150.jpg","caption":"Logan Brade"},"sameAs":["https:\/\/www.linkedin.com\/in\/loganbrade\/","https:\/\/x.com\/loganbrade"],"url":"https:\/\/ionic.io\/blog\/author\/logan-brade"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/04\/sveltecap-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/103"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=5111"}],"version-history":[{"count":8,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5111\/revisions"}],"predecessor-version":[{"id":5122,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5111\/revisions\/5122"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/5114"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=5111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=5111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=5111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}