Liquify is a Node.js module that creates a client-side version of the Liquid Templating language (see http://github.com/shopify/liquid) for use with JavaScript in the browser, available as both plain JavaScript (public/javascripts/liquify.js) and as minified JavaScript (public/javascripts/liquify.min.js).
This library is a client-side version of Marcel Jackwerth's liquid-node, which is a port of Tobias Lutke's Liquid templating language, originally implemented in Ruby.
Note: This is currently the result of a 3-day weekend project, so let me know if you find it useful or would like to suggest changes!
You may simply use the liquify.js/liquify.min.js files in your applications without using the npm module at all.
Reference liquify.js in your page, and start using it!
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Client-Side Liquid Templates</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="./javascripts/liquify.min.js"></script>
<script type="text/javascript">
var Liquid = require('liquify');
</script>
</head>
<body>
<script id="simplewithfilter" type="text/liquid">
<div>Here is the value of foobar in uppercase: <strong>{{ foobar | upcase }}</strong></div>
</script>
<script id="ifblock" type="text/liquid">
<div>
Trying out the if block. If it works, you should see "Hooray!":
{% if cheer %}
Hooray!
{% else %}
Boo!
{% endif %}
</div>
</script>
<script type="text/javascript">
$(function() {
$('body').append(Liquid.Template.parse($('script#simplewithfilter').html()).render({ foobar: 'bizbuzz'}));
$('body').append(Liquid.Template.parse($('script#ifblock').html()).render({{ cheer: true }}));
});
</script>
</body>
</html>
Results in the following html page:
Here is the value of foobar in uppercase: BIZBUZZ
Trying out the if block. If it works, you should see "Hooray!": Hooray!
You may update your liquify.js files to the latest version of liquid-node's capabilities by simply installing the package from NPM:
$ npm install liquify
Or by installing the latest node package from git directly:
$ npm install git@github.com/tchype/node-liquify
You can see it working by running the sample page that uses liquify to render it's markup:
$ node ./node_modules/liquify/app.js
Server running at http://127.0.0.1:8125/
$ open http://127.0.0.1:8125
I have to take a minute to recognize the efforts of others.
The huge, gigantic THANK YOU has to go to sirlantis (Marcel Jekwerth) for even taking on the task of porting Liquid into node. Without his work on this front, I probably would have given up trying to implement it in purely client-side JavaScript at some point. Instead, his previous efforts and eagerness to accept pull requests and ideas for liquid-node have made it simply a 3 day weekend project to get something working!
Also, a big thank you goes out to substack for browserify as well as the overall contributions to node and Open Source. Thanks!
Finally, the biggest thank you (as well as an "I'm sorry for keeping my nose in the computer all weekend") has to go to my lovely wife and my silly, wonderful boys. Thanks for being patient with me!!
FAQs
Generates a liqify.js to provide Liquid templating in client-side javascript
The npm package liquify receives a total of 3 weekly downloads. As such, liquify popularity was classified as not popular.
We found that liquify demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A new federal program will let vetted U.S. cybersecurity firms help investigate and disrupt foreign cybercrime groups under government direction.
Research
/Security News
The campaign amassed more than 75,000 installs by targeting Russian-speaking users seeking access to blocked services.
Company News
Open source maintainers are under more pressure than ever. We're raising our open source program from the Team plan to the Business plan, free.