Skip to main content
CodeSpeedTest
Languages
Start TypingJump into a test — pick any languageAdaptive TrainingUnlock chars as you master themPractice DrillsFocused sessions targeting weak spotsDaily ChallengesNew coding challenges every dayRace ModeCompete against others in real timeAI OpponentRace against an AI at your WPM levelTournamentsLive coding speed tournamentsArcade GamesZType, Overkill Survival, Glyphica & moreGamificationXP, coins, badges & quests
LeaderboardGlobal rankings for every languageCertificatesEarn verifiable Bronze / Silver / Gold certsActivityDaily streaks & historical analyticsProfileYour stats, badges & achievements
Browse Languages500+ languages with real code examplesBlogTips, guides & deep divesFree ToolsWPM calculator, typing speed report & moreFAQCommon questions answeredGetting StartedNew to CodeSpeedTest?AboutOur story & missionSupportGet help — Pro users get priorityContactGet in touch with the team
Pricing
  1. Home
  2. /
  3. Learn
  4. /
  5. Solid-js

Learn Solid-js - 10 Code Examples & CST Typing Practice Test

SolidJS is a fast, reactive JavaScript library for building user interfaces using fine-grained reactivity and a compile-time optimized rendering model. It emphasizes performance, predictable state updates, and minimal abstraction.

View all 10 Solid-js code examples →
Solid.js Counter ComponentSolid.js Counter with LocalStorageSolid.js Counter with Computed ParitySolid.js Counter with Signal WatchSolid.js Counter with Conditional ThemeSolid.js Counter with Derived StyleSolid.js Counter with Event DispatcherSolid.js Counter with Input BindingSolid.js Counter with Slot ControlsSolid.js Counter with onMount Hook

Learn SOLID-JS with Real Code Examples

Updated Nov 22, 2025

Explain

SolidJS allows developers to build highly performant, reactive web applications using signals and fine-grained updates.

It uses JSX for declarative UI composition, similar to React.

Solid avoids a virtual DOM and instead compiles templates into optimized DOM instructions.

Core Features

Signals for state management

Effects and memos for reactive computations

JSX templating with compile-time compilation

Context API for dependency management

Solid Router for SPA navigation

Basic Concepts Overview

Signals (`createSignal`)

Effects (`createEffect`)

Memos (`createMemo`)

Components using JSX

Stores for structured state

Project Structure

src/ - main application code

src/components - reusable UI

src/routes - route-based files (if router used)

public/ - static assets

vite.config.js - build configuration

Building Workflow

Define components with functions returning JSX

Use signals for reactive state

Use effects for side effects

Use Solid Router for navigation

Build with Vite using `npm run build`

Difficulty Use Cases

Beginner: simple component-based apps

Intermediate: SPA with Solid Router

Advanced: streaming SSR and hydration

Expert: fine-grained reactive architecture

Community: building Solid libraries or primitives

Comparisons

Faster than React due to no VDOM

More predictable reactivity than Vue

More fine-grained than Svelte

Smaller runtime than Angular or React

Closer to Knockout or MobX in reactivity model

Versioning Timeline

2020 - SolidJS 1.0 early release

2021 - SolidJS 1.0 official release

2023 - Solid Start beta for SSR apps

2024 - Ecosystem libraries mature

2025 - SolidJS 2.0 direction begins

Glossary

Signal: a reactive value container

Effect: side-effect triggered on signal change

Memo: cached reactive computation

JSX: declarative UI syntax

Hydration: attaching events to SSR output

Installation Setup

Install Node.js and npm

Create a project via `npx degit solidjs/templates/js project-name`

`npm install` for dependencies

Launch dev server with `npm run dev`

Use editors like VSCode with JSX/TSX support

Environment Setup

Install Node.js

Install Vite or Solid Start CLI

Use VSCode with JSX/TSX plugins

Enable TypeScript for type safety

Use eslint + prettier for consistency

Config Files

vite.config.js - config for Vite

tsconfig.json - TypeScript config

solid.config.js - Solid Start config

package.json - scripts and dependencies

index.html - entry template

Cli Commands

npm create solid@latest - create new app

npm run dev - local development

npm run build - production build

npm run start - serve SSR output

npm test - run tests

Internationalization

Use i18next or solid-i18n

Load translation JSON files

Create translation signals

Locale-aware formatting

Dynamic locale loading

Accessibility

ARIA attributes in JSX

Focusable components

Semantic HTML encouraged

Keyboard navigation support

Screen reader testing

Ui Styling

CSS modules

TailwindCSS

Sass or Less

UnoCSS

Styled-components-like libraries

State Management

Signals for primitive state

