Component Party

Svelte

<script>
  let name = "John";
</script>

<h1>Hello {name}</h1>

React

import { useState } from "react";

export default function Name() {
  const [name] = useState("John");

  return <h1>Hello {name}</h1>;
}

Vue 2

<script>
export default {
  data() {
    return {
      name: "John",
    };
  },
};
</script>

<template>
  <h1>Hello {{ name }}</h1>
</template>

Vue 3

<script setup>
import { ref } from "vue";
const name = ref("John");
</script>

<template>
  <h1>Hello {{ name }}</h1>
</template>

Angular

import { Component } from "@angular/core";

@Component({
  selector: "app-name",
  template: `<h1>Hello {{ name }}</h1>`,
})
export class NameComponent {
  name = "John";
}

SolidJS

import { createSignal } from "solid-js";

export default function Name() {
  const [name] = createSignal("John");

  return <h1>Hello {name()}</h1>;
}

Lit

<!DOCTYPE html>
<head>
  <script type="module" src="./name.js"></script>
</head>
<body>
  <x-name></x-name>
</body>

import { LitElement, html } from "lit";
import { customElement, state } from "lit/decorators.js";

@customElement("x-name")
export class XName extends LitElement {
  @state()
  name = "John";

  render() {
    return html`<h1>Hello ${this.name}!</h1>`;
  }
}

Ember

<h1>Hello {{this.name}}</h1>

import Component from "@glimmer/component";

export default class CounterComponent extends Component {
  name = "John";
}

Alpine

<h1 x-data="{ name: 'John' }" x-text="name"></h1>

Qwik

import { component$, useStore } from "@builder.io/qwik";

export const Name = component$(() => {
  const store = useStore({ name: "John" });

  return <h1>Hello {store.name}</h1>;
});

Svelte

<script>
  let name = "John";
  name = "Jane";
</script>

<h1>Hello {name}</h1>

React

import { useState } from "react";

export default function Name() {
  const [name, setName] = useState("John");
  setName("Jane");

  return <h1>Hello {name}</h1>;
}

Vue 2

<script>
export default {
  data() {
    return {
      name: "John",
    };
  },
  created() {
    this.name = "Jane";
  },
};
</script>

<template>
  <h1>Hello {{ name }}</h1>
</template>

Vue 3

<script setup>
import { ref } from "vue";
const name = ref("John");
name.value = "Jane";
</script>

<template>
  <h1>Hello {{ name }}</h1>
</template>

Angular

import { Component } from "@angular/core";

@Component({
  selector: "app-name",
  template: `<h1>Hello {{ name }}</h1>`,
})
export class NameComponent {
  name = "John";

  constructor() {
    this.name = "Jane";
  }
}

SolidJS

import { createSignal } from "solid-js";

export default function Name() {
  const [name, setName] = createSignal("John");
  setName("Jane");

  return <h1>Hello {name()}</h1>;
}

Lit

<!DOCTYPE html>
<head>
  <script type="module" src="./name.js"></script>
</head>
<body>
  <x-name></x-name>
</body>

import { LitElement, html } from "lit";
import { customElement, state } from "lit/decorators.js";

@customElement("x-name")
export class XName extends LitElement {
  @state()
  name = "John";

  constructor() {
    super();
    this.name = "Jane";
  }

  render() {
    return html`<h1>Hello ${this.name}!</h1>`;
  }
}

Ember

<h1>Hello {{this.name}}</h1>

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

export default class CounterComponent extends Component {
  @tracked name = "John";

  constructor(owner, args) {
    super(owner, args);

    this.name = "Jane";
  }
}

Alpine

<h1 x-data="{ name: 'John' }" x-init="name = 'Jane'" x-text="name"></h1>

Qwik

import { component$, useStore } from "@builder.io/qwik";

export const Name = component$(() => {
  const store = useStore({ name: "John" });
  store.name = "Jane";

  return <h1>Hello {store.name}</h1>;
});

Svelte

<script>
  let count = 10;
  $: doubleCount = count * 2;
</script>

<div>{doubleCount}</div>

React

import { useState } from "react";

export default function DoubleCount() {
  const [count] = useState(10);
  const doubleCount = count * 2;

  return <div>{doubleCount}</div>;
}

Vue 2

<script>
export default {
  data() {
    return {
      count: 10,
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    },
  },
};
</script>

<template>
  <div>{{ doubleCount }}</div>
</template>

Vue 3

<script setup>
import { ref, computed } from "vue";
const count = ref(10);
const doubleCount = computed(() => count.value * 2);
</script>

<template>
  <div>{{ doubleCount }}</div>
</template>

Angular

import { Component } from "@angular/core";

@Component({
  selector: "app-doublecount",
  template: `<div>{{ doubleCount }}</div>`,
})
export class DoublecountComponent {
  count = 10;

  get doubleCount() {
    return this.count * 2;
  }
}

SolidJS

import { createSignal } from "solid-js";

export default function DoubleCount() {
  const [count] = createSignal(10);
  const doubleCount = () => count() * 2;

  return <div>{doubleCount()}</div>;
}

Lit

import { LitElement, html } from "lit";
import { customElement, state } from "lit/decorators.js";

@customElement("double-count")
export class DoubleCount extends LitElement {
  @state()
  count = 10;

  get doubleCount() {
    return this.count * 2;
  }

  render() {
    return html`<div>${this.doubleCount}</div>`;
  }
}

<!DOCTYPE html>
<head>
  <script type="module" src="./double-count.js"></script>
</head>
<body>
  <double-count></double-count>
</body>

Ember

<div>{{this.doubleCount}}</div>

import Component, { tracked } from "@glimmer/component";

export default class DoubleCount extends Component {
  @tracked count = 10;

  get doubleCount() {
    return this.count * 2;
  }
}

Alpine

<h1
  x-data="{
  count : 10,
  get doubleCount() { return this.count * 2 }
}"
  x-text="doubleCount"
></h1>

Qwik

import { component$, useStore } from "@builder.io/qwik";

export const DoubleCount = component$(() => {
  const store = useStore({ count: 10 });
  const doubleCount = store.count * 2;

  return <div>{doubleCount}</div>;
});

Svelte

<h1>Hello world</h1>

React

