https://github.com/reddit/play
🛝 A little playground for building apps on Reddit.
https://github.com/reddit/play
devvit playground
Last synced: 6 months ago
JSON representation
🛝 A little playground for building apps on Reddit.
- Host: GitHub
- URL: https://github.com/reddit/play
- Owner: reddit
- License: other
- Created: 2023-10-31T18:12:01.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-21T13:33:26.000Z (12 months ago)
- Last Synced: 2025-08-05T06:16:59.127Z (7 months ago)
- Topics: devvit, playground
- Language: TypeScript
- Homepage: https://developers.reddit.com/play
- Size: 1.02 MB
- Stars: 11
- Watchers: 16
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: readme.md
- License: license.md
Awesome Lists containing this project
README
#  :play
A little playground for building apps on Reddit.
## Installation
```bash
npm install --save-prefix= @devvit/play
```
See the [changelog](docs/changelog.md) for release notes.
### Usage
Import play in your JavaScript bundle to define the `play-pen` element:
```ts
import '@devvit/play/pen'
```
Add a pen to your HTML markup:
```html
import {Devvit} from '@devvit/public-api'
Devvit.addCustomPostType({
name: 'Say Hello',
render: () => <text>Hello!</text>
})
export default Devvit
```
### Artifacts
Published releases include:
- **play-.\*.html**: portable playground (Firefox only since v0.0.32).
- **play-pen.js**: `play-pen` element.
- **play.js**: library utilities.
## Development
```bash
npm install
npm start
```
Visit **[http://localhost:1234](http://localhost:1234)** in your web browser.
Run `npm test` to execute tests.
See [supplemental development notes](docs/development.md).
### NPM scripts
- `install`: install play dependencies.
- `start`: run development server.
- `test`: build play and execute all tests. Anything that can be validated
automatically before publishing runs through this command.
- `run test:unit`: run the unit tests. Pass `--update` to update all test
snapshots.
- `run test:ui`: run the user interface integration tests. Pass `--manual` to
inspect browser and / or a filename to filter.
- `run format`: apply lint fixes automatically where available.
- `run build`: compile source inputs to artifacts under `dist/`.
💡 Add `--` to pass arguments to the script command. For example,
`npm run test:unit -- --update` to update snapshots.
### Project Structure
- **docs**/: supplemental play documentation.
- **src**/: source inputs.
- **tools**/: development tools for building :play.
### Contribution Guidelines and Design Principles
- Make it fun. play must be fun to use and fun to develop. Speed and quality are
play's top two features.
- Avoid dependencies. Dependencies are high-cost integrations. Simply don't add
them.
- Avoid code. Lines of code are costly. We probably can't afford your code if
you write a lot of it.
- Open-source for everyone. This repo was started with the intention to be
open-sourced as soon as possible.
- All dependencies must be available publicly. Avoid closed-source Reddit
dependencies.
- Avoid Reddit-specific branding.
- Code should be written to be read. We value good context. This often means
including short inline or accompanying docs.
- Keep the interface and outputs plain and simple. play is only a tool. The
user's focus is their work.
- Every commit should be an overall improvement. If every commit is an
improvement, the code only gets better.
- Smaller patches get better reviews.
## [License (BSD-3-Clause)](license.md)