Handlebars Preview for Visual Studio Code

Live preview for your Handlebars templates (supports a user-defined context data and helper functions). Automatic reloading upon input change supported

Example (Reference context source from within the handlebars template)

NOTE: the context source file path is relative

test.hbs

{{!-- vscode-handlebars-preview-context-source=./source.js --}}
{{ capitalize foo }} - {{ duplicate goo }}

source.js

module.exports = {
  data: {
    foo: 'bar',
    goo: 'qes'
  },
  helperFns: [{
    name: 'capitalize',
    body: s => s.toUpperCase()
  }, {
    name: 'duplicate',
    body: s => `${s}${s}`
  }]
}

Example (Separate data vs helper functions sources)

In the same directory:

test.hbs

{{ capitalize foo }} - {{ duplicate goo }}

test.hbs.json

{ 
  "foo": "bar",
  "goo": "qes"
}

test.hbs.js

module.exports = [{
  name: 'capitalize',
  body: s => s.toUpperCase()
}, {
  name: 'duplicate',
  body: s => `${s}${s}`
}]

• Use the keybinding 'ctrl+p h'
• Type "Handlebars: Open Preview" (Given the example files above, the output is: BAR - qesqes)

Credits

• Handlebars.js: Minimal Templating on Steroids
• Handlebars for Visual Studio Code
• A HTML previewer for Visual Studio Code
• Original plugin repository

License

MIT