diff --git a/src/templates/template-preact.json b/src/templates/template-preact.json
index f8ac914..cde6d41 100644
--- a/src/templates/template-preact.json
+++ b/src/templates/template-preact.json
@@ -1,16 +1,16 @@
 {
 	"title": "Preact template",
-	"externalLibs": {
-		"js": "\nhttps://cdnjs.cloudflare.com/ajax/libs/preact/8.2.9/preact.min.js",
-		"css": ""
-	},
-	"sizes": ["calc(30% - 3px)", "30px", "calc(70% - 3px)"],
-	"mainSizes": [68.1051, 31.6949],
+	"sizes": [30, "30px", 70],
+	"mainSizes": [60, 40],
+
 	"htmlMode": "html",
 	"cssMode": "css",
 	"jsMode": "es6",
 	"layoutMode": 1,
-	"js":
-		"\nconst { h, Component, render, createElement } = window.preact;\nconst React = {createElement}\n\nclass App extends Component {\n  constructor() {\n    super();\n    this.message = 'World';\n  }\n  render() {\n    return (<div>Hello {this.message}</div>)\n  }\n}\nrender(<App/>, window.root)\n\n",
+	"externalLibs": {
+		"js": "https://unpkg.com/preact@10.21.0/dist/preact.min.umd.js\nhttps://unpkg.com/preact@10.21.0/hooks/dist/hooks.umd.js",
+		"css": ""
+	},
+	"js": "\nconst { h,  render, createElement } = window.preact;\nconst { useState} = window.preactHooks;\nconst React = {createElement};\n\n\nfunction App() {\n  const [count, setCount] = useState(0)\n  return <div>\n    <h1>Hello, I'm Preact!</h1>\n    <p>{ count }</p>\n    <button onClick={() => setCount(count+1)}>Click me!</button>\n  </div>\n}\n\nrender(<App/>, document.body)\n\n\n",
 	"html": "<div id=\"root\"></div>\n"
 }