Reference error: document is not defined at compile / Electron

I'm trying to make an electron app, but a Javascript error occurs in the main process. Basically I get this error after npm start :

ReferenceError: document is not defined at compile (/Users/ege/Desktop/electron/main.js:23:13) at Object. (/Users/ege/Desktop/electron/main.js:35:1) at Object. (/Users/ege/Desktop/electron/main.js:37:3) at Module._compile (module.js:571:32) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:488:32) at tryModuleLoad (module.js:447:12) at Function.Module._load (module.js:439:3) at loadApplicationPackage (/Users/ege/Desktop/electron/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:283:12) at Object. (/Users/ege/Desktop/electron/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:325:5)

Here is main.js:

const electron = require('electron');
const app = electron.app;
const path = require('path');
const url = require('url');

const BrowserWindow = electron.BrowserWindow;
var mainWindow;

app.on('ready',function(){

mainWindow = new BrowserWindow({width:1024 , height: 768 , backgroundColor:'#2e2c29'});
  mainWindow.loadURL(url.format({
    pathname:path.join(__dirname,'index.html'),
    protocol:'file:',
    slashes:true

}));

});

function compile() {

    var html = document.getElementById("html");
    var css = document.getElementById("css");
    var js = document.getElementById("js");
    var code = document.getElementById("code").contentWindow.document;

     document.body.onkeyup = function(){
        code.open();
        code.writeln(html.value+"<style>"+css.value+"</style>"+"<script>" + js.value + "</script>");
        code.close();
      };
    };


compile();

via Egek92