Rewi

Rewi helps you build modern web applications in Typescript by sending HTML over the wire. All rendering happens server-side, reducing the complexity and overhead of a typical Single Page Application without giving up speed or responsiveness.

For an in-depth overview check out Why Rewi.

To get started Read the docs.

A sample component

Components are the fundamental building block of Rewi apps. A component holds some state and respond to certain actions.

The following component will show a simple counter. When the component updates, it will be re-rendered on the server and the HTML sent back to the browser. The DOM will be patched like in a typical SPA.

The big difference with a SPA is that everything runs server-side.

import { defineComponent } from "rewi"

type State = { count: number }
type Action = "increment" | "decrement"

export default defineComponent<State, Action>({
  async mount() {
    return { count: 0 }
  },

  async update({ state, action }) {
    if (action === "increment") state.count++
    if (action === "decrement") state.count--
  },

  async render({ state, r }) {
    return (
      <div>
        <span>Current count: {state.count}</span>
        <button {...r.click("increment")}>Increment</button>
        <button {...r.click("decrement")}>Decrement</button>
      </div>
    )
  },
})

Rewi is still experimental but you can try it out.

MIT Licensed | Copyright © 2021-present Marco Sampellegrini