gitwtfhub

wtf is razzle?

jaredpalmer/razzle — explained in plain English

Analysis updated 2026-05-18

★ 11,048JavaScriptAudience · developerComplexity · 3/5LicenseSetup · moderate

TL;DR

A build tool for creating server-side rendered JavaScript apps without manually configuring Webpack. Works with React, Vue, Preact, Svelte, Angular, and more.

Mindmap

mindmap
  root((Razzle))
    What it does
      SSR configuration
      Universal JS apps
      No manual Webpack
    Framework support
      React Preact
      Vue Svelte Angular
      Any framework
    Developer experience
      Hot reloading
      Single dependency
      Plugin system
    Community
      Examples library
      Discord support
      MIT license

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Build a React app that renders on the server for faster initial load and better SEO, without configuring Webpack yourself.

REASON 2

Create a universal Vue or Svelte application that shares code between server and browser from a zero-config starting point.

REASON 3

Prototype a server-rendered web app quickly, then add your preferred routing library without being locked into a framework.

REASON 4

Extend the Webpack build via a Razzle plugin to add custom loaders or environment-specific configuration.

What's in the stack?

JavaScriptTypeScriptWebpackBabelNode.js

How it stacks up

jaredpalmer/razzlefacebook/hermesoldboyxx/jira_clone
Stars11,04811,04311,058
LanguageJavaScriptJavaScriptJavaScript
Setup difficultymoderatehardmoderate
Complexity3/54/53/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · moderate Time to first run · 30min

Requires Node.js, extend the build via razzle.config.js or plugins for custom Webpack rules.

MIT, use freely for any purpose including commercial projects.

Wtf does this do

Razzle is a build tool for creating JavaScript applications that run on both the server and the browser at the same time. This type of app, sometimes called server-side rendered or a universal application, is traditionally hard to configure because you need separate build setups for the server and the client. Razzle bundles all that complexity into a single dependency, giving you a clean starting point without a lengthy manual setup. The main idea is similar to create-react-app: Razzle hides complicated Webpack and Babel configuration so you can focus on writing your application instead of fighting build tools. The key difference is that Razzle is not tied to any specific framework. You can use it with React, Preact, Vue, Svelte, Angular, or any other front-end library. It also does not impose decisions about routing or data fetching, which you are free to choose yourself. Development works with hot reloading on both the client and the server side, so changes appear quickly without manual restarts. When you need to customize the build, you can write plugins or adjust a config file. The repository includes a wide range of example projects that cover common setups and framework combinations. Razzle is open source under the MIT license. Documentation and getting-started guides are available on the project website. Community support is available through GitHub Discussions and a Discord server.

Yoink these prompts

Prompt 1
Using Razzle, create a new server-rendered React app with TypeScript support. Show me the setup commands and how the file structure looks.
Prompt 2
I have a Razzle project and want to add custom Webpack rules for SVG files. Show me how to write a Razzle plugin to extend the config.
Prompt 3
With Razzle, how do I add React Router for client-side navigation while keeping server-side rendering working correctly?
Prompt 4
Convert my create-react-app project to Razzle so it renders on the server. What are the key files and changes I need to make?

Frequently asked questions

wtf is razzle?

A build tool for creating server-side rendered JavaScript apps without manually configuring Webpack. Works with React, Vue, Preact, Svelte, Angular, and more.

What language is razzle written in?

Mainly JavaScript. The stack also includes JavaScript, TypeScript, Webpack.

What license does razzle use?

MIT, use freely for any purpose including commercial projects.

How hard is razzle to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is razzle for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.

Other repos in this lane