{"pageProps":{"examples":{"index":"---\nasteroid:\n  module:\n    - 'import paper from \"https://unpkg.com/@asteroid-pkg/paper@0.12.4?module\"'\n---\n\n# Asteroid\n\nJupyter-like JavaScript REPL editor\n\n![](https://media.giphy.com/media/W5g5W5hMkzrJQDpN3P/giphy.gif)\n\n```jsx asteroid=1998SF37\nawait $run(() => (\n  <p style={{padding: 8, fontSize: 30, background: 'orange'}}>\n    Asteroid renders React components!\n  </p>\n))\n\nreturn { x: 'word' }\n```\n\n<div><Asteroid_1998SF37 /></div>\n\n```jsx asteroid=1998SF39\nawait $run(() => x)\n```\n\n<div><Asteroid_1998SF39 /></div>\n\n```jsx asteroid=1998SF36\nawait $run(() => <canvas id=\"canvas\" />);\n\nconst canvas = document.getElementById('canvas');\npaper.setup(canvas);\nconst path = new paper.Path();\npath.strokeColor = \"black\";\nvar start = new paper.Point(100, 100);\npath.moveTo(start);\npath.lineTo(start.add([200, -50]));\n```\n\n<div><Asteroid_1998SF36 /></div>\n\n\n```jsx asteroid=1958PG15\nconst {Path} = paper;\nawait $run(() => <canvas id=\"canvas2\" />);\n\nconst canvas = document.getElementById('canvas2');\npaper.setup(canvas);\n\nvar path = new Path.Rectangle({\n\tpoint: [30, 30],\n\tsize: [75, 75],\n\tstrokeColor: 'black',\n\tfillColor: 'red',\n});\n\npaper.view.onFrame = (event) => {\n\tpath.rotate(3);\n\tpath.fillColor.hue += 1;\n}\n```\n\n<div><Asteroid_1958PG15 /></div>\n"}},"__N_SSG":true}