Solidjs

SolidJS Documentation

Available Resources

Overview

• Overview: Solid is a reactive JavaScript framework for building fast, efficient UIs. Learn about fine-grained reactivity and modern web development.
  • URL: /index.md

Concepts

• Basics: Learn Solid component fundamentals: creating reusable UI blocks, component trees, lifecycles, and proper import/export patterns.

  • URL: /concepts/components/basics.md

• Class and style: Style Solid components with CSS classes and inline styles. Learn dynamic styling, classList usage, and theme implementation.

  • URL: /concepts/components/class-style.md

• Props: Pass and manage component props in Solid while maintaining reactivity. Learn mergeProps, splitProps, and best practices.

  • URL: /concepts/components/props.md

• Event handlers: Handle user interactions in Solid with event delegation and native events for optimal performance and resource management.

  • URL: /concepts/components/event-handlers.md

• Intro to reactivity: Master Solid's reactive system fundamentals: signals, subscribers, and automatic UI updates for responsive applications.

  • URL: /concepts/intro-to-reactivity.md

• Conditional rendering: Conditionally render UI elements in Solid using Show, Switch, and Match components for clean, readable conditional logic.

  • URL: /concepts/control-flow/conditional-rendering.md

• List rendering: Efficiently render dynamic lists in Solid using For and Index components. Optimize performance for different data scenarios.

  • URL: /concepts/control-flow/list-rendering.md

• Dynamic: Render components dynamically at runtime with Solid's Dynamic component. Build flexible UIs with runtime component selection.

  • URL: /concepts/control-flow/dynamic.md

• Error boundary: Catch and handle rendering errors gracefully with ErrorBoundary. Prevent app crashes and provide user-friendly error recovery.

  • URL: /concepts/control-flow/error-boundary.md

• Portal: Learn how Portal renders elements outside the normal DOM flow to solve z-index and overflow issues for modals and popups.

  • URL: /concepts/control-flow/portal.md

• Understanding JSX: Write HTML-like syntax in JavaScript with JSX to create reactive components with dynamic expressions and event handlers.

  • URL: /concepts/understanding-jsx.md

• Derived signals: Create reactive derived values that automatically update when their dependencies change using Solid's derived signals.

  • URL: /concepts/derived-values/derived-signals.md

• Memos: Optimize expensive computations with memos that cache results and only recalculate when dependencies actually change.

  • URL: /concepts/derived-values/memos.md

• Signals: Create reactive state with signals - the foundation of Solid's reactivity system for automatic UI updates and tracking.

  • URL: /concepts/signals.md

• Effects: Manage side effects like DOM updates, API calls, and subscriptions that respond automatically to reactive state changes.

  • URL: /concepts/effects.md

• Context: Share data across component trees with Solid's Context API. Avoid prop drilling and manage global application state effectively.

  • URL: /concepts/context.md

• Stores: Manage complex nested state efficiently with stores that provide fine-grained reactivity for objects and arrays in Solid.

  • URL: /concepts/stores.md

• Refs: Access and manipulate DOM elements directly using refs, forward refs between components, and create custom directives.

  • URL: /concepts/refs.md

Advanced Concepts

• Fine-grained reactivity: Master Solid's fine-grained reactivity system for targeted UI updates, optimal performance, and efficient state management patterns.
  • URL: /advanced-concepts/fine-grained-reactivity.md

Quick start

• Quick start: Start building with Solid quickly. Try the playground, create projects with templates, and get your first Solid app running in minutes.
  • URL: /quick-start.md

Guides

• CSS modules: Use CSS Modules in Solid for locally scoped styles, preventing global conflicts and ensuring component style encapsulation.

  • URL: /guides/styling-components/css-modules.md

• LESS: Integrate LESS preprocessor in Solid apps for variables, mixins, and programmatic CSS features to write cleaner stylesheets.

  • URL: /guides/styling-components/less.md

• Macaron: Style Solid components with Macaron's compile-time CSS-in-JS, offering type-safe styled components and variant-based styling.

  • URL: /guides/styling-components/macaron.md

• SASS: Configure SASS/SCSS in Solid projects for advanced CSS preprocessing with variables, nesting, mixins, and modular stylesheets.

  • URL: /guides/styling-components/sass.md

