diff --git a/README.md b/README.md
new file mode 100644
index 0000000000..a83f0a988f
--- /dev/null
+++ b/README.md
@@ -0,0 +1,15 @@
+
+#Browser-solidity
+
+Browser solidity is a browser based solidity compiler. To use either visit https://chriseth.github.io/browser-solidity or clone/download this repo and open `index.html` in your browser.
+
+#Solidity compiler
+
+To use the solidity compiler via nodejs you can do the following:
+
+ var solc = require('solc');
+ var compileJSON = solc.cwrap("compileJSON", "string", ["string", "number"]);
+ var input = "contract x { function g() {} }";
+ var output = JSON.parse(compileJSON(input, 1)); // 1 activates the optimiser
+ for (var contractName in output.contracts)
+ console.log(contractName + ': ' + output.contracts[contractName].bytecode);
\ No newline at end of file
diff --git a/index.html b/index.html
index 196038ac3c..d5f2a6cec4 100644
--- a/index.html
+++ b/index.html
@@ -30,220 +30,17 @@ THE SOFTWARE.
Solidity realtime compiler and runtime
+
-
+
-
-
+
+
diff --git a/mode-solidity.js b/libs/mode-solidity.js
similarity index 100%
rename from mode-solidity.js
rename to libs/mode-solidity.js
diff --git a/web3.min.js b/libs/web3.min.js
similarity index 100%
rename from web3.min.js
rename to libs/web3.min.js
diff --git a/package.json b/package.json
new file mode 100644
index 0000000000..48c8497881
--- /dev/null
+++ b/package.json
@@ -0,0 +1,27 @@
+{
+ "name": "solc",
+ "version": "0.1.3",
+ "description": "Solidity compiler",
+ "main": "soljson-latest.js",
+ "bin": {
+ "solc": "soljson-latest.js"
+ },
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/chriseth/browser-solidity.git"
+ },
+ "keywords": [
+ "ethereum",
+ "solidity",
+ "compiler"
+ ],
+ "author": "chriseth",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/chriseth/browser-solidity/issues"
+ },
+ "homepage": "https://github.com/chriseth/browser-solidity#readme"
+}
diff --git a/stylesheets/browser-solidity.css b/stylesheets/browser-solidity.css
new file mode 100644
index 0000000000..1d791a52a8
--- /dev/null
+++ b/stylesheets/browser-solidity.css
@@ -0,0 +1,204 @@
+body {
+ padding: 0px;
+ font-size: 12px;
+ color: #111111;
+}
+#editor {
+ position: absolute;
+ top: 0;
+ left: 0px;
+ width: auto;
+ bottom: 0px;
+ right: 37em;
+
+}
+#input {
+ font-size: 15px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ min-width: 20vw;
+}
+
+#righthand-panel {
+ position: absolute;
+ top: 0;
+ width: 37em;
+ max-width: 80vw;
+ right: 0;
+ bottom: 0px;
+ overflow: auto;
+ border-left: 1px dotted black;
+ box-sizing: border-box;
+}
+
+#output {
+ border-top: 1px dotted black;
+ display: block;
+}
+
+#header {
+ font-size: 14px;
+ padding: 1em;
+ font-size: 12px;
+}
+
+#header h1 {
+ margin-top: 0;
+}
+
+#header .info { clear: left; }
+
+#header #solIcon {
+ float: left;
+ height: 5em;
+}
+
+.col1 {
+ width: 30%;
+ float: left;
+}
+.col2 {
+ width: 70%;
+ float: left;
+}
+
+.row {
+ overflow: auto;
+}
+.gethDeployText {
+ border-color: #bebebe;
+ height: 2.5em;
+ width: 100%;
+ display: block;
+}
+
+.contractInstance {
+ background-color: #ccc;
+ margin-bottom: 1em;
+ padding: 0.6em;
+}
+
+.contractInstance.hide > *:not(.title) {
+ display: none;
+}
+
+
+.contractInstance .contractProperty input,
+.contractInstance .contractProperty button {
+ text-align: left;
+ padding: 0.3em;
+ width: 50%;
+ margin: 0;
+}
+.contractOutput .contractInstance .contractProperty {
+ margin-bottom: 0;
+}
+.contractOutput .contractInstance .contractProperty .output {
+ padding: 0.4em;
+ background-color: #333;
+ color: white;
+ margin-bottom: 1em;
+ display: block;
+}
+.contractInstance .contractProperty .output:empty { display: none; }
+
+.contractOutput {
+ border-bottom: 1px dotted black;
+ padding: 0.6em;
+ box-sizing: border-box;
+}
+.contractOutput .contractProperty {
+ margin-bottom: 0.6em;
+}
+.contractOutput .contractProperty .output {
+ display: inline;
+}
+
+
+.contractOutput .body {
+ margin-top: 10px;
+}
+
+.contractOutput.hide {
+ background-color: #4C4C67;
+ color: white;
+}
+
+.contractOutput.hide > *:not(.title) {
+ display: none;
+}
+
+.title {
+ margin: 0;
+ cursor: pointer;
+ font-family: monospace;
+ font-weight: bold;
+}
+
+.title:before {
+ content: "\25BC";
+ opacity: 0.5;
+ margin-right: 0.4em;
+ font-size: 10px;
+}
+
+.hide > .title:before {
+ content: "\25B6";
+}
+
+.contractOutput > .title {
+ border-bottom: #4C4C67;
+}
+
+
+.title .size {
+ font-weight: normal;
+ float: right;
+}
+
+.solError {
+ position: absolute;
+ background-color: rgba(255, 0, 0, 0.2);
+ z-index:40;
+}
+
+.error {
+ background-color: rgba(255, 0, 0, 0.5);
+ border-radius: 0;
+ word-wrap: break-word;
+ border: 1px solid #D00909;
+}
+
+#ghostbar {
+ width: 1px;
+ background-color: red;
+ opacity: 0.5;
+ position: absolute;
+ cursor: col-resize;
+ z-index: 9999;
+ top: 0;
+ bottom: 0;
+}
+
+#dragbar{
+ background-color: transparent;
+ position: absolute;
+ width: 5px;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ cursor: col-resize;
+ z-index: 999;
+}
+
+
+input[readonly] {
+ padding: .4em;
+ border: 1px solid #ccc;
+ box-sizing: border-box;
+ display: block;
+ width: 100%;
+}