https://github.com/malessui/play

Shipless Play is a React simple playground for HTML, CSS and JavaScript
https://github.com/malessui/play

monorepo react reactplayground tsdx typescript

Last synced: about 2 months ago
JSON representation

Shipless Play is a React simple playground for HTML, CSS and JavaScript

• Host: GitHub
• URL: https://github.com/malessui/play
• Owner: malessui
• Created: 2021-07-22T22:11:37.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-07-28T04:52:06.000Z (about 3 years ago)
• Last Synced: 2024-04-23T10:04:48.602Z (5 months ago)
• Topics: monorepo, react, reactplayground, tsdx, typescript
• Language: TypeScript
• Homepage: https://shipless-play.netlify.app/
• Size: 1.16 MB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• awesome-made-by-indonesian - Shipless Play - `Shipless Play is a React simple playground for HTML, CSS and JavaScript` *by [Ship Less](https://github.com/shipless)* (S)

README

        


  

    

  



# Shipless Play

Shipless Play is a React simple playground for HTML, CSS and JavaScript

[![npm (scoped)](https://img.shields.io/npm/v/@shipless/play?style=for-the-badge)](https://www.npmjs.com/package/@shipless/play)

[![npm](https://img.shields.io/npm/dt/@shipless/play?label=Download&style=for-the-badge)](https://www.npmjs.com/package/@shipless/play)

![NPM](https://img.shields.io/npm/l/@shipless/highlight?style=for-the-badge)

![npm bundle size](https://img.shields.io/bundlephobia/min/@shipless/play?style=for-the-badge)

### Features

- ✅ Realtime preview

- ⬜️ Support SCSS

- ⬜️ Support React

- ⬜️ Custom theme

### Installation

Use the package manager `yarn` or `npm` to install this package.

```bash

yarn add @shipless/play

# or

npm install @shipless/play

```

### Usage

`import` @shipless/play package suck as the following:

```js

import ShiplessPlay from "@shipless/play"

const value = {

  html: `



  


    
Welcome to Playground

    
 A simple playground for HTML, CSS and JavaScript

    Github

  



  `,

  css: `

body {

  background: #97a2a9;

  display: flex;

  justify-content: center;

  align-items: center;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  position: absolute;

}

  `,

  javascript: `

console.log("your js")  

`

}


```

 Then you must import style on your css file:

 ```css

 @import url("@shipless/play/dist/style.css");

 ```

 ### Format for initial snippet

```js

{

  html: `
Title
`,

  css: `h1 { color: red }`,

  javascript: `console.log("this")`

}

```


 ### Demo

 [Example](https://shipless-play.netlify.app/)

 ### Showcase

 - [Custom scrollbar di css](https://muhrusdi.github.io/blog/custom-scrollbar-di-css) - murusdi

 ### API

|      Props       |                          description                       |   default                                | required |

| :--------------: | :--------------------------------------------------------: | :--------------------------------------: | :------: |

|        id        |             a unique identifier for the iFrame             |                                          |   false  |

|  defaultValue    |            Initial code to be displayed                    |                                          |   false   |

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License

[MIT](https://choosealicense.com/licenses/mit/)