CodesBeautify

Jade to HTML Compiler

Compile a Jade template into markup without cloning the project or installing Node.

Jade
HTML
Runs locally in your browser

About the Jade to HTML Compiler

Old templates outlive the toolchains that built them. A .jade file from an Express 3 project or a 2014 tutorial is perfectly readable, but seeing what it produces normally means restoring a build that no longer installs. This compiler reads the static part of the language directly in the page, which is enough for the great majority of template files people actually need to inspect.

It handles tag names with #id and .class shorthand, parenthesised attribute lists with either quote style, bare boolean attributes, the trailing slash that forces a self closing element, piped text lines, block text introduced by a trailing dot, and both comment forms, where the buffered one becomes a real HTML comment and the unbuffered one disappears. The legacy doctype spellings are recognised too, so !!! 5 and its transitional and strict cousins compile to the doctype you expect rather than stopping the parser.

Anything that needs a JavaScript runtime is deliberately refused. Loops, conditionals, mixins, includes, extends and buffered code all depend on data and a file system that a static page does not have, so the compiler names the line and stops instead of quietly emitting markup that differs from what the real build would produce. Interpolation such as #{title} passes through as written so you can see where a value would appear. Mixed tabs and spaces on one indentation level are reported with a line number, because that is a common cause of a template compiling differently on two machines. The reverse trip is HTML to Jade.

How to use

  1. Paste the template. Both !!! 5 and doctype html are accepted.
  2. Match the Indent option to the file, then press Compile.
  3. Untick Indent the output for a single unbroken line of markup.
  4. If a line is rejected, look for a loop, an include or a mixin, which cannot run here.

Common questions

Why does my template stop at an each line?
Loops need the data they iterate over. There is no runtime and no data here, so the compiler reports the line rather than guessing.
Does it support include and extends?
No. Both read other files from disk, and a browser page has no access to your project directory.
What does !!! 5 mean?
It is how Jade before version 1.0 wrote the HTML5 doctype. This compiler accepts it and emits the standard doctype line.
Is a mixin call the same as a loop for this tool?
Yes in the sense that both are refused. A mixin is a function, and calling one requires evaluating JavaScript that is not available here.