# Generating a Single Page Application

**URL:** <https://discourse.gohugo.io/t/generating-a-single-page-application/4293>\
**Category:** support\
**Created:** [October 12, 2016, 9:17am UTC](https://discourse.gohugo.io/t/generating-a-single-page-application/4293 "2016-10-12T09:17:03Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![pgage](https://avatars.discourse-cdn.com/v4/letter/p/f17d59/32.png) [@pgage](https://discourse.gohugo.io/u/pgage)\
**Post date:** [October 12, 2016, 9:17am UTC](https://discourse.gohugo.io/t/generating-a-single-page-application/4293/1 "2016-10-12T09:17:04Z")

</div>

Hi, is it possible with Hugo to generate a single page application, where content pages are loaded dynamically into a single “physical” web page when users click in the navigation? I’m not talking about a single page site with no additional content, but a single page application, where additional content is loaded dynamically.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [October 12, 2016, 11:26am UTC](https://discourse.gohugo.io/t/generating-a-single-page-application/4293/2 "2016-10-12T11:26:49Z")

</div>

Yes that should be possible.

---

<div class="post-metadata">

**Author:** ![rdwatters](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rdwatters/32/2848_2.png) [@rdwatters](https://discourse.gohugo.io/u/rdwatters)\
**Post date:** [October 12, 2016, 5:14pm UTC](https://discourse.gohugo.io/t/generating-a-single-page-application/4293/3 "2016-10-12T17:14:46Z")

</div>

@pgage I would start with `jsonify` and move forward from there (there’s also [`plainify`](https://gohugo.io/templates/functions#plainify)).

I assume you are creating a content-focused SPA if you’re using Hugo and markdown files. Server config will be up to you, since the Hugo server isn’t production ready.

> **[Functions Quick Reference](https://gohugo.io/functions/)**
>
> Comprehensive list of Hugo templating functions, including basic and advanced usage examples.

---

<div class="post-metadata">

**Author:** ![pgage](https://avatars.discourse-cdn.com/v4/letter/p/f17d59/32.png) [@pgage](https://discourse.gohugo.io/u/pgage)\
**Post date:** [October 13, 2016, 9:58am UTC](https://discourse.gohugo.io/t/generating-a-single-page-application/4293/4 "2016-10-13T09:58:41Z")

</div>

@rdwatters I didn’t explain much in my initial post, but what I want to end up with is a typical site with horizontal nav (take [https://www.bufferbloat.net/](https://www.bufferbloat.net/) as an example, also made with Hugo), but one of the pages is an application, with more dynamic content and user interaction. When someone switches to other pages on the site, this application needs to maintain state so that when they come back to it, they can continue working where they left off. Maintaining state on the server side and restoring it would be overly complicated in this case, and not as performant. So I thought, if there were a way to tell Hugo to generate an SPA instead of making multiple individual pages, where Hugo would handle making links using different fragment identifiers for each “page” in the site, and would load pages with XMLHttpRequest, for example, that could make things a lot simpler. It would still be a static site with no server support necessary. I could just add my app as another “page” within the SPA and be done.

Could you explain in what way I would use jsonify or plainify?

Thanks for the ideas…

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [May 21, 2021, 10:29am UTC](https://discourse.gohugo.io/t/generating-a-single-page-application/4293/5 "2021-05-21T10:29:33Z")

</div>