diff --git a/docs/fiddles/features/represented-file/index.html b/docs/fiddles/features/represented-file/index.html
index a3855d2640d..67583b9d9dd 100644
--- a/docs/fiddles/features/represented-file/index.html
+++ b/docs/fiddles/features/represented-file/index.html
@@ -4,13 +4,14 @@
     <meta charset="UTF-8">
     <title>Hello World!</title>
     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
 </head>
 <body>
     <h1>Hello World!</h1>
     <p>
-        We are using node <script>document.write(process.versions.node)</script>,
-        Chrome <script>document.write(process.versions.chrome)</script>,
-        and Electron <script>document.write(process.versions.electron)</script>.
+      Click on the title with the <pre>Command</pre> or <pre>Control</pre> key pressed.
+      You should see a popup with the represented file at the top.
     </p>
+  </body>
 </body>
 </html>
diff --git a/docs/fiddles/features/represented-file/main.js b/docs/fiddles/features/represented-file/main.js
index 61b6ef3316b..204a3fc4586 100644
--- a/docs/fiddles/features/represented-file/main.js
+++ b/docs/fiddles/features/represented-file/main.js
@@ -4,10 +4,7 @@ const os = require('os');
 function createWindow () {
   const win = new BrowserWindow({
     width: 800,
-    height: 600,
-    webPreferences: {
-      nodeIntegration: true
-    }
+    height: 600
   })
 
   win.loadFile('index.html')
diff --git a/docs/images/represented-file.png b/docs/images/represented-file.png
index a2d3a3cdd77..8ccb477ab7e 100644
Binary files a/docs/images/represented-file.png and b/docs/images/represented-file.png differ
diff --git a/docs/tutorial/represented-file.md b/docs/tutorial/represented-file.md
index c59c0039a2b..7e681f52fa3 100644
--- a/docs/tutorial/represented-file.md
+++ b/docs/tutorial/represented-file.md
@@ -20,23 +20,40 @@ To set the represented file of window, you can use the
 
 ## Example
 
-Starting with a working application from the
-[Quick Start Guide](quick-start.md), add the following lines to the
-`main.js` file:
-
 ```javascript fiddle='docs/fiddles/features/represented-file'
 const { app, BrowserWindow } = require('electron')
+const os = require('os');
+
+function createWindow () {
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600
+  })
+}
 
 app.whenReady().then(() => {
   const win = new BrowserWindow()
 
-  win.setRepresentedFilename('/etc/passwd')
+  win.setRepresentedFilename(os.homedir())
   win.setDocumentEdited(true)
 })
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})
 ```
 
 After launching the Electron application, click on the title with `Command` or
-`Control` key pressed. You should see a popup with the file you just defined:
+`Control` key pressed. You should see a popup with the represented file at the top.
+In this guide, this is the current user's home directory:
 
 ![Represented file](../images/represented-file.png)
 
