# Solidjs > SolidJS Documentation documentation and resources. Use this skill when working with SolidJS Documentation or when the user mentions solidjs documentation. - Skill: `hk-vk/solidjs` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add hk-vk/solidjs` - Raw SKILL.md: https://api.skillmd.com/api/skills/hk-vk/solidjs/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Docs & Writing - Author: hk-vk (https://skillmd.com/u/hk-vk) - Updated: 2026-09-10 - Page: https://skillmd.com/skills/hk-vk/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.