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

  •        37

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
Implementation
License
Platform

   




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-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.

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.

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.

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.


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.

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.

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-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-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.

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

  •    C++

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.

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.

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-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-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.

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.

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-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.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.