diff --git a/package.json b/package.json
index 94b08ea..6ca6719 100644
--- a/package.json
+++ b/package.json
@@ -4,12 +4,18 @@
   "description": "Realtime collaborative markdown notes on all platforms.",
   "main": "app.js",
   "license": "MIT",
+  "scripts": {
+    "build": "webpack --config webpack.config.js --progress --colors --watch"
+  },
   "dependencies": {
+    "Idle.Js": "github:shawnmclean/Idle.js",
     "async": "^2.0.1",
     "blueimp-md5": "^2.3.0",
     "body-parser": "^1.15.2",
+    "bootstrap": "^3.3.7",
     "chance": "^1.0.4",
     "cheerio": "^0.20.0",
+    "codemirror": "^5.19.0",
     "compression": "^1.6.2",
     "connect-session-sequelize": "^3.1.0",
     "cookie": "0.3.1",
@@ -19,14 +25,39 @@
     "emojify.js": "^1.1.0",
     "express": ">=4.14",
     "express-session": "^1.14.0",
+    "file-saver": "^1.3.3",
+    "flowchart.js": "^1.6.3",
     "formidable": "^1.0.17",
+    "gist-embed": "github:yukaii/gist-embed",
+    "handlebars": "^4.0.5",
     "helmet": "^2.1.2",
-    "highlight.js": "^9.5.0",
+    "highlight.js": "^9.7.0",
     "i18n": "^0.8.3",
     "imgur": "git+https://github.com/hackmdio/node-imgur.git",
+    "jquery": "^3.1.1",
+    "jquery-mousewheel": "^3.1.13",
+    "jquery-textcomplete": "^1.7.3",
+    "jquery-ui": "^1.12.1",
+    "js-cookie": "^2.1.3",
+    "js-sequence-diagrams": "^1000000.0.6",
+    "js-url": "^2.3.0",
     "jsdom-nogyp": "^0.8.3",
+    "keymaster": "^1.6.2",
+    "list.js": "^1.2.0",
+    "lodash": "^4.16.4",
     "lz-string": "1.4.4",
-    "markdown-it": "^7.0.0",
+    "markdown-it": "^7.0.1",
+    "markdown-it-abbr": "^1.0.4",
+    "markdown-it-container": "^2.0.0",
+    "markdown-it-deflist": "^2.0.1",
+    "markdown-it-footnote": "^3.0.1",
+    "markdown-it-imsize": "^2.0.1",
+    "markdown-it-ins": "^2.0.0",
+    "markdown-it-mark": "^2.0.0",
+    "markdown-it-mathjax": "^1.0.3",
+    "markdown-it-regexp": "^0.4.0",
+    "markdown-it-sub": "^1.0.0",
+    "markdown-it-sup": "^1.0.0",
     "markdown-pdf": "^7.0.0",
     "meta-marked": "^0.4.1",
     "method-override": "^2.3.6",
@@ -42,9 +73,12 @@
     "passport-google-oauth20": "^1.0.0",
     "passport-twitter": "^1.0.4",
     "passport.socketio": "^3.6.2",
+    "pdfobject": "^2.0.201604172",
     "pg": "^6.0.3",
     "pg-hstore": "^2.3.2",
+    "prismjs": "^1.5.1",
     "randomcolor": "^0.4.4",
+    "raphael": "github:dmitrybaranovskiy/raphael",
     "request": "^2.74.0",
     "reveal.js": "3.3.0",
     "sequelize": "^3.23.6",
@@ -52,20 +86,43 @@
     "shortid": "2.2.6",
     "socket.io": "1.4.8",
     "sqlite3": "^3.1.4",
+    "store": "^1.3.20",
     "string": "^3.3.1",
     "tedious": "^1.14.0",
+    "to-markdown": "^3.0.1",
     "toobusy-js": "^0.5.1",
-    "winston": "^2.2.0"
+    "visibilityjs": "^1.2.4",
+    "viz.js": "^1.3.0",
+    "winston": "^2.2.0",
+    "xss": "^0.2.13"
   },
   "engines": {
     "node": ">=4.x"
   },
   "bugs": "https://github.com/hackmdio/hackmd/issues",
-  "keywords": ["Collaborative", "Markdown", "Notes"],
+  "keywords": [
+    "Collaborative",
+    "Markdown",
+    "Notes"
+  ],
   "homepage": "https://hackmd.io",
-  "maintainers": [{"name": "Max Wu", "email": "jackymaxj@gmail.com"}],
+  "maintainers": [
+    {
+      "name": "Max Wu",
+      "email": "jackymaxj@gmail.com"
+    }
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/hackmdio/hackmd.git"
+  },
+  "devDependencies": {
+    "babel-loader": "^6.2.5",
+    "bower-webpack-plugin": "^0.1.9",
+    "css-loader": "^0.25.0",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "imports-loader": "^0.6.5",
+    "json-loader": "^0.5.4",
+    "webpack": "^1.13.2"
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..01adea9
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,64 @@
+var webpack = require('webpack');
+var path = require('path');
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+module.exports = {
+  plugins: [
+    new webpack.ProvidePlugin({
+      '_': 'lodash',
+      jquery: "jquery",
+      jQuery: "jquery",
+      $: "jquery",
+      "window.jQuery": "jquery",
+      Visibility: "visibilityjs",
+      Cookies: "js-cookie",
+      CodeMirror: "codemirror"
+    }),
+    new webpack.DefinePlugin({
+      "require.specified": "require.resolve"
+    })
+  ],
+
+  entry: {
+    app: path.join(__dirname, 'public/js/app.js')
+  },
+
+  output: {
+    path: path.join(__dirname, 'public/build/js'),
+    filename: '[name].js'
+  },
+
+  resolve: {
+    root: [
+      path.resolve(__dirname, 'src'),
+      path.resolve(__dirname, 'node_modules')
+    ],
+    extensions: ["", ".js"],
+    alias: {
+      'jquery-ui': 'jquery-ui/ui/widgets'
+    }
+  },
+
+  module: {
+    loaders: [{
+      test: /\.json$/,
+      loader: 'json-loader'
+    }, {
+      test: /\.css$/,
+      loader: ExtractTextPlugin.extract({
+        fallbackLoader: "style-loader",
+        loader: "css-loader"
+      })
+    }, {
+      test: /\.scss$/,
+      loaders: ['style', 'css', 'sass']
+    }, {
+      test: require.resolve("js-sequence-diagrams"),
+      loader: "imports?Raphael=raphael"
+    }]
+  },
+
+  node: {
+    fs: "empty"
+  }
+};