The Web framework for coders.

Tool Free

No transpiling, packaging or bundling to slow things down. Debug your code in the browser exactly as you wrote it.

Build Anything

Tiny web widgets, single page apps (SPA), static site generation (SSG), full-stack sites, server-side rendering (SSR).

Fast and Small

Component templates are JIT compiled, produce minimal DOM updates and we've tuned it to run fast!.

What is Code Only Development?

An approach to Web development where everything is written in clean, modern JavaScript.

Javascript DOM TemplatesNo Markup/HTMLNo transpilingNo build server

What's in the Box?

Everything you need to build anything from tiny widgets to full stack single page apps.

ComponentsTemplatingSPA RouterServer-Side Rendering (SSR)Static Site Generation (SSG)

Non-Reactive and Non-Intrusive

Reactivity is great and all, but it's also intrusive. We've taken a different path.

No Proxy ObjectsNo WrappersNon-intrusiveEasy to DebugFast

Easy to Learn

Learn the most important topics in just one afternoon, get started in no time...

"The Lab" for ExperimentsProject GeneratorAwesome DocumentationLots of Samples

Self-Contained Components

Logic, Templates and Styles all in self contained .js files.

class Main extends Component Components extend the `Component` class 
{
  count = 0; Class fields and functions are available to the template 

  onClick() Button click event handler 
  { 
    this.count++; 
    this.invalidate(); Marks the component as needing DOM update 
  }

  static template = { This is the component's DOM template 
    type: "div.counter", Root element <div class="counter"> 
    $: [ Child nodes array 
      {
        type: "button",
        text: "Click Me",
        on_click: c => c.onClick(), `c` is the component instance 
      },
      {
        type: "span",
        text: c => `Count: ${c.count}`, Callback for dynamic content 
      }
    ]
  }
}

css` CSS styles (with ".counter" as scoping class) 
.counter
{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
`
Read the Guide ›