export default function HelloWorld() {
  return <h1>Hello world</h1>;
}

Vue 2

<template>
  <h1>Hello world</h1>
</template>

Vue 3

<template>
  <h1>Hello world</h1>
</template>

Angular

import { Component } from "@angular/core";

@Component({
  selector: "app-helloworld",
  template: `<h1>Hello world</h1>`,
})
export class HelloworldComponent {}

SolidJS

export default function HelloWorld() {
  return <h1>Hello World!</h1>;
}

Lit

import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";

@customElement("hello-world")
export class HelloWorld extends LitElement {
  render() {
    return html`<h1>Hello world</h1>`;
  }
}

<!DOCTYPE html>
<head>
  <script type="module" src="./hello-world.js"></script>
</head>
<body>
  <hello-world></hello-world>
</body>

Ember

<h1>Hello world</h1>

Alpine

<h1>Hello world</h1>

Qwik

import { component$ } from "@builder.io/qwik";

export const HelloWorld = component$(() => {
  return <div>Hello World</div>;
});

Svelte

<h1 class="title">I am red</h1>
<button style="font-size: 10rem;">I am a button</button>

<style>
  .title {
    color: red;
  }
</style>

React

import "./style.css";

export default function CssStyle() {
  return (
    <>
      <h1 className="title">I am red</h1>
      <button style={{ fontSize: "10rem" }}>I am a button</button>
    </>
  );
}

.title {
  color: red;
}

Vue 2

<template>
  <div>
    <h1 class="title">
      I am red
    </h1>
    <button style="font-size: 10rem">
      I am a button
    </button>
  </div>
</template>

<style scoped>
.title {
  color: red;
}
</style>

Vue 3

<template>
  <h1 class="title">
    I am red
  </h1>
  <button style="font-size: 10rem">
    I am a button
  </button>
</template>

<style scoped>
.title {
  color: red;
}
</style>

Angular

import { Component } from "@angular/core";

@Component({
  selector: "app-cssstyle",
  template: `
    <h1 class="title">I am red</h1>
    <button style="font-size: 10rem">I am a button</button>
  `,
  styles: [
    `
      .title {
        color: red;
      }
    `,
  ],
})
export class CssStyleComponent {}

SolidJS

import "./style.css";

export default function CssStyle() {
  return (
    <>
      <h1 class="title">I am red</h1>
      <button style={{ "font-size": "10rem" }}>I am a button</button>
    </>
  );
}

.title {
  color: red;
}

Lit

import { LitElement, html, css } from "lit";
import { customElement } from "lit/decorators.js";
import { styleMap } from "lit/directives/style-map.js";

@customElement("css-style")
export class CssStyle extends LitElement {
  static styles = css`
    .title {
      color: red;
    }
  `;

  render() {
    return html`
      <h1 class="title">I am red</h1>
      <button style=${styleMap({ fontSize: "10rem" })}>I am a button</button>
    `;
  }
}

<!DOCTYPE html>
<head>
  <script type="module" src="./css-style.js"></script>
</head>
<body>
  <css-style></css-style>
</body>

Ember

/* using: https://github.com/salsify/ember-css-modules */
.title {
  color: red;
}

<h1 class="title">I am red</h1>
<button style="font-size: 10rem;">I am a button</button>

Alpine

<h1 class="title">I am red</h1>
<button style="font-size: 10rem">I am a button</button>

<style>
  .title {
    color: red;
  }
</style>

Qwik

import { component$, useStyles$ } from "@builder.io/qwik";

export const App = component$(() => {
  useStyles$(`
    .title {
      color: red;
    }
    `);

  return (
    <>
      <h1 class="title">I am red</h1>
      <button style={{ "font-size": "10rem" }}>I am a button</button>
    </>
  );
});

Svelte

<script>
  const colors = ["red", "green", "blue"];
</script>

<ul>
  {#each colors as color}
    <li>{color}</li>
  {/each}
</ul>

React

export default function Colors() {
  const colors = ["red", "green", "blue"];
  return (
    <ul>
      {colors.map((color) => (
        <li key={color}>{color}</li>
      ))}
    </ul>
  );
}

Vue 2

<script>
export default {
  data() {
    return {
      colors: ["red", "green", "blue"],
    };
  },
};
</script>

<template>
  <ul>
    <li
      v-for="color in colors"
      :key="color"
    >
      {{ color }}
    </li>
  </ul>
</template>

Vue 3

<script setup>
const colors = ["red", "green", "blue"];
</script>

<template>
  <ul>
    <li
      v-for="color in colors"
      :key="color"
    >
      {{ color }}
    </li>
  </ul>
</template>

Angular

import { Component } from "@angular/core";

@Component({
  selector: "app-colors",
  template: `
    <ul>
      <li *ngFor="let color of colors">{{ color }}</li>
    </ul>
  `,
})
export class ColorsComponent {
  colors = ["red", "green", "blue"];
}

SolidJS

import { For } from "solid-js";

export default function Colors() {
  const colors = ["red", "green", "blue"];

  return (
    <ul>
      <For each={colors}>{(color) => <li>{color}</li>}</For>
    </ul>
  );
}

Lit

import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";

@customElement("colors-list")
export class ColorsList extends LitElement {
  colors = ["red", "green", "blue"];

  render() {
    return html`
      <ul>
        ${this.colors.map((color) => html`<li>${color}</li>`)}
      </ul>
    `;
  }
}

<!DOCTYPE html>
<head>
  <script type="module" src="./colors-list.js"></script>
</head>
<body>
  <colors-list></colors-list>
</body>

Ember

<ul>
  {{#each (array "red" "green" "blue") as |color|}}
    <li>{{color}}</li>
  {{/each}}
</ul>

Alpine

<ul x-data="{ colors: ['red', 'green', 'blue'] }">
  <template x-for="color in colors">
    <li x-text="color"></li>
  </template>
</ul>

Qwik

import { component$ } from "@builder.io/qwik";

export const Colors = component$(() => {
  const colors = ["red", "green", "blue"];
  return (
    <>
      <ul>
        {colors.map((color) => (
          <li key={color}>{color}</li>
        ))}
      </ul>
    </>
  );
});

Svelte

<script>
  let count = 0;

  function incrementCount() {
    count++;
  }
</script>

<p>Counter: {count}</p>
<button on:click={incrementCount}>+1</button>

React

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  function incrementCount() {
    setCount((count) => count + 1);
  }

  return (
    <>
      <p>Counter: {count}</p>
      <button onClick={incrementCount}>+1</button>
    </>
  );
}

Vue 2

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    incrementCount() {
      this.count++;
    },
  },
};
</script>

