Shipless Play

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

Features

• ✅ Realtime preview
• ⬜️ Support SCSS
• ⬜️ Support React
• ⬜️ Custom theme

Installation

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

yarn add @shipless/play
# or
npm install @shipless/play

Usage

import @shipless/play package suck as the following:

import ShiplessPlay from "@shipless/play"

const value = {
  html: `
<div class="section">
  <div>
    <h1>Welcome to Playground</h1>
    <p> A simple playground for HTML, CSS and JavaScript</p>
    <a href="https://github.com/shipless/drafteditor">Github</a>
  </div>
</div>
  `,
  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")  
`
}

<ShiplessPlay defaultValue={value}>

Then you must import style on your css file:

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

Format for initial snippet

{
  html: `<h1>Title</h1>`,
  css: `h1 { color: red }`,
  javascript: `console.log("this")`
}

Demo

Example

Showcase

• 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