Reactivity

Declare state

Solid.js

import { createSignal } from "solid-js";

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

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

Alpine

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

Update state

Solid.js

import { createSignal } from "solid-js";

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

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

Alpine

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

Computed state

Solid.js

import { createSignal } from "solid-js";

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

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

Alpine

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

Templating

Minimal template

Solid.js

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

Alpine

<h1>Hello world</h1>

Styling

Solid.js

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>
    </>
  );
}

Alpine

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

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

Loop

Solid.js

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>
  );
}

Alpine

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

Event click

Solid.js

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>
    </>
  );
}

Alpine

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

Dom ref

Solid.js

import { onMount } from "solid-js";

export default function InputFocused() {
  let inputElement;

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

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

Alpine

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

Conditional

Solid.js

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() {
    setLightIndex((lightIndex() + 1) % TRAFFIC_LIGHTS.length);
  }

  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>
    </>
  );
}

Alpine

<div
  x-data="{
  TRAFFIC_LIGHTS: ['red', 'orange', 'green'],
  lightIndex: 0,
  get light() { return this.TRAFFIC_LIGHTS[this.lightIndex] },
  nextLight() {
    this.lightIndex = (this.lightIndex + 1) % this.TRAFFIC_LIGHTS.length;
  }
}"
>
  <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>

Lifecycle

On mount

Solid.js

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

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

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

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

Alpine

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

On unmount

Solid.js

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>;
}

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>

Component composition

Props

Solid.js

import UserProfile from "./UserProfile.jsx";

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

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>

Emit to parent

Solid.js

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

export default function App() {
  const [isHappy, setIsHappy] = createSignal(true);

  function onAnswerNo() {
    setIsHappy(false);
  }

  function onAnswerYes() {
    setIsHappy(true);
  }

  return (
    <>
      <p>Are you happy?</p>
      <AnswerButton onYes={onAnswerYes} onNo={onAnswerNo} />
      <p style={{ "font-size": "50px" }}>{isHappy() ? "😀" : "😥"}</p>
    </>
  );
}

Alpine

<div
  x-data="{ isHappy: true }"
  x-on:yes="isHappy = true"
  x-on:no="isHappy = false"
>
  <p>Are you happy?</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="isHappy ? '😀' : '😥'"></p>
</div>

Slot

Solid.js

import FunnyButton from "./FunnyButton.jsx";

export default function App() {
  return <FunnyButton>Click me!</FunnyButton>;
}

Alpine

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

<button
  x-data
  x-text="'Click me!'"
  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;
  "
>
  <span>No content found</span>
</button>

Slot fallback

Solid.js

import FunnyButton from "./FunnyButton.jsx";

export default function App() {
  return (
    <>
      <FunnyButton />
      <FunnyButton>I got content!</FunnyButton>
    </>
  );
}

Alpine

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

<button
  x-data
  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;
  "
>
  <span>No content found</span>
</button>

<button
  x-data
  x-text="'I got content!'"
  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;
  "
>
  <span>No content found</span>
</button>

Context

Solid.js

import { createSignal } from "solid-js";

import { UserContext } from "./UserContext";
import UserProfile from "./UserProfile";

export default function App() {
  const [user, setUser] = createSignal({
    id: 1,
    username: "unicorn42",
    email: "[email protected]",
  });

  function updateUsername(newUsername) {
    setUser({ ...user(), username: newUsername });
  }

  return (
    <>
      <h1>Welcome back, {user().username}</h1>
      <UserContext.Provider value={[user, updateUsername]}>
        <UserProfile />
      </UserContext.Provider>
    </>
  );
}

Alpine

Missing snippet Help us to improve Component Party logo

Contribute on Github

Form input

Input text

Solid.js

import { createSignal } from "solid-js";

export default function InputHello() {
  const [text, setText] = createSignal("Hello world");

  function handleChange(event) {
    setText(event.target.value);
  }

  return (
    <>
      <p>{text()}</p>
      <input value={text()} onInput={handleChange} />
    </>
  );
}

Alpine

<div x-data="{ text: 'Hello World' }">
  <p x-text="text"></p>
  <input x-model="text" />
</div>

Checkbox

Solid.js

import { createSignal } from "solid-js";

export default function IsAvailable() {
  const [isAvailable, setIsAvailable] = createSignal(false);

  function handleChange() {
    setIsAvailable((previousValue) => !previousValue);
  }

  return (
    <>
      <input
        id="is-available"
        type="checkbox"
        checked={isAvailable()}
        onChange={handleChange}
      />
      <label for="is-available">Is available</label>
    </>
  );
}

Alpine

<div x-data="{ isAvailable: true }">
  <input id="is-available" x-model="isAvailable" type="checkbox" />
  <label for="is-available">Is available</label>
</div>

Radio

Solid.js

import { createSignal } from "solid-js";