<template>
  <div>
    <p>Counter: {{ count }}</p>
    <button @click="incrementCount">
      +1
    </button>
  </div>
</template>

Vue 3

<script setup>
import { ref } from "vue";
const count = ref(0);

function incrementCount() {
  count.value++;
}
</script>

<template>
  <p>Counter: {{ count }}</p>
  <button @click="incrementCount">
    +1
  </button>
</template>

Angular

import { Component } from "@angular/core";

@Component({
  selector: "app-counter",
  template: `
    <p>Counter: {{ count }}</p>
    <button (click)="incrementCount()">+1</button>
  `,
})
export class CounterComponent {
  count = 0;

  incrementCount() {
    this.count++;
  }
}

SolidJS

import { createSignal } from "solid-js";

export default function Counter() {
  const [count, setCount] = createSignal(0);

  function incrementCount() {
    setCount(count() + 1);
  }

  return (
    <>
      <p>Counter: {count()}</p>
      <button onClick={incrementCount}>+1</button>
    </>
  );
}

Lit

<!DOCTYPE html>
<head>
  <script type="module" src="./x-counter.js"></script>
</head>
<body>
  <x-counter></x-counter>
</body>

import { LitElement, html } from "lit";
import { customElement, state } from "lit/decorators.js";

@customElement("x-counter")
export class XCounter extends LitElement {
  @state()
  count = 0;

  incrementCount() {
    this.count = this.count + 1;
  }

  render() {
    return html`
      <p>Counter: ${this.count}</p>
      <button @click=${this.incrementCount}>+1</button>
    `;
  }
}

Ember

<p>Counter: {{this.count}}</p>
<button {{on "click" this.incrementCount}}>+1</button>

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

export default class Counter extends Component {
  @tracked count = 0;

  incrementCount = () => this.count++;
}

Alpine

<div x-data="{ count: 0 }">
  <p>Counter: <span x-text="count"></span></p>
  <button x-on:click="count++">+1</button>
</div>

Qwik

import { component$, useStore } from "@builder.io/qwik";

export const Counter = component$(() => {
  const store = useStore({ count: 0 });
  return (
    <>
      <p>Counter: {store.count}</p>
      <button onClick$={() => store.count++}>Increment</button>
    </>
  );
});

Svelte

<script>
  import { onMount } from "svelte";

  let inputElement;

  onMount(() => {
    inputElement.focus();
  });
</script>

<input bind:this={inputElement} />

React

import { useEffect, useRef } from "react";

export default function InputFocused() {
  const inputElement = useRef(null);

  useEffect(() => inputElement.current.focus(), []);

  return <input type="text" ref={inputElement} />;
}

Vue 2

<script>
export default {
  mounted() {
    this.$refs.inputElement.focus();
  },
};
</script>

<template>
  <input ref="inputElement">
</template>

Vue 3

<script setup>
import { ref, onMounted } from "vue";

const inputElement = ref();

onMounted(() => {
  inputElement.value.focus();
});
</script>

<template>
  <input ref="inputElement">
</template>

Angular

import { Component, ViewChild, ElementRef, OnInit } from "@angular/core";

@Component({
  selector: "app-inputfocused",
  template: `<input type="text" #inputRef />`,
})
export class InputfocusedComponent implements OnInit {
  @ViewChild("inputRef", { static: true })
  inputRef!: ElementRef<HTMLInputElement>;

  ngOnInit() {
    this.inputRef.nativeElement.focus();
  }
}

SolidJS

import { onMount } from "solid-js";

export default function InputFocused() {
  let inputElement;

  onMount(() => inputElement.focus());

  return <input ref={inputElement} type="text" />;
}

Lit

<!DOCTYPE html>
<head>
  <script type="module" src="./input-focused.js"></script>
</head>
<body>
  <input-focused></input-focused>
</body>

import { LitElement, html } from "lit";
import { customElement, state } from "lit/decorators.js";
import { ref, createRef } from "lit/directives/ref.js";

@customElement("input-focused")
export class InputFocused extends LitElement {
  inputRef = createRef();

  firstUpdated() {
    this.inputRef.value.focus();
  }

  render() {
    return html`<input type="text" ${ref(this.inputRef)} />`;
  }
}

Ember

<input {{this.autofocus}} />

import Component from "@glimmer/component";
import { modifier } from "ember-modifier";

export default class InputFocused extends Component {
  autofocus = modifier((element) => element.focus());
}

/**
 * modifier: https://github.com/ember-modifier/ember-modifier
 *
 * See also:
 *  - https://github.com/emberjs/rfcs/pull/811
 *    - ember-modifier becomes default part of blueprint
 *  - https://github.com/emberjs/rfcs/pull/757
 *    - dependencyless support for using
 *       `autofocus = element => element.focus()`
 *       instead
 */

Alpine

<input x-init="$el.focus();" />

Qwik

import { component$, useClientEffect$, useRef } from "@builder.io/qwik";

export const InputFocused = component$(() => {
  const inputElement = useRef(null);

  useClientEffect$(() => inputElement.current.focus());

  return <input type="text" ref={inputElement} />;
});

Svelte

<script>
  const TRAFFIC_LIGHTS = ["red", "orange", "green"];
  let lightIndex = 0;

  $: light = TRAFFIC_LIGHTS[lightIndex];

  function nextLight() {
    if (lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
      lightIndex = 0;
    } else {
      lightIndex++;
    }
  }
</script>