• Tailwind CSS v3: Set up Tailwind CSS v3 in Solid apps for utility-first styling, rapid development, and consistent responsive design patterns.

  • URL: /guides/styling-components/tailwind-v3.md

• Tailwind CSS: Set up Tailwind CSS v4 in your Solid app for utility-first styling. Configure PostCSS, import styles, and build responsive UIs efficiently.

  • URL: /guides/styling-components/tailwind.md

• UnoCSS: Integrate UnoCSS with Solid for on-demand utility CSS. Configure Vite plugin, import styles, and create efficient atomic CSS designs quickly.

  • URL: /guides/styling-components/uno.md

• Styling your components: Explore Solid's flexible styling options: CSS preprocessors, CSS Modules, CSS-in-JS, and utility frameworks for component styling needs.

  • URL: /guides/styling-your-components.md

• AWS via Flightcontrol: Deploy Solid apps to AWS with Flightcontrol's automated platform featuring GitHub integration and continuous deployment.

  • URL: /guides/deployment-options/aws-via-flightcontrol.md

• AWS via SST: Deploy SolidStart apps to AWS Lambda or containers using SST framework with streamlined configuration and deployment.

  • URL: /guides/deployment-options/aws-via-sst.md

• Cloudflare: Deploy Solid apps to Cloudflare Pages for fast, global edge hosting with built-in CDN and simple Git integration setup.

  • URL: /guides/deployment-options/cloudflare.md

• Firebase: Host your Solid application on Firebase with Google's infrastructure for reliable static site hosting and easy deployment.

  • URL: /guides/deployment-options/firebase.md

• Netlify: Deploy Solid apps to Netlify with automatic builds from Git, instant rollbacks, and powerful deployment features included.

  • URL: /guides/deployment-options/netlify.md

• Railway: Deploy Solid projects to Railway platform with GitHub integration, custom domains, and straightforward deployment process.

  • URL: /guides/deployment-options/railway.md

• Stormkit: Deploy Solid apps as static sites or SPAs on Stormkit with serverless functions support and Git provider integration.

  • URL: /guides/deployment-options/stormkit.md

• Vercel: Deploy SolidStart apps to Vercel with automatic builds, serverless functions, and GitHub integration for seamless production hosting.

  • URL: /guides/deployment-options/vercel.md

• Zerops: Deploy SolidStart apps to Zerops cloud platform with support for both static sites and SSR Node.js applications in production.

  • URL: /guides/deployment-options/zerops.md

• State management: Learn Solid's state management with signals, derived values, memos, and effects for reactive data flow and component updates.

  • URL: /guides/state-management.md

• Routing & navigation: Implement client-side routing in Solid apps with dynamic routes, nested layouts, route parameters, and lazy-loaded components.

  • URL: /guides/routing-and-navigation.md

• Complex state management: Master complex state management in Solid using stores and context to build scalable, maintainable applications efficiently.

  • URL: /guides/complex-state-management.md

• Fetching data: Master data fetching in Solid with createResource for async operations, loading states, error handling, and Suspense boundaries.

  • URL: /guides/fetching-data.md

• Testing: Test Solid apps with Vitest and Testing Library. Write component tests, simulate user interactions, and ensure code quality effectively.

  • URL: /guides/testing.md

• Deploy your app: Deploy your Solid application to popular hosting platforms including Cloudflare, Vercel, Netlify, AWS, and more with guides.

  • URL: /guides/deploying-your-app.md

Configuration

• Environment variables: Configure public and private environment variables in Solid apps using Vite's built-in support for secure configuration.

  • URL: /configuration/environment-variables.md

• TypeScript: Learn to configure TypeScript with SolidJS for enhanced type safety, better IDE support, and reliable component development.

  • URL: /configuration/typescript.md

Reference

• createEffect: Learn how to use createEffect to run side effects when reactive dependencies change. Perfect for DOM manipulation and external library integration.

  • URL: /reference/basic-reactivity/create-effect.md

• createMemo: Use createMemo to efficiently compute and cache derived values. Prevent expensive recalculations and optimize your Solid.js application's performance.

  • URL: /reference/basic-reactivity/create-memo.md

• createResource: Fetch async data with createResource. Handles loading states, errors, and integrates with Suspense for seamless data fetching in Solid.js applications.

  • URL: /reference/basic-reactivity/create-resource.md