export default function PickPill() {
  const [picked, setPicked] = createSignal("red");

  function handleChange(event) {
    setPicked(event.target.value);
  }

  return (
    <>
      <div>Picked: {picked()}</div>
      <input
        id="blue-pill"
        checked={picked() === "blue"}
        type="radio"
        value="blue"
        onChange={handleChange}
      />
      <label for="blue-pill">Blue pill</label>

      <input
        id="red-pill"
        checked={picked() === "red"}
        type="radio"
        value="red"
        onChange={handleChange}
      />
      <label for="red-pill">Red pill</label>
    </>
  );
}

Alpine

<div x-data="{ picked: 'red' }">
  <div>Picked: <span x-text="picked"></span></div>

  <input id="blue-pill" x-model="picked" type="radio" value="blue" />
  <label for="blue-pill">Blue pill</label>

  <input id="red-pill" x-model="picked" type="radio" value="red" />
  <label for="red-pill">Red pill</label>
</div>

Select

Solid.js

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

const colors = [
  { id: 1, text: "red" },
  { id: 2, text: "blue" },
  { id: 3, text: "green" },
  { id: 4, text: "gray", isDisabled: true },
];

export default function ColorSelect() {
  const [selectedColorId, setSelectedColorId] = createSignal(2);

  function handleChange(event) {
    setSelectedColorId(event.target.value);
  }

  return (
    <select value={selectedColorId()} onChange={handleChange}>
      <For each={colors}>
        {(color) => (
          <option value={color.id} disabled={color.isDisabled}>
            {color.text}
          </option>
        )}
      </For>
    </select>
  );
}

Alpine

<div
  x-data="{
  selectedColorId: 2,
  colors: [
    { id: 1, text: 'red' },
    { id: 2, text: 'blue' },
    { id: 3, text: 'green' },
    { id: 4, text: 'gray', isDisabled: true }
  ]
}"
>
  <select x-model.number="selectedColorId">
    <template x-for="color in colors" x-bind:key="color.id">
      <option
        x-text="color.text"
        x-bind:value="color.id"
        x-bind:disabled="!!color.isDisabled"
        x-bind:selected="color.id === selectedColorId"
      ></option>
    </template>
  </select>
</div>

Webapp features

Render app

Solid.js

<!doctype html>
<html>
  <body>
    <div id="app"></div>
    <script type="module" src="./main.jsx"></script>
  </body>
</html>

Alpine

<h1>Hello world</h1>

Fetch data

Solid.js

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

async function fetchUsers() {
  return (await fetch("https://randomuser.me/api/?results=3")).json();
}

export default function App() {
  const [data] = createResource(fetchUsers);
  const users = () => data()?.results;

  return (
    <Switch>
      <Match when={data.loading}>
        <p>Fetching users...</p>
      </Match>
      <Match when={data.error}>
        <p>An error occurred while fetching users</p>
      </Match>
      <Match when={users()}>
        <ul>
          <For each={users()}>
            {(user) => (
              <li>
                <img src={user.picture.thumbnail} alt="user" />
                <p>
                  {user.name.first} {user.name.last}
                </p>
              </li>
            )}
          </For>
        </ul>
      </Match>
    </Switch>
  );
}

Alpine

<div
  x-data="
		function fetchUsers() {
			return {
				users: null,
				isLoading: false,
				error: null,
				async init() {
					this.isLoading = true;
					try {
						this.users = (await (await fetch('https://randomuser.me/api/?results=3')).json()).results;
					} catch (err) {
						this.users = [];
						this.error = err
					}
					this.isLoading = false;
				},
			};
		}
	"
>
  <template x-if="isLoading">
    <p>Loading...</p>
  </template>

  <template x-if="error">
    <p>Error fetching users</p>
  </template>
  <template x-if="!error">
    <ul>
      <template x-for="user in users">
        <li>
          <img
            :src="user.picture.thumbnail"
            :alt="`picture of ${user.name.first} ${user.name.last}`"
          />
          <p x-text="`${user.name.first} ${user.name.last}`"></p>
        </li>
      </template>
    </ul>
  </template>
</div>

Reactivity #

Declare state #

Solid.js

Alpine

Update state #

Solid.js

Alpine

Computed state #

Solid.js

Alpine

Templating #

Minimal template #

Solid.js

Alpine

Styling #

Solid.js

Alpine

Loop #

Solid.js

Alpine

Event click #

Solid.js

Alpine

Dom ref #

Solid.js

Alpine

Conditional #

Solid.js

Alpine

Lifecycle #

On mount #

Solid.js

Alpine

On unmount #

Solid.js

Alpine

Component composition #

Props #

Solid.js

Alpine

Emit to parent #

Solid.js

Alpine

Slot #

Solid.js

Alpine

Slot fallback #

Solid.js

Alpine

Context #

Solid.js

Alpine

Form input #

Input text #

Solid.js

Alpine

Checkbox #

Solid.js

Alpine

Radio #

Solid.js

Alpine

Select #

Solid.js

Alpine

Webapp features #

Render app #

Solid.js

Alpine

Fetch data #

Solid.js

Alpine

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

Slot fallback

Context

Form input

Input text

Checkbox

Radio

Select

Webapp features

Render app

Fetch data