<button on:click={nextLight}>Next light</button>
<p>Light is: {light}</p>
<p>
  You must
  {#if light === "red"}
    <span>STOP</span>
  {:else if light === "orange"}
    <span>SLOW DOWN</span>
  {:else if light === "green"}
    <span>GO</span>
  {/if}
</p>

React

import { useState } from "react";

const TRAFFIC_LIGHTS = ["red", "orange", "green"];

export default function TrafficLight() {
  const [lightIndex, setLightIndex] = useState(0);

  const light = TRAFFIC_LIGHTS[lightIndex];

  function nextLight() {
    if (lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
      setLightIndex(0);
    } else {
      setLightIndex(lightIndex + 1);
    }
  }

  return (
    <>
      <button onClick={nextLight}>Next light</button>
      <p>Light is: {light}</p>
      <p>
        You must
        {light === "red" && <span>STOP</span>}
        {light === "orange" && <span>SLOW DOWN</span>}
        {light === "green" && <span>GO</span>}
      </p>
    </>
  );
}

Vue 2

<script>
export default {
  data() {
    return {
      TRAFFIC_LIGHTS: ["red", "orange", "green"],
      lightIndex: 0,
    };
  },
  computed: {
    light() {
      return this.TRAFFIC_LIGHTS[this.lightIndex];
    },
  },
  methods: {
    nextLight() {
      if (this.lightIndex + 1 > this.TRAFFIC_LIGHTS.length - 1) {
        this.lightIndex = 0;
      } else {
        this.lightIndex++;
      }
    },
  },
};
</script>

<template>
  <div>
    <button @click="nextLight">
      Next light
    </button>
    <p>Light is: {{ light }}</p>
    <p>
      You must
      <span v-if="light === 'red'">STOP</span>
      <span v-else-if="light === 'orange'">SLOW DOWN</span>
      <span v-else-if="light === 'green'">GO</span>
    </p>
  </div>
</template>

Vue 3

<script setup>
import { ref, computed } from "vue";
const TRAFFIC_LIGHTS = ["red", "orange", "green"];
const lightIndex = ref(0);

const light = computed(() => TRAFFIC_LIGHTS[lightIndex.value]);

function nextLight() {
  if (lightIndex.value + 1 > TRAFFIC_LIGHTS.length - 1) {
    lightIndex.value = 0;
  } else {
    lightIndex.value++;
  }
}
</script>

<template>
  <button @click="nextLight">
    Next light
  </button>
  <p>Light is: {{ light }}</p>
  <p>
    You must
    <span v-if="light === 'red'">STOP</span>
    <span v-else-if="light === 'orange'">SLOW DOWN</span>
    <span v-else-if="light === 'green'">GO</span>
  </p>
</template>

Angular

import { Component } from "@angular/core";

const TRAFFIC_LIGHTS = ["red", "orange", "green"];

@Component({
  selector: "app-trafficlight",
  template: `
    <button (click)="nextLight()">Next light</button>
    <p>Light is: {{ light }}</p>
    <p>
      You must
      <ng-container [ngSwitch]="light">
        <span *ngSwitchCase="'red'">STOP</span>
        <span *ngSwitchCase="'orange'">SLOW DOWN</span>
        <span *ngSwitchCase="'green'">GO</span>
      </ng-container>
    </p>
  `,
})
export class TrafficlightComponent {
  lightIndex = 0;

  get light() {
    return TRAFFIC_LIGHTS[this.lightIndex];
  }

  nextLight() {
    if (this.lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
      this.lightIndex = 0;
    } else {
      this.lightIndex++;
    }
  }
}

SolidJS

import { createSignal, Switch, Match } from "solid-js";

const TRAFFIC_LIGHTS = ["red", "orange", "green"];

export default function TrafficLight() {
  const [lightIndex, setLightIndex] = createSignal(0);

  const light = () => TRAFFIC_LIGHTS[lightIndex()];

  function nextLight() {
    if (lightIndex() + 1 > TRAFFIC_LIGHTS.length - 1) {
      setLightIndex(0);
    } else {
      setLightIndex(lightIndex() + 1);
    }
  }

  return (
    <>
      <button onClick={nextLight}>Next light</button>
      <p>Light is: {light()}</p>
      <p>
        You must
        <Switch>
          <Match when={light() === "red"}>
            <span>STOP</span>
          </Match>
          <Match when={light() === "orange"}>
            <span>SLOW DOWN</span>
          </Match>
          <Match when={light() === "green"}>
            <span>GO</span>
          </Match>
        </Switch>
      </p>
    </>
  );
}

Lit

<!DOCTYPE html>
<head>
  <script type="module" src="./traffic-light.js"></script>
</head>
<body>
  <traffic-light></traffic-light>
</body>

import { LitElement, html } from "lit";
import { customElement, state } from "lit/decorators.js";
import { choose } from "lit/directives/choose.js";

const TRAFFIC_LIGHTS = ["red", "orange", "green"];

@customElement("traffic-light")
export class TrafficLight extends LitElement {
  @state()
  lightIndex = 0;

  get light() {
    return TRAFFIC_LIGHTS[this.lightIndex];
  }

  nextLight() {
    if (this.lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
      this.lightIndex = 0;
    } else {
      this.lightIndex = this.lightIndex + 1;
    }
  }

  render() {
    return html`
      <button @click=${this.nextLight}>Next light</button>
      <p>Light is ${this.light}</p>
      <p>
        You must
        ${choose(this.light, [
          ["red", () => html`<span>STOP</span>`],
          ["orange", () => html`<span>SLOW DOWN</span>`],
          ["green", () => html`<span>GO</span>`],
        ])}
      </p>
    `;
  }
}

Ember

<button {{on "click" this.nextLight}}>Next light</button>
<p>Light is: {{this.light}}</p>
<p>
  You must
  {{#if (eq this.light "red")}}
    STOP
  {{else if (eq this.light "orange")}}
    SLOW DOWN
  {{else if (eq this.light "green")}}
    GO
  {{/if}}
</p>

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

const TRAFFIC_LIGHTS = ["red", "orange", "green"];

export default class TrafficLight extends Component {
  @tracked lightIndex = 0;

  get light() {
    return TRAFFIC_LIGHTS[this.lightIndex];
  }

  nextLight = () => {
    if (this.lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
      this.lightIndex = 0;
    } else {
      this.lightIndex++;
    }
  };
}

Alpine

<div
  x-data="{
  TRAFFIC_LIGHTS: ['red', 'orange', 'green'],
  lightIndex: 0,
  get light() { return this.TRAFFIC_LIGHTS[this.lightIndex] },
  nextLight() {
    if (this.lightIndex + 1 > this.TRAFFIC_LIGHTS.length - 1) {
      this.lightIndex = 0
    } else {
      this.lightIndex++
    }
  }
}"
>
  <button x-on:click="nextLight">Next light</button>
  <p>Light is: <span x-text="light"></span></p>
  <p>
    You must
    <span x-show="light === 'red'">STOP</span>
    <span x-show="light === 'orange'">SLOW DOWN</span>
    <span x-show="light === 'green'">GO</span>
  </p>
</div>

Qwik

import { $, component$, useStore } from "@builder.io/qwik";

export const TRAFFIC_LIGHTS = ["red", "orange", "green"];

export const App = component$(() => {
  const store = useStore({
    lightIndex: 0,
  });

  const light = TRAFFIC_LIGHTS[store.lightIndex];

  const nextLight = $(() => {
    if (store.lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) {
      store.lightIndex = 0;
    } else {
      store.lightIndex += 1;
    }
  });

  return (
    <>
      <button onClick$={nextLight}>Next light</button>
      <p>Light is: {light}</p>
      <p>
        You must
        {light === "red" && <span>STOP</span>}
        {light === "orange" && <span>SLOW DOWN</span>}
        {light === "green" && <span>GO</span>}
      </p>
    </>
  );
});

Svelte

<script>
  import { onMount } from "svelte";
  let pageTitle = "";
  onMount(() => {
    pageTitle = document.title;
  });
</script>

<p>Page title is: {pageTitle}</p>

React

import { useState, useEffect } from "react";

export default function PageTitle() {
  const [pageTitle, setPageTitle] = useState("");

  useEffect(() => {
    setPageTitle(document.title);
  }, []);

  return <p>Page title: {pageTitle}</p>;
}

Vue 2

<script>
export default {
  data() {
    return {
      pageTitle: "",
    };
  },
  mounted() {
    this.pageTitle = document.title;
  },
};
</script>

<template>
  <p>Page title: {{ pageTitle }}</p>
</template>

Vue 3

<script setup>
import { ref, onMounted } from "vue";
const pageTitle = ref("");
onMounted(() => {
  pageTitle.value = document.title;
});
</script>

<template>
  <p>Page title: {{ pageTitle }}</p>
</template>

Angular

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-pagetitle",
  template: `<p>Page title: {{ pageTitle }}</p>`,
})
export class PagetitleComponent implements OnInit {
  pageTitle = "";

