Is it possible to add a Svelte app into the WordPress website? Let’s try.

I will use the default example from the docs:

npm create vite@latest my-basic-app -- --template svelte

Next i’ll upload the code that has been built in the dist folder after running:

npm run build

I will add the html block that it requires:

<div id="app"></div>

Wait! I’m gonna have to do some boiler plate code, create a child theme and upload the files that way. Meh!

I create a new directory and a css file to register the child theme /themes/twenty-twenty-five-child

style.css
/*
 Theme Name:   Some Very New Theme
 Template:     twenty-twenty-five
*/

then add an js/index.js

console.log("Custom JS loaded on the About page.");

These files need to be registered for the page to pick. To do this add functions.php with the code below. In order to prevent the js being loaded in every page i’ve added an if statement (the-post-name bit) which i ‘ll know after the page is created

<?php
// Enqueue parent and child styles
function svn_child_enqueue_styles() {
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );
}
add_action('wp_enqueue_scripts', 'svn_child_enqueue_styles');

// Enqueue your custom JS only on a specific page (e.g., 'about')
function svn_child_enqueue_scripts() {
  //  if (is_single('the-post-name')) {
        wp_enqueue_script(
            'custom-js',
            get_stylesheet_directory_uri() . '/js/index.js',
            array(),
            null,
            true // Load in footer
        );
 //   }
}
add_action('wp_enqueue_scripts', 'svn_child_enqueue_scripts');

Now i upload this directory with all the files and can see in appearance/themes a new child theme is there. Once activated i reload the page and can indeed see `Custom JS loaded on the About page.` printed out in the browser console.

Progress!

Lets go back to the /dist folder from svelte

we can see the index we want has other characters in. I’m going to just copy and paste the content into my index.js for now and i should expect that to work.

The page got published and when i view other pages some errors are showing in the console. This is down to the index.js expecting there to be a div with the id=”app”. I’ll tidy up that if statement from earlier as i now know the post is called ‘svelte-test’ and update the functions.php

...
function svn_child_enqueue_scripts() {
    if (is_single('svelte-test')) {
        wp_enqueue_script(
...

Now the index only runs for this page.

Ok so here is the basic svelt app embedded this this wordpress post:

---

---

The way to know its working is the counter increments correctly.

Conclusion

It is indeed possible to embed a Svelte app within WordPress.

The process to do this is a little cumbersome in that i had to create a theme template, add some code to tell the page only to display on this post.

If i ever want to update this then there is some copying and pasting required. The next step would be to automate this and directly using ftp or something.

I did this as proof of concept as i would like to add a bigger piece of functionality into a different page.

Maybe another approach would be an iframe and do some kind of apache http routing for a specific route to the files instead of embedding it as part of a WordPress page. Another triage for another time.

Thanks for reading.