SolidJS Has a Free API — Here's How to Build Reactive UIs Without Virtual DOM

SolidJS is a reactive JavaScript framework that compiles to real DOM operations — no virtual DOM diffing. It delivers React-like DX with performance that rivals vanilla JS.

Getting Started

npx degit solidjs/templates/ts my-app
cd my-app
npm install
npm run dev

Signals — Fine-Grained Reactivity

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

function Counter() {
  const [count, setCount] = createSignal(0);
  const doubled = () => count() * 2;

  createEffect(() => {
    console.log(`Count: ${count()}, Doubled: ${doubled()}`);
  });

  return (
    <div>
      <p>Count: {count()} (doubled: {doubled()})</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
}

createResource — Data Fetching

import { createResource, Suspense } from "solid-js";

const fetchUser = async (id: string) => {
  const res = await fetch(`https://api.github.com/users/${id}`);
  return res.json();
};

function UserProfile(props: { userId: string }) {
  const [user] = createResource(() => props.userId, fetchUser);

  return (
    <Suspense fallback={<p>Loading...</p>}>
      <div>
        <h2>{user()?.name}</h2>
        <p>{user()?.bio}</p>
        <p>Repos: {user()?.public_repos}</p>
      </div>
    </Suspense>
  );
}

createStore — Complex State

import { createStore } from "solid-js/store";

function TodoApp() {
  const [state, setState] = createStore({
    todos: [
      { id: 1, text: "Learn Solid", done: false },
      { id: 2, text: "Build app", done: false }
    ]
  });

  const addTodo = (text: string) => {
    setState("todos", todos => [...todos, { id: Date.now(), text, done: false }]);
  };

  const toggleTodo = (id: number) => {
    setState("todos", t => t.id === id, "done", d => !d);
  };

  return (
    <For each={state.todos}>
      {(todo) => (
        <label>
          <input type="checkbox" checked={todo.done} onChange={() => toggleTodo(todo.id)} />
          {todo.text}
        </label>
      )}
    </For>
  );
}

Control Flow Components

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

<Show when={user()} fallback={<p>Not logged in</p>}>
  <p>Welcome, {user().name}</p>
</Show>

<For each={items()}>
  {(item, index) => <li>{index()}: {item.name}</li>}
</For>

---

Need to extract or automate web content at scale? Check out my web scraping tools on Apify — no coding required. Or email me at [e-mail] for custom solutions.