Top Related Projects
The React Framework
web development for the rest of us
The Intuitive Vue Framework.
Build Better Websites. Create modern, resilient user experiences with web fundamentals.
The best React-based framework with performance, scalability and security built in.
Quick Overview
RedwoodJS is a full-stack JavaScript framework designed to help developers build modern web applications quickly and efficiently. It combines React for the frontend, GraphQL for the API layer, and Prisma for database access, all within a unified and opinionated structure.
Pros
- Integrated full-stack solution with a cohesive developer experience
- Built-in code generation tools for rapid development
- Strong focus on type safety and best practices
- Seamless deployment to various hosting platforms
Cons
- Steep learning curve for developers new to some of the integrated technologies
- Less flexibility compared to building a custom stack
- Relatively young framework with a smaller community compared to more established options
- Limited database options (primarily focused on PostgreSQL)
Code Examples
- Defining a GraphQL schema:
type Post {
id: Int!
title: String!
body: String!
createdAt: DateTime!
}
type Query {
posts: [Post!]!
post(id: Int!): Post
}
type Mutation {
createPost(input: CreatePostInput!): Post!
}
input CreatePostInput {
title: String!
body: String!
}
- Creating a React component with Redwood's Cell pattern:
import { useQuery } from '@redwoodjs/web'
const QUERY = gql`
query PostsQuery {
posts {
id
title
}
}
`
export const PostsCell = () => {
const { loading, error, data } = useQuery(QUERY)
if (loading) return <div>Loading...</div>
if (error) return <div>Error: {error.message}</div>
return (
<ul>
{data.posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
- Defining a Prisma schema:
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model Post {
id Int @id @default(autoincrement())
title String
body String
createdAt DateTime @default(now())
}
Getting Started
To create a new Redwood project:
yarn create redwood-app my-redwood-project
cd my-redwood-project
yarn redwood dev
This will set up a new Redwood project and start the development server. You can then begin building your application by editing the files in the web and api directories.
Competitor Comparisons
The React Framework
Pros of Next.js
- Larger ecosystem and community support
- More flexible and customizable for various project types
- Better performance optimization out of the box
Cons of Next.js
- Steeper learning curve for beginners
- Less opinionated, requiring more decision-making
- Lacks built-in API layer and database integration
Code Comparison
Next.js routing:
// pages/about.js
export default function About() {
return <h1>About Page</h1>
}
Redwood routing:
// Routes.js
<Route path="/about" page={AboutPage} name="about" />
// AboutPage.js
const AboutPage = () => {
return <h1>About Page</h1>
}
export default AboutPage
Next.js focuses on file-based routing, while Redwood uses a centralized routing configuration. Redwood's approach provides a clearer overview of the application structure, but Next.js's method can be more intuitive for simple projects.
Both frameworks offer powerful features for building modern web applications, with Next.js providing more flexibility and Redwood offering a more opinionated, full-stack solution. The choice between them depends on project requirements and developer preferences.
web development for the rest of us
Pros of Svelte
- Smaller bundle sizes and faster runtime performance due to compile-time optimization
- Simpler, more intuitive syntax with less boilerplate code
- Built-in state management without additional libraries
Cons of Svelte
- Smaller ecosystem and community compared to React-based frameworks
- Less mature tooling and third-party library support
- Limited server-side rendering capabilities out of the box
Code Comparison
Svelte component:
<script>
let count = 0;
function increment() {
count += 1;
}
</script>
<button on:click={increment}>
Clicks: {count}
</button>
Redwood component (using React):
import { useState } from 'react'
const Counter = () => {
const [count, setCount] = useState(0)
const increment = () => setCount(count + 1)
return (
<button onClick={increment}>
Clicks: {count}
</button>
)
}
Svelte's syntax is more concise and requires less setup, while Redwood (using React) follows a more traditional JavaScript approach with hooks and explicit state management.
The Intuitive Vue Framework.
Pros of Nuxt
- Mature ecosystem with extensive documentation and community support
- Seamless integration with Vue.js, leveraging its full capabilities
- Built-in server-side rendering (SSR) and static site generation (SSG)
Cons of Nuxt
- Less opinionated structure compared to Redwood's full-stack approach
- Lacks built-in API layer and database integration features
- May require more configuration for complex full-stack applications
Code Comparison
Nuxt route definition:
// pages/users/_id.vue
export default {
async asyncData({ params }) {
const user = await fetchUser(params.id)
return { user }
}
}
Redwood route definition:
// Routes.js
<Route path="/users/{id}" page={UserPage} name="user" />
// UserPage.js
export const QUERY = gql`
query FindUserById($id: Int!) {
user: user(id: $id) {
id
name
}
}
`
Nuxt focuses on Vue-based components and file-system routing, while Redwood provides a more structured approach with GraphQL integration and a clear separation between pages and components. Nuxt excels in rapid development of Vue.js applications, whereas Redwood offers a more comprehensive full-stack solution with built-in API and database features.
Build Better Websites. Create modern, resilient user experiences with web fundamentals.
Pros of Remix
- Built-in server-side rendering (SSR) and progressive enhancement
- Seamless integration with existing web standards and APIs
- Efficient data loading and prefetching strategies
Cons of Remix
- Steeper learning curve for developers new to SSR concepts
- Less opinionated about project structure compared to Redwood
- Smaller ecosystem and community compared to more established frameworks
Code Comparison
Remix route example:
export async function loader({ params }) {
const user = await getUser(params.id);
return json({ user });
}
export default function UserProfile() {
const { user } = useLoaderData();
return <h1>{user.name}</h1>;
}
Redwood route example:
import { useQuery } from '@redwoodjs/web'
const GET_USER = gql`
query GetUser($id: Int!) {
user(id: $id) {
name
}
}
`
const UserProfile = ({ id }) => {
const { data } = useQuery(GET_USER, { variables: { id } })
return <h1>{data.user.name}</h1>
}
Both frameworks offer modern approaches to building web applications, but Remix focuses on web standards and SSR, while Redwood provides a more opinionated full-stack solution with GraphQL integration.
The best React-based framework with performance, scalability and security built in.
Pros of Gatsby
- Mature ecosystem with extensive plugin library
- Excellent performance optimization for static sites
- Strong community support and documentation
Cons of Gatsby
- Steeper learning curve, especially for GraphQL
- Can be overkill for simple projects
- Slower build times for large sites
Code Comparison
Gatsby (routing):
export const Head = () => <title>Home Page</title>
const IndexPage = () => {
return <main>Hello World!</main>
}
export default IndexPage
Redwood (routing):
import { Link, routes } from '@redwoodjs/router'
const HomePage = () => {
return <Link to={routes.about()}>About</Link>
}
export default HomePage
Gatsby focuses on static site generation and uses GraphQL for data fetching, while Redwood is a full-stack framework with a more traditional routing approach. Gatsby excels in creating fast, optimized static sites, whereas Redwood provides a more comprehensive solution for building full-stack applications with both frontend and backend components.
Gatsby's extensive plugin ecosystem and performance optimizations make it ideal for content-heavy sites, but it can be complex for beginners. Redwood offers a more integrated development experience with conventions that may be familiar to Ruby on Rails developers, making it potentially easier for full-stack application development.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Redwood
by Tom Preston-Werner, Peter Pistorius, Rob Cameron, David Price, and more than 250 amazing contributors (see end of file for a full list).
Bighorn Epoch (current development epoch)
NOTE: This section of the Readme is aspirational for the current development epoch we call Bighorn. Bighorn has not yet been released, but when it is, it will fulfill the promises of what you read below. If youâd like to help us on this journey, please say hi in the Community Forums!
Redwood is a framework for quickly creating React-based web applications that provide an amazing end user experience. Our goal is to be simple and approachable enough for use in prototypes and hackathons, but performant and comprehensive enough to evolve into your next startup.
We accomplish this in two primary ways:
-
Redwood is opinionated and full-stack. Weâve chosen the best technologies in the JS/TS ecosystem and beautifully integrated them into a cohesive framework that lets you get things done instead of endlessly evaluating technology options. You can get started using Redwood without a backend, but the framework really shines when youâre building a data driven application. Our transparent data fetching and optional GraphQL API make building and growing your application easier than you expect!
-
Redwoodâs declarative data fetching and simple form submission features are built on top of RSC + Server Actions and simplify common use cases so you can focus on your usersâ experience. Creating the best, most responsive user interfaces requires reasoning about whether code should execute on the server or the client. Redwood makes it easy to choose the best execution context for your code by leveraging the power of React Server Components.
The entire framework is built with TypeScript, so you get type safety from the router to the database and everywhere in-between. If youâd rather build your app with JavaScript, you can do that too, and still enjoy great code completion features in your favorite editor.
TRY BIGHORN: While Bighorn does not yet have a production release, we do publish the latest code as canaries, and we welcome you to experiment with them! The best way to get familiar with these canaries is to keep an eye on the Redwood Blog.
Arapahoe Epoch (current stable release)
Redwood is an opinionated, full-stack, JavaScript/TypeScript web application framework designed to keep you moving fast as your app grows from side project to startup.
At the highest level, a Redwood app is a React frontend that talks to a custom GraphQL API. The API uses Prisma to operate on a database. Out of the box you get tightly integrated testing with Jest, logging with Pino, and a UI component catalog with Storybook. Setting up authentication (like Auth0) or CSS frameworks (like Tailwind CSS) are a single command line invocation away. And to top it off, Redwood's architecture allows you to deploy to either serverless providers (e.g. Netlify, Vercel) or traditional server and container providers (e.g. AWS, Render) with nearly no code changes between the two!
By making a lot of decisions for you, Redwood lets you get to work on what makes your application special, instead of wasting cycles choosing and re-choosing various technologies and configurations. Plus, because Redwood is a proper framework, you benefit from continued performance and feature upgrades over time and with minimum effort.
TUTORIAL: The best way to get to know Redwood is by going through the extensive Redwood Tutorial. Have fun!
QUICK START: You can install and run a full-stack Redwood application on your machine with only a couple commands. Check out the Quick Start guide to get started.
DOCS: Visit the full RedwoodJS Documentation for extensive reference docs and guides.
About
Redwood is the latest open source project initiated by Tom Preston-Werner, cofounder of GitHub (most popular code host on the planet), creator of Jekyll (one of the first and most popular static site generators), creator of Gravatar (the most popular avatar service on the planet), author of the Semantic Versioning specification (powers the Node packaging ecosystem), and inventor of TOML (an obvious, minimal configuration language used by many projects).
Technologies
We are obsessed with developer experience and eliminating as much boilerplate as possible. Where existing libraries elegantly solve our problems, we use them; where they don't, we write our own solutions. The end result is a JavaScript development experience you can fall in love with!
Here's a quick taste of the technologies a standard Redwood application will use:
If you'd like to use our optional built-in GraphQL API support, here's our stack:
Roadmap
A framework like Redwood has a lot of moving parts; the Roadmap is a great way to get a high-level overview of where the framework is relative to where we want it to be. And since we link to all of our GitHub project boards, it's also a great way to get involved! Roadmap
Why is it called Redwood?
(A history, by Tom Preston-Werner)
Where I live in Northern California there is a type of tree called a redwood. Redwoods are HUGE, the tallest in the world, some topping out at 115 meters (380 feet) in height. The eldest of the still-living redwoods sprouted from the ground an astonishing 3,200 years ago. To stand among them is transcendent. Sometimes, when I need to think or be creative, I will journey to my favorite grove of redwoods and walk among these giants, soaking myself in their silent grandeur.
In addition, Redwoods have a few properties that I thought would be aspirational for my nascent web app framework. Namely:
-
Redwoods are beautiful as saplings, and grow to be majestic. What if you could feel that way about your web app?
-
Redwood pinecones are dense and surprisingly small. Can we allow you to get more done with less code?
-
Redwood trees are resistant to fire. Surprisingly robust to disaster scenarios, just like a great web framework should be!
-
Redwoods appear complex from afar, but simple up close. Their branching structure provides order and allows for emergent complexity within a simple framework. Can a web framework do the same?
And there you have it.
Contributors
A gigantic "Thank YOU!" to everyone below who has contributed to one or more Redwood projects: Framework, Website, Docs, and Create-Redwood Template. ð
Core Team: Leadership
 Amy Haywood Dutton |
 David Price |
 Tobbe Lundberg |
 Tom Preston-Werner |
Core Team: Maintainer and Community Leads
 David Thyresson maintainer |
 Daniel Choudhury maintainer |
 Keith T Elliot community |
 Barrett Burnworth community |
 Josh GM Walker maintainer |
Founders
Tom Preston-Werner |
 Peter Pistorius |
 Rob Cameron |
David Price |
Core Team: Alumni
All Contributors
Redwood projects (mostly) follow the all-contributions specification. Contributions of any kind are welcome.
Top Related Projects
The React Framework
web development for the rest of us
The Intuitive Vue Framework.
Build Better Websites. Create modern, resilient user experiences with web fundamentals.
The best React-based framework with performance, scalability and security built in.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot