Quince component examples

  • Example
  • Source code

Welcome to Quince rb

These pages serve to show Quince's current capabilites, including code examples. Take a look around!


Quince is a new Ruby framework for the web, which allows you to build modern, stateful applications, without writing any JavaScript. It inspired by React, Hotwire/Turbo, Markaby, Camping, and others.

Minimal 'Hello world' example:

class HelloWorld < Quince::Component
  def render
    html(
      head,
      body("Hello world"),
    )
  end
end

It achieves this by providing a rich interface for composing your app from stateful components, which are all rendered server-side, and re-rendered and swapped in the front end when their state changes.

All of the glue code to make this happen happens internally through callbacks, so you can focus on building your real application content and logic, rather than the wiring that keeps it together.
class Counter < Quince::Component
  State(val: Integer)

  def initialize
    @state = State.new(
      val: 0,
    )
  end

  exposed def increment
    state.val += 1
  end

  exposed def decrement
    state.val -= 1
  end

  def render
    section(
      div(id: :count_container) {
        [
          button(onclick: callback(:increment), id: :increment, Class: "btn-lg") { "++" },
          h3("Count: #{state.val}"),
          button(onclick: callback(:decrement), id: :decrement, Class: "btn-lg") { "--" },
        ]
      }
    )
  end
end

In some cases, you may want to be be quite specific about how callbacks are run, instead of a very basic "click-and-replace" functionality. For instance, you may want to run them conditionally, or with a debounce, or so that it appends the resulting elements instead of replacing them. See the "Infinite scroll" demo for an example of how all three of these things can combine.

Also note that Quince is still in early development, so is likely to be unstable for the first few versions. Track versions and releases on Rubygems or GitHub.