diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..a0c00cd7
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+/node_modules/
diff --git a/.npmignore b/.npmignore
new file mode 100644
index 00000000..01e45a5d
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,2 @@
+/.gitignore
+/.vscode/
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..ce4ce429
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,6 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+ "files.trimTrailingWhitespace": true,
+ "editor.tabSize": 4,
+ "editor.insertSpaces": false
+}
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 00000000..c03a33a5
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Microsoft Corporation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
index fd280561..4417e57c 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,27 @@
-# monaco-editor-samples
-Samples for using the Monaco Editor
+
+# Monaco Editor Samples
+
+Standalone HTML samples showing how to integrate the Monaco Editor.
+
+## Running
+
+From npm:
+```
+npm install monaco-editor-samples
+cd node_modules/monaco-editor-samples
+npm run simpleserver
+```
+
+From source:
+```
+git clone https://github.com/Microsoft/monaco-editor-samples.git
+cd monaco-editor-samples
+npm install .
+npm run simpleserver
+```
+
+Go to localhost:8888 and explore the samples!
+
+## License
+
+MIT
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..09771b0b
--- /dev/null
+++ b/package.json
@@ -0,0 +1,15 @@
+{
+ "name": "monaco-editor-samples",
+ "version": "0.0.1",
+ "description": "Samples for using the Monaco Editor",
+ "main": "index.js",
+ "scripts": {
+ "simpleserver": "node_modules/.bin/http-server -c-1 ./ -p 8888"
+ },
+ "author": "Microsoft Corporation",
+ "license": "MIT",
+ "dependencies": {
+ "http-server": "^0.9.0",
+ "monaco-editor": "0.x.x"
+ }
+}
diff --git a/sample-diff-editor/index.html b/sample-diff-editor/index.html
new file mode 100644
index 00000000..2e93aa97
--- /dev/null
+++ b/sample-diff-editor/index.html
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
+
+
Monaco Diff Editor Sample
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/sample-diff-editor/modified.txt b/sample-diff-editor/modified.txt
new file mode 100644
index 00000000..0db65d2b
--- /dev/null
+++ b/sample-diff-editor/modified.txt
@@ -0,0 +1,74 @@
+
+///
+(function () {
+ "use strict";
+
+ var deltaDecorations = function (oldDecorations, newDecorations) {
+ ///
+ /// Update oldDecorations to match newDecorations.
+ /// It will remove old decorations which are not found in new decorations
+ /// and add only the really new decorations.
+ ///
+ ///
+ /// An array containing ids of existing decorations
+ ///
+ ///
+ /// An array containing literal objects describing new decorations. A
+ /// literal contains the following two fields:
+ /// range
+ /// options
+ ///
+ ///
+ /// Returns an array of decorations ids
+ ///
+ var hashFunc = function (range, options) {
+ return range.startLineNumber + "," + range.startColumn + "-" + range.endLineNumber + "," + range.endColumn +
+ "-" + options.hoverMessage + "-" + options.className + "-" + options.isOverlay + "-" + options.showInOverviewRuler;
+ };
+ return this.changeDecorations(function (changeAccessor) {
+ var i, len, oldDecorationsMap = {}, hash;
+
+ // Record old decorations in a map
+ // Two decorations can have the same hash
+ for (i = 0, len = oldDecorations.length; i < len; i++) {
+ hash = hashFunc(this.getDecorationRange(oldDecorations[i]), this.getDecorationOptions(oldDecorations[i]));
+ oldDecorationsMap[hash] = oldDecorationsMap[hash] || [];
+ oldDecorationsMap[hash].push(oldDecorations[i]);
+ }
+
+ // Add only new decorations & mark reused ones
+ var j, lenJ, result = [], usedOldDecorations = {}, oldDecorationsCandidates, reusedOldDecoration;
+ for (i = 0, len = newDecorations.length; i < len; i++) {
+ hash = hashFunc(newDecorations[i].range, newDecorations[i].options);
+ reusedOldDecoration = false;
+ if (oldDecorationsMap.hasOwnProperty(hash)) {
+ oldDecorationsCandidates = oldDecorationsMap[hash];
+ // We can try reusing an old decoration (if it hasn't been reused before)
+ for (j = 0, lenJ = oldDecorationsCandidates.length; j < lenJ; j++) {
+ if (!usedOldDecorations.hasOwnProperty(oldDecorationsCandidates[j])) {
+ // Found an old decoration which can be reused & it hasn't been reused before
+ reusedOldDecoration = true;
+ usedOldDecorations[oldDecorationsCandidates[j]] = true;
+ result.push(oldDecorationsCandidates[j]);
+ break;
+ }
+ }
+ }
+
+ if (!reusedOldDecoration) {
+ result.push(changeAccessor.addDecoration(newDecorations[i].range, newDecorations[i].options));
+ }
+ }
+
+ // Remove unused old decorations
+ for (i = 0, len = oldDecorations.length; i < len; i++) {
+ if (!usedOldDecorations.hasOwnProperty(oldDecorations[i])) {
+ changeAccessor.removeDecoration(oldDecorations[i]);
+ }
+ }
+
+ return result;
+ }.bind(this));
+ };
+
+})();
diff --git a/sample-diff-editor/original.txt b/sample-diff-editor/original.txt
new file mode 100644
index 00000000..637aa9b8
--- /dev/null
+++ b/sample-diff-editor/original.txt
@@ -0,0 +1,61 @@
+///
+(function () {
+ "use strict";
+
+ // Some useless comment
+
+ var deltaDecorations = function (oldDecorations, newDecorations) {
+ ///
+ /// Update oldDecorations to match newDecorations.
+ /// It will remove old decorations which are not found in new decorations
+ /// and add only the really new decorations.
+ ///
+ ///
+ /// An array containing ids of existing decorations
+ ///
+ ///
+ /// An array containing literal objects describing new decorations. A
+ /// literal contains the following two fields:
+ /// range
+ /// options
+ ///
+ ///
+ /// Returns an array of decorations ids
+ ///
+ var hashFunc = function (range, options) {
+ return range.startLineNumber + "," + range.startColumn + "-" + range.endLineNumber + "," + range.endColumn +
+ "-" + options.hoverMessage + "-" + options.className + "-" + options.isOverlay + "-" + options.showInOverviewRuler;
+ };
+ return this.changeDecorations(function (changeAccessor) {
+ var i, len, oldDecorationsMap = {}, hash;
+
+ // Record old decorations in a map
+ for (i = 0, len = oldDecorations.length; i < len; i++) {
+ hash = hashFunc(this.getDecorationRange(oldDecorations[i]), this.getDecorationOptions(oldDecorations[i]));
+ oldDecorationsMap[hash] = i;
+ }
+
+ // Add only new decorations & mark reused ones
+ var result = [], usedOldDecorationsMap = {};
+ for (i = 0, len = newDecorations.length; i < len; i++) {
+ hash = hashFunc(newDecorations[i].range, newDecorations[i].options);
+ if (oldDecorationsMap.hasOwnProperty(hash)) {
+ usedOldDecorationsMap[oldDecorationsMap[hash]] = true;
+ result.push(oldDecorations[oldDecorationsMap[hash]]);
+ } else {
+ result.push(changeAccessor.addDecoration(newDecorations[i].range, newDecorations[i].options));
+ }
+ }
+
+ // Remove unused old decorations
+ for (i = 0, len = oldDecorations.length; i < len; i++) {
+ if (!usedOldDecorationsMap.hasOwnProperty(i)) {
+ changeAccessor.removeDecoration(oldDecorations[i]);
+ }
+ }
+
+ return result;
+ }.bind(this));
+ };
+
+})();
diff --git a/sample-editor/index.html b/sample-editor/index.html
new file mode 100644
index 00000000..bf21c49c
--- /dev/null
+++ b/sample-editor/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
Monaco Editor Sample
+
+
+
+
+
+
\ No newline at end of file
diff --git a/sample-iframe/index.html b/sample-iframe/index.html
new file mode 100644
index 00000000..98a08a06
--- /dev/null
+++ b/sample-iframe/index.html
@@ -0,0 +1,79 @@
+
+
+
+
+ Editor in tiny iframe
+
+
+
+
+
+
+
Monaco Editor inside iframes sample
+
+
+ 0x0:
+
+
+display:none:
+
+
+visibility:hidden:
+
+
+taken off-dom while loading:
+
+
+
+
+
+
\ No newline at end of file
diff --git a/sample-iframe/inner.html b/sample-iframe/inner.html
new file mode 100644
index 00000000..4a0ff4aa
--- /dev/null
+++ b/sample-iframe/inner.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/sample-localized/index.html b/sample-localized/index.html
new file mode 100644
index 00000000..b69cc502
--- /dev/null
+++ b/sample-localized/index.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
Monaco Editor Localization Sample
+
+
+
+
+
+
\ No newline at end of file
diff --git a/sample-monarch/index.html b/sample-monarch/index.html
new file mode 100644
index 00000000..e057fc47
--- /dev/null
+++ b/sample-monarch/index.html
@@ -0,0 +1,111 @@
+
+
+
+
+
+
+
+
+
+
Monarch Tokenizer Sample
+
+
+
+
+
+
\ No newline at end of file
diff --git a/sample-shared-model/index.html b/sample-shared-model/index.html
new file mode 100644
index 00000000..cc645b9e
--- /dev/null
+++ b/sample-shared-model/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+
Monaco Editor Shared Models Sample
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/sample-sync/index.html b/sample-sync/index.html
new file mode 100644
index 00000000..d7915b10
--- /dev/null
+++ b/sample-sync/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+