matschik · ErickXavier · Jul 10, 2026
diff --git a/README.md b/README.md
@@ -695,6 +695,44 @@ How do we solve this ? Developers love having framework overview by examples. It
   - [x] Fetch data
 
 </details>
+
+<details>
+  <summary>
+    <img width="18" height="18" src="static/framework/nojs.svg" />
+    <b>No.JS</b>
+    <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" />
+  </summary>
+
+- [x] Reactivity
+  - [x] Declare state
+  - [x] Update state
+  - [x] Computed state
+- [x] Templating
+  - [x] Minimal template
+  - [x] Styling
+  - [x] Loop
+  - [x] Event click
+  - [x] Dom ref
+  - [x] Conditional
+- [x] Lifecycle
+  - [x] On mount
+  - [x] On unmount
+- [x] Component composition
+  - [x] Props
+  - [x] Emit to parent
+  - [x] Slot
+  - [x] Slot fallback
+  - [x] Context
+- [x] Form input
+  - [x] Input text
+  - [x] Checkbox
+  - [x] Radio
+  - [x] Select
+- [x] Webapp features
+  - [x] Render app
+  - [x] Fetch data
+
+</details>
 
 <!-- progression end -->
 

diff --git a/build/lib/playgroundUrlByFramework.ts b/build/lib/playgroundUrlByFramework.ts
@@ -90,6 +90,32 @@ const playgroundUrlByFramework: Record<string, PlaygroundFunction> = {
 
     return `${BASE_URL}${parameters}`;
   },
