Skip to content
Live Frontend Editor Component for React
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__mocks__
build-utils
build
src
.eslintrc
.gitignore
.travis.yml
LICENCE
README.md
babel.config.js
jest.config.js
package-lock.json
package.json
screenshot.png
webpack.config.js

README.md

JS Live

npm version Build Status Prettier

A React Component for live rendering and editing of HTML, CSS and JS.

screenshot

Usage

npm install react-js-live
import React from "react";
import JSLive from "react-js-live";
import "react-js-live/build/main.css";

function App() {
  return <JSLive id="test" snippets={snippets} mode="js" />;
}

Props:

  1. id

A string that uniquely identifies the frame on the page.

  1. snippets

Object containing keys: html, css and js. This is the initial code passed into the component.

const snippets = {
  html: `<p>HTML Content goes here</p>`,
  css: `.title { color: red; }`,
  js: `alert(js)`
};
  1. mode

    default: js

    1. html: Left tab defaults to HTML and Right defaults to Result
    2. js Left tab defaults to JS and Right tab to Console.
  2. theme

    default: Night Owl

    Any PrismJS theme.

Contributing

  1. Clone the repo
  2. npm install
  3. npm start
You can’t perform that action at this time.