DEV Community

tamadeu
tamadeu

Posted on

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}
  ]
});
Enter fullscreen mode Exit fullscreen mode

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

<h1>{{ siteName }}</h1>
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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.

meme

Top comments (2)

Collapse
 
milvasic profile image
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.

Collapse
 
tamadeu profile image
tamadeu

You're absolutely right.

Thanks a lot for your suggestion!