  ngOnInit() {
    this.pageTitle = document.title;
  }
}

SolidJS

import { createSignal, onMount } from "solid-js";

export default function PageTitle() {
  const [pageTitle, setPageTitle] = createSignal("");

  onMount(() => {
    setPageTitle(document.title);
  });

  return <p>Page title: {pageTitle()}</p>;
}

Lit

<!DOCTYPE html>
<head>
  <script type="module" src="./page-title.js"></script>
</head>
<body>
  <page-title></page-title>
</body>

import { LitElement, html } from "lit";
import { customElement, state } from "lit/decorators.js";

@customElement("page-title")
export class PageTitle extends LitElement {
  @state()
  pageTitle = "";

  connectedCallback() {
    super.connectedCallback();
    this.pageTitle = document.title;
  }

  render() {
    return html`<p>Page title: ${this.pageTitle}</p>`;
  }
}

Ember

<p>Page title is: {{(this.pageTitle)}}</p>

import Component from "@glimmer/component";

export default class PageTitle extends Component {
  pageTitle = () => document.title;
}

Alpine

<p
  x-data="{ pageTitle: '' }"
  x-init="$nextTick(() => { pageTitle = document.title })"
>
  Page title: <span x-text="pageTitle"></span>
</p>

Qwik

import { component$, useClientEffect$, useStore } from "@builder.io/qwik";

export const App = component$(() => {
  const store = useStore({
    pageTitle: "",
  });

  useClientEffect$(() => {
    store.pageTitle = document.title;
  });

  return <p>Page title: {store.pageTitle}</p>;
});

Svelte

<script>
  import { onDestroy } from "svelte";

  let time = new Date().toLocaleTimeString();

  const timer = setInterval(() => {
    time = new Date().toLocaleTimeString();
  }, 1000);

  onDestroy(() => clearInterval(timer));
</script>

<p>Current time: {time}</p>

React

import { useState, useEffect } from "react";

export default function Time() {
  const [time, setTime] = useState(new Date().toLocaleTimeString());

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return <p>Current time: {time}</p>;
}

Vue 2

<script>
export default {
  data() {
    return {
      time: new Date().toLocaleTimeString(),
      timer: null,
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      this.time = new Date().toLocaleTimeString();
    }, 1000);
  },
  beforeUnmount() {
    clearInterval(this.timer);
  },
};
</script>

<template>
  <p>Current time: {{ time }}</p>
</template>

Vue 3

<script setup>
import { ref, onUnmounted } from "vue";

const time = ref(new Date().toLocaleTimeString());

const timer = setInterval(() => {
  time.value = new Date().toLocaleTimeString();
}, 1000);

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<template>
  <p>Current time: {{ time }}</p>
</template>

Angular

import { Component, OnDestroy } from "@angular/core";

@Component({
  selector: "app-time",
  template: `<p>Current time: {{ time }}</p>`,
})
export class TimeComponent implements OnDestroy {
  time: string = new Date().toLocaleTimeString();
  timer: number;

  constructor() {
    this.timer = setInterval(() => {
      this.time = new Date().toLocaleTimeString();
    }, 1000);
  }

  ngOnDestroy() {
    clearInterval(this.timer);
  }
}

SolidJS

import { createSignal, onCleanup } from "solid-js";

export default function Time() {
  const [time, setTime] = createSignal(new Date().toLocaleTimeString());

  const timer = setInterval(() => {
    setTime(new Date().toLocaleTimeString());
  }, 1000);

  onCleanup(() => clearInterval(timer));

  return <p>Current time: {time()}</p>;
}

Lit

<!DOCTYPE html>
<head>
  <script type="module" src="./x-time.js"></script>
</head>
<body>
  <x-time></x-time>
</body>

import { LitElement, html } from "lit";
import { customElement, state } from "lit/decorators.js";

