# code-bed
> A web component for embedded CodePens.
Latest version **1.0.5** (published 2020-05-09) · MIT license · 0 weekly downloads
## Install
```sh
npm install code-bed
pnpm add code-bed
yarn add code-bed
bun add code-bed
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.5 |
| Published | 2020-05-09 |
| First published | 2020-05-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 34 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Richie Casto |
| Maintainers | rcasto |
## Links
- npm: https://www.npmjs.com/package/code-bed
- Repository: https://github.com/rcasto/code-bed
- Homepage: https://github.com/rcasto/code-bed#readme
- Issues: https://github.com/rcasto/code-bed/issues
- npm.io page: https://npm.io/package/code-bed
## Recent versions
- 1.0.5 (latest) — 2020-05-09
- 1.0.4 — 2020-05-06
- 1.0.3 — 2020-05-06
- 1.0.2 — 2020-05-05
- 1.0.1 — 2020-05-05
- 1.0.0 — 2020-05-05
## README
# code-bed
A web component for [embedded CodePens](https://blog.codepen.io/documentation/embedded-pens/).
[Try it out!](https://codepen.io/rcasto/full/ExVoXKW)
## Usage
### Via script tag
```html
code-bed usage
```
### Via module bundler
1. Install package via package manager of your choice.
```
npm install code-bed
```
2. `import 'code-bed'` as part of your app module, it should then be included as part of your bundle.
```javascript
import 'code-bed';
// Rest of your code...
```
3. You can now use `` in your app views!
## Customization
All parameters into the code-bed web component are done so via attributes on the `` HTML element.
The set of attributes used are the same ones used by the CodePen embed itself:
- https://blog.codepen.io/documentation/embedded-pens/#override-attributes-5
The only absolutely required attribute is:
- `data-slug-hash` - The identifier for the CodePen (ex. wbVzQG)
---
_Source: https://npm.io/package/code-bed · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._