5 files changed, 35 insertions, 28 deletions
diff --git a/src/main/index.ts b/src/main/index.ts
index be494a4..68ae000 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -1,10 +1,17 @@
 import { app, BrowserWindow } from 'electron';
+
 declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
 
 const isDevelopment = process.env.NODE_ENV !== 'production';
 
 app.allowRendererProcessReuse = true;
 
+async function installReactDevTools(): Promise<void> {
+	const { default: installExtension, REACT_DEVELOPER_TOOLS } = await import('electron-devtools-installer');
+	const name = await installExtension(REACT_DEVELOPER_TOOLS);
+	console.log(`Added Extension:  ${name}`);
+}
+
 function createWindow(): void {
 	const window = new BrowserWindow({ webPreferences: { nodeIntegration: true } });
 
@@ -36,5 +43,13 @@ app.on('activate', () => {
 	}
 });
 
+async function initialize(): Promise<void> {
+	if (isDevelopment) {
+		await installReactDevTools();
+	}
+
+	createWindow();
+}
+
 // create main BrowserWindow when electron is ready
-app.on('ready', createWindow);
+app.on('ready', initialize);
diff --git a/src/renderer/editor/editor.tsx b/src/renderer/editor/editor.tsx
new file mode 100644
index 0000000..fd8360a
--- /dev/null
+++ b/src/renderer/editor/editor.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import Button from '@material-ui/core/Button';
+
+export function Editor(): JSX.Element {
+	return (
+		<Button variant='contained' color='primary'>
+			Hello World
+		</Button>
+	);
+}
diff --git a/src/renderer/index.html b/src/renderer/index.html
index 5bd9d1f..e775d3e 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -3,6 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+		<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
 		<title>RPGedit</title>
 	</head>
 	<body>
diff --git a/src/renderer/index.ts b/src/renderer/index.ts
deleted file mode 100644
index 490dbef..0000000
--- a/src/renderer/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import './runtime/index.css';
-
-import { GameContext } from './runtime/controller/gamecontext';
-
-import { Renderer } from './runtime/view/renderer/renderer';
-
-window.onload = async (): Promise<void> => {
-	const app = document.getElementById('app');
-	if (!app) return;
-
-	const canvas = document.createElement('canvas');
-	const renderer = new Renderer(canvas);
-
-	const resize = (): void => {
-		canvas.width = window.innerWidth;
-		canvas.height = window.innerHeight;
-		renderer.resize();
-	};
-	window.addEventListener('resize', resize);
-	resize();
-
-	app.append(canvas);
-
-	GameContext.load(renderer);
-};
-
-module.hot?.accept();
diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx
new file mode 100644
index 0000000..2920265
--- /dev/null
+++ b/src/renderer/index.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { Editor } from './editor/editor';
+
+ReactDOM.render(<Editor />, document.querySelector('#app'));
+
+module.hot?.accept();