• createSignal: Create reactive state with createSignal, Solid's fundamental primitive. Track values that change over time and automatically update your UI when they do.

  • URL: /reference/basic-reactivity/create-signal.md

• children: Resolve a component's children prop into a stable accessor.

  • URL: /reference/component-apis/children.md

• createContext: Create a context object with a Provider component and a default value.

  • URL: /reference/component-apis/create-context.md

• createUniqueId: Generate a unique string for the current render or hydration context.

  • URL: /reference/component-apis/create-unique-id.md

• lazy: Create a component that loads its module lazily from a dynamic import.

  • URL: /reference/component-apis/lazy.md

• useContext: Read the current value of a context object created by createContext.

  • URL: /reference/component-apis/use-context.md

• createDynamic: Render a component or intrinsic element selected at runtime from an accessor.

  • URL: /reference/components/create-dynamic.md

• : Render a component or intrinsic element selected at runtime.

  • URL: /reference/components/dynamic.md

• : Catch errors thrown while rendering or updating a subtree and render fallback content.

  • URL: /reference/components/error-boundary.md

• : Render a list by item identity with a child function that receives the item and an index accessor.

  • URL: /reference/components/for.md

• : Render a list by index with a child function that receives an item accessor and a numeric index.

  • URL: /reference/components/index-component.md

• : Render children during server rendering and skip hydration for that subtree on the client.

  • URL: /reference/components/no-hydration.md

• : Render children into a DOM node outside the parent DOM hierarchy.

  • URL: /reference/components/portal.md

• : Render children when a condition is truthy, with optional fallback content and keyed behavior.

  • URL: /reference/components/show.md

• : Coordinate how multiple suspense boundaries reveal their content.

  • URL: /reference/components/suspense-list.md

• : Render fallback content while suspense-tracked async dependencies under the boundary are pending.

  • URL: /reference/components/suspense.md

• / : Render the first matching branch from a set of mutually exclusive conditions.

  • URL: /reference/components/switch-and-match.md

• attr:*: Force a JSX key to be written as an attribute instead of a property.

  • URL: /reference/jsx-attributes/attr.md

• bool:*: Control whether an attribute is present by writing through bool:*.

  • URL: /reference/jsx-attributes/bool.md

• classList: Toggle element classes from an object of class names and boolean values.

  • URL: /reference/jsx-attributes/classlist.md

• innerHTML: Set an element's innerHTML property from JSX.

  • URL: /reference/jsx-attributes/innerhtml.md

• on:*: Attach an event listener directly to an element with addEventListener.

  • URL: /reference/jsx-attributes/on.md

• on*: Attach an event handler with Solid's delegated event system when the event is supported.

  • URL: /reference/jsx-attributes/on_.md

• @once: Mark a JSX expression as static at compile time.

  • URL: /reference/jsx-attributes/once.md

• prop:*: Force a JSX key to be written as a DOM property instead of an attribute.

  • URL: /reference/jsx-attributes/prop.md

• ref: Capture a rendered element or forwarded component ref.

  • URL: /reference/jsx-attributes/ref.md

• style: Set inline styles with a CSS string or an object of property names and values.

  • URL: /reference/jsx-attributes/style.md

• textContent: Set an element's textContent property from JSX with plain text content.

  • URL: /reference/jsx-attributes/textcontent.md

• use:*: Attach a directive function to a native element with use:*.

  • URL: /reference/jsx-attributes/use.md

• onCleanup: Register a cleanup function on the current reactive scope. The cleanup runs when the scope is disposed or refreshed.

  • URL: /reference/lifecycle/on-cleanup.md

• onMount: Register a function that runs once after the initial render of the current component or root.

  • URL: /reference/lifecycle/on-mount.md

• batch: Group reactive updates so downstream computations run after the batch completes.

  • URL: /reference/reactive-utilities/batch.md

• catchError: Establish an error boundary for work performed inside the provided function.

  • URL: /reference/reactive-utilities/catch-error.md

• createRoot: Create non-tracked owner scopes in SolidJS for manual memory management. Essential for nested tracking scopes and preventing auto-disposal.

  • URL: /reference/reactive-utilities/create-root.md

• from: Convert an external producer or subscribable into a Solid accessor.

  • URL: /reference/reactive-utilities/from.md

