# SolidJS Documentation Documentation for SolidJS, the signals-powered UI framework - [Install and configure](/solid-meta/getting-started/installation-and-setup.md): Install and configure @solidjs/meta for head tag management. Set up dynamic titles, meta tags, and SEO optimization in Solid apps. - [Client setup](/solid-meta/getting-started/client-setup.md): Manage document head tags in Solid apps. Add titles, meta tags, and links dynamically for better SEO and social media sharing. - [Server setup](/solid-meta/getting-started/server-setup.md): Configure server-side rendering for Solid Meta tags with MetaProvider. Learn to properly inject head tags in SSR for optimal SEO and performance. - [Overview](/solid-meta.md): Solid Meta provides asynchronous SSR-ready document head management. Define meta tags at any component level for flexible SEO and metadata control. - [Base](/solid-meta/reference/meta/base.md): Base renders a base element through Solid Meta. - [Link](/solid-meta/reference/meta/link.md): Link renders a link element through Solid Meta. - [Meta](/solid-meta/reference/meta/meta.md): Meta renders a meta element through Solid Meta. - [MetaProvider](/solid-meta/reference/meta/metaprovider.md): MetaProvider provides the context used by Solid Meta head tags. - [Style](/solid-meta/reference/meta/style.md): Style renders a style element through Solid Meta. - [Title](/solid-meta/reference/meta/title.md): Title renders a title element through Solid Meta. - [useHead](/solid-meta/reference/meta/use-head.md): useHead adds a custom head tag through Solid Meta. - [Overview](/solid-meta/v1.md): Solid Meta 1.0 provides document head management for Solid 2.0 — declare head tags anywhere with streaming-correct SSR and flicker-free hydration. - [Getting started](/solid-meta/v1/getting-started.md): Install Solid Meta 1.0 and manage document head tags from anywhere in your Solid 2.0 application. - [Migrating from 0.x](/solid-meta/v1/migrating-from-v0.md): Migrate your application from @solidjs/meta 0.x to 1.0. - [Base](/solid-meta/v1/reference/meta/base.md): Base sets the document base URL through Solid Meta during server rendering. - [Head](/solid-meta/v1/reference/meta/head.md): Head groups its child head tags into one replacement set through Solid Meta. - [Link](/solid-meta/v1/reference/meta/link.md): Link adds a link element to the document head through Solid Meta. - [Meta](/solid-meta/v1/reference/meta/meta.md): Meta adds a meta element to the document head through Solid Meta. - [Script](/solid-meta/v1/reference/meta/script.md): Script adds a script element to the document head through Solid Meta. - [Style](/solid-meta/v1/reference/meta/style.md): Style adds an inline style element to the document head through Solid Meta. - [Stylesheet](/solid-meta/v1/reference/meta/stylesheet.md): Stylesheet adds a stylesheet link element to the document head through Solid Meta. - [Title](/solid-meta/v1/reference/meta/title.md): Title sets the document title through Solid Meta. - [Installation and setup](/solid-router/getting-started/installation-and-setup.md): Learn how to install and configure Solid Router for client and server-side routing in your single-page applications with step-by-step setup guide. - [Component routing](/solid-router/getting-started/component.md): Define routes using JSX components in SolidJS Router for intuitive, template-based routing in your applications. - [Config-based routing](/solid-router/getting-started/config.md): Configure SolidJS routes with config objects for centralized routing, lazy loading, and optimized performance. - [Linking routes](/solid-router/getting-started/linking-routes.md): Create navigation links between routes using anchor tags and the A component with active state styling and automatic base path handling. - [Overview](/solid-router.md): Solid Router is the universal routing solution for Solid applications, enabling client and server-side navigation in single-page applications. - [Navigation](/solid-router/concepts/navigation.md): Navigate between routes in SolidJS using links, programmatic navigation, and redirects for seamless user experiences. - [Path parameters](/solid-router/concepts/path-parameters.md): Capture and validate dynamic URL parameters in SolidJS routes for flexible content display and data-driven pages. - [Search parameters](/solid-router/concepts/search-parameters.md): Manage query strings and search parameters in SolidJS for filtering, pagination, and maintaining state in the URL. - [Catch-all routes](/solid-router/concepts/catch-all.md): Create catch-all routes in SolidJS to handle 404 errors and redirect users from invalid URLs to proper fallback pages. - [Dynamic routes](/solid-router/concepts/dynamic-routes.md): Build dynamic routes with parameters in SolidJS for user profiles, products, and content that changes based on URL values. - [Nesting routes](/solid-router/concepts/nesting.md): Build nested route hierarchies in SolidJS for complex applications with parent-child relationships and shared layouts. - [Layouts](/solid-router/concepts/layouts.md): Create consistent page layouts in SolidJS with shared headers, footers, and nested structures for better UI organization. - [Alternative routers](/solid-router/concepts/alternative-routers.md): Learn to use hash-based and memory routers in SolidJS for client-side navigation and testing without server interaction. - [Actions](/solid-router/concepts/actions.md): Handle form submissions and server mutations with Solid Router actions. Build isomorphic data flows with progressive enhancement support. - [Single page applications](/solid-router/rendering-modes/spa.md): Configure single-page applications for proper CDN and hosting deployment. Handle client-side routing without server-side rendering. - [Server side rendering](/solid-router/rendering-modes/ssr.md): Enable server-side rendering with Solid Router for SEO and performance. Support suspense, resources, and render-as-you-fetch patterns. - [Queries](/solid-router/data-fetching/queries.md) - [Streaming](/solid-router/data-fetching/streaming.md) - [Revalidation](/solid-router/data-fetching/revalidation.md) - [Preload data](/solid-router/data-fetching/how-to/preload-data.md) - [Handle pending and error states](/solid-router/data-fetching/how-to/handle-error-and-loading-states.md) - [Preloading](/solid-router/advanced-concepts/preloading.md) - [Lazy loading](/solid-router/advanced-concepts/lazy-loading.md): Implement lazy loading in Solid Router to reduce initial bundle size. Load components on-demand for better performance in large applications. - [Migration from v0.9.x](/solid-router/guides/migration.md): Migrate your Solid Router application to v0.10 with this comprehensive guide covering removed APIs, new patterns, and Islands support changes. - [A](/solid-router/reference/components/a.md): A wraps a native anchor element for Solid Router navigation. - [HashRouter](/solid-router/reference/components/hash-router.md): HashRouter stores route paths in the URL hash. - [MemoryRouter](/solid-router/reference/components/memory-router.md): MemoryRouter stores route paths in a memory history object. - [Navigate](/solid-router/reference/components/navigate.md): Navigate performs router navigation when it renders. - [Route](/solid-router/reference/components/route.md): Route defines a matchable route segment. - [Router](/solid-router/reference/components/router.md): Router provides browser-based routing context for Solid Router. - [action](/solid-router/reference/data-apis/action.md): action wraps an async function as a router action. - [cache](/solid-router/reference/data-apis/cache.md): cache is a deprecated alias for query. - [createAsyncStore](/solid-router/reference/data-apis/create-async-store.md): createAsyncStore creates an accessor for promise-backed store data. - [createAsync](/solid-router/reference/data-apis/create-async.md): createAsync creates an accessor for promise-backed data. - [query](/solid-router/reference/data-apis/query.md): query wraps a function with router cache metadata. - [revalidate](/solid-router/reference/data-apis/revalidate.md): revalidate retriggers router query cache entries. - [useAction](/solid-router/reference/data-apis/use-action.md): useAction returns a router-bound action caller. - [useSubmission](/solid-router/reference/data-apis/use-submission.md): useSubmission returns the latest tracked submission for an action. - [useSubmissions](/solid-router/reference/data-apis/use-submissions.md): useSubmissions returns tracked submissions for an action. - [preload](/solid-router/reference/preload-functions/preload.md): preload is a route definition property for route data setup. - [useBeforeLeave](/solid-router/reference/primitives/use-before-leave.md): useBeforeLeave registers a handler that runs before navigation leaves the current location. - [useCurrentMatches](/solid-router/reference/primitives/use-current-matches.md): useCurrentMatches returns the current route matches accessor. - [useIsRouting](/solid-router/reference/primitives/use-is-routing.md): useIsRouting detects when a route transition is in progress. - [useLocation](/solid-router/reference/primitives/use-location.md): useLocation returns the current location. - [useMatch](/solid-router/reference/primitives/use-match.md): useMatch returns a memoized match for a path pattern. - [useNavigate](/solid-router/reference/primitives/use-navigate.md): useNavigate returns the navigation function. - [useParams](/solid-router/reference/primitives/use-params.md): useParams returns the current route parameters. - [usePreloadRoute](/solid-router/reference/primitives/use-preload-route.md): usePreloadRoute returns a function for preloading a route. - [useResolvedPath](/solid-router/reference/primitives/use-resolved-path.md): useResolvedPath returns an accessor for a path resolved against the current route. - [useSearchParams](/solid-router/reference/primitives/use-search-params.md): useSearchParams returns current query parameters and a query update function. - [json](/solid-router/reference/response-helpers/json.md): json returns a custom JSON response. - [redirect](/solid-router/reference/response-helpers/redirect.md): redirect returns a custom redirect response. - [reload](/solid-router/reference/response-helpers/reload.md): Reload and revalidate specific queries after mutations. Efficiently update cached data without full page refreshes for better UX. - [Routing](/solid-start/v1/building-your-application/routing.md): Build your SolidStart app with file-based routing. Create pages, nested layouts, and dynamic routes with simple file structure. - [API routes](/solid-start/v1/building-your-application/api-routes.md): Create API routes in SolidStart for REST, GraphQL, or tRPC endpoints. Handle HTTP methods, sessions, and external integrations. - [CSS and styling](/solid-start/v1/building-your-application/css-and-styling.md): Style your SolidStart components with CSS, CSS modules, and other styling solutions. Implement scoped styles and design systems. - [Data fetching](/solid-start/v1/building-your-application/data-fetching.md) - [Data mutation](/solid-start/v1/building-your-application/data-mutation.md) - [Head and metadata](/solid-start/v1/building-your-application/head-and-metadata.md): Manage SEO and metadata in SolidStart with dynamic titles, meta tags, and Open Graph tags for better search visibility. - [Route Pre-rendering](/solid-start/v1/building-your-application/route-prerendering.md): Pre-render SolidStart routes to static HTML for faster loads and better SEO. Perfect for blogs, docs, and marketing sites. - [Static assets](/solid-start/v1/building-your-application/static-assets.md): Manage static assets in SolidStart using the public directory or imports. Serve images, fonts, documents, and media files. - [Overview](/solid-start/v1.md): SolidStart meta-framework overview: Build modern web apps with fine-grained reactivity, isomorphic routing, and flexible rendering. - [Middleware](/solid-start/v1/advanced/middleware.md): Intercept HTTP requests with middleware for authentication, logging, and header management. Share request-scoped data across your app. - [Sessions](/solid-start/v1/advanced/session.md): Manage user sessions with encrypted cookies in SolidStart. Maintain authentication state and user preferences between requests. - [Request events](/solid-start/v1/advanced/request-events.md): Access request events and local context in SolidStart server functions. Type-safe locals and native event handling for server code. - [Returning responses](/solid-start/v1/advanced/return-responses.md): Return typed Response objects from server functions. Handle redirects, reloads, and JSON responses with proper TypeScript support. - [Serialization](/solid-start/v1/advanced/serialization.md): Understand how SolidStart serializes server function payloads, supported types, and CSP tradeoffs. - [Auth](/solid-start/v1/advanced/auth.md): Implement authentication and protected routes in SolidStart. Secure sensitive resources and handle user authorization properly. - [WebSocket endpoint](/solid-start/v1/advanced/websocket.md): Set up WebSocket endpoints in SolidStart for real-time bidirectional communication. Handle connections, messages, and events. - [Getting started](/solid-start/v1/getting-started.md): Start your first SolidStart project with templates and step-by-step setup. Create, configure, and run your Solid application. - [Security](/solid-start/v1/guides/security.md): Secure your SolidStart apps against XSS, CSRF attacks. Configure CSP headers, CORS policies, and implement security best practices. - [Data fetching](/solid-start/v1/guides/data-fetching.md): Master data fetching in SolidStart with practical examples. Handle loading states, errors, preloading, and database queries. - [Data mutation](/solid-start/v1/guides/data-mutation.md): Learn how to handle form submissions, validate data, and perform mutations with SolidStart actions. Complete guide with examples. - [Service workers](/solid-start/v1/guides/service-workers.md): Register and configure service workers in SolidStart for offline support, caching strategies, and progressive web app features. - [Background tasks](/solid-start/v1/guides/background-tasks.md): Schedule background tasks in SolidStart using Nitro's Tasks API for periodic jobs and automated server-side operations. - [clientOnly](/solid-start/v1/reference/client/client-only.md): clientOnly creates a component that renders only on the client. - [mount](/solid-start/v1/reference/client/mount.md): mount hydrates the client entry. - [StartClient](/solid-start/v1/reference/client/start-client.md): StartClient renders the app on the client. - [defineConfig](/solid-start/v1/reference/config/define-config.md): Configure SolidStart apps with defineConfig. Set up Vite plugins, Nitro presets, and deployment targets for any platform. - [app.config.ts](/solid-start/v1/reference/entrypoints/app-config.md): app.config.ts exports the app configuration. - [app.tsx](/solid-start/v1/reference/entrypoints/app.md): app.tsx is the app root module. - [entry-client.tsx](/solid-start/v1/reference/entrypoints/entry-client.md): entry-client.tsx mounts StartClient in the browser. - [entry-server.tsx](/solid-start/v1/reference/entrypoints/entry-server.md): entry-server.tsx exports the server handler. - [FileRoutes](/solid-start/v1/reference/routing/file-routes.md): FileRoutes returns route definitions generated from filesystem routes. - [createHandler](/solid-start/v1/reference/server/create-handler.md): createHandler creates the server handler. - [createMiddleware](/solid-start/v1/reference/server/create-middleware.md): createMiddleware creates middleware definitions. - [getServerFunctionMeta](/solid-start/v1/reference/server/get-server-function-meta.md): getServerFunctionMeta returns metadata for the current server function request. - [GET](/solid-start/v1/reference/server/get.md): GET returns the GET handler attached to a server function. - [HttpHeader](/solid-start/v1/reference/server/http-header.md): HttpHeader sets or appends a response header during server rendering. - [HttpStatusCode](/solid-start/v1/reference/server/http-status-code.md): HttpStatusCode sets the response status during server rendering. - [StartServer](/solid-start/v1/reference/server/start-server.md): StartServer renders the app inside a document component. - ["use server"](/solid-start/v1/reference/server/use-server.md): "use server" marks server functions for the server function compiler. - [Routing](/solid-start/v2/building-your-application/routing.md): SolidStart v2 routing uses the filesystem router to map files in src/routes to UI routes and API routes. - [API routes](/solid-start/v2/building-your-application/api-routes.md): SolidStart v2 API routes are filesystem routes that export HTTP method handlers and receive typed APIEvent objects from @solidjs/start/server. - [CSS and styling](/solid-start/v2/building-your-application/css-and-styling.md): Style your SolidStart components with CSS, CSS modules, and other styling solutions. Implement scoped styles and design systems. - [Data fetching](/solid-start/v2/building-your-application/data-fetching.md): Fetch data in SolidStart v2 with Solid Router queries, createAsync, and server-backed functions compiled from the use server directive. - [Data mutation](/solid-start/v2/building-your-application/data-mutation.md): Mutate data in SolidStart v2 with Solid Router actions and server-only action bodies compiled from the use server directive. - [Head and metadata](/solid-start/v2/building-your-application/head-and-metadata.md): Manage SEO and metadata in SolidStart with dynamic titles, meta tags, and Open Graph tags. - [Route pre-rendering](/solid-start/v2/building-your-application/route-prerendering.md): Pre-render SolidStart routes to static HTML with Nitro v3. - [Static assets](/solid-start/v2/building-your-application/static-assets.md): Manage static assets in SolidStart using the public directory or imports. Serve images, fonts, documents, and media files. - [Overview](/solid-start/v2.md): SolidStart v2 overview: routing, server functions, HTTP helpers, and Vite-based configuration. - [Middleware](/solid-start/v2/advanced/middleware.md): Compose H3 v2 middleware for authentication, logging, headers, and request-scoped data in SolidStart. - [Sessions](/solid-start/v2/advanced/session.md): Manage encrypted cookie sessions with the SolidStart HTTP helpers. - [Request events](/solid-start/v2/advanced/request-events.md): Access request events, typed locals, and the native H3 v2 event in SolidStart. - [Returning responses](/solid-start/v2/advanced/return-responses.md): Return typed Response objects from server functions. Handle redirects, reloads, and JSON responses with proper TypeScript support. - [Serialization](/solid-start/v2/advanced/serialization.md): How SolidStart serializes server function payloads and the CSP tradeoff between json and js modes. - [Auth](/solid-start/v2/advanced/auth.md): Implement authentication and protected routes in SolidStart. Secure sensitive resources and handle user authorization properly. - [WebSocket endpoint](/solid-start/v2/advanced/websocket.md): Add a Nitro v3 WebSocket endpoint to a SolidStart application. - [Getting started](/solid-start/v2/getting-started.md): Start a SolidStart v2 project with create-solid and configure the Vite plugin. - [Security](/solid-start/v2/guides/security.md): Secure your SolidStart apps against XSS, CSRF attacks. Configure CSP headers, CORS policies, and implement security best practices. - [Data fetching](/solid-start/v2/guides/data-fetching.md): Master data fetching in SolidStart with practical examples. Handle loading states, errors, preloading, and database queries. - [Data mutation](/solid-start/v2/guides/data-mutation.md): Learn how to handle form submissions, validate data, and perform mutations with SolidStart actions. Complete guide with examples. - [Service workers](/solid-start/v2/guides/service-workers.md): Register and configure service workers in SolidStart for offline support, caching strategies, and progressive web app features. - [Background tasks](/solid-start/v2/guides/background-tasks.md): Define and schedule background tasks in SolidStart with Nitro v3. - [Deployment plugins](/solid-start/v2/guides/deployment-plugins.md): Choose and configure a deployment Vite plugin for a SolidStart v2 app. - [Migrating from v1](/solid-start/v2/migrating-from-v1.md): Migrate your SolidStart project from v1 to v2. - [clientOnly](/solid-start/v2/reference/client/client-only.md): clientOnly creates a component that renders only on the client. - [mount](/solid-start/v2/reference/client/mount.md): mount hydrates the client entry. - [StartClient](/solid-start/v2/reference/client/start-client.md): StartClient renders the app on the client. - [solidStart](/solid-start/v2/reference/config/solid-start.md): Configure the SolidStart v2 Vite plugin and its application options. - [vite.config.ts](/solid-start/v2/reference/entrypoints/vite-config.md): Configure SolidStart v2, Vite, and Nitro from vite.config.ts. - [app.tsx](/solid-start/v2/reference/entrypoints/app.md): app.tsx is the app root module. - [entry-client.tsx](/solid-start/v2/reference/entrypoints/entry-client.md): entry-client.tsx mounts StartClient in the browser. - [entry-server.tsx](/solid-start/v2/reference/entrypoints/entry-server.md): entry-server.tsx exports the server handler. - [FileRoutes](/solid-start/v2/reference/routing/file-routes.md): FileRoutes returns route definitions generated from filesystem routes. - [createHandler](/solid-start/v2/reference/server/create-handler.md): createHandler creates the server handler. - [createMiddleware](/solid-start/v2/reference/server/create-middleware.md): createMiddleware composes H3 middleware for SolidStart. - [getServerFunctionMeta](/solid-start/v2/reference/server/get-server-function-meta.md): getServerFunctionMeta returns metadata for the current server function request. - [GET](/solid-start/v2/reference/server/get.md): GET returns the GET handler attached to a server function. - [HttpHeader](/solid-start/v2/reference/server/http-header.md): HttpHeader sets or appends a response header during server rendering. - [HttpStatusCode](/solid-start/v2/reference/server/http-status-code.md): HttpStatusCode sets the response status during server rendering. - [StartServer](/solid-start/v2/reference/server/start-server.md): StartServer renders the app inside a document component. - ["use server"](/solid-start/v2/reference/server/use-server.md): "use server" marks server functions for the server function compiler. ## Overview - [Overview](/index.md): Solid is a reactive JavaScript framework for building fast, efficient UIs. Learn about fine-grained reactivity and modern web development. ## Concepts ### Components - [Basics](/concepts/components/basics.md): Learn Solid component fundamentals: creating reusable UI blocks, component trees, lifecycles, and proper import/export patterns. - [Class and style](/concepts/components/class-style.md): Style Solid components with CSS classes and inline styles. Learn dynamic styling, classList usage, and theme implementation. - [Props](/concepts/components/props.md): Pass and manage component props in Solid while maintaining reactivity. Learn mergeProps, splitProps, and best practices. - [Event handlers](/concepts/components/event-handlers.md): Handle user interactions in Solid with event delegation and native events for optimal performance and resource management. - [Intro to reactivity](/concepts/intro-to-reactivity.md): Master Solid's reactive system fundamentals: signals, subscribers, and automatic UI updates for responsive applications. ### Control Flow - [Conditional rendering](/concepts/control-flow/conditional-rendering.md): Conditionally render UI elements in Solid using Show, Switch, and Match components for clean, readable conditional logic. - [List rendering](/concepts/control-flow/list-rendering.md): Efficiently render dynamic lists in Solid using For and Index components. Optimize performance for different data scenarios. - [Dynamic](/concepts/control-flow/dynamic.md): Render components dynamically at runtime with Solid's Dynamic component. Build flexible UIs with runtime component selection. - [Error boundary](/concepts/control-flow/error-boundary.md): Catch and handle rendering errors gracefully with ErrorBoundary. Prevent app crashes and provide user-friendly error recovery. - [Portal](/concepts/control-flow/portal.md): Learn how Portal renders elements outside the normal DOM flow to solve z-index and overflow issues for modals and popups. - [Understanding JSX](/concepts/understanding-jsx.md): Write HTML-like syntax in JavaScript with JSX to create reactive components with dynamic expressions and event handlers. ### Derived Values - [Derived signals](/concepts/derived-values/derived-signals.md): Derive values from signals with plain functions and use them in tracking scopes to keep dependent computations up to date. - [Memos](/concepts/derived-values/memos.md): Optimize expensive computations with memos that cache results and only recalculate when dependencies actually change. - [Signals](/concepts/signals.md): Create reactive state with signals - the foundation of Solid's reactivity system for automatic UI updates and tracking. - [Effects](/concepts/effects.md): Manage side effects like DOM updates, API calls, and subscriptions that respond automatically to reactive state changes. - [Context](/concepts/context.md): Share data across component trees with Solid's Context API. Avoid prop drilling and manage global application state effectively. - [Stores](/concepts/stores.md): Manage complex nested state efficiently with stores that provide fine-grained reactivity for objects and arrays in Solid. - [Refs](/concepts/refs.md): Access and manipulate DOM elements directly using refs, forward refs between components, and create custom directives. ## Advanced Concepts - [Fine-grained reactivity](/advanced-concepts/fine-grained-reactivity.md): Master Solid's fine-grained reactivity system for targeted UI updates, optimal performance, and efficient state management patterns. ## Quick start - [Quick start](/quick-start.md): Start building with Solid quickly. Try the playground, create projects with templates, and get your first Solid app running in minutes. ## Guides ### Styling Components - [CSS modules](/guides/styling-components/css-modules.md): Use CSS Modules in Solid for locally scoped styles, preventing global conflicts and ensuring component style encapsulation. - [LESS](/guides/styling-components/less.md): Integrate LESS preprocessor in Solid apps for variables, mixins, and programmatic CSS features to write cleaner stylesheets. - [Macaron](/guides/styling-components/macaron.md): Style Solid components with Macaron's compile-time CSS-in-JS, offering type-safe styled components and variant-based styling. - [SASS](/guides/styling-components/sass.md): Configure SASS/SCSS in Solid projects for advanced CSS preprocessing with variables, nesting, mixins, and modular stylesheets. - [Tailwind CSS v3](/guides/styling-components/tailwind-v3.md): Set up Tailwind CSS v3 in Solid apps for utility-first styling, rapid development, and consistent responsive design patterns. - [Tailwind CSS](/guides/styling-components/tailwind.md): Set up Tailwind CSS v4 in your Solid app for utility-first styling. Configure PostCSS, import styles, and build responsive UIs efficiently. - [UnoCSS](/guides/styling-components/uno.md): Integrate UnoCSS with Solid for on-demand utility CSS. Configure Vite plugin, import styles, and create efficient atomic CSS designs quickly. - [Styling your components](/guides/styling-your-components.md): Explore Solid's flexible styling options: CSS preprocessors, CSS Modules, CSS-in-JS, and utility frameworks for component styling needs. ### Deployment Options - [AWS via Flightcontrol](/guides/deployment-options/aws-via-flightcontrol.md): Deploy Solid apps to AWS with Flightcontrol's automated platform featuring GitHub integration and continuous deployment. - [AWS via SST (SolidStart v1)](/guides/deployment-options/aws-via-sst.md): Deploy SolidStart v1 apps to AWS Lambda or containers using SST framework with streamlined configuration and deployment. - [Cloudflare](/guides/deployment-options/cloudflare.md): Deploy Solid apps to Cloudflare Pages for fast, global edge hosting with built-in CDN and simple Git integration setup. - [Firebase](/guides/deployment-options/firebase.md): Host your Solid application on Firebase with Google's infrastructure for reliable static site hosting and easy deployment. - [Netlify](/guides/deployment-options/netlify.md): Deploy Solid apps to Netlify with automatic builds from Git, instant rollbacks, and powerful deployment features included. - [Railway](/guides/deployment-options/railway.md): Deploy Solid projects to Railway platform with GitHub integration, custom domains, and straightforward deployment process. - [Stormkit](/guides/deployment-options/stormkit.md): Deploy Solid apps as static sites or SPAs on Stormkit with serverless functions support and Git provider integration. - [Vercel](/guides/deployment-options/vercel.md): Deploy SolidStart apps to Vercel with automatic builds, serverless functions, and GitHub integration for seamless production hosting. - [Zerops](/guides/deployment-options/zerops.md): Deploy SolidStart apps to Zerops cloud platform with support for both static sites and SSR Node.js applications in production. - [State management](/guides/state-management.md): Learn Solid's state management with signals, derived values, memos, and effects for reactive data flow and component updates. - [Routing & navigation](/guides/routing-and-navigation.md): Implement client-side routing in Solid apps with dynamic routes, nested layouts, route parameters, and lazy-loaded components. - [Complex state management](/guides/complex-state-management.md): Master complex state management in Solid using stores and context to build scalable, maintainable applications efficiently. - [Fetching data](/guides/fetching-data.md): Master data fetching in Solid with createResource for async operations, loading states, error handling, and Suspense boundaries. - [Testing](/guides/testing.md): Test Solid apps with Vitest and Testing Library. Write component tests, simulate user interactions, and ensure code quality effectively. - [Deploy your app](/guides/deploying-your-app.md): Deploy your Solid application to popular hosting platforms including Cloudflare, Vercel, Netlify, AWS, and more with guides. - [Building for mobile](/guides/building-for-mobile.md): Run Solid on iOS and Android with a WebView shell (Capacitor, Tauri), NativeScript, or a custom renderer built on solid-js/universal. ## Configuration - [Environment variables](/configuration/environment-variables.md): Configure public and private environment variables in Solid apps using Vite's built-in support for secure configuration. - [TypeScript](/configuration/typescript.md): Learn to configure TypeScript with SolidJS for enhanced type safety, better IDE support, and reliable component development. ## Reference ### Basic Reactivity - [createEffect](/reference/basic-reactivity/create-effect.md): Learn how to use createEffect to run side effects when reactive dependencies change. Perfect for DOM manipulation and external library integration. - [createMemo](/reference/basic-reactivity/create-memo.md): Use createMemo to efficiently compute and cache derived values. Prevent expensive recalculations and optimize your Solid.js application's performance. - [createResource](/reference/basic-reactivity/create-resource.md): Fetch async data with createResource. Handles loading states, errors, and integrates with Suspense for seamless data fetching in Solid.js applications. - [createSignal](/reference/basic-reactivity/create-signal.md): Create reactive state with createSignal, Solid's fundamental primitive. Track values that change over time and automatically update your UI when they do. ### Component Apis - [children](/reference/component-apis/children.md): Resolve a component's `children` prop into a stable accessor. - [createContext](/reference/component-apis/create-context.md): Create a context object with a `Provider` component and a default value. - [createUniqueId](/reference/component-apis/create-unique-id.md): Generate a unique string for the current render or hydration context. - [lazy](/reference/component-apis/lazy.md): Create a component that loads its module lazily from a dynamic import. - [useContext](/reference/component-apis/use-context.md): Read the current value of a context object created by `createContext`. ### Components - [createDynamic](/reference/components/create-dynamic.md): Render a component or intrinsic element selected at runtime from an accessor. - [](/reference/components/dynamic.md): Render a component or intrinsic element selected at runtime. - [](/reference/components/error-boundary.md): Catch errors thrown while rendering or updating a subtree and render fallback content. - [](/reference/components/for.md): Render a list by item identity with a child function that receives the item and an index accessor. - [](/reference/components/index-component.md): Render a list by index with a child function that receives an item accessor and a numeric index. - [](/reference/components/no-hydration.md): Render children during server rendering and skip hydration for that subtree on the client. - [](/reference/components/portal.md): Render children into a DOM node outside the parent DOM hierarchy. - [](/reference/components/show.md): Render children when a condition is truthy, with optional fallback content and keyed behavior. - [](/reference/components/suspense-list.md): Coordinate how multiple suspense boundaries reveal their content. - [](/reference/components/suspense.md): Render fallback content while suspense-tracked async dependencies under the boundary are pending. - [ / ](/reference/components/switch-and-match.md): Render the first matching branch from a set of mutually exclusive conditions. ### Jsx Attributes - [attr:*](/reference/jsx-attributes/attr.md): Force a JSX key to be written as an attribute instead of a property. - [bool:*](/reference/jsx-attributes/bool.md): Control whether an attribute is present by writing through `bool:*`. - [classList](/reference/jsx-attributes/classlist.md): Toggle element classes from an object of class names and boolean values. - [innerHTML](/reference/jsx-attributes/innerhtml.md): Set an element's `innerHTML` property from JSX. - [on*](/reference/jsx-attributes/on_.md): Attach an event handler with Solid's delegated event system when the event is supported. - [on:*](/reference/jsx-attributes/on.md): Attach an event listener directly to an element with `addEventListener`. - [@once](/reference/jsx-attributes/once.md): Mark a JSX expression as static at compile time. - [prop:*](/reference/jsx-attributes/prop.md): Force a JSX key to be written as a DOM property instead of an attribute. - [ref](/reference/jsx-attributes/ref.md): Capture a rendered element or forwarded component ref. - [style](/reference/jsx-attributes/style.md): Set inline styles with a CSS string or an object of property names and values. - [textContent](/reference/jsx-attributes/textcontent.md): Set an element's `textContent` property from JSX with plain text content. - [use:*](/reference/jsx-attributes/use.md): Attach a directive function to a native element with `use:*`. ### Lifecycle - [onCleanup](/reference/lifecycle/on-cleanup.md): Register a cleanup function on the current reactive scope. The cleanup runs when the scope is disposed or refreshed. - [onMount](/reference/lifecycle/on-mount.md): Register a function that runs once after the initial render of the current component or root. ### Reactive Utilities - [batch](/reference/reactive-utilities/batch.md): Group reactive updates so downstream computations run after the batch completes. - [catchError](/reference/reactive-utilities/catch-error.md): Establish an error boundary for work performed inside the provided function. - [createRoot](/reference/reactive-utilities/create-root.md): Create non-tracked owner scopes in SolidJS for manual memory management. Essential for nested tracking scopes and preventing auto-disposal. - [from](/reference/reactive-utilities/from.md): Convert an external producer or subscribable into a Solid accessor. - [getOwner](/reference/reactive-utilities/get-owner.md): Return the owner for the currently executing reactive scope. - [indexArray](/reference/reactive-utilities/index-array.md): Reactively map an array by index and return an accessor for the mapped result. - [mapArray](/reference/reactive-utilities/map-array.md): Reactively map an array by item identity and return an accessor for the mapped result. - [mergeProps](/reference/reactive-utilities/merge-props.md): Merge multiple prop sources into a single object while preserving reactive property access. - [observable](/reference/reactive-utilities/observable.md): Convert a Solid accessor into an Observable-compatible object. - [on](/reference/reactive-utilities/on-util.md): Control effect dependencies explicitly with SolidJS's on utility. Define when effects run and manage tracking behavior for precise reactivity. - [runWithOwner](/reference/reactive-utilities/run-with-owner.md): Execute a function under the provided owner. - [splitProps](/reference/reactive-utilities/split-props.md): Split a reactive props object into multiple reactive subsets and a remainder object. - [startTransition](/reference/reactive-utilities/start-transition.md): Start a transition and return a promise that resolves when the transition completes. - [untrack](/reference/reactive-utilities/untrack.md): Execute a function without collecting dependencies from the current reactive scope. - [useTransition](/reference/reactive-utilities/use-transition.md): Return a pending-state accessor and a function that starts a transition. ### Rendering - [DEV](/reference/rendering/dev.md): Read the development-only `DEV` export from `solid-js`. - [hydrate](/reference/rendering/hydrate.md): Hydrate server-rendered HTML and attach Solid's client-side behavior to an existing DOM subtree. - [hydrationScript](/reference/rendering/hydration-script.md): Generate the SSR hydration bootstrap script with `HydrationScript` or `generateHydrationScript`. - [isDev](/reference/rendering/is-dev.md): Read the boolean that indicates whether the imported `solid-js/web` bundle is the development browser bundle. - [isServer](/reference/rendering/is-server.md): Read whether the current `solid-js/web` bundle is the server bundle. - [renderToStream](/reference/rendering/render-to-stream.md): Stream server-rendered HTML and continue writing async content as it resolves. - [renderToStringAsync](/reference/rendering/render-to-string-async.md): Render HTML to a string after async suspense boundaries settle. - [renderToString](/reference/rendering/render-to-string.md): Render HTML to a string synchronously on the server. - [render](/reference/rendering/render.md): Mount a Solid root into a DOM node in the browser. ### Secondary Primitives - [createComputed](/reference/secondary-primitives/create-computed.md): Create an immediate reactive computation that runs synchronously when created and whenever its dependencies change. - [createDeferred](/reference/secondary-primitives/create-deferred.md): Create a deferred accessor whose updates are scheduled for later execution or when the timeout is reached. - [createReaction](/reference/secondary-primitives/create-reaction.md): Create a reaction that runs once when the tracked expression is invalidated. - [createRenderEffect](/reference/secondary-primitives/create-render-effect.md): Create a reactive computation that runs immediately during the render phase. - [createSelector](/reference/secondary-primitives/create-selector.md): Create a keyed boolean accessor that reports whether a key matches the current source value. ### Server Utilities - [getRequestEvent](/reference/server-utilities/get-request-event.md): Read the current request event from `solid-js/web`. ### Store Utilities - [createMutable](/reference/store-utilities/create-mutable.md): Create a mutable store proxy. - [createStore](/reference/store-utilities/create-store.md): Create a reactive store and a setter function for structured state. - [modifyMutable](/reference/store-utilities/modify-mutable.md): Apply a modifier to a mutable store inside a batch. - [produce](/reference/store-utilities/produce.md): Create a store modifier that applies changes by mutating the current state through a helper proxy. - [reconcile](/reference/store-utilities/reconcile.md): Create a store modifier that reconciles existing state with a new value. - [unwrap](/reference/store-utilities/unwrap.md): Remove store proxy wrapping from a store or store subtree.