diff --git a/lib/DDG/Goodie/JsBeautifier.pm b/lib/DDG/Goodie/JsBeautifier.pm
new file mode 100644
index 000000000..ea16acbbc
--- /dev/null
+++ b/lib/DDG/Goodie/JsBeautifier.pm
@@ -0,0 +1,38 @@
+package DDG::Goodie::JsBeautifier;
+# ABSTRACT: Write an abstract here
+
+use DDG::Goodie;
+use strict;
+use warnings;
+
+zci answer_type => 'jsbeautifier';
+zci is_cached => 1;
+
+triggers startend => share('triggers.txt')->slurp;
+
+handle remainder => sub {
+
+ # Return unless the remainder is empty or contains online or tool
+ return unless ( $_ =~ /(^$|online|tool|code|utility)/i );
+
+ return '',
+ structured_answer => {
+
+ id => "js_beautifier",
+
+ data => {
+ title => 'JavaScript Beautifier',
+ subtitle => 'Enter code below, then click the button to beautify'
+ },
+
+ templates => {
+ group => 'text',
+ item => 0,
+ options => {
+ content => 'DDH.js_beautifier.content'
+ }
+ }
+ };
+};
+
+1;
\ No newline at end of file
diff --git a/share/goodie/js_beautifier/content.handlebars b/share/goodie/js_beautifier/content.handlebars
new file mode 100644
index 000000000..81274b747
--- /dev/null
+++ b/share/goodie/js_beautifier/content.handlebars
@@ -0,0 +1,16 @@
+
+
+
diff --git a/share/goodie/js_beautifier/js_beautifier.css b/share/goodie/js_beautifier/js_beautifier.css
new file mode 100644
index 000000000..64f6b1e4f
--- /dev/null
+++ b/share/goodie/js_beautifier/js_beautifier.css
@@ -0,0 +1,33 @@
+.zci--js_beautifier .js_beautifier--wrap {
+ margin-bottom: 1.5em;
+}
+
+.zci--js_beautifier textarea {
+ font-family: monospace;
+ overflow: auto;
+ resize: vertical;
+}
+
+.zci--js_beautifier .js_beautifier--input {
+ white-space: pre-wrap;
+}
+
+.zci--js_beautifier .btn {
+ cursor: default;
+}
+
+
+/* Mobile */
+.is-mobile .zci--js_beautifier .js_beautifier--action_box {
+ text-align: center;
+}
+
+.is-mobile .zci--js_beautifier .js_beautifier--action_box button {
+ padding-left: 0;
+ padding-right: 0;
+ width: 100%;
+}
+
+.is-mobile .zci--js_beautifier .btn {
+ height: 2.5em;
+}
diff --git a/share/goodie/js_beautifier/js_beautifier.js b/share/goodie/js_beautifier/js_beautifier.js
new file mode 100644
index 000000000..55c832f9e
--- /dev/null
+++ b/share/goodie/js_beautifier/js_beautifier.js
@@ -0,0 +1,70 @@
+DDH.js_beautifier = DDH.js_beautifier || {};
+
+DDH.js_beautifier.build = function(ops) {
+ "use strict";
+
+ // Flag to make denote if IA has been shown or not
+ var shown = false;
+
+ // Flag to denote if library 'beautify-js' has been loaded or not
+ var libLoaded = false;
+
+ ops.data.cols = is_mobile ? 8 : 20;
+
+ return {
+ onShow: function() {
+ // Make sure this function is run only once, the first time
+ // the IA is shown otherwise things will get initialized
+ // more than once
+ if (shown)
+ return;
+
+ // Set the flag to true so it doesn't get run again
+ shown = true;
+
+ var $dom = $('.zci--js_beautifier'),
+ $beautifyButton = $dom.find('button'),
+ $input = $dom.find('.js_beautifier--input'),
+ $output = $dom.find('.js_beautifier--output');
+
+ // remove max-width restriction from container
+ $dom.find(".zci__main").removeClass('c-base');
+
+ // Add event handler for change in input of textarea
+ $input.on('input', function() {
+ if (!libLoaded) {
+ // Set the flag to make sure the library isn't loaded
+ // again and again
+ libLoaded = true;
+
+ // Change text of button to show the loading action
+ // to make sure users aren't confused to see
+ // the disabled button
+ $beautifyButton.text('Loading..');
+
+ // load the library
+ DDG.require('js-beautify', function(){
+ // Change the text of button back to 'Beautify',
+ // enable the button and change the pointer back to
+ // 'pointer'
+ $beautifyButton
+ .text('Beautify Code')
+ .prop('disabled', false)
+ .css('cursor', 'pointer')
+ .removeClass('btn--skeleton')
+ .addClass('btn--primary');
+ });
+ }
+ });
+
+ // Add click handler for the beautify button
+ $beautifyButton.click(function() {
+ // Remove is-hidden class to make it visible again
+ $output.parent().removeClass('is-hidden');
+
+ // Add the output to output textarea field
+ $output.val(window.js_beautify($input.val()));
+ });
+ }
+ };
+};
diff --git a/share/goodie/js_beautifier/triggers.txt b/share/goodie/js_beautifier/triggers.txt
new file mode 100644
index 000000000..9ae6f7dd2
--- /dev/null
+++ b/share/goodie/js_beautifier/triggers.txt
@@ -0,0 +1,37 @@
+js beautify
+beautify js
+unminify js
+js unminify
+prettify js
+js prettify
+js beautifier
+un minify js
+jsbeautify
+uncompress js
+pretty print js
+js prettyprint
+prettyprint js
+js pretty print
+js pretty
+decompress js
+tidy js
+js tidy
+format js
+javascript beautify
+beautify javascript
+unminify javascript
+javascript unminify
+prettify javascript
+javascript prettify
+javascript beautifier
+un minify javascript
+uncompress javascript
+pretty print javascript
+javascript prettyprint
+prettyprint javascript
+javascript pretty print
+javascript pretty
+decompress javascript
+tidy javascript
+javascript tidy
+format javascript
\ No newline at end of file
diff --git a/t/JsBeautifier.t b/t/JsBeautifier.t
new file mode 100644
index 000000000..500977d3f
--- /dev/null
+++ b/t/JsBeautifier.t
@@ -0,0 +1,61 @@
+#!/usr/bin/env perl
+
+use strict;
+use warnings;
+use Test::More;
+use Test::Deep;
+use DDG::Test::Goodie;
+
+zci answer_type => "jsbeautifier";
+zci is_cached => 1;
+
+# Build a structured answer that should match the response from the
+# Perl file.
+sub build_structured_answer {
+ my @test_params = @_;
+
+ return "",
+ structured_answer => {
+
+ id => "js_beautifier",
+
+ data => {
+ title => 'JavaScript Beautifier',
+ subtitle => 'Enter code below, then click the button to beautify'
+ },
+
+ templates => {
+ group => 'text',
+ item => 0,
+ options => {
+ content => 'DDH.js_beautifier.content'
+ }
+ }
+ };
+}
+
+# Use this to build expected results for your tests.
+sub build_test { test_zci(build_structured_answer(@_)) }
+
+ddg_goodie_test(
+ [qw( DDG::Goodie::JsBeautifier)],
+
+ 'js beautify' => build_test(),
+ 'js beautify online' => build_test(),
+ 'unminify js code' => build_test(),
+ 'decompress js utility' => build_test(),
+ 'format js code' => build_test(),
+ 'js tidy' => build_test(),
+ 'javascript pretty tool' => build_test(),
+ 'online tidy js' => build_test(),
+
+ 'html beautify' => undef,
+ 'js beautify library' => undef,
+ 'js beatify online' => undef,
+ 'js minify' => undef,
+ 'js prettified' => undef,
+ 'css beautify' => undef,
+ 'beautify js cdn' => undef
+);
+
+done_testing;