@customElement("x-time")
export class XTime extends LitElement {
  @state()
  time = "";

  timer;

  connectedCallback() {
    super.connectedCallback();
    this.timer = setInterval(() => {
      this.time = new Date().toLocaleTimeString();
    }, 1000);
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    clearInterval(this.timer);
  }

  render() {
    return html`<p>Current time: ${this.time}</p>`;
  }
}

Ember

<p>Current time: {{this.time}}</p>

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { registerDestructor } from "@ember/destroyable";

export default class Time extends Component {
  @tracked time = new Date().toLocaleTimeString();

  constructor(owner, args) {
    super(owner, args);

    let timer = setInterval(() => {
      this.time = new Date().toLocaleTimeString();
    }, 1000);

    registerDestructor(this, () => clearInterval(timer));
  }
}

Alpine

<p
  x-data="{
  time: new Date().toLocaleTimeString(),
  timer: null,
  init() { this.timer = setInterval(() => (this.time = new Date().toLocaleTimeString()), 1000) },
  destroy() { clearInterval(this.timer) }
}"
>
  Current time: <span x-text="time"></span>
</p>

Qwik

import { component$, useClientEffect$, useStore } from "@builder.io/qwik";

export const App = component$(() => {
  const store = useStore({
    time: new Date().toLocaleTimeString(),
  });

  useClientEffect$(() => {
    const timer = setInterval(() => {
      store.time = new Date().toLocaleTimeString();
    }, 1000);

    return () => clearInterval(timer);
  });

  return <p>Current time: {store.time}</p>;
});

Svelte

<script>
  import UserProfile from "./UserProfile.svelte";
</script>

<UserProfile
  name="John"
  age={20}
  favouriteColors={["green", "blue", "red"]}
  isAvailable
/>

<script>
  export let name = "";
  export let age = null;
  export let favouriteColors = [];
  export let isAvailable = false;
</script>

<p>My name is {name} !</p>
<p>My age is {age} !</p>
<p>My favourite colors are {favouriteColors.join(", ")} !</p>
<p>I am {isAvailable ? "available" : "not available"}</p>

React

import UserProfile from "./UserProfile.jsx";

export default function App() {
  return (
    <UserProfile
      name="John"
      age={20}
      favouriteColors={["green", "blue", "red"]}
      isAvailable
    />
  );
}

import PropTypes from "prop-types";

export default function UserProfile({
  name = "",
  age = null,
  favouriteColors = [],
  isAvailable = false,
}) {
  return (
    <>
      <p>My name is {name} !</p>
      <p>My age is {age} !</p>
      <p>My favourite colors are {favouriteColors.join(", ")} !</p>
      <p>I am {isAvailable ? "available" : "not available"}</p>
    </>
  );
}

UserProfile.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
  favouriteColors: PropTypes.arrayOf(PropTypes.string).isRequired,
  isAvailable: PropTypes.bool.isRequired,
};

Vue 2

<script>
import UserProfile from "./UserProfile.vue";

export default {
  components: {
    UserProfile,
  },
};
</script>

<template>
  <UserProfile
    name="John"
    :age="20"
    :favorite-colors="['green', 'blue', 'red']"
    is-available
  />
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true,
      default: "",
    },
    age: {
      type: Number,
      required: true,
      default: null,
    },
    favoriteColors: {
      type: Array,
      required: true,
      default: () => [],
    },
    isAvailable: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
};
</script>

<template>
  <div>
    <p>My name is {{ props.name }} !</p>
    <p>My age is {{ props.age }} !</p>
    <p>My favorite colors are {{ props.favoriteColors.join(", ") }} !</p>
    <p>I am {{ props.isAvailable ? "available" : "not available" }}</p>
  </div>
</template>

Vue 3

<script setup>
import UserProfile from "./UserProfile.vue";
</script>

<template>
  <UserProfile
    name="John"
    :age="20"
    :favourite-colors="['green', 'blue', 'red']"
    is-available
  />
</template>

<script setup>
const props = defineProps({
  name: {
    type: String,
    required: true,
    default: "",
  },
  age: {
    type: Number,
    required: true,
    default: null,
  },
  favouriteColors: {
    type: Array,
    required: true,
    default: () => [],
  },
  isAvailable: {
    type: Boolean,
    required: true,
    default: false,
  },
});
</script>

<template>
  <p>My name is {{ props.name }} !</p>
  <p>My age is {{ props.age }} !</p>
  <p>My favourite colors are {{ props.favouriteColors.join(", ") }} !</p>
  <p>I am {{ props.isAvailable ? "available" : "not available" }}</p>
</template>

