node package manager


JavaScript, HTML, and CSS language framework.

fusion: A language framework and superset for JavaScript, HTML, and CSS


Fusion provides a simple and straightforward collection of functions to analyize JavaScript, HTML, and CSS. A syntax highlighter along with other lexer-parser utilities for these languages are available in this framework. The lexical analysis phase also provides an optional lightweight parser hack to allow for fast and efficient conversions while still offering language transitions and advanced detection of regexp and object literals.


Fusion utilizes various language components of JavaScript, HTML, and CSS to provide more robust and maintainable code. This superset aims for a very natural development platform that seamlessly transitions between each language. It not only makes source code easier to understand and maintain, but can also remove the need for JavaScript libraries such as jQuery to construct DOM elements using document fragments and innerHTML. Since it's designed to work natively with the DOM, Fusion can increase performance by assisting front-end libraries or sometimes eliminating the need for them altogether. Otherwise, an optional lightweight DOM library (3KB, gzipped) is also provided to further simplify your code and make working with the DOM a little more intuitive by extending Element and Array objects.

Fusion does not have any releases and is still a work in progress. Please feel free to create an issue if you'd like to propose any other language features.



Syntax highlighting

fusion.highlight(source [, language [, strict]])

Returns: string of HTML

Lexical analysis

fusion.tokenize(source [, language [, strict]])

Returns: array of { type, start, end } objects

Syntax + Semantic analysis


  • source
    • string of source code
  • language
    • string of source code language
    • supports js, html, css, and fjs
    • defaults to fjs
  • strict
    • boolean for strict mode, which forces the js, html, and css languages to be context-free
    • removes <script> and <style> language transitions in html
    • removes template strings and advanced regexp and object literal detection in js
    • defaults to false

Converting Fusion to JavaScript

fusion.transpile(source [, create [, find [, query [, attr [, html]]]]])

Returns: string of JavaScript

  • source
    • string of fusion source code
  • create
    • string for a function similar to createElement()
    • defaults to document.__create
  • find
    • string for a function similar to querySelector()
    • defaults to document.__find
  • query
    • string for a function similar to querySelectorAll()
    • defaults to document.__query
  • attr
    • string for a function similar to setAttribute()
    • defaults to __attr
    • must return a reference to this
  • html
    • string for a function similar to innerHTML property
    • defaults to __html
    • must return a reference to this

Language Features

Inline HTML

Inline HTML

Template strings

Template String

Template strings in HTML attributes

Template String in HTML Attribute

Inline CSS styles

Inline CSS Style

Inline CSS selectors

Inline CSS Selectors

Template substitutions in HTML

Inline HTML Substitution

Template substitutions in CSS styles

Inline CSS Style Substitution

Template substitutions in CSS selectors

Inline CSS Selector Substitution


If you'd like to natively use the DOM, the following __attr() and __html() functions must be assigned to Element.prototype for inline HTML and CSS:

Element.prototype.__attr = function(n,v){this.setAttribute(n,v);return this};
Element.prototype.__html = function(c){this.innerHTML=c;return this};

The transpile() function can then be called with the first three optional arguments as follows:

fusion.transpile(source, "document.createElement", "document.querySelector", "document.querySelectorAll")

Or they can be omitted if assigned to Document.prototype:

Document.prototype.__create = Document.prototype.createElement;
Document.prototype.__find   = Document.prototype.querySelector;
Document.prototype.__query  = Document.prototype.querySelectorAll;

Otherwise, an optional lightweight DOM plugin (3KB, gzipped) can be included using fusion-dom.js.


The following example configures Node.js to transpile files in the /fjs directory and cache them in memory when requested through the /static URL:

var http    = require('http'),
    through = require('through'),
    st      = require('st'),
    fusion  = require('fusion');
var mount  = st({ url:  '/static', path: __dirname + '/fjs' }),
    filter = through(function(data) { this.emit('data', fusion.transpile(data.toString())) });
http.createServer(function(req, res)
    res.filter = filter;
    if (mount(req, res))
        res.setHeader('content-type', 'application/javascript');
console.log('Server running on port 1337...');

This concept can also be applied with the fusion.highlight() function (and either a text/plain or text/html content-type) to serve up highlighted HTML of the source code.

Settings for the st() function can be found here:

DOM Library (optional)

The fusion-dom.js file can be included to extend the Element, Array, and Document prototypes. This file does NOT require fusion.js, and the prototype assignments above are also not required when including this library since it already defines __attr() and __html() functions on the Element prototype and __create(), __find(), and __query() functions on the Document prototype.

These prototype functions can be accessed natively or using the @ operator:

@(div.container).__attr('title', null);
@(div.container)@attr('title', null);

This DOM library allows a seamless transition between arrays and elements. The __find() function returns either an element or null, and the __query() function returns either an array of elements or an empty array.


  • after()
  • append()
  • attr()
  • before()
  • child()
  • children()
  • contains()
  • find()
  • first()
  • html()
  • last()
  • matches()
  • next()
  • parent()
  • prepend()
  • prev()
  • query()
  • remove()
  • replace()
  • style()
  • text()
  • document
  • length
  • tag


  • attrs()
  • children()
  • filter()
  • find()
  • first()
  • html()
  • last()
  • matches()
  • next()
  • not()
  • parent()
  • prev()
  • query()
  • remove()
  • styles()
  • text()


  • contains()
  • create()
  • find()
  • query()
    <div />,
    <div />,
    <pre />
    -webkit-animation: slide ${duration / 1000}s ease-in-out;
    @attrs("style", null)
        @after(<span class="second" />);