From Vanilla Template to Still.js Components: A Full Build and Deployment Guide

Question

A full Still.js build from raw HTML to deployment — with zero dependencies.

A few days ago, I was asked about migrating a project to Still.js, this article is accompanied by a video demonstrating it.

Because it’s built in Vanilla JavaScript, Still.js combines perfectly with a template that is based with pure/raw HTML, CSS and JavaScript, even if some library (e.g. jQuery, Bootstrap) was used, Still.js helps you to ease separate things into components, as show cased in this video.

What will be covered:

1. Migrating a Vanilla web template to Still.js
2. Back down the template into components conveniently
3. Load template’s JavaScript code properly according to Still.js architecture
4. Deploy to the cloud

Key Considerations:

When using templates with a lot animations, or that depends on different javaScript library to load, it’s important to deeply understand it (the template) so to orchestrate each
Script dependency just the same way it happens with raw HTML, CSS and JavaScript.

Minimalist third party Script dependency approach:

Now a days a lot of features like animation and more (e.g. parallax, singlePageNav, dialog, IntersectionObserver - Lazy animation) are browser native, hence, this would impact a lot in the choosing on what/when to use libraries especially when it comes to animation which some web pages are depending a lot.

Vanilla JavaScript is one of the core philosophy of Still.js, hence you can use everything as natural as possible from Web Semantic to straight DOM manipulation.

We’ll use this template, and we’ll be deploying our page to Render which will provide us with a custom domain.

In summary, on the coding and structure side of things the steps will be as follow:

1. the HTML code will be moved to the Still.js template/template file (.html)
2. Run template JavaScript animation in the stAfterInit hook, ensuring it executes after component load
3. Convert sections into autonomous components

Conclusion

Still.js helps turn vanilla templates into fast, modular, and lightweight sites with zero dependencies, giving you full control using pure JavaScript. Proper code organization is key to avoid issues like bloating or conflicts, and a vanilla-first approach is recommended, external libraries should only be used when necessary.

What’s Next?

Don't forget to follow the hands-on video till the end so we can make the deploy.

Expand Your Still.js Skills

• Explore advanced Still.js features like state management, routing, or
  integrating APIs.
• Try building a small SPA or dashboard using
  Still.js components capabilities.

Contribute to Still.js

• Still.js is open-source, consider contributing or helping improve documentation.
• Join the discord channel to get fast updates and follow the discussions

Ask more if needed

• Share any topic you want to see cover so content (e.g. video, article) can be produced.

Se ya in the next one

Comments

Great walkthrough, just thinking How do you handle templates with multiple heavy animations without affecting performance when converting to Still.js components

---

Hi Muzzamil, I would present 3 ways in principle

1. Lazy loading through Still.js, this can be achieved by splitting different parts of the page into components, and every single part loads separately from the rest minimizing the initial processing load, this is demonstrated in the video that accompanies this article.

2. Lazy loading using IntersectionObserver which is a JavaScript native interface to handle this (animation) and additional scenarios.

3. Holding specific part of the UI that does not need to load immediately, Still.js provides with delay capabilities for us to determine that some UI part only load after sometime.