component-playground - A component for rendering React components with editable source and live preview

We have collection of more than 1 Million open source products ranging from Enterprise product to small libraries in all platforms. We aggregate information from all open source repositories. Search and find the best for your needs. Check out projects section.

component-playground - A component for rendering React components with editable source and live preview

codeText takes a string of JSX markup as its value. While you can just pass it a string, I find it is easier to make a separate file and use Webpack's raw loader to load in the raw source. In the example above I use the .example extension, and an examples folder to organize my samples.

https://github.com/FormidableLabs/component-playground#readme
https://github.com/FormidableLabs/component-playground

Dependencies:

babel-cli : ^6.26.0

babel-core : ^6.26.0

babel-loader : ^6.4.1

babel-polyfill : ^6.26.0

babel-preset-es2015 : ^6.24.1

babel-preset-react : ^6.24.1

babel-preset-stage-0 : ^6.24.1

babel-preset-stage-1 : ^6.24.1

babel-standalone : ^6.26.0

codemirror : ^5.30.0

prop-types : ^15.6.0

react-codemirror2 : ^2.0.2

rimraf : ^2.6.2

webpack : ^1.15.0

Tags	component-playground jsx react playground live component
Implementation	Javascript
License	MIT
Platform	OS-Independent

Related Projects

react-live - A production-focused playground for live editing React components

Javascript

React Live brings you the ability to render React components and present the user with editable source code and live preview. It supports server-side rendering and comes in a tiny bundle, thanks to Bublé and a Prism.js-based editor.The library is structured modularly and lets you style its components as you wish and put them where you want.

react component-playground live buble live-edit react-live

react-bluekit - Automatically generating a component library from your React components (ES5, ES6, Typescript)

Javascript

BlueKit automatically generates a library from your React components with editable props and live preview. Point BlueKit to folders with your React components and it will generate a library for you. You'll be able to browse through the components, tweak their props, and see the changes live. Furthermore, any changes that you make to your components' code will be reflected in the library.

react react-components visualization typescript tooling blueberry-opensource es6 es7 babel react-component playground development ui-ki ui design node

vidom - Library to build UI based on virtual DOM

Javascript

Vidom is just a library to build UI. It's highly inspired from React and based on the same ideas. Its main goal is to provide as fast as possible lightweight implementation with API similar to React. Try live playground to play with Vidom in your browser.

vidom isomorphism ui react jsx virtual-dom reactive server-side-rendering virtual dom component ssr

vue-styleguidist - Created from react styleguidist for Vue Components with a living style guide

Javascript

Project was started when not finding a tool that generates documentation of components with hot reloading, read documentation and have a playground. Created from React Styleguidist, implement additional support to read and compile .vue files. Only supports 2.x. Vue Styleguidist is a style guide generator for Vue components. It lists component and shows live, editable usage examples based on Markdown files. You can use it to generate a static HTML page to share and publish or as a workbench for developing new components using hot reloaded dev server.

vue-components styleguide vuejs vue parser vuejs2 doc styleguidist markdown documentation style-guide docs generator component components

react-view - React View is an interactive playground, documentation and code generator for your components

TypeScript

React View is a set of tools that aspires to close the gap between users, developers and designers of component libraries. React View aims to make documentation more interactive and useful. It utilizes already popular tools such as babel and prettier. Read the introductory blog post. See the example. CodeSandbox.

react playground documentation code-generator uber view

vuep - 🎡 A component for rendering Vue components with live editor and preview.

Javascript

🎡 A component for rendering Vue components with live editor and preview. you can write in HTML file or even a markdown file.

vue playground component vue-components editor preview editable vuejs

react-jss - JSS integration for React.

Javascript

React-JSS provides components for JSS as a layer of abstraction. JSS and the default preset are already built in! Try it out in the playground. React-JSS wraps your component with a higher-order component. It injects a classes prop, which is a simple map of rule names and generated class names. It can act both as a simple wrapping function and as an ES7 decorator.

react jss cssinjs css-in-js style css stylesheet hoc decorator

jsx-control-statements - Neater If and For for React JSX

Javascript

JSX-Control-Statements is a Babel plugin that extends JSX to add basic control statements: conditionals and loops. It does so by transforming component-like control statements to their JavaScript counterparts - e.g. <If condition={condition()}>Hello World!</If> becomes condition() ? 'Hello World!' : null. Developers coming to React from using JavaScript templating libraries like Handlebars are often surprised that there's no built-in looping or conditional syntax. This is by design - JSX by is not a templating library, it's declarative syntactic sugar over functional JavaScript expressions. JSX Control Statements follows the same principle - it provides a component-like syntax that keeps your render functions neat and readable, but desugars into clean, readable JavaScript.

