Sign inDemoInstall


Package Overview
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies



jSmart is javascript templating engine based on PHP Smarty Template Engine.

Version published
Weekly downloads
decreased by-13.24%
Weekly downloads



jSmart - Smarty template engine in JavaScript

Build Status npm version David npm npm

jSmart is a port of the Smarty Template Engine to Javascript, a JavaScript template library that supports the template syntax and all the features (functions, variable modifiers, etc.) of the well-known PHP template engine Smarty.

jSmart is written entirely in JavaScript, does not have any DOM/browser or third-party JavaScript library dependencies and can be run in a web browser as well as a standalone JavaScript interpreter or CommonJS environments like node.js.

jSmart supports plugin architecture, you can extend it with custom plugins: functions, blocks and variable modifiers, templates inclusion, templates inheritance and overriding, caching, escape HTML.

jSmart has some limited support of the PHP Smarty syntax and allows you to use the same Smarty templates on both server and client side, for both PHP and Javascript.

Play with JsFiddle demo page

Using jSmart with CDN

Always latest version (don't use in production)
Current latest version (4.0.0)

jSmart with other tools

  1. Webpack:-
  2. Grunt:-
  3. Express Js :-

How to use jSmart in Node.js

  1. Install jSmart from NPM Registry
$ npm install jsmart --save
  1. Create template, use PHP Smarty syntax. Say demo.tpl
Hello {$name}
  1. Now lets read the template and compile it. jSmart object compiles the template. You can call fetch function as many times with different data you would want to assign to template.
var fs = require('fs'),
  jSmart = require('jsmart'),
  tpl = fs.readFileSync('./demo.tpl', {encoding: 'utf-8'}),
  compiledTemplate = new jSmart(tpl),
  output = compiledTemplate.fetch({name: 'World'});
  // output will be "Hello world"

  1. Execute the file.
$ node demo.js

How to use jSmart in browser

  1. Include jSmart library Javascript file in your header.
    <script language="javascript" src="jsmart.js"></script>
  1. Create template, use PHP Smarty syntax. Put the template's text in <script> with the type="text/x-jsmart-tmpl" so a browser will not try to parse it and mess it up.
  <script id="test_tpl" type="text/x-jsmart-tmpl">
    Hello {$name}
  1. Create new object of jSmart class, passing the template's text as it's constructor's argument than call fetch(data), where data is an JavaScript object with variables to assign to the template
  var content = document.getElementById('test_tpl').innerHTML;
  var compiled = new jSmart(content);
  var output = compiled.fetch({name: 'world'});
  // output will be "Hello world"

How to use jSmart using Require.js

  1. If you have configured and installed Require.js it easy to load jSmart and use it. Load jSmart.js file in the browser/environment and it already makes use require js to define module, you got to just include it.
define(['jSmart'], function (jSmart) {
  var tplText = 'Hello {$name}';
  var compiled = new jSmart(tplText);
  var output = compiled.fetch({name: 'world'});
  // output is "Hello world"
  1. You can also make use Require.js text plugin to load templates.
define(['jSmart', 'text!some/good/template.tpl'], function (jSmart, goodTpl) {
  var compiled = new jSmart(goodTpl);
  var output = compiled.fetch({name: 'world'});
  // output is "Hello world"



  • Pull request Best is open a issue first. Then send a pull request referencing the issue number. Before sending pull request make sure you add test case for the fix. Make sure all test cases are passing and eslint tests pass.

  • Test cases:- grunt karma

  • ES Lint tests:- grunt eslint

  • Run lint, run test, build, compress, distribution package and update examples in one command:- grunt




Project originally was created by miroshnikov. Since author was not active on project very frequently. I have forked and planned on pushing further improvements and features on my own fork.



Last updated on 27 May 2021

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.


Related posts

SocketSocket SOC 2 Logo


  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap


Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc