Skip to content
/ play Public

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

Notifications You must be signed in to change notification settings

malessui/play

Repository files navigation

shipless

Shipless Play

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

npm (scoped) npm NPM npm bundle size

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

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

Releases

No releases published

Packages

No packages published