diff --git a/public/js/cover.js b/public/js/cover.ts
similarity index 100%
rename from public/js/cover.js
rename to public/js/cover.ts
diff --git a/public/js/extra.js b/public/js/extra.ts
similarity index 100%
rename from public/js/extra.js
rename to public/js/extra.ts
diff --git a/public/js/history.js b/public/js/history.ts
similarity index 100%
rename from public/js/history.js
rename to public/js/history.ts
diff --git a/public/js/index.js b/public/js/index.ts
similarity index 100%
rename from public/js/index.js
rename to public/js/index.ts
diff --git a/public/js/lib/appState.js b/public/js/lib/appState.ts
similarity index 100%
rename from public/js/lib/appState.js
rename to public/js/lib/appState.ts
diff --git a/public/js/lib/config/index.ts b/public/js/lib/config/index.ts
index 1b7e2183..89fe0bfb 100644
--- a/public/js/lib/config/index.ts
+++ b/public/js/lib/config/index.ts
@@ -1,10 +1,11 @@
-interface Window {
+declare interface Window {
   DROPBOX_APP_KEY: string,
   domain: string,
   urlpath: string,
   debug: boolean,
   serverurl: string,
   version: string
+  USE_CDN: boolean
 }
 
 export const DROPBOX_APP_KEY = window.DROPBOX_APP_KEY || ''
diff --git a/public/js/lib/editor/config.js b/public/js/lib/editor/config.ts
similarity index 100%
rename from public/js/lib/editor/config.js
rename to public/js/lib/editor/config.ts
diff --git a/public/js/lib/editor/constants.js b/public/js/lib/editor/constants.ts
similarity index 100%
rename from public/js/lib/editor/constants.js
rename to public/js/lib/editor/constants.ts
diff --git a/public/js/lib/editor/index.js b/public/js/lib/editor/index.ts
similarity index 99%
rename from public/js/lib/editor/index.js
rename to public/js/lib/editor/index.ts
index eb887da6..84675d63 100644
--- a/public/js/lib/editor/index.js
+++ b/public/js/lib/editor/index.ts
@@ -11,6 +11,8 @@ import CodeMirrorSpellChecker, { supportLanguages, supportLanguageCodes } from '
 import { initTableEditor } from './table-editor'
 import { availableThemes } from './constants'
 
+declare const CodeMirror: any
+
 /* config section */
 const isMac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault
 const defaultEditorMode = 'gfm'
diff --git a/public/js/lib/editor/markdown-lint/index.js b/public/js/lib/editor/markdown-lint/index.ts
similarity index 99%
rename from public/js/lib/editor/markdown-lint/index.js
rename to public/js/lib/editor/markdown-lint/index.ts
index 349d458b..83f8fda6 100644
--- a/public/js/lib/editor/markdown-lint/index.js
+++ b/public/js/lib/editor/markdown-lint/index.ts
@@ -10,6 +10,8 @@ window.markdownit = require('markdown-it')
 // eslint-disable-next-line
 require('script-loader!markdownlint');
 
+declare const CodeMirror: any
+
 (function (mod) {
   mod(CodeMirror)
 })(function (CodeMirror) {
diff --git a/public/js/lib/editor/spellcheck.js b/public/js/lib/editor/spellcheck.ts
similarity index 100%
rename from public/js/lib/editor/spellcheck.js
rename to public/js/lib/editor/spellcheck.ts
diff --git a/public/js/lib/editor/table-editor.js b/public/js/lib/editor/table-editor.ts
similarity index 100%
rename from public/js/lib/editor/table-editor.js
rename to public/js/lib/editor/table-editor.ts
diff --git a/public/js/lib/editor/ui-elements.js b/public/js/lib/editor/ui-elements.ts
similarity index 100%
rename from public/js/lib/editor/ui-elements.js
rename to public/js/lib/editor/ui-elements.ts
diff --git a/public/js/lib/editor/utils.js b/public/js/lib/editor/utils.ts
similarity index 99%
rename from public/js/lib/editor/utils.js
rename to public/js/lib/editor/utils.ts
index 32bd4419..525361ab 100644
--- a/public/js/lib/editor/utils.js
+++ b/public/js/lib/editor/utils.ts
@@ -1,4 +1,5 @@
 /* global CodeMirror, editor */
+declare const CodeMirror: any
 const wrapSymbols = ['*', '_', '~', '^', '+', '=']
 export function wrapTextWith (editor, cm, symbol) {
   if (!cm.getSelection()) {
diff --git a/public/js/lib/markdown/utils.js b/public/js/lib/markdown/utils.ts
similarity index 100%
rename from public/js/lib/markdown/utils.js
rename to public/js/lib/markdown/utils.ts
diff --git a/public/js/lib/modeType.js b/public/js/lib/modeType.ts
similarity index 100%
rename from public/js/lib/modeType.js
rename to public/js/lib/modeType.ts
diff --git a/public/js/lib/renderer/csvpreview.js b/public/js/lib/renderer/csvpreview.ts
similarity index 100%
rename from public/js/lib/renderer/csvpreview.js
rename to public/js/lib/renderer/csvpreview.ts
diff --git a/public/js/lib/renderer/fretboard/fretboard.js b/public/js/lib/renderer/fretboard/fretboard.ts
similarity index 99%
rename from public/js/lib/renderer/fretboard/fretboard.js
rename to public/js/lib/renderer/fretboard/fretboard.ts
index c7e56fd1..f155c925 100644
--- a/public/js/lib/renderer/fretboard/fretboard.js
+++ b/public/js/lib/renderer/fretboard/fretboard.ts
@@ -12,6 +12,8 @@ import dotWideMiddle from './svg/dotWideMiddle.svg'
 import stringO from './svg/string_o.svg'
 import stringX from './svg/string_x.svg'
 
+declare const $: any
+
 const switchListV = {
   o: `<div class='cell dot'>${dot}</div>`,
   '*': `<div class='cell dot faded'>${dot}</div>`,
diff --git a/public/js/lib/renderer/lightbox/index.js b/public/js/lib/renderer/lightbox/index.ts
similarity index 100%
rename from public/js/lib/renderer/lightbox/index.js
rename to public/js/lib/renderer/lightbox/index.ts
diff --git a/public/js/lib/syncscroll.js b/public/js/lib/syncscroll.ts
similarity index 100%
rename from public/js/lib/syncscroll.js
rename to public/js/lib/syncscroll.ts
diff --git a/public/js/locale.js b/public/js/locale.ts
similarity index 100%
rename from public/js/locale.js
rename to public/js/locale.ts
diff --git a/public/js/mathjax-config-extra.js b/public/js/mathjax-config-extra.ts
similarity index 100%
rename from public/js/mathjax-config-extra.js
rename to public/js/mathjax-config-extra.ts
diff --git a/public/js/pretty.js b/public/js/pretty.ts
similarity index 100%
rename from public/js/pretty.js
rename to public/js/pretty.ts
diff --git a/public/js/render.js b/public/js/render.ts
similarity index 100%
rename from public/js/render.js
rename to public/js/render.ts
diff --git a/public/js/reveal-markdown.js b/public/js/reveal-markdown.ts
similarity index 100%
rename from public/js/reveal-markdown.js
rename to public/js/reveal-markdown.ts
diff --git a/public/js/slide.js b/public/js/slide.ts
similarity index 100%
rename from public/js/slide.js
rename to public/js/slide.ts
diff --git a/public/js/utils.js b/public/js/utils.ts
similarity index 100%
rename from public/js/utils.js
rename to public/js/utils.ts
diff --git a/webpack.common.js b/webpack.common.js
index e35d34d7..0d1627e3 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -222,7 +222,7 @@ module.exports = {
     cover: [
       'core-js',
       'regenerator-runtime/runtime',
-      path.join(__dirname, 'public/js/cover.js')
+      path.join(__dirname, 'public/js/cover.ts')
     ],
     'cover-styles-pack': [
       path.join(__dirname, 'node_modules/bootstrap/dist/css/bootstrap.min.css'),
@@ -236,7 +236,7 @@ module.exports = {
       'bootstrap-validator',
       'expose-loader?exposes=select2!select2',
       'expose-loader?exposes=moment!moment',
-      path.join(__dirname, 'public/js/cover.js')
+      path.join(__dirname, 'public/js/cover.ts')
     ],
     index: [
       'core-js',
@@ -249,7 +249,7 @@ module.exports = {
       'script-loader!ot',
       'flowchart.js',
       'imports-loader?Raphael=raphael!js-sequence-diagrams',
-      path.join(__dirname, 'public/js/index.js')
+      path.join(__dirname, 'public/js/index.ts')
     ],
     'index-styles': [
       path.join(__dirname, 'public/vendor/jquery-ui/jquery-ui.min.css'),
@@ -312,14 +312,14 @@ module.exports = {
       'script-loader!vega-embed',
       'expose-loader?exposes=io!socket.io-client',
       'expose-loader?exposes=L|L|true!leaflet',
-      path.join(__dirname, 'public/js/index.js')
+      path.join(__dirname, 'public/js/index.ts')
     ],
     pretty: [
       'core-js',
       'regenerator-runtime/runtime',
       'flowchart.js',
       'imports-loader?Raphael=raphael!js-sequence-diagrams',
-      path.join(__dirname, 'public/js/pretty.js')
+      path.join(__dirname, 'public/js/pretty.ts')
     ],
     'pretty-styles': [
       path.join(__dirname, 'public/css/github-extract.css'),
@@ -351,7 +351,7 @@ module.exports = {
       'script-loader!vega-lite',
       'script-loader!vega-embed',
       'expose-loader?exposes=L|L|true!leaflet',
-      path.join(__dirname, 'public/js/pretty.js')
+      path.join(__dirname, 'public/js/pretty.ts')
     ],
     slide: [
       'core-js',
@@ -359,7 +359,7 @@ module.exports = {
       'bootstrap-tooltip',
       'flowchart.js',
       'imports-loader?Raphael=raphael!js-sequence-diagrams',
-      path.join(__dirname, 'public/js/slide.js')
+      path.join(__dirname, 'public/js/slide.ts')
     ],
     'slide-styles': [
       path.join(__dirname, 'public/vendor/bootstrap/tooltip.min.css'),
@@ -395,7 +395,7 @@ module.exports = {
       'script-loader!vega-embed',
       'expose-loader?exposes=Reveal!reveal.js',
       'expose-loader?exposes=L|L|true!leaflet',
-      path.join(__dirname, 'public/js/slide.js')
+      path.join(__dirname, 'public/js/slide.ts')
     ]
   },