Devvit Web
Devvit Web includes an easy way to build Devvit apps using a standard web stack.
What it is
Devvit Web allows developers to build Devvit apps just like you would for the web. At the core, Devvit Web provides:
- A standard web app that allows you to build with industry-standard frameworks and technologies (like React, Three.js, or Phaser).
- Server endpoints that you define to communicate between the webview client and the Devvit server, using industry-standard frameworks and technologies (like Express.js, Hono, Koa, etc.).
- Devvit configuration with a traditional client/server split. Devvit capabilities are now in one of three places:
- A configuration file in devvit.json for defining app metadata, permissions, and capabilities
- Client capabilities in the @devvit/client SDK
- Server capabilities, like Redis and Reddit API with the @devvit/server SDK
With Devvit Web, you have continued access to our hosting services, key capabilities like Redis and Reddit API, standard web technologies, and a typical client/server pattern to build your apps.
In addition, since you’re working with standard web technologies your apps should work with AI tools more effectively.
Examples
Visit https://developers.reddit.com/new and choose one of our templates or take a look at the github repositories:
Limitations
As with most experimental features, there are some caveats.
| Limitation | What it means |
|---|---|
| Serverless endpoints | The node server will run just long enough to execute your endpoint function and return a response, which means you can't use packages that require long-running connections like streaming. |
| Package limitations | Developers cannot use fs or external native packages. For now, we recommend using external services over the native dependencies, such as StreamPot (instead of ffmpeg) and OpenAI (instead of @xenova/transformers) . |
| Single request and single response handling only | Streaming or chunked responses and websockets are not supported. Long-polling is supported if it's under the max request time. |
| No external requests from your client | You can't have any external requests other than the app's webview domain. All backend responses are locked down to the webview domain via CSP. (Your backend can make external fetch requests though.) |
| localStorage clears on app updates | The iframe URL changes with each app version, so localStorage data is lost when you publish an update. Use Redis for data that needs to persist across app versions. |
Devvit Web still has the same technical requirements:
- Server endpoint calls
- Max request time: 30s
- Max payload size: 4MB
- Max response size: 10MB
- HTML/CSS/JS only
Devvit Web components
Devvit Web uses endpoints between the client and server to make communication similar to standard web apps. A Devvit Web app has three components:
- Client
- Server
- Configuration
Devvit Web templates all have the same file structure:
.
├── src/
│ ├── client/ # contains the webview code
│ └── server/ # endpoints for the client
└── devvit.json # the devvit config file
Now, instead of passing messages with postMessage (old way), you’ll define /api/endpoints (new way).
Client folder
This folder includes client-side code. This includes any html/css/javascript and relevant web libraries, and it will appear in a webview inside of a post for Reddit users.
When you want to make server-side calls, or use server-side capabilities, you’ll use fetch and define what happens in your server folder.
Server folder
This folder includes server-side code. We provide a node server, and you can use typical node server frameworks like Hono, Koa, or Express. This is where you can access key capabilities like Redis, Reddit API client, and fetch.
We also provide an authentication middleware so you don’t have to worry about authentication.
All server endpoints must start with /api/ (e.g. /api/get-something or /api/widgets/42).
Configuration in devvit.json
devvit.json is the configuration file for Devvit apps. It defines an app's post configuration, Node.js server configuration, permissions, scheduled jobs, event triggers, menu entries, payments configuration, and project settings. devvit.json replaces the legacy devvit.yaml configuration. A project should have one or the other but not both.
Learn more about devvit.json