# Integrating Svelte with Hugo

**URL:** <https://discourse.gohugo.io/t/integrating-svelte-with-hugo/46455>\
**Category:** feature\
**Tags:** modules\
**Created:** [September 28, 2023, 4:23pm UTC](https://discourse.gohugo.io/t/integrating-svelte-with-hugo/46455 "2023-09-28T16:23:55Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ntenpas](https://avatars.discourse-cdn.com/v4/letter/n/54ee81/32.png) [@ntenpas](https://discourse.gohugo.io/u/ntenpas)\
**Post date:** [September 28, 2023, 4:23pm UTC](https://discourse.gohugo.io/t/integrating-svelte-with-hugo/46455/1 "2023-09-28T16:23:56Z")

</div>

I am working with [this repository](https://github.com/Presence-Web-Services/mobilewelding-site).  
Running the code with Docker is probably the easiest way (see README.md).

I like using Svelte to handle the JavaScript required for HTML forms.  
I think it would be really cool to integrate this into Hugo so that you can have “.svelte” files in your content directory.

Currently, I write the HTML/CSS/JS for the form in a “.svelte” file. Then, I build the hugo site, and copy the relevant index.html page into my Svelte project. Then I build the Svelte project and copy the resulting build files back to the Hugo public directory.

Would it be possible for me to create a Hugo module that would allow us to use “.svelte” files in our content directory? I’m thinking that we can put a “.svelte” file next to a regular content file, and then specify what ID the svelte component will be included into.

Example:  
content/contact.html contains an empty div with id=“my-svelte”.  
content/my-svelte.svelte contains the Svelte code for the “my-svelte” component to be placed inside that div.

How would I go about integrating this using a Hugo module?

---

<div class="post-metadata">

**Author:** ![divinerites](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/divinerites/32/12625_2.png) [@divinerites](https://discourse.gohugo.io/u/divinerites)\
**Post date:** [September 29, 2023, 8:46am UTC](https://discourse.gohugo.io/t/integrating-svelte-with-hugo/46455/2 "2023-09-29T08:46:20Z")

</div>

Not tested. And a bit old.

> **[GitHub - StevenACoffman/hugo-svelte: Mirror of...](https://github.com/StevenACoffman/hugo-svelte)**
>
> Mirror of https://git@gitlab.com:datwood/hugo-svelte - GitHub - StevenACoffman/hugo-svelte: Mirror of https://git@gitlab.com:datwood/hugo-svelte

---

<div class="post-metadata">

**Author:** ![ntenpas](https://avatars.discourse-cdn.com/v4/letter/n/54ee81/32.png) [@ntenpas](https://discourse.gohugo.io/u/ntenpas)\
**Post date:** [October 5, 2023, 5:18pm UTC](https://discourse.gohugo.io/t/integrating-svelte-with-hugo/46455/3 "2023-10-05T17:18:59Z")

</div>

Thanks for the post.