Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/colebemis/figjam-live-code-block
Turn FigJam into a collaborative JavaScript canvas
https://github.com/colebemis/figjam-live-code-block
figjam figjam-plugin figjam-widget figma figma-plugin
Last synced: 15 days ago
JSON representation
Turn FigJam into a collaborative JavaScript canvas
- Host: GitHub
- URL: https://github.com/colebemis/figjam-live-code-block
- Owner: colebemis
- Created: 2021-10-21T04:59:32.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-11-16T18:43:37.000Z (about 3 years ago)
- Last Synced: 2025-01-09T21:03:19.372Z (18 days ago)
- Topics: figjam, figjam-plugin, figjam-widget, figma, figma-plugin
- Language: TypeScript
- Homepage: https://www.figma.com/community/widget/1034005547769330556
- Size: 5.19 MB
- Stars: 62
- Watchers: 4
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# FigJam Live Code Block Widget
Turn FigJam into a collaborative JavaScript canvas
Could be used for:
- Exploring APIs
- Teaching
- Debugging
- Pair programming
- Code review
- Technical interviews
- ???
Found a creative use for this widget? Tell me about it on Twitter ([@colebemis](https://twitter.com/colebemis))
## Installation
https://www.figma.com/community/widget/1034005547769330556
## Global variables
Every live code block has access to the following variables:
| Name | Type | Description |
| ---------------------- | ---------- | --------------------------------------------------------------------------------------------------- |
| `fetch()` | `function` | [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/fetch) |
| `fetchJson()` | `function` | A convenient wrapper around `fetch()` specifically for fetching JSON data |
| `Math` | `object` | [MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math) |
| `Array` | `object` | [MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) |
| `Object` | `object` | [MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) |
## Local development
1. Clone the repository
```shell
git clone https://github.com/colebemis/figjam-javascript-repl.git
cd figjam-javascript-repl
```
1. Install the dependencies
```shell
yarn
```
1. Run local development scripts
```shell
yarn start
```
1. Open the [Figma desktop app](https://www.figma.com/downloads/)
1. Inside a FigJam file, go to `Menu > Widgets > Development > Import widget from manifest...`
1. Select `/path/to/figjam-javascript-repl/manifest.json`
1. Add the widget to the canvas by selecting `Menu > Widgets > Developement > JavaScript REPL` or search for `JavaScript REPL` in the quick actions bar (`⌘ /`)
## Prior art
- [natto.dev](https://natto.dev/) by [@\_paulshen](https://twitter.com/_paulshen)