#### Show

[Tickets](#buy)

The *band* is on an
exciting tour...

<Template>
  <p>
    HTML is
    <slot></slot>
  </p>
</Template>

<Style>
  p { color: #b08 }
</Style>

<Script>
  function add() {
    state.count++
  }
</Script>

<State
  count:=0
></State>

<Template>
  <button on.click=script.add>
    Hello {{ state.count }}
  </button>
</Template>

Modulo (or ᵐ°dᵘ⁄o) is a single-file frontend framework, squeezing in numerous tools for modern HTML, CSS, and JavaScript develpment. Modulo includes many familiar and handy tools for modern web development, including Web Components, CSS Scoping, Shadow DOM, Jamstack / SSG / SSR, Markdown-powered CMS, Bundling, Store and State Management, and Templating.

• Reactive Forms with State and Store

  Modulo's state subscription and publishing system allows any part of your site to instantly react to changing data.

• Fast Web Components

  Modulo's web components use a DOM reconciler to compute minimum number of DOM changes for fast operations.

• Compiled Templates

  Modulo's Template Language pre-compiles into JavaScript functions for maximum speed, discarding the source so it requires no further parsing or "eval" in production.

• Deep UI Optimization

  Modulo is no a keeper of secrets. Instead, every DOM patch gets exposed before being applied, enabling levels of per-component DOM control unparalleled in other frameworks.

Hint: Try using the "dark mode" and "theme customizer" switch at the top right of the page for a demonstration of page-wide reactions!

No dependencies to include means everybody gets included!

• Clients will love you

  During crucial moments when gathering feedback on in-progress work and creative projects from others --- clients, team-members, bosses, friends, family, whomever --- it's as easy as zipping up your in-progress folder and sending it over. All they need is a web browser and the ability to unzip and open files, and they'll be seeing the same in-progress work as you, no matter their OS, browser, or set-up.

• 0-Day onboarding

  0 dependencies means 0 installs means 0 setup... which means you and your team will be developing as soon as the fingers hit the keyboard! With Modulo's actually serverless approach, there's no need for Babel, NPM, Node.js, node_modules, local dev servers, command-line installs, or other "set-up" steps to get to work. Download, unzip, and away we click!

• Go off-line; keep your creature comforts

  Modulo is one of the only UI and static-site generating framework for developing file-protocol friendly (meaning: "fully offline"), dependency-free websites that build into fast, performant sites, with all the modern capabilities we expect in app development.

• Building and Bundling

  Modulo comes with a built-in build-tool that bundles, trims, and optimizes your JavaScript, CSS, and HTML for near-instant load times without sacrificing capability or interactivity.

• Static Sites with Vanishing Components

  Modulo's "vanish" component mode enables entirely JavaScript-free static sites. By combining that with inline JavaScript, you can create paradoxically interactive static-sites where your script tags vanish during build!

• Jamstack with Server-Side Rendering

  Modulo can be run server-side as well, and it's build command will automatically pre-render or "dehydrate" web components, preparing them to be "re-hydrated" on page load with JavaScript functionality and fresh API data

• Single File Framework

  Modulo.html is a single file under 2000 lines that acts like both an HTML file and JS file rolled into one, tightly-optimized for maximum code re-use and to trim away build-time overhead.

• Literate Code

  Modulo.html literally documents itself! When viewed in the browser, it provides it's own help menu and 3 project scaffolding presets. For a demonstration, try opening up Modulo.html (should work either locally or online). Try adding ?argv=edit to see the code displayed side-by-side with the documentation.