+  nojs: (contentByFilename: Record<string, string>) => {
+    const BASE_URL = "https://codesandbox.io/api/v1/sandboxes/define?embed=1&parameters=";
+    const BASE_PREFIX = `<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <title>No.JS Playground</title>\n    <script src="https://cdn.no-js.dev/"></script>\n  </head>\n  <body>\n\n`;
+    const BASE_SUFFIX = `\n  </body>\n</html>`;
+
+    const indexHtml = contentByFilename["index.html"] || "";
+    // The render-app example already ships a full HTML document, so avoid double-wrapping it.
+    const isFullDocument = /<html[\s>]/i.test(indexHtml);
+
+    const parameters = getParameters({
+      files: {
+        ...contentByFilename,
+        "package.json": {
+          content: { dependencies: {} },
+        },
+        "index.html": {
+          content: isFullDocument ? indexHtml : BASE_PREFIX + indexHtml + BASE_SUFFIX,
+        },
+        "sandbox.config.json": {
+          content: '{\n  "template": "static"\n}',
+        },
+      },
+    });
+
+    return `${BASE_URL}${parameters}`;
+  },
   solid: (contentByFilename: Record<string, string>) => {
     const BASE_URL = "https://playground.solidjs.com/#";
     const SOURCE_PREFIX = `import { render } from "solid-js/web";\n`;

diff --git a/content/1-reactivity/1-declare-state/nojs/index.html b/content/1-reactivity/1-declare-state/nojs/index.html
@@ -0,0 +1 @@
+<h1 state="{ name: 'John' }" bind="name"></h1>
diff --git a/content/1-reactivity/2-update-state/nojs/index.html b/content/1-reactivity/2-update-state/nojs/index.html
@@ -0,0 +1 @@
+<h1 state="{ name: 'John' }" on:mounted="name = 'Jane'" bind="name"></h1>
diff --git a/content/1-reactivity/3-computed-state/nojs/index.html b/content/1-reactivity/3-computed-state/nojs/index.html
@@ -0,0 +1,4 @@
+<div state="{ count: 10 }">
+  <span computed="doubleCount" expr="count * 2"></span>
+  <h1 bind="doubleCount"></h1>
+</div>
diff --git a/content/2-templating/1-minimal-template/nojs/index.html b/content/2-templating/1-minimal-template/nojs/index.html
@@ -0,0 +1 @@
+<h1>Hello world</h1>
diff --git a/content/2-templating/2-styling/nojs/index.html b/content/2-templating/2-styling/nojs/index.html
@@ -0,0 +1,8 @@
+<h1 class="title">I am red</h1>
+<button style="font-size: 10rem">I am a button</button>
+
+<style>
+  .title {
+    color: red;
+  }
+</style>
diff --git a/content/2-templating/3-loop/nojs/index.html b/content/2-templating/3-loop/nojs/index.html
@@ -0,0 +1,3 @@
+<ul state="{ colors: ['red', 'green', 'blue'] }">
+  <li each="color in colors" bind="color"></li>
+</ul>
diff --git a/content/2-templating/4-event-click/nojs/index.html b/content/2-templating/4-event-click/nojs/index.html
@@ -0,0 +1,4 @@
+<div state="{ count: 0 }">
+  <p>Counter: <span bind="count"></span></p>
+  <button on:click="count++">+1</button>
+</div>
diff --git a/content/2-templating/5-dom-ref/nojs/index.html b/content/2-templating/5-dom-ref/nojs/index.html
@@ -0,0 +1 @@
+<input ref="input" on:mounted="$refs.input.focus()" />
diff --git a/content/2-templating/6-conditional/nojs/index.html b/content/2-templating/6-conditional/nojs/index.html
@@ -0,0 +1,14 @@
+<div state="{ TRAFFIC_LIGHTS: ['red', 'orange', 'green'], lightIndex: 0 }">
+  <span computed="light" expr="TRAFFIC_LIGHTS[lightIndex]"></span>
+
+  <button on:click="lightIndex = (lightIndex + 1) % TRAFFIC_LIGHTS.length">
+    Next light
+  </button>
+  <p>Light is: <span bind="light"></span></p>
+  <p>
+    You must
+    <span if="light === 'red'">STOP</span>
+    <span else-if="light === 'orange'">SLOW DOWN</span>
+    <span else>GO</span>
+  </p>
+</div>
diff --git a/content/3-lifecycle/1-on-mount/nojs/index.html b/content/3-lifecycle/1-on-mount/nojs/index.html
@@ -0,0 +1,3 @@
+<p state="{ pageTitle: '' }" on:mounted="pageTitle = document.title">
+  Page title: <span bind="pageTitle"></span>
+</p>
diff --git a/content/3-lifecycle/2-on-unmount/nojs/index.html b/content/3-lifecycle/2-on-unmount/nojs/index.html
@@ -0,0 +1,7 @@
+<p
+  state="{ time: new Date().toLocaleTimeString(), timer: null }"
+  on:mounted="timer = setInterval(() => time = new Date().toLocaleTimeString(), 1000)"
+  on:unmounted="clearInterval(timer)"
+>
+  Current time: <span bind="time"></span>
+</p>
diff --git a/content/4-component-composition/1-props/nojs/index.html b/content/4-component-composition/1-props/nojs/index.html
@@ -0,0 +1,13 @@
+<template id="user-profile" var="props">
+  <p bind="'My name is ' + props.name + '!'"></p>
+  <p bind="'My age is ' + props.age + '!'"></p>
+  <p
+    bind="'My favourite colors are ' + props.favouriteColors.join(', ') + '!'"
+  ></p>
+  <p bind="'I am ' + (props.isAvailable ? 'available' : 'not available')"></p>
+</template>
+
+<div
+  use="user-profile"
+  var-props="{ name: 'John', age: 20, favouriteColors: ['green', 'blue', 'red'], isAvailable: true }"
+></div>
diff --git a/content/4-component-composition/2-emit-to-parent/nojs/index.html b/content/4-component-composition/2-emit-to-parent/nojs/index.html
@@ -0,0 +1,10 @@
+<template id="answer-button">
+  <button trigger="yes">YES</button>
+  <button trigger="no">NO</button>
+</template>
+
+<div state="{ isHappy: true }" on:yes="isHappy = true" on:no="isHappy = false">
+  <p>Are you happy?</p>
+  <div use="answer-button"></div>
+  <p style="font-size: 50px" bind="isHappy ? '😀' : '😥'"></p>
+</div>
diff --git a/content/4-component-composition/3-slot/nojs/index.html b/content/4-component-composition/3-slot/nojs/index.html
@@ -0,0 +1,20 @@
+<template id="funny-button">
+  <button
+    style="
+      background: rgba(0, 0, 0, 0.4);
+      color: #fff;
+      padding: 10px 20px;
+      font-size: 30px;
+      border: 2px solid #fff;
+      margin: 8px;
+      transform: scale(0.9);
+      box-shadow: 4px 4px rgba(0, 0, 0, 0.4);
+      transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s;
+      outline: 0;
+    "
+  >
+    <slot></slot>
+  </button>
+</template>
+
+<div use="funny-button">Click me!</div>
diff --git a/content/4-component-composition/4-slot-fallback/nojs/index.html b/content/4-component-composition/4-slot-fallback/nojs/index.html
@@ -0,0 +1,21 @@
+<template id="funny-button">
+  <button
+    style="
+      background: rgba(0, 0, 0, 0.4);
+      color: #fff;
+      padding: 10px 20px;
+      font-size: 30px;
+      border: 2px solid #fff;
+      margin: 8px;
+      transform: scale(0.9);
+      box-shadow: 4px 4px rgba(0, 0, 0, 0.4);
+      transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s;
+      outline: 0;
+    "
+  >
+    <slot><span>No content found</span></slot>
+  </button>
+</template>
+
+<div use="funny-button"></div>
+<div use="funny-button">I got content!</div>
diff --git a/content/4-component-composition/5-context/nojs/index.html b/content/4-component-composition/5-context/nojs/index.html
@@ -0,0 +1,15 @@
+<div
+  store="user"
+  value="{ id: 1, username: 'unicorn42', email: 'unicorn42@example.com' }"
+></div>
+
+<h1>Welcome back, <span bind="$store.user.username"></span></h1>
+
+<div>
+  <h2>My Profile</h2>
+  <p>Username: <span bind="$store.user.username"></span></p>
+  <p>Email: <span bind="$store.user.email"></span></p>
+  <button on:click="$store.user.username = 'Jane'">
+    Update username to Jane
+  </button>
+</div>
diff --git a/content/6-form-input/1-input-text/nojs/index.html b/content/6-form-input/1-input-text/nojs/index.html
@@ -0,0 +1,4 @@
+<div state="{ text: 'Hello World' }">
+  <p bind="text"></p>
+  <input model="text" />
+</div>
diff --git a/content/6-form-input/2-checkbox/nojs/index.html b/content/6-form-input/2-checkbox/nojs/index.html
@@ -0,0 +1,4 @@
+<div state="{ isAvailable: true }">
+  <input id="is-available" model="isAvailable" type="checkbox" />
+  <label for="is-available">Is available</label>
+</div>
diff --git a/content/6-form-input/3-radio/nojs/index.html b/content/6-form-input/3-radio/nojs/index.html
@@ -0,0 +1,9 @@
+<div state="{ picked: 'red' }">
+  <div>Picked: <span bind="picked"></span></div>
+
+  <input id="blue-pill" model="picked" type="radio" value="blue" />
+  <label for="blue-pill">Blue pill</label>
+
+  <input id="red-pill" model="picked" type="radio" value="red" />
+  <label for="red-pill">Red pill</label>
+</div>
diff --git a/content/6-form-input/4-select/nojs/index.html b/content/6-form-input/4-select/nojs/index.html
@@ -0,0 +1,21 @@
+<div
+  state="{
+    selectedColorId: 2,
+    colors: [
+      { id: 1, text: 'red' },
+      { id: 2, text: 'blue' },
+      { id: 3, text: 'green' },
+      { id: 4, text: 'gray', isDisabled: true }
+    ]
+  }"
+>
+  <select model="selectedColorId">
+    <option
+      each="color in colors"
+      key="color.id"
+      bind="color.text"
+      bind-value="color.id"
+      bind-disabled="!!color.isDisabled"
+    ></option>
+  </select>
+</div>
diff --git a/content/7-webapp-features/1-render-app/nojs/index.html b/content/7-webapp-features/1-render-app/nojs/index.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.no-js.dev/"></script>
+  </head>
+  <body>
+    <h1>Hello world</h1>
+  </body>
+</html>
diff --git a/content/7-webapp-features/2-fetch-data/nojs/index.html b/content/7-webapp-features/2-fetch-data/nojs/index.html
@@ -0,0 +1,16 @@
+<div
+  get="https://randomuser.me/api/?results=3"
+  as="response"
+  loading="loadingTpl"
+  error="errorTpl"
+>
+  <ul>
+    <li each="user in response.results" key="user.login.uuid">
+      <img bind-src="user.picture.thumbnail" alt="user" />
+      <p bind="user.name.first + ' ' + user.name.last"></p>
+    </li>
+  </ul>
+</div>
+
+<template id="loadingTpl"><p>Fetching users...</p></template>
+<template id="errorTpl"><p>An error occurred while fetching users</p></template>
diff --git a/frameworks.ts b/frameworks.ts
@@ -282,6 +282,19 @@ export const frameworkVersions: FrameworkVersion[] = [
     mainPackageName: "ripple",
     releaseDate: "2023-01-01",
   },
+  {
+    id: "nojs",
+    title: "No.JS",
+    img: "framework/nojs.svg",
+    playgroundURL: "https://no-js.dev/",
+    documentationURL: "https://no-js.dev/",
+    filesSorter(files) {
+      return sortAllFilenames(files, ["index.html"]);
+    },
+    repositoryLink: "https://github.com/no-js-dev/nojs",
+    mainPackageName: "@no-js-dev/nojs",
+    releaseDate: "2024-01-01",
+  },
 ];
 
 export const frameworks: Framework[] = [
@@ -298,6 +311,7 @@ export const frameworks: Framework[] = [
   { id: "qwik", name: "Qwik", latestStable: "qwik" },
   { id: "marko", name: "Marko", latestStable: "marko" },
   { id: "ripple", name: "Ripple", latestStable: "ripple" },
+  { id: "nojs", name: "No.JS", latestStable: "nojs" },
 ];
 
 /**

diff --git a/static/framework/nojs.svg b/static/framework/nojs.svg
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<h1 state="{ name: 'John' }" on:mounted="name = 'Jane'" bind="name"></h1>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<input ref="input" on:mounted="$refs.input.focus()" />