20 Frontend Starter Templates — React, Vue, Svelte, Solid...

Starting a new project means wiring up the same boilerplate again: bundler config, linting, state management, component scaffolding. I put together 20 ready-to-use templates so you can skip that step. Each one is self-contained with its own package.json, README, and runnable source.

GitHub: dsheiko/boilerplate

The same app, different stacks

All framework templates solve the same problem: fetch a Star Wars characters list from a local JSON file and render it in a table. That makes it easy to compare how Redux, Zustand, Pinia, SolidJS createStore, and Svelte writable each handle the exact same task.

Redux Toolkit (React)

// store/peopleSlice.js
export const fetchPeople = createAsyncThunk("people/fetch", async () => {
  const json = await fetch("/people.json").then(r => r.json());
  return json.results;
});

Svelte writable store

// store/index.js
export const people = writable([]);

export async function fetchPeople() {
  const data = await fetch("/people.json").then(r => r.json());
  people.set(data.results);
}

In a component, $people auto-subscribes — no Provider, no selector. Svelte handles the subscription and cleanup.

SolidJS createStore

// store/index.js
const [state, setState] = createStore({ people: [] });

export async function fetchPeople() {
  const data = await fetch("/people.json").then(r => r.json());
  setState("people", data.results);
}

Components import state directly and read it reactively. No context wrapper needed.

Same data. Three different mental models. Having them side by side makes the tradeoffs concrete.

What's in the collection

Full-stack apps — Next.js 16 + Ant Design + React Query + MySQL, React SSR with Express, Vue + Nuxt 3 + Vue Query + MySQL. These cover server-side rendering, API routes, database migrations, and pagination.

State management — React + Redux Toolkit, Redux + TypeScript 6, Zustand, Vite + Mantine, Vue + Pinia. Each uses the same app structure so the only thing that changes is the state layer.

Alternative frameworks — Svelte 5 with svelte/store, SolidJS 1.9 with createStore. Both use Vite and skip the Redux/Provider pattern entirely.

Build tooling — Webpack 5 + Babel 7, Webpack + TypeScript + Jest 29, and Rspack + Babel.

Testing — Playwright with page object model and fixtures, Puppeteer + Jest for headless Chrome.

Styles — SASS + PostCSS + Autoprefixer, Webpack + sass-loader.

Backend — Express 4 REST API with Jasmine tests and apidoc.

Webpack loaders — image optimization with ImageMin, SVG placeholders with SQIP.

Rspack vs Webpack

The Rspack template is a direct replacement for the Webpack + Babel one. The config shape is identical, but it's a single rspack.config.js instead of three files with webpack-merge. HtmlRspackPlugin is built into @rspack/core, so no separate html-webpack-plugin package. If you want faster builds without rewriting config, this is the easiest path to try.

Playwright template

The E2E template covers page object model, Playwright fixtures, RWD viewport testing, screenshots, and form interaction. It's structured for a real test suite, not just a hello-world example.

Getting started

Pick any template, clone, and run:

git clone https://github.com/dsheiko/boilerplate
cd boilerplate/react-vite-mantine
npm install
npm run dev

Or install all 20 at once from the root:

npm run install:all

Each template has a README with the full stack table, usage commands, and a file-to-pattern index so you know where to look.

If something is outdated or you want to add a template, PRs are open: github.com/dsheiko/boilerplate

推荐订阅源