Home

Chocola is a web framework designed for simplicity and modularity. It lets you build components by compiling JS modules into HTML templates, CSS, and JS logic, keeping your projects clean and optimized.

import HTML from "./html/counter.html";
import CSS from "./css/counter.css";

function RUNTIME(self, ctx) {
  self.querySelector("button").addEventListener("click", () => {
    ctx.count++;
  })
}

export default function Counter() {
  return {
    body: HTML,
    styles: CSS,
    script: RUNTIME
  }
}

Chocola handles the compilation for you, outputting a fully functional web app with vanilla JavaScript—no extra libraries needed.

Next, you’ll learn how to set up a Chocola project and start baking your own sweet web apps.