react jsx babel babel-plugin if else for each loop react-component

react-styleguidist - Isolated React component development environment with a living style guide

Javascript

React Styleguidist is a component development environment with hot reloaded dev server and a living style guide that you can share with your team. It lists component propTypes and shows live, editable usage examples based on Markdown files. Check out the demo style guide. The change log can be found on the Releases page.

react styleguide documentation jsx style-guide docs generator component components

react-fontawesome - A React Font Awesome component.

Javascript

A React component for the font-awesome icon library. Note: This component does not include any of the Font Awesome CSS or fonts, so you'll need to make sure to include those on your end somehow, either by adding them to your build process or linking to CDN versions.

react props font font-awesome ui component components icon reactjs fontawesome bootstrap icons fonts danawoodman big style jsx react-component

react-inspector - Power of Browser DevTools inspectors right inside your React app

Javascript

Power of Browser DevTools inspectors right inside your React app. Check out the interactive playground or storybook. A shorthand for the inspectors.

devtools inspector object object-inspector react react-component reactjs table table-inspector table-view tableview tree tree-view treeview ui view

dod-playground - Sample OOP/ECS/DOD project (C++) for an internal Unity lecture in 2018

Sample OOP/ECS/DOD project (C++) for an internal Unity lecture in 2018, aimed at junior/future engineers. This is a super-simple C++ "game" (just a bunch of sprites moving around with very small amount of logic really) I made to show how one might go from a very traditional OOP style GameObject/Component based code to an ECS (Entity Component System) / DOD (Data Oriented Design) based code. In the process making it run 10x faster, initialize 5x faster, and saving 100MB of memory in the process.

cplusplus data-oriented-design entity-component-system

markdown-to-jsx - 🏭 The most lightweight, customizable React markdown component.

Javascript

The most lightweight, customizable React markdown component. Any HTML tags rendered by the compiler and/or <Markdown> component can be overridden to include additional props or even a different HTML representation entirely.

markdown jsx react gfm remark markdown-converter preact html

universal-router - A simple middleware-style router for isomorphic JavaScript web apps

Javascript

A simple middleware-style router that can be used in both client-side (e.g. React, Vue.js) and server-side applications (e.g. Node.js/Express, Koa).Play with an example on JSFiddle, CodePen, JS Bin in your browser or try RunKit node.js playground.

react reactjs routing router routes spa single-page-app ssr server-side-rendering vuejs react-component route flux

react-sparklines - Beautiful and expressive Sparklines React component

Javascript

width, height - dimensions of the generated sparkline in the SVG viewbox. This will be automatically scaled (i.e. responsive) inside the parent container by default. svgWidth, svgHeight - If you want absolute dimensions instead of a responsive component set these attributes.

react component react-component charts sparklines visualization jsx

react-magic - Automatically AJAXify plain HTML with the power of React. It's magic!

Javascript

React-Magic is an experimental library that uses the power of Facebook's React library to inject AJAX-loading goodness into plain old HTML webpages, without having to write any custom JavaScript. You can even use CSS transitions between the pages. Simply add a single script tag (or click a bookmarklet) and "it just works".HTMLtoJSX is a component of React-Magic that converts HTML to JSX. It can be used standalone, either on the web or via Node.js.

react jsx htmltojsx html react-component

rxviz - Rx Visualizer - Animated playground for Rx Observables

Javascript

RxViz simply visualizes a given Observable. Your JavaScript code will be evaluated, and, if the last expression is an Observable, a nice animated visualization will appear. RxViz treats the evaluated Observable as a black box. We rely only on the fact that Observable emits values over time. RxViz doesn't rely on the internals of RxJS. This will allow us to visualize TC39 Observables in the future.

rx observable rxjs reactive stream visualizer visualization svg animation react react-component

react-document-title - Declarative, nested, stateful, isomorphic document.title for React

Javascript

Provides a declarative way to specify document.title in a single-page app. This component can be used on server side as well. Built with React Side Effect.

react component react-component document.title title jsx

react-calendar-heatmap - an svg calendar heatmap component, inspired by github's contribution graph

Javascript

A calendar heatmap component built on SVG, inspired by github's commit calendar graph. The component expands to size of container and is super configurable. See a live demo. See full configuration options on the live demo page.

calendar react react-component svg