Solid Core Overview

solid-core-overview

Quick Reference

Version Matrix

| Package | Version | Status | Notes | |---------|---------|--------|-------| | solid-js | 1.x (1.8+) | Stable | Fine-grained reactivity, signals, stores, effects, SSR, streaming | | solid-js | 2.0 | Beta | Microtask batching, async first-class, onSettled replaces onMount | | @solidjs/start | 0.x | Deprecated | Used createServerData$, createServerAction$ — NEVER use for new projects | | @solidjs/start | 1.0 | Stable | Uses "use server" directive, built on Vinxi/Vite/Nitro | | @solidjs/router | | Conditional rendering | | | Keyed list rendering (reference identity) | | | Indexed list rendering (position identity) | | / | Multi-branch conditional | | | Async loading boundary | | | Error catching boundary | | | Render outside component tree | | ` | Dynamic component selection |

Rendering (solid-js/web)

| API | Purpose | |-----|---------| | render | Mount app to DOM element | | hydrate | Attach reactivity to server-rendered HTML | | renderToString | Synchronous SSR | | renderToStream | Streaming SSR | | isServer | Boolean constant for environment detection |

Router (@solidjs/router)

| API | Purpose | |-----|---------| | Router, Route, A | Core routing components | | useNavigate, useParams | Navigation hooks | | useSearchParams, useLocation | URL state hooks | | query | Cached server data fetching | | createAsync | Reactive async primitive (recommended) | | action | Server mutation wrapper | | useSubmission | Track mutation status |

SolidStart (@solidjs/start)

| API | Purpose | |-----|---------| | FileRoutes | File-based route generation | | "use server" | Server function directive | | API routes | HTTP method handlers (GET, POST, etc.) |

---

SolidJS 2.x Changes Summary

| Feature | SolidJS 1.x | SolidJS 2.x | |---------|-------------|-------------| | Reactivity | Synchronous by default | Microtask-batched | | Async | Manual with createResource | First-class Promises/async iterables | | Effects | Single createEffect | Split compute/apply pattern | | Lifecycle | onMount | onSettled (can return cleanup) | | Store setters | Path-style | Draft-first by default | | List rendering | ` component | with accessors | | Derived state | createMemo only | createSignal(fn)` for derived-but-writable |

New 2.x Primitives

• `` — Fallback during initial render without tearing down UI
• isPending() — Track refreshing state
• action() — Dedicated mutation primitive with optimistic patterns
• createOptimistic / createOptimisticStore — Explicit optimistic UI

---

Getting Started

npm init solid@latest

Minimal SolidStart Project Structure

my-app/
├── public/
├── src/
│   ├── routes/
│   │   └── index.tsx          # / route
│   ├── entry-client.tsx       # Client hydration entry
│   ├── entry-server.tsx       # Server handler entry
│   └── app.tsx                # Root component
├── app.config.ts              # SolidStart configuration
├── package.json
├── tsconfig.json
└── vite.config.ts

Minimal app.tsx (SolidStart)

import { Suspense } from "solid-js";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";

export default function App() {
  return (
     {props.children}}>
      
    
  );
}

Minimal SolidJS App (No SolidStart)

import { render } from "solid-js/web";
import { createSignal } from "solid-js";

function App() {
  const [count, setCount] = createSignal(0);
  return  setCount((c) => c + 1)}>Count: {count()};
}

render(() => , document.getElementById("root")!);

---

Ecosystem Package Map

| Package | npm Name | Purpose | |---------|----------|---------| | Solid Router | @solidjs/router | Client/server routing, data loading, actions | | SolidStart | @solidjs/start | Full-stack meta-framework (SSR, API routes) | | Solid Primitives | @solid-primitives/* | 40+ community reactive utilities | | Kobalte | @kobalte/core | Accessible unstyled UI components (like Radix UI) | | Solid Testing Library | @solidjs/testing-library | Testing utilities (Testing Library conventions) | | Solid DevTools | solid-devtools | Browser extension for signal/component inspection | | Babel Preset | babel-preset-solid | JSX compilation (required build dependency) | | Solid Transition Group | solid-transition-group | CSS enter/exit animations |

---

Reference Links

• [references/methods.md](references/methods.md) -- Complete import map for all entry points
• [references/examples.md](references/examples.md) -- App setup, SolidStart setup, version-specific patterns
• [references/anti-patterns.md](references/anti-patterns.md) -- Wrong imports, version mismatches, ecosystem confusion

Official Sources

• https://docs.solidjs.com/concepts/intro-to-reactivity
• https://docs.solidjs.com/solid-start
• https://docs.solidjs.com/solid-router
• https://github.com/solidjs/solid
• https://github.com/solidjs-community/solid-primitives

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Impertio-Studio
• Source: Impertio-Studio/SolidJS-Claude-Skill-Package
• License: MIT

Install and usage instructions live in the source repository linked above.