diff --git a/.vscode/settings.json b/.vscode/settings.json
index d7cb8aa..d71538b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,6 +2,7 @@
     "cSpell.words": [
         "Hutten",
         "cadquery",
+        "jscad",
         "openscad",
         "sendmail"
     ]
diff --git a/app/api/db/schema.prisma b/app/api/db/schema.prisma
index 95d924e..34f86f1 100644
--- a/app/api/db/schema.prisma
+++ b/app/api/db/schema.prisma
@@ -41,6 +41,7 @@ model User {
 enum CadPackage {
   openscad
   cadquery
+  // jscad // TODO #422, add jscad to db schema when were ready to enable saving of jscad projects
 }
 
 model Project {
diff --git a/app/web/src/components/IdeEditor/IdeEditor.js b/app/web/src/components/IdeEditor/IdeEditor.tsx
similarity index 92%
rename from app/web/src/components/IdeEditor/IdeEditor.js
rename to app/web/src/components/IdeEditor/IdeEditor.tsx
index a26bf5f..67abf8d 100644
--- a/app/web/src/components/IdeEditor/IdeEditor.js
+++ b/app/web/src/components/IdeEditor/IdeEditor.tsx
@@ -4,6 +4,8 @@ import { makeCodeStoreKey, requestRender } from 'src/helpers/hooks/useIdeState'
 import Editor, { useMonaco } from '@monaco-editor/react'
 import { theme } from 'src/../tailwind.config'
 import { useSaveCode } from 'src/components/IdeWrapper/useSaveCode'
+import type { CadPackage as CadPackageType } from 'src/helpers/hooks/useIdeState'
+import CadPackage from '../CadPackage/CadPackage'
 
 const colors = theme.extend.colors
 
@@ -12,9 +14,10 @@ const IdeEditor = ({ Loading }) => {
   const [theme, setTheme] = useState('vs-dark')
   const saveCode = useSaveCode()
 
-  const ideTypeToLanguageMap = {
+  const ideTypeToLanguageMap: {[key in CadPackageType]: string} = {
     cadquery: 'python',
     openscad: 'cpp',
+    jscad: 'javascript',
   }
   const monaco = useMonaco()
   useEffect(() => {
diff --git a/app/web/src/components/NavPlusButton/NavPlusButton.tsx b/app/web/src/components/NavPlusButton/NavPlusButton.tsx
index 5ed035a..467902c 100644
--- a/app/web/src/components/NavPlusButton/NavPlusButton.tsx
+++ b/app/web/src/components/NavPlusButton/NavPlusButton.tsx
@@ -1,6 +1,22 @@
 import { Link, routes } from '@redwoodjs/router'
 import Svg from 'src/components/Svg/Svg'
 import { Popover } from '@headlessui/react'
+import type { CadPackage } from 'src/helpers/hooks/useIdeState'
+
+
+const menuOptions: {
+  name: string
+  sub: string
+  ideType: CadPackage
+}[] = [
+  {
+    name: 'OpenSCAD',
+    sub: 'beta',
+    ideType: 'openscad',
+  },
+  { name: 'CadQuery', sub: 'beta', ideType: 'cadquery' },
+  // { name: 'JSCAD', sub: 'alpha', ideType: 'jscad' }, // TODO #422, add jscad to db schema when were ready to enable saving of jscad projects
+]
 
 const NavPlusButton: React.FC = () => {
   return (
@@ -11,14 +27,7 @@ const NavPlusButton: React.FC = () => {
 
       <Popover.Panel className="absolute z-10 right-0">
         <ul className="bg-gray-200 mt-4 rounded shadow-md overflow-hidden">
-          {[
-            {
-              name: 'OpenSCAD',
-              sub: 'beta',
-              ideType: 'openscad',
-            },
-            { name: 'CadQuery', sub: 'beta', ideType: 'cadquery' },
-          ].map(({ name, sub, ideType }) => (
+          {menuOptions.map(({ name, sub, ideType }) => (
             <li
               key={name}
               className="px-4 py-2 hover:bg-gray-400 text-gray-800"
diff --git a/app/web/src/helpers/cadPackages/index.ts b/app/web/src/helpers/cadPackages/index.ts
index 9dec16e..4b880c9 100644
--- a/app/web/src/helpers/cadPackages/index.ts
+++ b/app/web/src/helpers/cadPackages/index.ts
@@ -1,7 +1,12 @@
+import { DefaultKernelExport } from './common'
+import type { CadPackage } from 'src/helpers/hooks/useIdeState'
+
 import openscad from './openScadController'
 import cadquery from './cadQueryController'
+import jscad from './jsCadController'
 
-export const cadPackages = {
+export const cadPackages: {[key in CadPackage]: DefaultKernelExport} = {
   openscad,
   cadquery,
+  jscad,
 }
diff --git a/app/web/src/helpers/cadPackages/jsCadController.ts b/app/web/src/helpers/cadPackages/jsCadController.ts
new file mode 100644
index 0000000..a31eeeb
--- /dev/null
+++ b/app/web/src/helpers/cadPackages/jsCadController.ts
@@ -0,0 +1,15 @@
+import { RenderArgs, DefaultKernelExport, createUnhealthyResponse } from './common'
+
+export const render: DefaultKernelExport['render'] = async ({
+  code,
+  settings,
+}: RenderArgs) => {
+  // do your magic
+  return createUnhealthyResponse( new Date(), 'JSCAD controller not implemented yet')
+}
+
+const jsCadController: DefaultKernelExport = {
+  render,
+}
+
+export default jsCadController
diff --git a/app/web/src/helpers/hooks/useIdeState.ts b/app/web/src/helpers/hooks/useIdeState.ts
index c079e50..c38d483 100644
--- a/app/web/src/helpers/hooks/useIdeState.ts
+++ b/app/web/src/helpers/hooks/useIdeState.ts
@@ -9,7 +9,9 @@ function withThunk(dispatch, getState) {
       : dispatch(actionOrThunk)
 }
 
-const initCodeMap = {
+export type CadPackage = 'openscad' | 'cadquery' | 'jscad'
+
+const initCodeMap: {[key in CadPackage]: string} = {
   openscad: `// involute donut
 
 // ^ first comment is used for download title (i.e "involute-donut.stl")
@@ -40,6 +42,9 @@ result = (cq.Workplane().circle(diam).extrude(20.0)
 
 show_object(result)
 `,
+jscad: `
+// TODO implement example JSCAD code.
+`
 }
 
 const codeStorageKey = 'Last-editor-code'
@@ -53,7 +58,7 @@ interface XYZ {
 }
 
 export interface State {
-  ideType: 'INIT' | 'openscad' | 'cadquery'
+  ideType: 'INIT' | CadPackage
   consoleMessages: { type: 'message' | 'error'; message: string; time: Date }[]
   code: string
   objectData: {