figjam-live-code-block

KO | EN

gitlite — search

#javascript #python #hacktoberfest #typescript #llm #golang #android #machine-learning #rust #macos #nodejs #cli #kubernetes #security

figjam-live-code-block

(★ 68)

Turn FigJam into a collaborative JavaScript canvas

figjam-live-code-block Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# FigJam Live Code Block Widget

Turn FigJam into a collaborative JavaScript canvas

![demo](https://raw.githubusercontent.com/colebemis/figjam-live-code-block/main/assets/demo.gif)

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)

figjam-live-code-block

figjam-live-code-block Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

figjam-live-code-block

figjam-live-code-block Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README