SolidStart

Fine-grained reactivity goes fullstack.

Get startedJoin the community
Counter.jsx
import { createSignal } from "solid-js";

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

	return (
		<button
		  onClick={() => setCount((n) => n + 1)}
		>
		  Count: {count()}
		</button>
	);
}

Overview

SolidStart is an open source meta-framework designed to unify components that make up a web application. It is built on top of Solid and uses Vinxi, an agnostic Framework Bundler that combines the power of Vite and Nitro.

Start avoids being opinionated by only providing the fewest amount of pieces to get you started. While templates are available that include many of the expected tools, SolidStart itself does not ship with a Router or Metadata library. Rather, it leaves that open for you to use any library you want.

SolidStart provides you the ability to render your applications in different ways depending on what is best for your use case. These include:

  • Client-side rendering (CSR)
  • Server-side rendering (SSR)
  • Static site generation (SSG)

A driving principle of SolidStart is that code should be isomorphic — this ensures that code can be written once and executed correctly whether on the client or server.

Features

SolidStart features the following capabilities:

  • Fine-grained reactivity — Powered by Solid and its fine-grained reactivity.
  • Isomorphic, nested routing — The same routes are rendered regardless of whether the page is on the client or server. Route nesting provides parent-child relationships that simplify application logic.
  • Multiple rendering modes — Can be used to create CSR, SSR (Sync, Async and Streaming), and SSG applications.
  • Command Line Interface (CLI) and templates — Provides a CLI and templates to help you get started quickly.
  • Deployment presets — Provides presets to support deployment to multiple platforms including Netlify, Vercel, AWS, and Cloudflare.

Prerequisites

Before you start using SolidStart, you should have a basic understanding of web development. This includes knowledge of HTML, CSS, and JavaScript. With SolidStart being a Solid meta-framework, we recommend knowing Solid prior to digging in to these docs (or at least taking the Solid tutorial).

SolidStart 1.0 is here!

We are actively working on improving the documentation and adding more examples to help you get started. Documentation is still in beta so content is still being added to the documentation to improve the overall experience of using SolidStart.

If you experience any issues while using SolidStart, please let us know by opening an issue in the SolidStart Repo. Additionally, if you notice any issues or feel that something is missing in the documentation, please let us know in the Solid Docs Repo.

Edit this page Report an issue with this page