Stores for object state

Context API for global state

Reducers via libraries

TanStack Query for async data

Data Management

Fetch API for REST calls

GraphQL via urql or Apollo

WebSockets for real-time updates

Server functions in Solid Start

Local storage or IndexedDB

Architecture

Fine-grained reactive graph

Signal-based state system

JSX compiled to direct DOM instructions

No Virtual DOM

Component-driven structure

Rendering Model

JSX templates compiled at build time

Fine-grained reactive graph updates DOM

No VDOM diffing

Streaming SSR by default

Selective hydration

Architectural Patterns

Component-driven architecture

Reactive primitives for state

Context-based dependency injection

Signal-driven data flow

SSR-first architecture in Solid Start

Real World Architectures

Streaming SSR e-commerce frontends

Real-time data dashboards

Micro-frontend widgets

Hybrid CSR + SSR apps

High-performance SPAs

Design Principles

Fine-grained reactivity

Compile-time optimization

Simplicity and predictability

Direct DOM updates

Minimal runtime overhead

Scalability Guide

Use stores for complex states

Split components into reactive islands

Use lazy components for large UIs

Optimize effects and derived state

Use Solid Start for scalable SSR

Migration Guide

Convert React components to Solid components

Replace useState with createSignal

Remove useEffect patterns

Rewrite lifecycle patterns to reactivity

Adapt routing and global state

Performance Notes

Fine-grained updates only re-render affected parts

Use memos to optimize expensive computations

Prefer signals over stores for simple states

Avoid unnecessary closures inside effects

Streaming SSR improves TTFB

Security Notes

Solid escapes HTML by default in JSX

Avoid `innerHTML` unless sanitized

Use secure APIs for authentication

Follow standard web security best practices

Ensure dependencies are updated regularly

Monitoring Analytics

Profile signals and effects

Use Web Vitals tracking

Monitor hydration performance

Debug reactive flows

Use browser performance tools

Code Quality

Use eslint + prettier

Follow Solid style guide

Test components with Vitest

Use typed signals with TypeScript

Split logic using reusable primitives

Practical Examples

Real-time stock dashboard

Counter app using signals

Chat app with live updates

Widget embedded in existing websites

Streaming SSR blog or e-commerce UI

Troubleshooting

Check if signals are called as functions

Avoid mutating primitives directly

Ensure effects do not create infinite loops

Debug hydration mismatches in SSR apps

Check Vite configuration for JSX settings

Testing Guide

Use Vitest for unit testing

Use @solidjs/testing-library for components

Mock signals and stores

Test reactive flows and effects

Snapshot test JSX output

Deployment Options

Deploy static output with Netlify or Vercel

Use Solid Start for SSR on Node servers

Embed widgets directly into websites

Deploy SPA via Cloudflare Pages

Use Docker for containerized apps

Tools Ecosystem

Solid Router for SPA navigation

TanStack Query for data fetching

Vite for bundling

Vitest for testing

Solid Start (meta-framework for SSR)

Integrations

REST APIs and GraphQL

WebSockets for real-time UI

TailwindCSS, UnoCSS for styling

Firebase or Supabase backend

PWAs with Vite plugins

Productivity Tips

Use signals instead of stores when possible

Leverage JSX compilation for performance

Use context sparingly

Keep effects pure and side-effect-only

Use Solid DevTools extension

Challenges

Build a counter with fine-grained reactivity

Create a todo app with stores

Build a small SPA with Solid Router

Implement global state using context

Practice SSR streaming using Solid Start

Learning Path

Learn basic JavaScript + JSX

Understand signals and fine-grained reactivity

Build components and manage state

Learn routing, stores, global state

Build SSR apps using Solid Start

Skill Improvement Plan

Week 1: JSX, components, signals

Week 2: Effects, memos, derived state

Week 3: Routing + async data

Week 4: Stores + advanced reactivity

Week 5: SSR, hydration, and deployment

Interview Questions

What makes SolidJS different from React?

Explain fine-grained reactivity.

How do signals work in SolidJS?

Why does SolidJS not use a Virtual DOM?

Explain Solid's compilation model.

Cheat Sheet

createSignal() - core reactive primitive

createEffect() - runs on dependencies

createMemo() - memoized computation

<Show when={} fallback={}> - conditional rendering

Solid Router: <Route path='/'>

Books

SolidJS In Action (upcoming)

Mastering Fine-Grained Reactivity (community book)

Solid Start Handbook (community guide)

Building UI with SolidJS

Web Performance with Modern Frameworks

Tutorials

SolidJS Official Tutorial

Solid Start official guide

Fireship SolidJS videos

Traversy Media introduction to Solid