Angular

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <app-userprofile
      name="John"
      [age]="20"
      [favouriteColors]="['green', 'blue', 'red']"
      [isAvailable]="true"
    >
    </app-userprofile>
  `,
})
export class AppComponent {}

import { Component, Input } from "@angular/core";

@Component({
  selector: "app-userprofile",
  template: `
    <p>My name is {{ name }} !</p>
    <p>My age is {{ age }} !</p>
    <p>My favourite colors are {{ favouriteColors.join(", ") }} !</p>
    <p>I am {{ isAvailable ? "available" : "not available" }}</p>
  `,
})
export class UserprofileComponent {
  @Input() name: string = "";
  @Input() age: number = 0;
  @Input() favouriteColors: string[] = [];
  @Input() isAvailable: boolean = false;
}

SolidJS

import UserProfile from "./UserProfile.jsx";

export default function App() {
  return (
    <UserProfile
      name="John"
      age={20}
      favouriteColors={["green", "blue", "red"]}
      isAvailable
    />
  );
}

import { mergeProps } from "solid-js";

export default function UserProfile(props) {
  const merged = mergeProps(
    { name: "", age: null, favouriteColors: [], isAvailable: false },
    props
  );

  return (
    <>
      <p>My name is {merged.name} !</p>
      <p>My age is {merged.age} !</p>
      <p>My favourite colors are {merged.favouriteColors.join(", ")} !</p>
      <p>I am {merged.isAvailable ? "available" : "not available"}</p>
    </>
  );
}

Lit

<!DOCTYPE html>
<head>
  <script type="module" src="./x-app.js"></script>
</head>
<body>
  <x-app></x-app>
</body>

import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";

@customElement("user-profile")
export class UserProfile extends LitElement {
  @property()
  name = "";

  @property({ type: Number })
  age = null;

  @property({ type: Array })
  favouriteColors = [];

  @property({ type: Boolean })
  isAvailable = false;

  render() {
    return html`
      <p>My name is ${this.name}</p>
      <p>My age is ${this.age}</p>
      <p>My favourite coloros are ${this.favouriteColors.join(", ")}</p>
      <p>I am ${this.isAvailable ? "available" : "not available"}</p>
    `;
  }
}

import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";

import "./user-profile";

@customElement("x-app")
export class XApp extends LitElement {
  render() {
    return html`<user-profile
      name="John"
      age="20"
      .favouriteColors=${["green", "blue", "red"]}
      isavailable
    ></user-profile>`;
  }
}

Ember

<UserProfile
  @name="John"
  @age={{20}}
  @favouriteColors={{array "green" "blue" "red"}}
  @isAvailable={{true}}
/>

<p>My name is {{@name}} !</p>
<p>My age is {{@age}} !</p>
<p>My favourite colors are {{this.formattedColors}} !</p>
<p>I am {{if @isAvailable "available" "not available"}}</p>

import Component from "@glimmer/component";

export default class UserProfile extends Component {
  get formattedColors() {
    return this.args.favouriteColors.join(", ");
  }
}

Alpine

<!--Alpine JS suggests using a server-side templating engine or another frontend framework in conjunction with Alpine to do this-->

<div
  x-data="{
  name: 'John',
  age: 20,
  favouriteColors: ['green', 'blue', 'red'],
  isAvailable: true
}"
>
  <p>My name is <span x-text="John"></span></p>
  <p>My age is <span x-text="age"></span></p>
  <p>
    My favourite colors are <span x-text="favouriteColors.join(', ')"></span>
  </p>
  <p>I am <span x-text="isAvailable ? 'available' : 'not available'"></span></p>
</div>

Qwik

import { component$ } from "@builder.io/qwik";
import UserProfile from "./UserProfile";

const App = component$(() => {
  return (
    <UserProfile
      name="John"
      age={20}
      favouriteColors={["green", "blue", "red"]}
      isAvailable
    />
  );
});

export default App;

import { component$ } from "@builder.io/qwik";

type Props = {
  name: string;
  age: number;
  favouriteColors: string[];
  isAvailable: boolean;
};

const UserProfile = component$((props: Props) => {
  const {
    name = "",
    age = null,
    favouriteColors = [],
    isAvailable = false,
  } = props;

  return (
    <>
      <p>My name is {name} !</p>
      <p>My age is {age} !</p>
      <p>My favourite colors are {favouriteColors.join(", ")} !</p>
      <p>I am {isAvailable ? "available" : "not available"}</p>
    </>
  );
});

export default UserProfile;

Svelte

<script>
  import AnswerButton from "./AnswerButton.svelte";

  let canCome = true;

  function onAnswerNo() {
    canCome = false;
  }

  function onAnswerYes() {
    canCome = true;
  }
</script>

<p>Can I come ?</p>
<AnswerButton on:yes={onAnswerYes} on:no={onAnswerNo} />
<p style="font-size: 50px;">{canCome ? "😀" : "😥"}</p>

<script>
  import { createEventDispatcher } from "svelte";

  const dispatch = createEventDispatcher();

  function clickYes() {
    dispatch("yes");
  }

  function clickNo() {
    dispatch("no");
  }
</script>

<button on:click={clickYes}> YES </button>

<button on:click={clickNo}> NO </button>

React

import { useState } from "react";
import AnswerButton from "./AnswerButton.jsx";

export default function App() {
  const [canCome, setCanCome] = useState(true);

  function onAnswerNo() {
    setCanCome(false);
  }

  function onAnswerYes() {
    setCanCome(true);
  }

  return (
    <>
      <p>Can I come ?</p>
      <AnswerButton onYes={onAnswerYes} onNo={onAnswerNo} />
      <p style={{ fontSize: 50 }}>{canCome ? "😀" : "😥"}</p>
    </>
  );
}

import PropTypes from "prop-types";

export default function AnswerButton({ onYes, onNo }) {
  return (
    <>
      <button onClick={onYes}>YES</button>

      <button onClick={onNo}>NO</button>
    </>
  );
}

AnswerButton.propTypes = {
  onYes: PropTypes.func,
  onNo: PropTypes.func,
};

Vue 2

<script>
import AnswerButton from "./AnswerButton.vue";
export default {
  components: {
    AnswerButton,
  },
  data() {
    return {
      canCome: true,
    };
  },
  methods: {
    onAnswerNo() {
      this.canCome = false;
    },
    onAnswerYes() {
      this.canCome = true;
    },
  },
};
</script>

<template>
  <div>
    <p>Can I come ?</p>
    <AnswerButton
      @yes="onAnswerYes"
      @no="onAnswerNo"
    />
    <p style="font-size: 50px">
      {{ canCome ? "😀" : "😥" }}
    </p>
  </div>
</template>

<script>
export default {
  methods: {
    clickYes() {
      this.$emit("yes");
    },
    clickNo() {
      this.$emit("no");
    },
  },
};
</script>

<template>
  <div>
    <button @click="clickYes">
      YES
    </button>

    <button @click="clickNo">
      NO
    </button>
  </div>
</template>

Vue 3

<script setup>
import { ref } from "vue";
import AnswerButton from "./AnswerButton.vue";

let canCome = ref(true);

function onAnswerNo() {
  canCome.value = false;
}

function onAnswerYes() {
  canCome.value = true;
}
</script>

<template>
  <p>Can I come ?</p>
  <AnswerButton
    @yes="onAnswerYes"
    @no="onAnswerNo"
  />
  <p style="font-size: 50px">
    {{ canCome ? "😀" : "😥" }}
  </p>
</template>

<script setup>
const emit = defineEmits(["yes", "no"]);

function clickYes() {
  emit("yes");
}

function clickNo() {
  emit("no");
}
</script>

<template>
  <button @click="clickYes">
    YES
  </button>

  <button @click="clickNo">
    NO
  </button>
</template>

Angular

import { Component, Output, EventEmitter } from "@angular/core";

@Component({
  selector: "app-answer-button",
  template: `
    <button (click)="yes.emit()">YES</button>
    <button (click)="no.emit()">NO</button>
  `,
})
export class AnswerButtonComponent {
  @Output() yes = new EventEmitter<void>();
  @Output() no = new EventEmitter<void>();
}

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <p>Can I come ?</p>

    <app-answer-button (yes)="onAnswerYes()" (no)="onAnswerNo()">
    </app-answer-button>

    <p style="font-size: 50px">{{ canCome ? "😀" : "😥" }}</p>
  `,
})
export class AppComponent {
  canCome = true;

