# codesandbox-example-links

> Insert runnable code example links/iframes to READMEs

Latest version **1.1.0** (published 2020-09-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install codesandbox-example-links
pnpm add codesandbox-example-links
yarn add codesandbox-example-links
bun add codesandbox-example-links
```

Provides the command `codesandbox-example-links`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2020-09-06 |
| First published | 2019-03-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 23.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | artemave@gmail.com |
| Maintainers | artemavetisyan |
| Keywords | codesandbox, runnable, example, documentation, readme |

## Links

- npm: https://www.npmjs.com/package/codesandbox-example-links
- Repository: https://github.com/featurist/codesandbox-example-links
- Issues: https://github.com/featurist/codesandbox-example-links/issues
- npm.io page: https://npm.io/package/codesandbox-example-links

## Dependencies (4)

- [glob](https://npm.io/package/glob.md) ^7.1.6
- [debug](https://npm.io/package/debug.md) ^4.1.1
- [yargs](https://npm.io/package/yargs.md) ^15.0.2
- [codesandbox](https://npm.io/package/codesandbox.md) ^2.1.11

## Alternatives

- [@cantoo/pdf-lib](https://npm.io/package/@cantoo/pdf-lib.md) — 297.9K weekly downloads
- [datatables.net-buttons](https://npm.io/package/datatables.net-buttons.md) — 200.1K weekly downloads
- [@ckeditor/ckeditor5-export-pdf](https://npm.io/package/@ckeditor/ckeditor5-export-pdf.md) — 167.0K weekly downloads
- [scanbot-web-sdk](https://npm.io/package/scanbot-web-sdk.md) — 15.0K weekly downloads
- [@syncfusion/ej2-angular-pdfviewer](https://npm.io/package/@syncfusion/ej2-angular-pdfviewer.md) — 8.8K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2020-09-06
- 1.0.0 — 2019-05-28
- 0.3.0 — 2019-03-11
- 0.2.0 — 2019-03-04
- 0.1.3 — 2019-03-03
- 0.1.2 — 2019-03-03
- 0.1.0 — 2019-03-03

## README

[Codesandbox](https://codesandbox.io) Example Links [![Codeship Status for featurist/codesandbox-example-links](https://app.codeship.com/projects/6176c9c0-20f5-0137-6e2c-62b911cd023e/status?branch=master)](https://app.codeship.com/projects/329497)
-----------

A CLI/API to replace magic placeholders in a markdown files with:

- `iframe` with a codesandbox project
- "Run this example" link to a codesandbox project
- code snippet extracted from a file on a file system

## Example

Given the following project structure:

```
.
├── demo-project
│   ├── index.html
│   ├── package.json
│   └── src
│       ├── app.jsx
│       └── index.js
├── docs
│   └── README.md
```

Where `docs/README.md` looks like this:

```markdown
## An Example

[view code](/demo-project/src/index.js)

[codesanbox](/demo-project)

```

Then running:

```sh
npx codesandbox-example-links --output-dir=. ./docs/README.md
```

Will produce a `./README.md` with the following contents:

    ## An Example

    ```js
    import * as hyperdom from "hyperdom";
    import App from "./app";

    hyperdom.append(document.body, new App());

    ```

    <a href="https://codesandbox.io/api/v1/sandboxes/define?parameters=N4IgZglgNgpgziAXKAdAIwIZplATgYyVHwHsA7AFxkqRGAB0yACJ-kAB13hgrjcSYBtRixZtqANzYAaEaLYALAJ7sYuACYkAtmzkBdRgF8Qh6SAhl1MAB4oFFLVCIhSlahVoAeAIQARAPIAwgAqAJoACgCiTPaOAHyMnrFQCWSJCjAY6qn0FJ4UEBSwceEYBDhMAMoYlmgk1p4A9AVFMDl5WjwYTPgKZXA8ALxsAKrBAGIAtAAcbEyNqU0ZWTlknnXqSu2e6hASTBDqwyAY7OxscU27Equ5nnD4uBDsFExwBMfv-I0WVrYAVnwQNtGg8ni9Fo0NltGIlGslUiYzOwMPgANYYADmMBQgPIzlcVBoiDocjYZAwnX4rBAylUGm0kxslPYsBkZJAEjUcAg5GpbAAjCgAAwi9nMGlWMHPAp8pA0gASKjUmi0TCsWhITAAUpVxWIQFoMBZ-eZLDY7A4oPqadKXkCBAwJQa4BQyhRTSjylADubbMkmJNJiRVGkQLJnTS0ABXaDqT1lfAVGNx31_S2OXQS0wcqyhqxkfAQeDUp2iKNYHCTTjcCiTOkq7SmoUAFjF4bkBobDJ08rYUAwVFdWZYOYlbCsEl8MHz1CLJflZfkHETVZjllguFNA6HHpAcjHBrRMCUAHcSBoHUIDGRDIwkSAvo1TuxcXBrATyESPCSIFp2BerwAFRMBgcAxMqPZMGAuDaDS3aqmwADcsJkDYAG4K8VhgBg0ZQK8-ADnA4EAIJnEwS5cOauAABQAJQUZ2TBcBQ0a4MwOx7Kk5YsJ4A7YCkp59BQADk4FKCQbFMBSnQAPxME0_E4NxPGeBY7DRq8FDKscVDWHuTBoL8FiYrpCgQHAKAyTAcwLExvHXHE5kURQ5mWdZhhXFxTFeTcKHZkY96mI-BA_H6b6fm4xLmP-gFMCBYEQfSqrQbBaqKJBiEgP5f4Ya8ZHsKlcFsCgz5nMhqEIdoKAvtQ6g0Zo-DRp0lDoCQmzSNJMCnkwBX0XR_kmIYhhAA" target="_blank" rel="noopener noreferrer">Run this example</a>
    
### Real world example

https://hyperdom.org

## Usage

- manually create sandbox for your example
- download it into your project
- insert magic links in markdown files
- repeat for all examples
- `npx codesandbox-example-links --output-dir=./dist docs/*.md`

The above command renders links. Add `--iframe` option to generate iframes instead.

### Magic links

`[codesanbox](/demo-project)` - turns into either link or an iframe, depending on `--iframe` option

`[view code](/path/to/file.js)` - turns into a code snippet containing file.js

`[view code](/path/to/file.jsL#3)` - turns into a code snippet containing a fragment of file.js starting at line 3 onwards

`[view code](/path/to/file.jsL#3-L10)` - turns into a code snippet containing a fragment of file.js, lines 3 to 10

### API

```js
const generateLinks = require('codesandbox-example-links')

const input = fs.readFileSync('readme.md', {encoding: 'utf-8'})
const output = generateLinks(input, {iframe: true})
```

### Debug

As of this writing, codesandbox api is sort of short on validation errors. So if generated links don't work, you might find some additional debug info useful. Set `DEBUG=codesandbox-example-links` to get some.

---
_Source: https://npm.io/package/codesandbox-example-links · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._