├── .gitignore
├── README.md
├── app.css
├── next-env.d.ts
├── package.json
├── pages
├── _app.tsx
├── index.tsx
└── preview.tsx
├── tsconfig.json
├── utils
└── execute-code.ts
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | .next
2 | node_modules
3 | out
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Build Your Own Code Playground
2 |
3 | A simple playground for live editing React code in [Next.js](http://nextjs.org/). See [this article](https://souporserious.com/build-your-own-code-playground/) for a walkthrough.
4 |
5 | ## Development
6 |
7 | ```bash
8 | yarn
9 | yarn dev
10 | ```
11 |
--------------------------------------------------------------------------------
/app.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
7 | Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
8 | background: rgb(10, 25, 41);
9 | color: white;
10 | margin: 0;
11 | }
12 |
13 | textarea {
14 | resize: none;
15 | padding: 1rem;
16 | border: 0;
17 | background: rgb(13, 18, 23);
18 | color: white;
19 | }
20 |
21 | textarea:focus {
22 | outline: none;
23 | box-shadow: inset 0 0 0 1px #4aa5f3;
24 | }
25 |
26 | iframe {
27 | width: 100%;
28 | height: 100%;
29 | padding: 1rem;
30 | border: 0;
31 | }
32 |
33 | h1 {
34 | text-align: center;
35 | }
36 |
37 | h2 {
38 | text-align: center;
39 | }
40 |
41 | #index {
42 | display: grid;
43 | min-height: 100vh;
44 | }
45 |
46 | @media screen and (min-width: 540px) {
47 | #index {
48 | grid-template-columns: 1fr 1fr;
49 | }
50 |
51 | textarea {
52 | resize: horizontal;
53 | min-width: 300px;
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "build-your-own-code-playground",
3 | "version": "0.0.0",
4 | "main": "index.js",
5 | "license": "MIT",
6 | "scripts": {
7 | "dev": "next dev",
8 | "build": "next build && next export"
9 | },
10 | "dependencies": {
11 | "@swc/wasm-web": "^1.2.118",
12 | "@types/react": "^17.0.37",
13 | "@types/react-dom": "^17.0.11",
14 | "base64-url": "^2.3.3",
15 | "next": "^12.0.7",
16 | "react": "^17.0.2",
17 | "react-dom": "^17.0.2",
18 | "typescript": "^4.5.2"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import '../app.css'
2 |
3 | export default function App({ Component, pageProps }) {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { encode } from 'base64-url'
3 |
4 | const initialCodeString = `
5 | import React from 'react'
6 |
7 | export default function App() {
8 | return (
9 |
10 |
Hello Playground
11 |
12 | Start editing to see some
13 | magic happen!
14 |
15 |
16 | )
17 | }
18 | `.trim()
19 |
20 | export default function Index() {
21 | const [code, setCode] = React.useState(initialCodeString)
22 | return (
23 |
24 |