FreeCodeCamp Solid tutorials

Official Docs

https://www.solidjs.com/docs

https://start.solidjs.com

https://github.com/solidjs/solid

Community Links

SolidJS Discord

GitHub Solid organization

Reddit r/SolidJS

Twitter/X SolidJS community

SolidJS YouTube channel

Community Support

SolidJS official Discord

GitHub discussions

Reddit r/SolidJS

SolidJS Twitter community

Community-built libraries

Monetization

High-performance SaaS dashboards

Embedded widgets

Real-time trading apps

Premium UI frameworks for Solid

Courses or consulting

Future Roadmap

SolidJS 2.0 improvements

Solid Start stable release

Better server actions

Improved devtools

More ecosystem libraries

When Not To Use

Enterprise apps needing mature tooling

Teams heavily invested in React ecosystem

Apps requiring many third-party integrations

Fully static sites better suited for Astro

Large organizations with strict framework guidelines

Final Summary

SolidJS is a fast, reactive UI library built on fine-grained reactivity.

It compiles JSX into highly optimized DOM operations.

Great for performance-critical UI and reactive interfaces.

Easy to learn for React users but more predictable.

Ideal for dashboards, widgets, and real-time applications.

Faq

Is Solid like React?

Yes, it uses JSX but avoids the VDOM.

Does Solid use a Virtual DOM?

No - it uses direct DOM updates.

Is Solid production ready?

Yes, used by many startups and projects.

Why is Solid so fast?

Fine-grained reactivity without diffing.

Does Solid support TypeScript?

Yes, first-class TypeScript support.

Code Sample Descriptions

1

Solid.js Counter Component

import { createSignal } from 'solid-js';

