Hey everyone! 👋
I'm super excited to share this. After a lot of work, NanoScript is finally ready to build real-world projects. It's a modern, ultra-lightweight JavaScript library designed for edge environments, and it makes DOM manipulation, event handling, and animations a breeze.
To show you what it can do, I built a small but complete project: The Kasane Teto Song Finder. It's a fun, fully-functional web app that uses almost every NanoScript plugin.
🎵 What is the Kasane Teto Song Finder?
It's a simple single-page app for fans of the UTAU voicebank, Kasane Teto. It lets you search through a list of songs, save your input, toggle themes, copy text, and more.
Here's a quick look at the code:
<input id="teto-songs-input" type="text" placeholder="Enter song name.." />
<div class="songs-list">
<div class="song">Voices In My Head feat. Kasane Teto</div>
<div class="song">Execution Clap feat. Kasane Teto</div>
<div class="song">YARARARA feat. Kasane Teto</div>
</div>
<script>
// NanoScript in action!
NS.getGhostState(); // Restore saved input
NS.ghostState("#teto-songs-input", "value"); // Auto-save input
// Live search filter
NS.findArray({
items: document.querySelectorAll(".song"),
element: "#teto-songs-input"
});
// Live character counter
NS.liveCounter({
element: "#teto-songs-input",
max: 50,
showCounter: true,
counterElement: "#count",
onLimit: () => { alert("No Kasane Teto song name is that tall 😅."); }
});
/* Rest of the code */
</script>
✨ What This Project Shows
This tiny app is a perfect demonstration of NanoScript's core philosophy: do more with less. Here's what it uses in a few lines of code:
State Management: NS.ghostState and NS.getGhostState automatically save and restore the user's input using localStorage. This is a full-featured persistence system with zero setup.
Real-time Search: NS.findArray filters a list of songs as you type, proving that NanoScript isn't just a utility library—it can handle interactive UI logic.
Live Feedback: NS.liveCounter provides a character counter with a built-in limit and a callback function.
Clipboard API: NS.copy handles the complex clipboard API with a simple and clean syntax.
Theming: NS.theme and NS.themeToggle make it trivially easy to add a persistent dark/light mode.
Event Handling: The familiar .on() method handles all the clicks and inputs with chainable elegance.
🧠 The Big Idea
NanoScript isn't just a smaller jQuery. It's built from the ground up with modern JavaScript, designed to be fast and secure, making it perfect for edge environments. It's a complete toolset that lets you build real things quickly, without the bloat.
🚀 Ready to Try It?
If you're interested in building fast, clean web apps with a tiny footprint, I'd love for you to check out the project on GitHub. Whether you want to use it, contribute, or just star it for later, all support is appreciated!
👉 Check out the NanoScript GitHub repo here: https://github.com/Hfs2024/NanoScript
If you give it a star ⭐, it would really help me know that I'm on the right track.
Let me know what you think or if you build something cool with NanoScript. console.clear(), now, your turn!
Top comments (1)
Feel free to drop all your thoughts!