Create reactive pages without any JavaScript!!
Tags: javascript, webdev, beginners, showdev
Published: 2022-03-28 14:10:50

Single page applications, by themselves, are pretty easy to make. But making something complex, with modals, carousels, multiple pages, etc. is a painful thing to do.
For example, if you have a portfolio website, and a small about section, a small projects section. Everything crammed into one page looks messy, so you want to make them into different pages, or atleast, as modals. This would require some javascript and CSS pain that most beginners won't wanna go through

One of my friends (ADI) experienced this, and called me on discord - explaining the problem. We both worked out the solution to make  the entire process much simpler - loadless.js
![Loadless logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzcrovs3zkk2i4hcpwgb.png)
 
Loadless allows you to create multi-page applications, but with only one HTML file. It's syntax is very easy to use, no javascript knowledge required (even for customisation).

worrying about size? Don't! The library file is only 157 B
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zbw52uul8s1dwp3c7x9.png)
  

There is also functionality to do custom animations on page change, and we've also made many animations like `animate-left`, `animate-right`, fadein, fadeout and many more to come!

## OK, but how do I use it?

Using it is veryyy easy: 

### use the CDN link
Just paste this script in the header of your HTML file 
```html
<script src="https://cdn.jsdelivr.net/gh/loadless/loadless@main/dist/loadless.min.js" defer></script>
```

### Creating pages
You can create a page by giving the page a `data-page="page_id"` and the trigger to show that page will be `data-loadless-btn="page_id"`. This will make all the other sister divs (which are pages and under the parent) disappear. 

(note: to use the animations, you have to also import an optional CSS file, from here: https://cdn.jsdelivr.net/gh/loadless/loadless@main/dist/animations.css)

Here's an example

```html
    <a data-loadless-btn="1" href="#hello">Click here to say Hello</a> <br>
    <a data-loadless-btn="two" href="#world">Click here to say world</a>

    <div data-loadless-parent>
        <div id="hello" data-page="1" data-animate="left">
            Hello
        </div>
        <div id="world" data-page="two" data-animate="fadein">
            World
        </div>
        <div>
            another div 
        </div>
    </div>
```

Here, I have given it an href so that the page is "linkable". 

the possibilities for this are endless - this makes so many things easier for beginner web developers. Here's an example where ADI used loadless in his portfolio: 
https://cdn.discordapp.com/attachments/956570293164462091/957197579903442954/Untitled_15.mp4

For any help, join our discord server: https://discord.gg/DshUYxbWWX

We're working on more animations, documentation, website and much more. Support us by ⭐-ing the project on GitHub!!

{% github https://github.com/loadless/loadless %}

Any feedback for the same would be greatly appreciated! 

💖 This blog if you liked it, Save this blog if you want to use it later .Follow me on [My twitter](https://twitter.com/dhravyashah), and if you REALLY liked this blog, and please follow me here on dev.to (350 followers possible?  ) !