  onAnswerYes() {
    this.canCome = true;
  }

  onAnswerNo() {
    this.canCome = false;
  }
}

SolidJS

import { createSignal } from "solid-js";
import AnswerButton from "./AnswerButton.jsx";

export default function App() {
  const [canCome, setCanCome] = createSignal(true);

  function onAnswerNo() {
    setCanCome(false);
  }

  function onAnswerYes() {
    setCanCome(true);
  }

  return (
    <>
      <p>Can I come ?</p>
      <AnswerButton onYes={onAnswerYes} onNo={onAnswerNo} />
      <p style={{ "font-size": "50px" }}>{canCome() ? "😀" : "😥"}</p>
    </>
  );
}

export default function AnswerButton(props) {
  return (
    <>
      <button onClick={() => props.onYes()}>YES</button>
      <button onClick={() => props.onNo()}>NO</button>
    </>
  );
}

Lit

import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";

@customElement("answer-button")
export class AnswerButton extends LitElement {
  clickYes() {
    this.dispatchEvent(new Event("yes"));
  }

  clickNo() {
    this.dispatchEvent(new Event("no"));
  }

  render() {
    return html`
      <button @click=${this.clickYes}>Yes</button>
      <button @click=${this.clickNo}>No</button>
    `;
  }
}

<!DOCTYPE html>
<head>
  <script type="module" src="./x-app.js"></script>
</head>
<body>
  <x-app></x-app>
</body>

import { LitElement, html } from "lit";
import { customElement, state } from "lit/decorators.js";

import "./answer-button";

@customElement("x-app")
export class XApp extends LitElement {
  @state()
  canCome = true;

  onAnswerNo() {
    this.canCome = false;
  }

  onAnswerYes() {
    this.canCome = true;
  }

  render() {
    return html`
      <p>Can I come ?</p>
      <answer-button
        @yes=${this.onAnswerYes}
        @no=${this.onAnswerNo}
      ></answer-button>
      <p style="font-size: 50px;">${this.canCome ? "😀" : "😥"}</p>
    `;
  }
}

Ember

<button {{on "click" @onYes}}> YES </button>
<button {{on "click" @onNo}}> NO </button>

<p>Can I come ?</p>
<AnswerButton @onYes={{this.handleYes}} @onNo={{this.handleNo}} />
<p style="font-size: 50px;">{{if this.canCome "😀" "😥"}}</p>

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

export default class App extends Component {
  @tracked canCome = true;

  handleYes = () => (this.canCome = true);
  handleNo = () => (this.canCome = false);
}

Alpine

<div
  x-data="{ canCome: true }"
  x-on:yes="canCome = true"
  x-on:no="canCome = false"
>
  <p>Can I come ?</p>
  <div>
    <button x-on:click="$dispatch('yes')">YES</button>
    <button x-on:click="$dispatch('no')">NO</button>
  </div>
  <p style="font-size: 50px" x-text="canCome ? '😀' : '😥'"></p>
</div>

Qwik

import { component$, PropFunction } from "@builder.io/qwik";

type Props = {
  onYes$: PropFunction<() => void>;
  onNo$: PropFunction<() => void>;
};

const AnswerButton = component$((props: Props) => {
  return (
    <>
      <button onClick$={props.onYes$}>YES</button>

      <button onClick$={props.onNo$}>NO</button>
    </>
  );
});

export default AnswerButton;

import { $, component$, useStore } from "@builder.io/qwik";
import AnswerButton from "./AnswerButton";

const App = component$(() => {
  const store = useStore({
    canCome: true,
  });

  const onAnswerNo = $(() => {
    store.canCome = false;
  });

  const onAnswerYes = $(() => {
    store.canCome = true;
  });

  return (
    <>
      <p>Can I come ?</p>
      <AnswerButton onYes$={onAnswerYes} onNo$={onAnswerNo} />
      <p style={{ fontSize: 50 }}>{store.canCome ? "ðŸ˜€" : "ðŸ˜¥"}</p>
    </>
  );
});

export default App;

Svelte

<script>
  import FunnyButton from "./FunnyButton.svelte";
</script>

<FunnyButton>Click me !</FunnyButton>

<button
  style="background: rgba(0, 0, 0, 0.4); color: #fff; padding: 10px 20px; font-size: 30px; border: 2px solid #fff; margin: 8px; transform: scale(0.9); box-shadow: 4px 4px rgba(0, 0, 0, 0.4); transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s; outline: 0;"

Reactivity#

Declare state#

Svelte

React

Vue 2

Vue 3

Angular

SolidJS

Lit

Ember

Alpine

Qwik

Update state#

Svelte

React

Vue 2

Vue 3

Angular

SolidJS

Lit

Ember

Alpine

Qwik

Computed state#

Svelte

React

Vue 2

Vue 3

Angular

SolidJS

Lit

Ember

Alpine

Qwik

Templating#

Minimal template#

Svelte

React

Vue 2

Vue 3

Angular

SolidJS

Lit

Ember

Alpine

Qwik

Styling#

Svelte

React

Vue 2

Vue 3

Angular

SolidJS

Lit

Ember

Alpine

Qwik

Loop#

Svelte

React

Vue 2

Vue 3

Angular

SolidJS

Lit

Ember

Alpine

Qwik

Event click#

Svelte

React

Vue 2

Vue 3

Angular

SolidJS

Lit

Ember

Alpine

Qwik

Dom ref#

Reactivity

Declare state

Update state

Computed state

Templating

Minimal template

Styling

Loop

Event click

Dom ref

Conditional

Lifecycle

On mount

On unmount

Component composition

Props

Emit to parent

Slot