QuickViewJS: A Lightweight JavaScript Template Engine

Hey guys. How are you today?

So, I've been working on something that's kinda helpful for beginners, small to medium projects and just people who are studying or whatever.

It's called QuickView.js
QuickView is a lightweight JavaScript-based templating engine designed to dynamically render HTML pages. It offers a simple syntax to embed variables and execute conditional statements and loops within HTML files.

You can check the repo here: https://github.com/tamadeu/QuickViewJS

There's still a lot of work to do (like for loops, for example). But you can do a few things for now, like a foreach loop, conditionals and include other html files to another.

The usage is pretty simple.
Just add to your html file and start making some renderind!

In some javascript file or inline code you can just add the qv() function and start adding variables, like:

qv({
  "siteName": "My Site",
  "users": [
    {"name": "Alice", "age": 25},
    {"name": "Bob", "age": 30}
  ]
});

Then, in your html code you can just call your variables. For example:

<h1>{{ siteName }}</h1>

Now, let's say you have a menu.html and you want it in you index.html. All you have to do is:

@include('menu')

And that's it. Your menu.html is added to your index.html without any extra codes in your menu.html or wherever.

You can check a small project with these functionalities here: https://tamadeu.github.io/quickview_project/

Anyway, any contributions, sugestions, critics or whatever are more then welcome.

Comments

[Milan Vasić]

Hello! I believe this was a nice exercise. :)

Since you are allowing data to be fetched from third-party sites, it would be good to have some HTML sanitization. Without that, sites built with your engine are susceptible to XSS attacks.

[tamadeu]

You're absolutely right.

Thanks a lot for your suggestion!