A front-end framework for the back-end powered web.

Get started Github

Declarative

Tired of all the boilerplate your front-end requires? With API based on decorators you can reduce the boilerplate to minimum and have fun coding with modern JavaScript.

Unobtrusive

Provide interactivity in JavaScript code without the need of modifying the HTML. Easily integrate Strudel with any CMS or back-end framework that you use.

Lightweight

Stop worrying much about your bundle size. In only ~4.5kb gzipped bundle Strudel provides you component architecture and jQuery-like DOM API. It's almost free.

Example

<!-- Static html generated by back-end -->

<div class="greeter">
  <input class="greeter__input" type="text">

  <button class="greeter__button">
    Greet
  </button>

  <span class="greeter__output">
  </span>
</div>

@Component('.greeter')
export default class Greeter {
  @El('.greeter__output') output

  @El('.greeter__input') input

  @Evt('click', '.greeter__button')
  greet() {
    this.output.html(`
        Hello, ${this.input.prop('value')}!`)
  }
}