• getOwner: Return the owner for the currently executing reactive scope.

  • URL: /reference/reactive-utilities/get-owner.md

• indexArray: Reactively map an array by index and return an accessor for the mapped result.

  • URL: /reference/reactive-utilities/index-array.md

• mapArray: Reactively map an array by item identity and return an accessor for the mapped result.

  • URL: /reference/reactive-utilities/map-array.md

• mergeProps: Merge multiple prop sources into a single object while preserving reactive property access.

  • URL: /reference/reactive-utilities/merge-props.md

• observable: Convert a Solid accessor into an Observable-compatible object.

  • URL: /reference/reactive-utilities/observable.md

• on: Control effect dependencies explicitly with SolidJS's on utility. Define when effects run and manage tracking behavior for precise reactivity.

  • URL: /reference/reactive-utilities/on-util.md

• runWithOwner: Execute a function under the provided owner.

  • URL: /reference/reactive-utilities/run-with-owner.md

• splitProps: Split a reactive props object into multiple reactive subsets and a remainder object.

  • URL: /reference/reactive-utilities/split-props.md

• startTransition: Start a transition and return a promise that resolves when the transition completes.

  • URL: /reference/reactive-utilities/start-transition.md

• untrack: Execute a function without collecting dependencies from the current reactive scope.

  • URL: /reference/reactive-utilities/untrack.md

• useTransition: Return a pending-state accessor and a function that starts a transition.

  • URL: /reference/reactive-utilities/use-transition.md

• DEV: Read the development-only DEV export from solid-js.

  • URL: /reference/rendering/dev.md

• hydrate: Hydrate server-rendered HTML and attach Solid's client-side behavior to an existing DOM subtree.

  • URL: /reference/rendering/hydrate.md

• hydrationScript: Generate the SSR hydration bootstrap script with HydrationScript or generateHydrationScript.

  • URL: /reference/rendering/hydration-script.md

• isDev: Read the boolean that indicates whether the imported solid-js/web bundle is the development browser bundle.

  • URL: /reference/rendering/is-dev.md

• isServer: Read whether the current solid-js/web bundle is the server bundle.

  • URL: /reference/rendering/is-server.md

• renderToStream: Stream server-rendered HTML and continue writing async content as it resolves.

  • URL: /reference/rendering/render-to-stream.md

• renderToStringAsync: Render HTML to a string after async suspense boundaries settle.

  • URL: /reference/rendering/render-to-string-async.md

• renderToString: Render HTML to a string synchronously on the server.

  • URL: /reference/rendering/render-to-string.md

• render: Mount a Solid root into a DOM node in the browser.

  • URL: /reference/rendering/render.md

• createComputed: Create an immediate reactive computation that runs synchronously when created and whenever its dependencies change.

  • URL: /reference/secondary-primitives/create-computed.md

• createDeferred: Create a deferred accessor whose updates are scheduled for later execution or when the timeout is reached.

  • URL: /reference/secondary-primitives/create-deferred.md

• createReaction: Create a reaction that runs once when the tracked expression is invalidated.

  • URL: /reference/secondary-primitives/create-reaction.md

• createRenderEffect: Create a reactive computation that runs immediately during the render phase.

  • URL: /reference/secondary-primitives/create-render-effect.md

• createSelector: Create a keyed boolean accessor that reports whether a key matches the current source value.

  • URL: /reference/secondary-primitives/create-selector.md

• getRequestEvent: Read the current request event from solid-js/web.

  • URL: /reference/server-utilities/get-request-event.md

• createMutable: Create a mutable store proxy.

  • URL: /reference/store-utilities/create-mutable.md

• createStore: Create a reactive store and a setter function for structured state.

  • URL: /reference/store-utilities/create-store.md

• modifyMutable: Apply a modifier to a mutable store inside a batch.

  • URL: /reference/store-utilities/modify-mutable.md

• produce: Create a store modifier that applies changes by mutating the current state through a helper proxy.

  • URL: /reference/store-utilities/produce.md

• reconcile: Create a store modifier that reconciles existing state with a new value.

  • URL: /reference/store-utilities/reconcile.md

• unwrap: Remove store proxy wrapping from a store or store subtree.

  • URL: /reference/store-utilities/unwrap.md

How to Use This Skill

Reference these resources when working with SolidJS Documentation.