diff --git a/docs/capabilities/blocks/app_image_assets.md b/docs/capabilities/blocks/app_image_assets.md index 21ce018..dfb5ea3 100644 --- a/docs/capabilities/blocks/app_image_assets.md +++ b/docs/capabilities/blocks/app_image_assets.md @@ -1,4 +1,4 @@ -# Adding Images +# Adding images Add images to your interactive post. diff --git a/docs/capabilities/blocks/blocks_payments.md b/docs/capabilities/blocks/blocks_payments.md index 4e535ea..961ba40 100644 --- a/docs/capabilities/blocks/blocks_payments.md +++ b/docs/capabilities/blocks/blocks_payments.md @@ -1,4 +1,4 @@ -# Adding Payments +# Adding payments You can use the payments template to build your app or add payment functionality to an existing app. @@ -42,7 +42,7 @@ Each product in the products field has the following attributes: | `sku` | A product identifier that can be used to group orders or organize your products. Each sku must be unique for each product in your app. | | `displayName` | The official name of the product that is displayed in purchase confirmation screens. The name must be fewer than 50 characters, including spaces. | | `description` | A text string that describes the product and is displayed in purchase confirmation screens. The description must be fewer than 150 characters, including spaces. | -| `price` | An predefined integer that sets the product price in Reddit gold. See details below. | +| `price` | An predefined integer that sets the product price in Reddit Gold. See details below. | | `image.icon` | **(optional)** The path to the icon that represents your product in your assets folder. | | `metadata` | **(optional)** An optional object that contains additional attributes you want to use to group and filter products. Keys and values must be alphanumeric (a - Z, 0 - 9, and - ) and contain 30 characters or less. You can add up to 10 metadata keys. Metadata keys cannot start with "devvit-". | | `accountingType` | Categories for how buyers consume your products. Possible values are: | @@ -74,7 +74,7 @@ You’ll need to clearly identify paid products or services. Here are some best - Use a short name, description, and image for each product. - Don’t overwhelm users with too many items. - Try to keep purchases in a consistent location or use a consistent visual pattern. -- Only use the gold icon to indicate purchases for Reddit gold. +- Only use the gold icon to indicate purchases for Reddit Gold. ### Product image diff --git a/docs/capabilities/client/forms.mdx b/docs/capabilities/client/forms.mdx index 25946d8..5dea0dd 100644 --- a/docs/capabilities/client/forms.mdx +++ b/docs/capabilities/client/forms.mdx @@ -152,7 +152,7 @@ A form lets your app ask users to input and submit data. Forms can be defined wi -## Menu Response Forms +## Menu response forms For forms that open from a menu item, you can use menu responses. This is useful since you do not have access to the `@devvit/web/client` library from a menu item endpoint. diff --git a/docs/capabilities/client/menu-actions.mdx b/docs/capabilities/client/menu-actions.mdx index 748ea50..c842d41 100644 --- a/docs/capabilities/client/menu-actions.mdx +++ b/docs/capabilities/client/menu-actions.mdx @@ -1,13 +1,13 @@ import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; -# Menu Actions +# Menu actions Add an item to the three dot menu for posts, comments, or subreddits. Menu actions can perform immediate client effects or trigger server processing followed by client effects. ![Subreddit menu actions](../../assets/capabilities/menu-actions/menu-actions-subreddit.png) -## Basic Menu Actions +## Basic menu actions **For most menu actions, use direct client effects.** These provide immediate responses and are perfect for simple actions that don't require server processing. @@ -121,7 +121,7 @@ context.ui.showForm(surveyForm); -## Supported Contexts +## Supported contexts You can decide where the menu action shows up by specifying the location property. diff --git a/docs/capabilities/client/overview.mdx b/docs/capabilities/client/overview.mdx index 18946e6..837a6f5 100644 --- a/docs/capabilities/client/overview.mdx +++ b/docs/capabilities/client/overview.mdx @@ -1,7 +1,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -# Overview +# Client Overview Client-side effects enable your Devvit app to provide interactive feedback and navigation to users. These effects include showing toasts, displaying forms, navigating to different pages, and more. diff --git a/docs/capabilities/devvit-web/devvit_web_configuration.md b/docs/capabilities/devvit-web/devvit_web_configuration.md index d4f3526..09a71eb 100644 --- a/docs/capabilities/devvit-web/devvit_web_configuration.md +++ b/docs/capabilities/devvit-web/devvit_web_configuration.md @@ -1,4 +1,4 @@ -# Configure Your App +# Configure your app The devvit.json file serves as your app's configuration file. Use it to specify entry points, configure features like [event triggers](../server/triggers) and [scheduled actions](../server/scheduler.mdx), and enable app functionality such as [image uploads](../server/media-uploads.mdx). This page covers all available devvit.json configuration options. A complete devvit.json example file is provided [here](#complete-example). diff --git a/docs/capabilities/devvit-web/devvit_web_overview.mdx b/docs/capabilities/devvit-web/devvit_web_overview.mdx index 9da13ae..0338820 100644 --- a/docs/capabilities/devvit-web/devvit_web_overview.mdx +++ b/docs/capabilities/devvit-web/devvit_web_overview.mdx @@ -34,10 +34,11 @@ 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. | +| 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](https://streampot.io/) (instead of ffmpeg) and [OpenAI](https://platform.openai.com/docs/guides/embeddings) (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.) | +| 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](../server/redis.mdx) for data that needs to persist across app versions. | Devvit Web still has the same technical requirements: diff --git a/docs/capabilities/server/cache-helper.mdx b/docs/capabilities/server/cache-helper.mdx index e4f50bf..3e38007 100644 --- a/docs/capabilities/server/cache-helper.mdx +++ b/docs/capabilities/server/cache-helper.mdx @@ -1,7 +1,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -# Cache Helper +# Cache helper Cache helper lets you build a more performant app by reducing the number of server side calls for the same data. You can create a short-term cache that stores JSON objects in your Devvit app for a limited amount of time. This is valuable when you have many clients trying to get the same data, for example a stock ticker value or a sports score. diff --git a/docs/capabilities/server/launch_screen_and_entry_points/launch_overview.mdx b/docs/capabilities/server/launch_screen_and_entry_points/launch_overview.mdx index 777f211..8157851 100644 --- a/docs/capabilities/server/launch_screen_and_entry_points/launch_overview.mdx +++ b/docs/capabilities/server/launch_screen_and_entry_points/launch_overview.mdx @@ -1,4 +1,4 @@ -# Overview +# View Modes, Launch Screens, and Entry Points Devvit’s interactive framework gives you powerful ways to shape how users experience apps, from launch screen to expanded screen viewing. With view modes, HTML-based launch screens, and multiple entry points, you can design apps that feel native and respond to how users interact across the Reddit platform. diff --git a/docs/capabilities/server/launch_screen_and_entry_points/view_modes_entry_points.md b/docs/capabilities/server/launch_screen_and_entry_points/view_modes_entry_points.md index 6d68a0b..0ef62d5 100644 --- a/docs/capabilities/server/launch_screen_and_entry_points/view_modes_entry_points.md +++ b/docs/capabilities/server/launch_screen_and_entry_points/view_modes_entry_points.md @@ -1,6 +1,6 @@ -# Setting up View Modes and Entry Points +# Setting up view modes and entry points -## View Modes +## View modes Devvit apps support two view modes: @@ -18,7 +18,7 @@ Devvit apps support two view modes: - **Use case**: Full games, longer load times, detailed interfaces, or any content that needs more space or full gesture support - **Trigger**: User-initiated only (button click, gesture, etc.) -## Multiple Entry Points +## Multiple entry points Multiple entry points let the user start the game from different contexts or states. For example, you can have a button that launches into a leaderboard view and another for a specific game mode, each of these would be configured as an entry point for your app. Define multiple entry points in your `devvit.json`. If you use the [Devvit Vite plugin](../../../guides/tools/vite), it automatically infers the client build inputs from these entrypoints, so you don't need to maintain a custom Rollup `input` list. @@ -78,7 +78,7 @@ your-app/ The `dir` property specifies where your built client files are located. With the Devvit Vite plugin, the `entry` values point at your source HTML files (for example `src/client/preview.html`), and the plugin outputs the matching files into `dist/client` during `vite build`. -### Creating Posts with Specific Entry Points +### Creating posts with specific entry points Use the `entry` parameter when creating posts to specify which entry point from your `devvit.json` configuration to use. The entry value must match one of the keys defined in `post.entrypoints`. @@ -118,7 +118,7 @@ async function createGamePost(context: any) { - Each entry point can have its own HTML file and height setting. - Invalid entry point names will cause an error. -### Switching Between View Modes +### Switching between view modes You can transition from inline mode to expanded mode with a different entry point, like this: @@ -135,7 +135,7 @@ const handleStartGame = async (event: React.MouseEvent) => { }; ``` -## Inline Mode Requirements +## Inline mode requirements All Devvit web view apps load in inline mode by default. Your app loads directly in the post unit without requiring users to click to expand. diff --git a/docs/capabilities/server/media-uploads.mdx b/docs/capabilities/server/media-uploads.mdx index d039409..7316f1a 100644 --- a/docs/capabilities/server/media-uploads.mdx +++ b/docs/capabilities/server/media-uploads.mdx @@ -49,6 +49,39 @@ On the server, you can pass the URL of any remotely hosted image (even if its no +## Canvas screenshots + +The Canvas API is fully supported by Devvit. You can use it to capture screenshots of your app's current state and upload them using the media API. + +This is useful for letting users share their progress, achievements, or creations as image posts. Sharing screenshots is an effective way to build community engagement and increase visibility for your app. + +```ts title="client/screenshot.ts" +// Capture the canvas as a data URL +const canvas = document.querySelector('canvas'); +const dataUrl = canvas.toDataURL('image/png'); + +// Send to server endpoint for upload +const response = await fetch('/api/upload-screenshot', { + method: 'POST', + body: JSON.stringify({ image: dataUrl }), +}); +``` + +```ts title="server/index.ts" +import { media } from '@devvit/media'; + +app.post('/api/upload-screenshot', async (c) => { + const { image } = await c.req.json(); + + const response = await media.upload({ + url: image, // data URL from canvas + type: 'png', + }); + + return c.json({ url: response.mediaUrl }); +}); +``` + ## Limitations - The formats supported are PNG, JPEG, WEBP, and GIF. diff --git a/docs/capabilities/server/overview.md b/docs/capabilities/server/overview.md index dfe5e2b..a2a90e3 100644 --- a/docs/capabilities/server/overview.md +++ b/docs/capabilities/server/overview.md @@ -1,4 +1,4 @@ -# Overview +# Server Overview Devvit offers a wide variety of features that help you integrate your app with Reddit's APIs, scale your app free of charge using Reddit's backend, and more. The features in this section are executed on the server side. They can be imported in both [Devvit Web](../devvit-web/devvit_web_overview.mdx) and [Devvit Blocks](../blocks/overview.md) applications, as well as Mod Tools. diff --git a/docs/capabilities/server/post-data.mdx b/docs/capabilities/server/post-data.mdx index 0337cc4..ac2f09f 100644 --- a/docs/capabilities/server/post-data.mdx +++ b/docs/capabilities/server/post-data.mdx @@ -2,7 +2,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -# Post Data +# Post data You can attach small amounts of data (2KB) to a post when creating it and update this data using the `postData` capability. This enables dynamic, stateful experiences available on posts without a server call. Post data is scoped to the post, not users. diff --git a/docs/capabilities/server/reddit-api.mdx b/docs/capabilities/server/reddit-api.mdx index 44ced71..cb9191f 100644 --- a/docs/capabilities/server/reddit-api.mdx +++ b/docs/capabilities/server/reddit-api.mdx @@ -1,10 +1,25 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -# Overview +# Reddit API Overview The Reddit API allows you to read and write Reddit content such as posts / comments / upvotes, in order to integrate your app's behavior with the content of the community it's installed in. +:::note +Unlike traditional Reddit API usage, you don't need to create an app at [reddit.com/prefs/apps](https://www.reddit.com/prefs/apps) or manage API keys. Devvit handles authentication automatically when you enable the `reddit` permission in your app. +::: + +## Private user data + +Devvit apps cannot access certain private user data. This data is private to the logged-in user and is not exposed through the Devvit platform: + +- **Subscribed subreddits** - The list of subreddits a user is subscribed to +- **Upvoted and downvoted content** - Posts and comments the user has voted on +- **Saved content** - Posts and comments the user has saved +- **Recently viewed posts** - The user's browsing history +- **Private profile information** - Any profile data that is not publicly visible +- **Follows and friends** - The list of users someone follows (on reddit.com) or has friended (on Old Reddit) + ## The Reddit client Here's how to obtain a reference to the Reddit client diff --git a/docs/capabilities/server/text_fallback.mdx b/docs/capabilities/server/text_fallback.mdx index 586a211..cbe082c 100644 --- a/docs/capabilities/server/text_fallback.mdx +++ b/docs/capabilities/server/text_fallback.mdx @@ -1,45 +1,29 @@ -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -# Text Fallback for old.reddit +# Text Fallback -Old.reddit does not render interactive posts. To remedy this, use textFallback to ensure that you can specify the text for the instances when Devvit cannot render your post. You can do this with a text string or in rich text. +Text fallback lets you specify alternative text content for your interactive post, enabling: -Setting a relevant text fallback is critical for SEO and growth of your app. +- **Old Reddit and third-party app support** - These platforms cannot render interactive posts +- **Google (SEO) and Reddit Answers indexing** - Critical for discoverability and growth +- **AutoModerator rule compatibility** - Allows mod rules to process your post content +- **Reddit safety checks and filters** - Enables content moderation systems to work properly +- **Custom post thumbnail** - Link to an image to generate a thumbnail + +Text fallback uses Markdown formatting and allows for up to 40,000 characters. ## [Reddit API](./reddit-api.mdx) -The text fallback is only available when using the Reddit API to create a post. It is available for both [Devvit Web](../devvit-web/devvit_web_overview.mdx) and [Devvit Blocks](../blocks/overview.md) applications. -The code samples below assume that you already have a reference to the Reddit API client. Please see below how to obtain a refere -nce to the Reddit API client in both Devvit Web and Devvit Blocks. +The text fallback is only available when using the Reddit API to create a post. + + - - ```json title="devvit.json" { "permissions": { - "redditApi": true + "reddit": true } } ``` - ```ts title="server/index.ts" - import { reddit } from '@devvit/web/server'; - ``` - - - ```ts - import { Devvit } from '@devvit/public-api'; - - Devvit.configure({ - redditApi: true, - }); - - //Then, in any function that has a reference to Devvit.Context: - const reddit = context.reddit; - ``` - - - ## Use a text string ```tsx diff --git a/docs/capabilities/server/userActions.mdx b/docs/capabilities/server/userActions.mdx index 00c5ee5..6926b82 100644 --- a/docs/capabilities/server/userActions.mdx +++ b/docs/capabilities/server/userActions.mdx @@ -1,7 +1,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -# User Actions +# User actions User actions allow your app to submit posts, submit comments, and subscribe to the current subreddit on behalf of the logged in user. These actions occur on the logged in user's account instead of the app account. This enables stronger user engagement while ensuring user control and transparency. @@ -14,6 +14,13 @@ By default, apps make posts or comments using their associated app account. With - Create posts or comments on behalf of the user (from the post UI, a form, or a menu action) - Subscribe the user to the current subreddit +### Unavailable actions + +Some actions are not available to apps to prevent abuse and maintain platform integrity: + +- **Voting** - Apps cannot upvote or downvote posts or comments, either as the app account or on behalf of the logged-in user +- **Following/friending users** - Apps cannot follow users (on reddit.com) or add friends (on Old Reddit), either as the app account or on behalf of the logged-in user + --- Requirements @@ -86,8 +93,6 @@ Apps that use `submitPost()` with `runAs: 'USER'` require `userGeneratedContent` ## Example: Submit a post as the user -This example uses a form to prompt the user for input and then submits a post as the user. -
  • `INSTANT` for purchased items that are used immediately and disappear.
  • `DURABLE` for purchased items that are permanently applied to the account and can be used any number of times
  • `CONSUMABLE` for items that can be used at a later date but are removed once they are used.
  • `VALID_FOR_` values indicate a product can be used throughout a period of time after it is purchased.
    • | @@ -217,7 +217,7 @@ You’ll need to clearly identify paid products or services. Here are some best - Use a short name, description, and image for each product. - Don’t overwhelm users with too many items. - Try to keep purchases in a consistent location or use a consistent visual pattern. -- Only use the gold icon to indicate purchases for Reddit gold. +- Only use the gold icon to indicate purchases for Reddit Gold. ### Product image diff --git a/docs/earn-money/payments/payments_migrate.mdx b/docs/earn-money/payments/payments_migrate.mdx index 942190c..ab33351 100644 --- a/docs/earn-money/payments/payments_migrate.mdx +++ b/docs/earn-money/payments/payments_migrate.mdx @@ -1,7 +1,7 @@ import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; -# Migrate Blocks Payments +# Migrate Blocks payments If you already have payments set up on a Blocks app, use the following steps to migrate your payments functionality. diff --git a/docs/earn-money/payments/payments_overview.md b/docs/earn-money/payments/payments_overview.md index c1c0bee..2b8b47a 100644 --- a/docs/earn-money/payments/payments_overview.md +++ b/docs/earn-money/payments/payments_overview.md @@ -1,4 +1,4 @@ -# Overview +# In-App Purchases Overview Add products to your app and get paid for what you sell. The payments plugin lets you prompt users to buy premium features that you build into your app, like in-game items, additional lives, or exclusive features into your app. diff --git a/docs/earn-money/payments/payments_publish.md b/docs/earn-money/payments/payments_publish.md index 9b7ab0c..3bea9c5 100644 --- a/docs/earn-money/payments/payments_publish.md +++ b/docs/earn-money/payments/payments_publish.md @@ -1,4 +1,4 @@ -# Publish Your App +# Publish your app :::note The Developer Platform team reviews and approves apps and their products before products can be sold. diff --git a/docs/earn-money/payments/support_this_app.md b/docs/earn-money/payments/support_this_app.md index 42732df..242ac04 100644 --- a/docs/earn-money/payments/support_this_app.md +++ b/docs/earn-money/payments/support_this_app.md @@ -1,6 +1,6 @@ -# Support This App +# Support this app -You can ask users to contribute to your app’s development by adding the “support this app” feature. This allows users to support your app with Reddit gold in exchange for some kind of award or recognition. +You can ask users to contribute to your app’s development by adding the “support this app” feature. This allows users to support your app with Reddit Gold in exchange for some kind of award or recognition. ## Requirements diff --git a/docs/examples/template-library.md b/docs/examples/template-library.md index 3da8c38..d49a28a 100644 --- a/docs/examples/template-library.md +++ b/docs/examples/template-library.md @@ -1,4 +1,4 @@ -# Template Library +# Template library Here are some starter projects and templates for your Devvit projects diff --git a/docs/guides/launch/feature-guide.mdx b/docs/guides/launch/feature-guide.mdx index 5717079..b02705b 100644 --- a/docs/guides/launch/feature-guide.mdx +++ b/docs/guides/launch/feature-guide.mdx @@ -1,4 +1,4 @@ -# Get Featured +# Get featured Reddit celebrates creative games and experiences built by developers from our global community. Our Featuring Program does this by connecting exciting new apps with millions of active redditors. diff --git a/docs/guides/launch/launch-guide.md b/docs/guides/launch/launch-guide.md index 0d7c1b5..f49525c 100644 --- a/docs/guides/launch/launch-guide.md +++ b/docs/guides/launch/launch-guide.md @@ -1,4 +1,4 @@ -# Launch Your App +# Launch your app Once your app is ready, you can launch it to users and moderators across Reddit. This guide outlines what “launch-ready” means and the steps you need to take to submit your app for review. diff --git a/docs/guides/tools/devvit_test.mdx b/docs/guides/tools/devvit_test.mdx index 5e7ff7f..1fafe33 100644 --- a/docs/guides/tools/devvit_test.mdx +++ b/docs/guides/tools/devvit_test.mdx @@ -8,7 +8,7 @@ sidebar_label: Testing The `@devvit/test` package provides utilities to write unit and integration tests for your backend logic with [Vitest](https://vitest.dev/). -## Capability Support +## Capability support Out of the box, the test harness mocks many of Devvit's capabilities for you. Here's what's supported: @@ -26,7 +26,7 @@ Out of the box, the test harness mocks many of Devvit's capabilities for you. He You can use these capabilities inside your tests exactly as you do in production code. -## Getting Started +## Getting started The `@devvit/test` package provides a miniature Devvit backend on demand. Every time you call `test()`, the harness spins up a temporary, isolated test world in memory, including its own Redis, Reddit API, Scheduler, and other capabilities. This lets you write tests that verify your app's behavior in a production-like environment. @@ -94,7 +94,7 @@ const test = createDevvitTest({ }); ``` -## Integration Testing & Isolation +## Integration testing & isolation The test harness is built for integration-style testing. Each test defined with `test()` runs in its own isolated world. State (including Redis and mocks) is reset for you between runs. There is no supported way to share state across tests. Vitest concurrency (`test.concurrent`) and parameterized tests (`test.each`) are fully supported. @@ -119,7 +119,7 @@ test("should also increment counter to 1", async ({ redis }) => { }); ``` -### Staging Data For Your Tests +### Staging data for your tests When testing your app logic, it's best to use your own service layer methods to stage data rather than manually manipulating the mock storage. This ensures your tests cover your actual application flows and behavior more accurately. @@ -152,7 +152,7 @@ test("can delete a user", async ({ redis }) => { If you just need a quick smoke test, you _can_ stage data directly via the same capabilities you use in production (e.g., `await redis.set('user:bob', JSON.stringify({ age: 30 }))`), but using your service APIs helps you cover more of your stack. -## Capability Guides +## Capability guides Each mocked capability exposes the same API surface you use in production. Unless noted otherwise, every `test()` gets a completely fresh, isolated world, so state never bleeds between tests. @@ -370,7 +370,7 @@ test("blocks HTTP by default", async () => { }); ``` -#### Basic Mocking +#### Basic mocking Use `vi.spyOn` to mock `fetch()` calls: @@ -402,7 +402,7 @@ test("fetches Pokemon data", async () => { }); ``` -#### Testing Error Cases +#### Testing error cases You can also test error handling by making your mock return error responses: @@ -429,7 +429,7 @@ test("handles API errors", async () => { }); ``` -#### Mocking POST Requests +#### Mocking POST requests You can also mock POST requests and inspect the request body: @@ -489,7 +489,7 @@ The harness seeds a default user and subreddit based on your configuration. Use _Note: `LinksAndComments` is more commonly referred to as `posts`._ -#### Mocking Methods on Returned Objects +#### Mocking methods on returned objects Some methods exist on the objects returned by the API (like `user.getSocialLinks()`). Since these objects are real instances returned by the harness, you can spy on the specific instance to mock them. @@ -526,7 +526,7 @@ test("mocks social links on a returned user", async ({ mocks }) => { }); ``` -#### Seeding Supported Models +#### Seeding supported models For supported calls like `getUserByUsername`, use the provided `mocks.reddit` fixture to seed the backing store. @@ -565,7 +565,7 @@ test("can fetch a post", async ({ mocks }) => { }); ``` -## Multiple Test Instances +## Multiple test instances Most of the time, you'll define a single `const test = createDevvitTest()` at the top of your spec file and use fixtures/settings to customize behavior. But if you need distinct contexts, such as different subreddits or users, you can spin up additional instances, even within the same file. diff --git a/docs/guides/tools/vite.mdx b/docs/guides/tools/vite.mdx index 1c52a5c..c1db10c 100644 --- a/docs/guides/tools/vite.mdx +++ b/docs/guides/tools/vite.mdx @@ -140,7 +140,7 @@ src/ formatScore.ts # safe to import from client + server ``` -## Migrating Old Templates +## Migrating old templates If you started with a template before this plugin, migrating it is simple! diff --git a/docs/quickstart/quickstart-mod-tool.md b/docs/quickstart/quickstart-mod-tool.md index 94864aa..b3ae9b6 100644 --- a/docs/quickstart/quickstart-mod-tool.md +++ b/docs/quickstart/quickstart-mod-tool.md @@ -1,4 +1,4 @@ -# Mod Tool Quickstart +# Mod tool quickstart Devvit allows you to build Mod Tools \- subreddit-installed applications that help moderators of that community to take action on conversations, keeping their communities safe and engaged. diff --git a/docs/quickstart/quickstart-unity.mdx b/docs/quickstart/quickstart-unity.mdx index b8f61c9..176be5b 100644 --- a/docs/quickstart/quickstart-unity.mdx +++ b/docs/quickstart/quickstart-unity.mdx @@ -1,4 +1,4 @@ -# Unity Quickstart +# Unity quickstart This tutorial walks you through building a Unity app for Devvit. Once complete, you'll see your Unity game running directly within a Reddit post. @@ -141,7 +141,7 @@ yield return request.SendWebRequest(); Be sure that the object structure for the response type (such as `InitResponse` defined in `shared/types/api.ts`) matches the ones outlined in your `DevvitBridge.cs` file. ::: -### Saving Data to Reddit +### Saving data to Reddit This starter project also includes an example of saving the completion time to Reddit through the `LevelCompletedRequest`. For Devvit apps, data is stored in [Redis](../capabilities/server/redis). diff --git a/docs/quickstart/quickstart.md b/docs/quickstart/quickstart.md index b0bd539..0475419 100644 --- a/docs/quickstart/quickstart.md +++ b/docs/quickstart/quickstart.md @@ -1,4 +1,4 @@ -# App Quickstart +# App quickstart This tutorial takes you through the step-by-step process of building your first app with Devvit. It should take you about 1 minute to complete. Once complete, you'll be able to see your app in a Reddit post diff --git a/versioned_docs/version-0.11/capabilities/userActions.md b/versioned_docs/version-0.11/capabilities/userActions.md index 2031895..597ec71 100644 --- a/versioned_docs/version-0.11/capabilities/userActions.md +++ b/versioned_docs/version-0.11/capabilities/userActions.md @@ -66,8 +66,6 @@ Note: Apps that `submitPost()` with `runAs: 'USER'` require `userGeneratedConten ## Example -This example app uses a form to prompt the user for their favorite color and then submits a post displaying the user's text input. - ```tsx import { Devvit, useForm, useState } from '@devvit/public-api'; diff --git a/versioned_docs/version-0.11/devvit_web/devvit_web_overview.mdx b/versioned_docs/version-0.11/devvit_web/devvit_web_overview.mdx index e90ece5..509495a 100644 --- a/versioned_docs/version-0.11/devvit_web/devvit_web_overview.mdx +++ b/versioned_docs/version-0.11/devvit_web/devvit_web_overview.mdx @@ -31,10 +31,11 @@ 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. | +| 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](https://streampot.io/) (instead of ffmpeg) and [OpenAI](https://platform.openai.com/docs/guides/embeddings) (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.) | +| 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](../capabilities/redis.md) for data that needs to persist across app versions. | Devvit Web still has the same technical requirements: diff --git a/versioned_docs/version-0.11/payments/payments_add.md b/versioned_docs/version-0.11/payments/payments_add.md index ac73bec..0e94c30 100644 --- a/versioned_docs/version-0.11/payments/payments_add.md +++ b/versioned_docs/version-0.11/payments/payments_add.md @@ -38,7 +38,7 @@ Each product in the products field has the following attributes: | `sku` | A product identifier that can be used to group orders or organize your products. Each sku must be unique for each product in your app. | | `displayName` | The official name of the product that is displayed in purchase confirmation screens. The name must be fewer than 50 characters, including spaces. | | `description` | A text string that describes the product and is displayed in purchase confirmation screens. The description must be fewer than 150 characters, including spaces. | -| `price` | An predefined integer that sets the product price in Reddit gold. See details below. | +| `price` | An predefined integer that sets the product price in Reddit Gold. See details below. | | `image.icon` | **(optional)** The path to the icon that represents your product in your [assets](../app_image_assets) folder. | | `metadata` | **(optional)** An optional object that contains additional attributes you want to use to group and filter products. Keys and values must be alphanumeric (a - Z, 0 - 9, and - ) and contain 30 characters or less. You can add up to 10 metadata keys. Metadata keys cannot start with "devvit-". | | `accountingType` | Categories for how buyers consume your products. Possible values are: | @@ -70,7 +70,7 @@ You’ll need to clearly identify paid products or services. Here are some best - Use a short name, description, and image for each product. - Don’t overwhelm users with too many items. - Try to keep purchases in a consistent location or use a consistent visual pattern. -- Only use the gold icon to indicate purchases for Reddit gold. +- Only use the gold icon to indicate purchases for Reddit Gold. ### Product image diff --git a/versioned_docs/version-0.11/payments/payments_overview.md b/versioned_docs/version-0.11/payments/payments_overview.md index cce9612..c2c3b06 100644 --- a/versioned_docs/version-0.11/payments/payments_overview.md +++ b/versioned_docs/version-0.11/payments/payments_overview.md @@ -1,4 +1,4 @@ -# Overview +# In-App Purchases Overview Add products to your app and get paid for what you sell. The payments plugin lets you prompt users to buy premium features that you build into your app, like in-game items, additional lives, or exclusive features into your app. diff --git a/versioned_docs/version-0.11/payments/support_this_app.md b/versioned_docs/version-0.11/payments/support_this_app.md index bbf2b7e..2cb29bc 100644 --- a/versioned_docs/version-0.11/payments/support_this_app.md +++ b/versioned_docs/version-0.11/payments/support_this_app.md @@ -1,6 +1,6 @@ # Support this app -You can ask users to contribute to your app’s development by adding the “support this app” feature. This allows users to support your app with Reddit gold in exchange for some kind of award or recognition. +You can ask users to contribute to your app’s development by adding the “support this app” feature. This allows users to support your app with Reddit Gold in exchange for some kind of award or recognition. ## Requirements diff --git a/versioned_docs/version-0.11/showcase/monetization_examples.md b/versioned_docs/version-0.11/showcase/monetization_examples.md index a454e29..7d60f70 100644 --- a/versioned_docs/version-0.11/showcase/monetization_examples.md +++ b/versioned_docs/version-0.11/showcase/monetization_examples.md @@ -26,7 +26,7 @@ In-game purchasing is integrated into the “build” aspect of the game. There ### From the developer -_Although the primary focus of buildit was on competition, we also wanted to allow players to customize the tile sets behind the levels. This was a perfect fit for monetization using Reddit gold. Including the SDK was quick and easy, and offers a small but important customization element to the final game._ +_Although the primary focus of buildit was on competition, we also wanted to allow players to customize the tile sets behind the levels. This was a perfect fit for monetization using Reddit Gold. Including the SDK was quick and easy, and offers a small but important customization element to the final game._ _It’s proven that adding optional purchases for core users can increase engagement and boost retention. We’re excited to see how players customize their levels in the future!_ @@ -79,7 +79,7 @@ XP stay within each subreddit, and your level determines what features you unloc ### Adding payments -Using the [monetization](../payments/payments_overview.md) feature, Hammertime Studio added the ability for players to purchase AI credits using Reddit gold. Each AI credit enables players to generate one riddle using AI or unlock an AI generated hint for everyone as a comment. The option to unlock AI Riddle mode and buy AI credits becomes available once players reach level 5. +Using the [monetization](../payments/payments_overview.md) feature, Hammertime Studio added the ability for players to purchase AI credits using Reddit Gold. Each AI credit enables players to generate one riddle using AI or unlock an AI generated hint for everyone as a comment. The option to unlock AI Riddle mode and buy AI credits becomes available once players reach level 5. ![Riddonkulous IAP](../assets/showcase/riddonkulous_reddit_gold.gif) diff --git a/versioned_docs/version-0.12/capabilities/blocks/app_image_assets.md b/versioned_docs/version-0.12/capabilities/blocks/app_image_assets.md index 0d87766..80023ef 100644 --- a/versioned_docs/version-0.12/capabilities/blocks/app_image_assets.md +++ b/versioned_docs/version-0.12/capabilities/blocks/app_image_assets.md @@ -1,4 +1,4 @@ -# Adding Images +# Adding images Add images to your interactive post. diff --git a/versioned_docs/version-0.12/capabilities/blocks/blocks_payments.md b/versioned_docs/version-0.12/capabilities/blocks/blocks_payments.md index 4e535ea..961ba40 100644 --- a/versioned_docs/version-0.12/capabilities/blocks/blocks_payments.md +++ b/versioned_docs/version-0.12/capabilities/blocks/blocks_payments.md @@ -1,4 +1,4 @@ -# Adding Payments +# Adding payments You can use the payments template to build your app or add payment functionality to an existing app. @@ -42,7 +42,7 @@ Each product in the products field has the following attributes: | `sku` | A product identifier that can be used to group orders or organize your products. Each sku must be unique for each product in your app. | | `displayName` | The official name of the product that is displayed in purchase confirmation screens. The name must be fewer than 50 characters, including spaces. | | `description` | A text string that describes the product and is displayed in purchase confirmation screens. The description must be fewer than 150 characters, including spaces. | -| `price` | An predefined integer that sets the product price in Reddit gold. See details below. | +| `price` | An predefined integer that sets the product price in Reddit Gold. See details below. | | `image.icon` | **(optional)** The path to the icon that represents your product in your assets folder. | | `metadata` | **(optional)** An optional object that contains additional attributes you want to use to group and filter products. Keys and values must be alphanumeric (a - Z, 0 - 9, and - ) and contain 30 characters or less. You can add up to 10 metadata keys. Metadata keys cannot start with "devvit-". | | `accountingType` | Categories for how buyers consume your products. Possible values are: | @@ -74,7 +74,7 @@ You’ll need to clearly identify paid products or services. Here are some best - Use a short name, description, and image for each product. - Don’t overwhelm users with too many items. - Try to keep purchases in a consistent location or use a consistent visual pattern. -- Only use the gold icon to indicate purchases for Reddit gold. +- Only use the gold icon to indicate purchases for Reddit Gold. ### Product image diff --git a/versioned_docs/version-0.12/capabilities/client/forms.mdx b/versioned_docs/version-0.12/capabilities/client/forms.mdx index 25946d8..5dea0dd 100644 --- a/versioned_docs/version-0.12/capabilities/client/forms.mdx +++ b/versioned_docs/version-0.12/capabilities/client/forms.mdx @@ -152,7 +152,7 @@ A form lets your app ask users to input and submit data. Forms can be defined wi     -## Menu Response Forms +## Menu response forms For forms that open from a menu item, you can use menu responses. This is useful since you do not have access to the `@devvit/web/client` library from a menu item endpoint. diff --git a/versioned_docs/version-0.12/capabilities/client/menu-actions.mdx b/versioned_docs/version-0.12/capabilities/client/menu-actions.mdx index 748ea50..c842d41 100644 --- a/versioned_docs/version-0.12/capabilities/client/menu-actions.mdx +++ b/versioned_docs/version-0.12/capabilities/client/menu-actions.mdx @@ -1,13 +1,13 @@ import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; -# Menu Actions +# Menu actions Add an item to the three dot menu for posts, comments, or subreddits. Menu actions can perform immediate client effects or trigger server processing followed by client effects. ![Subreddit menu actions](../../assets/capabilities/menu-actions/menu-actions-subreddit.png) -## Basic Menu Actions +## Basic menu actions **For most menu actions, use direct client effects.** These provide immediate responses and are perfect for simple actions that don't require server processing. @@ -121,7 +121,7 @@ context.ui.showForm(surveyForm); -## Supported Contexts +## Supported contexts You can decide where the menu action shows up by specifying the location property. diff --git a/versioned_docs/version-0.12/capabilities/client/overview.mdx b/versioned_docs/version-0.12/capabilities/client/overview.mdx index 18946e6..837a6f5 100644 --- a/versioned_docs/version-0.12/capabilities/client/overview.mdx +++ b/versioned_docs/version-0.12/capabilities/client/overview.mdx @@ -1,7 +1,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -# Overview +# Client Overview Client-side effects enable your Devvit app to provide interactive feedback and navigation to users. These effects include showing toasts, displaying forms, navigating to different pages, and more. diff --git a/versioned_docs/version-0.12/capabilities/devvit-web/devvit_web_configuration.md b/versioned_docs/version-0.12/capabilities/devvit-web/devvit_web_configuration.md index d4f3526..09a71eb 100644 --- a/versioned_docs/version-0.12/capabilities/devvit-web/devvit_web_configuration.md +++ b/versioned_docs/version-0.12/capabilities/devvit-web/devvit_web_configuration.md @@ -1,4 +1,4 @@ -# Configure Your App +# Configure your app The devvit.json file serves as your app's configuration file. Use it to specify entry points, configure features like [event triggers](../server/triggers) and [scheduled actions](../server/scheduler.mdx), and enable app functionality such as [image uploads](../server/media-uploads.mdx). This page covers all available devvit.json configuration options. A complete devvit.json example file is provided [here](#complete-example). diff --git a/versioned_docs/version-0.12/capabilities/devvit-web/devvit_web_overview.mdx b/versioned_docs/version-0.12/capabilities/devvit-web/devvit_web_overview.mdx index 9da13ae..0338820 100644 --- a/versioned_docs/version-0.12/capabilities/devvit-web/devvit_web_overview.mdx +++ b/versioned_docs/version-0.12/capabilities/devvit-web/devvit_web_overview.mdx @@ -34,10 +34,11 @@ 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. | +| 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](https://streampot.io/) (instead of ffmpeg) and [OpenAI](https://platform.openai.com/docs/guides/embeddings) (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.) | +| 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](../server/redis.mdx) for data that needs to persist across app versions. | Devvit Web still has the same technical requirements: diff --git a/versioned_docs/version-0.12/capabilities/server/cache-helper.mdx b/versioned_docs/version-0.12/capabilities/server/cache-helper.mdx index e4f50bf..3e38007 100644 --- a/versioned_docs/version-0.12/capabilities/server/cache-helper.mdx +++ b/versioned_docs/version-0.12/capabilities/server/cache-helper.mdx @@ -1,7 +1,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -# Cache Helper +# Cache helper Cache helper lets you build a more performant app by reducing the number of server side calls for the same data. You can create a short-term cache that stores JSON objects in your Devvit app for a limited amount of time. This is valuable when you have many clients trying to get the same data, for example a stock ticker value or a sports score. diff --git a/versioned_docs/version-0.12/capabilities/server/launch_screen_and_entry_points/launch_overview.mdx b/versioned_docs/version-0.12/capabilities/server/launch_screen_and_entry_points/launch_overview.mdx index 777f211..8157851 100644 --- a/versioned_docs/version-0.12/capabilities/server/launch_screen_and_entry_points/launch_overview.mdx +++ b/versioned_docs/version-0.12/capabilities/server/launch_screen_and_entry_points/launch_overview.mdx @@ -1,4 +1,4 @@ -# Overview +# View Modes, Launch Screens, and Entry Points Devvit’s interactive framework gives you powerful ways to shape how users experience apps, from launch screen to expanded screen viewing. With view modes, HTML-based launch screens, and multiple entry points, you can design apps that feel native and respond to how users interact across the Reddit platform. diff --git a/versioned_docs/version-0.12/capabilities/server/launch_screen_and_entry_points/view_modes_entry_points.md b/versioned_docs/version-0.12/capabilities/server/launch_screen_and_entry_points/view_modes_entry_points.md index 82cbf88..46a5c6b 100644 --- a/versioned_docs/version-0.12/capabilities/server/launch_screen_and_entry_points/view_modes_entry_points.md +++ b/versioned_docs/version-0.12/capabilities/server/launch_screen_and_entry_points/view_modes_entry_points.md @@ -1,6 +1,6 @@ -# Setting up View Modes and Entry Points +# Setting up view modes and entry points -## View Modes +## View modes Devvit apps support two view modes: @@ -18,7 +18,7 @@ Devvit apps support two view modes: - **Use case**: Full games, longer load times, detailed interfaces, or any content that needs more space or full gesture support - **Trigger**: User-initiated only (button click, gesture, etc.) -## Multiple Entry Points +## Multiple entry points Multiple entry points let the user start the game from different contexts or states. For example, you can have a button that launches into a leaderboard view and another for a specific game mode, each of these would be configured as an entry point for your app. Define multiple entry points in your `devvit.json`. If you use the [Devvit Vite plugin](../../../guides/tools/vite), it automatically infers the client build inputs from these entrypoints, so you don't need to maintain a custom Rollup `input` list. @@ -78,7 +78,7 @@ your-app/ The `dir` property specifies where your built client files are located. With the Devvit Vite plugin, the `entry` values point at your source HTML files (for example `src/client/preview.html`), and the plugin outputs the matching files into `dist/client` during `vite build`. -### Creating Posts with Specific Entry Points +### Creating posts with specific entry points Use the `entry` parameter when creating posts to specify which entry point from your `devvit.json` configuration to use. The entry value must match one of the keys defined in `post.entrypoints`. @@ -118,7 +118,7 @@ async function createGamePost(context: any) { - Each entry point can have its own HTML file and height setting. - Invalid entry point names will cause an error. -### Switching Between View Modes +### Switching between view modes You can transition from inline mode to expanded mode with a different entry point, like this: @@ -135,7 +135,7 @@ const handleStartGame = async (event: React.MouseEvent) => { }; ``` -## Inline Mode Requirements +## Inline mode requirements All Devvit web view apps load in inline mode by default. Your app loads directly in the post unit without requiring users to click to expand. diff --git a/versioned_docs/version-0.12/capabilities/server/media-uploads.mdx b/versioned_docs/version-0.12/capabilities/server/media-uploads.mdx index d039409..844b6cb 100644 --- a/versioned_docs/version-0.12/capabilities/server/media-uploads.mdx +++ b/versioned_docs/version-0.12/capabilities/server/media-uploads.mdx @@ -49,6 +49,39 @@ On the server, you can pass the URL of any remotely hosted image (even if its no +## Canvas screenshots + +The Canvas API is fully supported in Devvit Web. You can use it to capture screenshots of your app's current state and upload them using the media API. + +This is useful for letting users share their progress, achievements, or creations as image posts. Sharing screenshots is an effective way to build community engagement and increase visibility for your app. + +```ts title="client/screenshot.ts" +// Capture the canvas as a data URL +const canvas = document.querySelector('canvas'); +const dataUrl = canvas.toDataURL('image/png'); + +// Send to server endpoint for upload +const response = await fetch('/api/upload-screenshot', { + method: 'POST', + body: JSON.stringify({ image: dataUrl }), +}); +``` + +```ts title="server/index.ts" +import { media } from '@devvit/media'; + +app.post('/api/upload-screenshot', async (c) => { + const { image } = await c.req.json(); + + const response = await media.upload({ + url: image, // data URL from canvas + type: 'png', + }); + + return c.json({ url: response.mediaUrl }); +}); +``` + ## Limitations - The formats supported are PNG, JPEG, WEBP, and GIF. diff --git a/versioned_docs/version-0.12/capabilities/server/overview.md b/versioned_docs/version-0.12/capabilities/server/overview.md index d8d1997..6863102 100644 --- a/versioned_docs/version-0.12/capabilities/server/overview.md +++ b/versioned_docs/version-0.12/capabilities/server/overview.md @@ -1,4 +1,4 @@ -# Overview +# Server Overview Devvit offers a wide variety of features that help you integrate your app with Reddit's APIs, scale your app free of charge using Reddit's backend, and more. The features in this section are executed on the server side. They can be imported in both [Devvit Web](../devvit-web/devvit_web_overview.mdx) and [Devvit Blocks](../blocks/overview.md) applications, as well as Mod Tools. diff --git a/versioned_docs/version-0.12/capabilities/server/post-data.mdx b/versioned_docs/version-0.12/capabilities/server/post-data.mdx index 0337cc4..ac2f09f 100644 --- a/versioned_docs/version-0.12/capabilities/server/post-data.mdx +++ b/versioned_docs/version-0.12/capabilities/server/post-data.mdx @@ -2,7 +2,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -# Post Data +# Post data You can attach small amounts of data (2KB) to a post when creating it and update this data using the `postData` capability. This enables dynamic, stateful experiences available on posts without a server call. Post data is scoped to the post, not users. diff --git a/versioned_docs/version-0.12/capabilities/server/reddit-api.mdx b/versioned_docs/version-0.12/capabilities/server/reddit-api.mdx index 44ced71..cb9191f 100644 --- a/versioned_docs/version-0.12/capabilities/server/reddit-api.mdx +++ b/versioned_docs/version-0.12/capabilities/server/reddit-api.mdx @@ -1,10 +1,25 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -# Overview +# Reddit API Overview The Reddit API allows you to read and write Reddit content such as posts / comments / upvotes, in order to integrate your app's behavior with the content of the community it's installed in. +:::note +Unlike traditional Reddit API usage, you don't need to create an app at [reddit.com/prefs/apps](https://www.reddit.com/prefs/apps) or manage API keys. Devvit handles authentication automatically when you enable the `reddit` permission in your app. +::: + +## Private user data + +Devvit apps cannot access certain private user data. This data is private to the logged-in user and is not exposed through the Devvit platform: + +- **Subscribed subreddits** - The list of subreddits a user is subscribed to +- **Upvoted and downvoted content** - Posts and comments the user has voted on +- **Saved content** - Posts and comments the user has saved +- **Recently viewed posts** - The user's browsing history +- **Private profile information** - Any profile data that is not publicly visible +- **Follows and friends** - The list of users someone follows (on reddit.com) or has friended (on Old Reddit) + ## The Reddit client Here's how to obtain a reference to the Reddit client diff --git a/versioned_docs/version-0.12/capabilities/server/text_fallback.mdx b/versioned_docs/version-0.12/capabilities/server/text_fallback.mdx index 586a211..cbe082c 100644 --- a/versioned_docs/version-0.12/capabilities/server/text_fallback.mdx +++ b/versioned_docs/version-0.12/capabilities/server/text_fallback.mdx @@ -1,45 +1,29 @@ -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -# Text Fallback for old.reddit +# Text Fallback -Old.reddit does not render interactive posts. To remedy this, use textFallback to ensure that you can specify the text for the instances when Devvit cannot render your post. You can do this with a text string or in rich text. +Text fallback lets you specify alternative text content for your interactive post, enabling: -Setting a relevant text fallback is critical for SEO and growth of your app. +- **Old Reddit and third-party app support** - These platforms cannot render interactive posts +- **Google (SEO) and Reddit Answers indexing** - Critical for discoverability and growth +- **AutoModerator rule compatibility** - Allows mod rules to process your post content +- **Reddit safety checks and filters** - Enables content moderation systems to work properly +- **Custom post thumbnail** - Link to an image to generate a thumbnail + +Text fallback uses Markdown formatting and allows for up to 40,000 characters. ## [Reddit API](./reddit-api.mdx) -The text fallback is only available when using the Reddit API to create a post. It is available for both [Devvit Web](../devvit-web/devvit_web_overview.mdx) and [Devvit Blocks](../blocks/overview.md) applications. -The code samples below assume that you already have a reference to the Reddit API client. Please see below how to obtain a refere -nce to the Reddit API client in both Devvit Web and Devvit Blocks. +The text fallback is only available when using the Reddit API to create a post. + + - - ```json title="devvit.json" { "permissions": { - "redditApi": true + "reddit": true } } ``` - ```ts title="server/index.ts" - import { reddit } from '@devvit/web/server'; - ``` - - - ```ts - import { Devvit } from '@devvit/public-api'; - - Devvit.configure({ - redditApi: true, - }); - - //Then, in any function that has a reference to Devvit.Context: - const reddit = context.reddit; - ``` - - - ## Use a text string ```tsx diff --git a/versioned_docs/version-0.12/capabilities/server/userActions.mdx b/versioned_docs/version-0.12/capabilities/server/userActions.mdx index 00c5ee5..d88abfe 100644 --- a/versioned_docs/version-0.12/capabilities/server/userActions.mdx +++ b/versioned_docs/version-0.12/capabilities/server/userActions.mdx @@ -1,7 +1,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -# User Actions +# User actions User actions allow your app to submit posts, submit comments, and subscribe to the current subreddit on behalf of the logged in user. These actions occur on the logged in user's account instead of the app account. This enables stronger user engagement while ensuring user control and transparency. @@ -14,6 +14,13 @@ By default, apps make posts or comments using their associated app account. With - Create posts or comments on behalf of the user (from the post UI, a form, or a menu action) - Subscribe the user to the current subreddit +### Unavailable actions + +Some actions are not available to apps to prevent abuse and maintain platform integrity: + +- **Voting** - Apps cannot upvote or downvote posts or comments, either as the app account or on behalf of the logged-in user +- **Following/friending users** - Apps cannot follow users (on reddit.com) or add friends (on Old Reddit), either as the app account or on behalf of the logged-in user + --- Requirements diff --git a/versioned_docs/version-0.12/earn-money/payments/payments_add.mdx b/versioned_docs/version-0.12/earn-money/payments/payments_add.mdx index ff0e91a..73c6839 100644 --- a/versioned_docs/version-0.12/earn-money/payments/payments_add.mdx +++ b/versioned_docs/version-0.12/earn-money/payments/payments_add.mdx @@ -1,7 +1,7 @@ import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; -# Add Payments +# Add payments The Devvit payments API is available in Devvit Web. Keep reading to learn how to configure your products and accept payments. @@ -185,7 +185,7 @@ Each product in the products field has the following attributes: | `sku` | A product identifier that can be used to group orders or organize your products. Each sku must be unique for each product in your app. | | `displayName` | The official name of the product that is displayed in purchase confirmation screens. The name must be fewer than 50 characters, including spaces. | | `description` | A text string that describes the product and is displayed in purchase confirmation screens. The description must be fewer than 150 characters, including spaces. | -| `price` | An predefined integer that sets the product price in Reddit gold. See details below. | +| `price` | An predefined integer that sets the product price in Reddit Gold. See details below. | | `image.icon` | **(optional)** The path to the icon that represents your product in your assets folder. | | `metadata` | **(optional)** An optional object that contains additional attributes you want to use to group and filter products. Keys and values must be alphanumeric (a - Z, 0 - 9, and - ) and contain 30 characters or less. You can add up to 10 metadata keys. Metadata keys cannot start with "devvit-". | | `accountingType` | Categories for how buyers consume your products. Possible values are: | @@ -217,7 +217,7 @@ You’ll need to clearly identify paid products or services. Here are some best - Use a short name, description, and image for each product. - Don’t overwhelm users with too many items. - Try to keep purchases in a consistent location or use a consistent visual pattern. -- Only use the gold icon to indicate purchases for Reddit gold. +- Only use the gold icon to indicate purchases for Reddit Gold. ### Product image diff --git a/versioned_docs/version-0.12/earn-money/payments/payments_migrate.mdx b/versioned_docs/version-0.12/earn-money/payments/payments_migrate.mdx index 942190c..ab33351 100644 --- a/versioned_docs/version-0.12/earn-money/payments/payments_migrate.mdx +++ b/versioned_docs/version-0.12/earn-money/payments/payments_migrate.mdx @@ -1,7 +1,7 @@ import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; -# Migrate Blocks Payments +# Migrate Blocks payments If you already have payments set up on a Blocks app, use the following steps to migrate your payments functionality. diff --git a/versioned_docs/version-0.12/earn-money/payments/payments_overview.md b/versioned_docs/version-0.12/earn-money/payments/payments_overview.md index 73e15a1..7e220a6 100644 --- a/versioned_docs/version-0.12/earn-money/payments/payments_overview.md +++ b/versioned_docs/version-0.12/earn-money/payments/payments_overview.md @@ -1,4 +1,4 @@ -# Overview +# In-App Purchases Overview Add products to your app and get paid for what you sell. The payments plugin lets you prompt users to buy premium features that you build into your app, like in-game items, additional lives, or exclusive features into your app. diff --git a/versioned_docs/version-0.12/earn-money/payments/payments_publish.md b/versioned_docs/version-0.12/earn-money/payments/payments_publish.md index 9b7ab0c..3bea9c5 100644 --- a/versioned_docs/version-0.12/earn-money/payments/payments_publish.md +++ b/versioned_docs/version-0.12/earn-money/payments/payments_publish.md @@ -1,4 +1,4 @@ -# Publish Your App +# Publish your app :::note The Developer Platform team reviews and approves apps and their products before products can be sold. diff --git a/versioned_docs/version-0.12/earn-money/payments/support_this_app.md b/versioned_docs/version-0.12/earn-money/payments/support_this_app.md index 42732df..242ac04 100644 --- a/versioned_docs/version-0.12/earn-money/payments/support_this_app.md +++ b/versioned_docs/version-0.12/earn-money/payments/support_this_app.md @@ -1,6 +1,6 @@ -# Support This App +# Support this app -You can ask users to contribute to your app’s development by adding the “support this app” feature. This allows users to support your app with Reddit gold in exchange for some kind of award or recognition. +You can ask users to contribute to your app’s development by adding the “support this app” feature. This allows users to support your app with Reddit Gold in exchange for some kind of award or recognition. ## Requirements diff --git a/versioned_docs/version-0.12/examples/template-library.md b/versioned_docs/version-0.12/examples/template-library.md index ab1f14d..e111005 100644 --- a/versioned_docs/version-0.12/examples/template-library.md +++ b/versioned_docs/version-0.12/examples/template-library.md @@ -1,4 +1,4 @@ -# Template Library +# Template library Here are some starter projects and templates for your Devvit projects diff --git a/versioned_docs/version-0.12/guides/launch/feature-guide.mdx b/versioned_docs/version-0.12/guides/launch/feature-guide.mdx index 5717079..b02705b 100644 --- a/versioned_docs/version-0.12/guides/launch/feature-guide.mdx +++ b/versioned_docs/version-0.12/guides/launch/feature-guide.mdx @@ -1,4 +1,4 @@ -# Get Featured +# Get featured Reddit celebrates creative games and experiences built by developers from our global community. Our Featuring Program does this by connecting exciting new apps with millions of active redditors. diff --git a/versioned_docs/version-0.12/guides/launch/launch-guide.md b/versioned_docs/version-0.12/guides/launch/launch-guide.md index 0d7c1b5..f49525c 100644 --- a/versioned_docs/version-0.12/guides/launch/launch-guide.md +++ b/versioned_docs/version-0.12/guides/launch/launch-guide.md @@ -1,4 +1,4 @@ -# Launch Your App +# Launch your app Once your app is ready, you can launch it to users and moderators across Reddit. This guide outlines what “launch-ready” means and the steps you need to take to submit your app for review. diff --git a/versioned_docs/version-0.12/guides/tools/devvit_test.mdx b/versioned_docs/version-0.12/guides/tools/devvit_test.mdx index 5e7ff7f..1fafe33 100644 --- a/versioned_docs/version-0.12/guides/tools/devvit_test.mdx +++ b/versioned_docs/version-0.12/guides/tools/devvit_test.mdx @@ -8,7 +8,7 @@ sidebar_label: Testing The `@devvit/test` package provides utilities to write unit and integration tests for your backend logic with [Vitest](https://vitest.dev/). -## Capability Support +## Capability support Out of the box, the test harness mocks many of Devvit's capabilities for you. Here's what's supported: @@ -26,7 +26,7 @@ Out of the box, the test harness mocks many of Devvit's capabilities for you. He You can use these capabilities inside your tests exactly as you do in production code. -## Getting Started +## Getting started The `@devvit/test` package provides a miniature Devvit backend on demand. Every time you call `test()`, the harness spins up a temporary, isolated test world in memory, including its own Redis, Reddit API, Scheduler, and other capabilities. This lets you write tests that verify your app's behavior in a production-like environment. @@ -94,7 +94,7 @@ const test = createDevvitTest({ }); ``` -## Integration Testing & Isolation +## Integration testing & isolation The test harness is built for integration-style testing. Each test defined with `test()` runs in its own isolated world. State (including Redis and mocks) is reset for you between runs. There is no supported way to share state across tests. Vitest concurrency (`test.concurrent`) and parameterized tests (`test.each`) are fully supported. @@ -119,7 +119,7 @@ test("should also increment counter to 1", async ({ redis }) => { }); ``` -### Staging Data For Your Tests +### Staging data for your tests When testing your app logic, it's best to use your own service layer methods to stage data rather than manually manipulating the mock storage. This ensures your tests cover your actual application flows and behavior more accurately. @@ -152,7 +152,7 @@ test("can delete a user", async ({ redis }) => { If you just need a quick smoke test, you _can_ stage data directly via the same capabilities you use in production (e.g., `await redis.set('user:bob', JSON.stringify({ age: 30 }))`), but using your service APIs helps you cover more of your stack. -## Capability Guides +## Capability guides Each mocked capability exposes the same API surface you use in production. Unless noted otherwise, every `test()` gets a completely fresh, isolated world, so state never bleeds between tests. @@ -370,7 +370,7 @@ test("blocks HTTP by default", async () => { }); ``` -#### Basic Mocking +#### Basic mocking Use `vi.spyOn` to mock `fetch()` calls: @@ -402,7 +402,7 @@ test("fetches Pokemon data", async () => { }); ``` -#### Testing Error Cases +#### Testing error cases You can also test error handling by making your mock return error responses: @@ -429,7 +429,7 @@ test("handles API errors", async () => { }); ``` -#### Mocking POST Requests +#### Mocking POST requests You can also mock POST requests and inspect the request body: @@ -489,7 +489,7 @@ The harness seeds a default user and subreddit based on your configuration. Use _Note: `LinksAndComments` is more commonly referred to as `posts`._ -#### Mocking Methods on Returned Objects +#### Mocking methods on returned objects Some methods exist on the objects returned by the API (like `user.getSocialLinks()`). Since these objects are real instances returned by the harness, you can spy on the specific instance to mock them. @@ -526,7 +526,7 @@ test("mocks social links on a returned user", async ({ mocks }) => { }); ``` -#### Seeding Supported Models +#### Seeding supported models For supported calls like `getUserByUsername`, use the provided `mocks.reddit` fixture to seed the backing store. @@ -565,7 +565,7 @@ test("can fetch a post", async ({ mocks }) => { }); ``` -## Multiple Test Instances +## Multiple test instances Most of the time, you'll define a single `const test = createDevvitTest()` at the top of your spec file and use fixtures/settings to customize behavior. But if you need distinct contexts, such as different subreddits or users, you can spin up additional instances, even within the same file. diff --git a/versioned_docs/version-0.12/guides/tools/vite.mdx b/versioned_docs/version-0.12/guides/tools/vite.mdx index 1c52a5c..c1db10c 100644 --- a/versioned_docs/version-0.12/guides/tools/vite.mdx +++ b/versioned_docs/version-0.12/guides/tools/vite.mdx @@ -140,7 +140,7 @@ src/ formatScore.ts # safe to import from client + server ``` -## Migrating Old Templates +## Migrating old templates If you started with a template before this plugin, migrating it is simple! diff --git a/versioned_docs/version-0.12/quickstart/quickstart-mod-tool.md b/versioned_docs/version-0.12/quickstart/quickstart-mod-tool.md index 94864aa..b3ae9b6 100644 --- a/versioned_docs/version-0.12/quickstart/quickstart-mod-tool.md +++ b/versioned_docs/version-0.12/quickstart/quickstart-mod-tool.md @@ -1,4 +1,4 @@ -# Mod Tool Quickstart +# Mod tool quickstart Devvit allows you to build Mod Tools \- subreddit-installed applications that help moderators of that community to take action on conversations, keeping their communities safe and engaged. diff --git a/versioned_docs/version-0.12/quickstart/quickstart-unity.mdx b/versioned_docs/version-0.12/quickstart/quickstart-unity.mdx index 2f28b4f..bf17203 100644 --- a/versioned_docs/version-0.12/quickstart/quickstart-unity.mdx +++ b/versioned_docs/version-0.12/quickstart/quickstart-unity.mdx @@ -1,4 +1,4 @@ -# Unity Quickstart +# Unity quickstart This tutorial walks you through building a Unity app for Devvit. Once complete, you'll see your Unity game running directly within a Reddit post. @@ -132,7 +132,7 @@ yield return request.SendWebRequest(); Be sure that the object structure for the response type (such as `InitResponse` defined in `shared/types/api.ts`) matches the ones outlined in your `DevvitBridge.cs` file. ::: -### Saving Data to Reddit +### Saving data to Reddit This starter project also includes an example of saving the completion time to Reddit through the `LevelCompletedRequest`. For Devvit apps, data is stored in [Redis](../capabilities/server/redis). diff --git a/versioned_docs/version-0.12/quickstart/quickstart.md b/versioned_docs/version-0.12/quickstart/quickstart.md index b0bd539..0475419 100644 --- a/versioned_docs/version-0.12/quickstart/quickstart.md +++ b/versioned_docs/version-0.12/quickstart/quickstart.md @@ -1,4 +1,4 @@ -# App Quickstart +# App quickstart This tutorial takes you through the step-by-step process of building your first app with Devvit. It should take you about 1 minute to complete. Once complete, you'll be able to see your app in a Reddit post