function Counter() {
    const [count, setCount] = createSignal(0);
    const [isDark, setIsDark] = createSignal(false);

    const increment = () => setCount(count() + 1);
    const decrement = () => setCount(count() - 1);
    const reset = () => setCount(0);
    const toggleTheme = () => setIsDark(!isDark());

    return (
        <div class={isDark() ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {count()}</h2>
        <div>
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
        <button onClick={reset}>Reset</button>
        </div>
        <button onClick={toggleTheme}>Switch to {isDark() ? 'Light' : 'Dark'} Theme</button>
        </div>
    );
}

export default Counter;

Demonstrates a simple counter component using Solid.js reactive signals and event handling.

Let’s Try →
2

Solid.js Counter with LocalStorage

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

function Counter() {
    const [count, setCount] = createSignal(0);
    const [isDark, setIsDark] = createSignal(false);

    onMount(() => {
        const savedCount = localStorage.getItem('count');
        if (savedCount) setCount(parseInt(savedCount, 10));
        const savedTheme = localStorage.getItem('isDark');
        if (savedTheme) setIsDark(savedTheme === 'true');
    });

    const updateAndSave = (newCount) => {
        setCount(newCount);
        localStorage.setItem('count', newCount);
    };

    return (
        <div class={isDark() ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {count()}</h2>
        <button onClick={() => updateAndSave(count() + 1)}>+</button>
        <button onClick={() => updateAndSave(count() - 1)}>-</button>
        <button onClick={() => updateAndSave(0)}>Reset</button>
        <button onClick={() => {
        setIsDark(!isDark());
        localStorage.setItem('isDark', !isDark());
        }}>Toggle Theme</button>
        </div>
    );
}

export default Counter;

Persists counter value in localStorage using Solid.js signals.

Let’s Try →
3

Solid.js Counter with Computed Parity

import { createSignal, createMemo } from 'solid-js';

function Counter() {
    const [count, setCount] = createSignal(0);
    const parity = createMemo(() => (count() % 2 === 0 ? 'Even' : 'Odd'));

    return (
        <div>
        <h2>Counter: {count()} ({parity()})</h2>
        <button onClick={() => setCount(count() + 1)}>+</button>
        <button onClick={() => setCount(count() - 1)}>-</button>
        </div>
    );
}

export default Counter;

Displays whether the counter is even or odd using a derived signal.

Let’s Try →
4

Solid.js Counter with Signal Watch

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

function Counter() {
    const [count, setCount] = createSignal(0);
    createEffect(() => console.log('Counter changed:', count()));

    return (
        <div>
        <h2>Counter: {count()}</h2>
        <button onClick={() => setCount(count() + 1)}>+</button>
        <button onClick={() => setCount(count() - 1)}>-</button>
        </div>
    );
}

export default Counter;

Logs counter changes using a Solid.js effect.

Let’s Try →
5

Solid.js Counter with Conditional Theme

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

function Counter() {
    const [count, setCount] = createSignal(0);
    const [isDark, setIsDark] = createSignal(false);

    createEffect(() => {
        if (count() > 5) setIsDark(true);
        else setIsDark(false);
    });

    return (
        <div class={isDark() ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {count()}</h2>
        <button onClick={() => setCount(count() + 1)}>+</button>
        <button onClick={() => setCount(count() - 1)}>-</button>
        </div>
    );
}

export default Counter;

Automatically switches theme to dark when counter exceeds 5.

Let’s Try →
6

Solid.js Counter with Derived Style

import { createSignal, createMemo } from 'solid-js';

function Counter() {
    const [count, setCount] = createSignal(0);
    const bgColor = createMemo(() => count() > 0 ? 'lightgreen' : 'lightcoral');

    return (
        <div style={{ background: bgColor() }}>
        <h2>Counter: {count()}</h2>
        <button onClick={() => setCount(count() + 1)}>+</button>
        <button onClick={() => setCount(count() - 1)}>-</button>
        </div>
    );
}

export default Counter;

Applies dynamic styles based on counter value using a memo.

Let’s Try →
7

Solid.js Counter with Event Dispatcher

import { createSignal } from 'solid-js';

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

    const dispatchUpdate = () => {
        const event = new CustomEvent('counterUpdate', { detail: count() });
        document.dispatchEvent(event);
    };

    return (
        <div>
        <h2>Counter: {count()}</h2>
        <button onClick={() => { setCount(count() + 1); dispatchUpdate(); }}>+</button>
        <button onClick={() => { setCount(count() - 1); dispatchUpdate(); }}>-</button>
        </div>
    );
}

export default Counter;

Dispatches custom events on counter updates.

Let’s Try →
8

Solid.js Counter with Input Binding

import { createSignal } from 'solid-js';

function Counter() {
    const [count, setCount] = createSignal(0);
    return (
        <div>
        <h2>Counter: {count()}</h2>
        <input type='number' value={count()} onInput={(e) => setCount(+e.target.value)} />
        </div>
    );
}

export default Counter;

Binds counter to an input field using two-way binding.

Let’s Try →
9

Solid.js Counter with Slot Controls

import { createSignal } from 'solid-js';

function Counter(props) {
    const [count, setCount] = createSignal(0);
    return (
        <div>
        <h2>Counter: {count()}</h2>
        {props.children}
        </div>
    );
}

export default Counter;

Uses a slot to allow custom button placement in a Solid.js component.

Let’s Try →
10

Solid.js Counter with onMount Hook

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

function Counter() {
    const [count, setCount] = createSignal(0);
    onMount(() => console.log('Mounted with count =', count()));
    return (
        <div>
        <h2>Counter: {count()}</h2>
        <button onClick={() => setCount(count() + 1)}>+</button>
        <button onClick={() => setCount(count() - 1)}>-</button>
        </div>
    );
}

export default Counter;

Uses Solid.js onMount hook to log initial counter state.

Let’s Try →

Frequently Asked Questions about Solid-js

What is Solid-js?

SolidJS is a fast, reactive JavaScript library for building user interfaces using fine-grained reactivity and a compile-time optimized rendering model. It emphasizes performance, predictable state updates, and minimal abstraction.

What are the primary use cases for Solid-js?

High-performance web apps. Highly interactive dashboards. Dynamic UI widgets and embedded components. Single-page applications (SPAs). Reactive data-driven interfaces

What are the strengths of Solid-js?

Extremely high performance (beats React, Svelte, Vue in many benchmarks). Predictable signal-based state updates. Simple mental model compared to frameworks with VDOM. Small bundle size and fast runtime. JSX familiarity for React developers

What are the limitations of Solid-js?

Smaller ecosystem compared to React or Vue. Not ideal for huge enterprise apps requiring standardized patterns. Requires understanding of reactive primitives. Less community-provided tooling. SSR requires some learning for streaming approach

How can I practice Solid-js typing speed?

CodeSpeedTest offers 10+ real Solid-js code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

CReactPythonC++RustTypeScriptKotlinPHPJavaC#RubyMqlCqlN1qlCypherGremlinPartiqlHaskellElixirFsharpView all languages →
CodeSpeedTest

Improve your coding speed, code accuracy, and programming syntax WPM with practice sessions across 500+ programming languages.

Quick Links

HomeAboutFeaturesGetting StartedLanguages

Legal & Support

Pro ⚡ PricingContactPrivacy PolicyTerms of Service

Connect

CodeSpeedTest on GitHubCodeSpeedTest on TwitterEmail CodeSpeedTest

© 2026 CodeSpeedTest. All rights reserved.