diff --git a/vanilla/release.config.cjs b/release.config.cjs
similarity index 100%
rename from vanilla/release.config.cjs
rename to release.config.cjs
diff --git a/src/components/Sandbox.tsx b/src/components/Sandbox.tsx
index b40eb38..f79ab8a 100644
--- a/src/components/Sandbox.tsx
+++ b/src/components/Sandbox.tsx
@@ -60,7 +60,6 @@ export default function Sandbox(props: SandboxProps) {
 				iframeParent.removeChild(iframe);
 				const blob = new Blob([source], { type: "text/html" });
 				const blobUrl = URL.createObjectURL(blob);
-
 				iframe.src = blobUrl;
 				iframeParent.appendChild(iframe);
 			}
@@ -68,7 +67,6 @@ export default function Sandbox(props: SandboxProps) {
 	}, [code]);
 	const handleEditorChange = (value, event) => {
 		debouncedSetCode(value);
-
 		// here is the current value
 		// debounce(() => setCode((prev) => value));
 	};
@@ -80,7 +78,9 @@ export default function Sandbox(props: SandboxProps) {
 
 	const handleEditorWillMount = (monaco) => {
 		monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+			...monaco.languages.typescript.javascriptDefaults.getDiagnosticsOptions(),
 			noSemanticValidation: true,
+			noSuggestionDiagnostics: false,
 			noSyntaxValidation: false,
 		});
 
@@ -104,6 +104,10 @@ export default function Sandbox(props: SandboxProps) {
 			index,
 			"@types/p5/index.d.ts",
 		);
+		monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+			...monaco.languages.typescript.javascriptDefaults.getCompilerOptions(),
+			checkJs: true, // need this
+		});
 		// console.log("beforeMount: the monaco instance:", monaco);
 	};
 
diff --git a/src/components/sandox.css b/src/components/sandox.css
index 5f6dce0..c646a21 100644
--- a/src/components/sandox.css
+++ b/src/components/sandox.css
@@ -45,7 +45,7 @@ h3 {
 	max-width: 100vw;
 	resize: horizontal;
 	overflow: hidden;
-	border-right: 2px solid hsl(0 0% 10%);
+	border-right: 1px solid hsl(0 0% 70%);
 }
 
 .output {
@@ -92,6 +92,9 @@ xmp {
 		width: 100vw;
 	}
 
+	.sandbox {
+		flex-direction: column;
+	}
 	.editor {
 		resize: none;
 		border-right: none;
@@ -99,7 +102,7 @@ xmp {
 
 	.output {
 		height: 100%;
-		border-top: 2px solid hsl(0 0% 10%);
+		border-top: 1px solid hsl(0 0% 90%);
 	}
 
 	.source {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 780a037..2ef966f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -9,15 +9,17 @@ import Sandbox from "../components/Sandbox.tsx";
 			title="Draft"
 			description="draft"
 			initialCode={`
-
+//@ts-check
 function setup(){
 	const canvas = createCanvas(100,100);
 	canvas.parent("sketch");
 	background(0);
 }
-
-function draw(){}
-
+function draw(){
+	circle((1/sqrt(random())*50) - width/2,
+	random(height),
+	random(4))
+}
 `}
 			client:only
 		/>