CODEWITHSUNDEEP
dust.js
Bharanidharan K
Bharanidharan K

Reputation: 699

Dust JS Templating visualization and generation

I would like to know tools support for dustjs templating for following.

  1. WYSWYG visualisation. Is there a tool using which I can preview the html template while I edit in dustjs template file.
  2. Automatic creation of templates from wireframes. Is there a tool to create .dust files from .html.
  3. Is dust integrated with any CMS tool? like handlebar in Adobe Experience Manager.

If you know of any good tools for dust js please let me know. I would be using sublime / atom/ eclipse IDEs.

Upvotes: 0

Views: 293

Answers (1)

Interrobang
Interrobang

Reputation: 17434

To preview a Dust file automatically as you change it, you'll first want to set up automatic Dust compilation. You can do this using the built-in dustc tool, or via a Grunt plugin like grunt-dustjs.

If you're using dustc, you'd do something like this:

dustc --output=lib/compiled.js --watch templates/**/*.dust

Now, any time a .dust file inside your templates directory changes, the templates will be recompiled and placed into lib/compiled.js. You can load this file on your page and render Dust how you normally do.

Then you can use something like BrowserSync to reload your app in different browsers to get a WYSIWYG preview, or wire it up yourself using a Grunt task like grunt-contrib-watch.

Any HTML file is a valid Dust file. The .dust file extension isn't special! You can even pass files ending in .html to the Dust compiler; it doesn't care. So if you create templates from sliced PSDs or other wireframe tools, they can be compiled as Dust templates. All you have to do is add the appropriate variables.

There are no WYSIWYG editors available that integrate with Dust (but Stack Overflow is not the place to obtain tool recommendations anyways).

Upvotes: 0

Related Questions