ReactJS Generator, Streamline Your Editor's UI

ReactJS Generator, Streamline Your Editor's UI

Prodotype is used in Silex website builder to make it possible to create simple components out of 1 html template and 1 file listing the properties. Prodotype then generates the UI to edit the component and exposes a method to render the component.

Prodotype is used in Silex website builder to make it possible to create simple components out of 1 html template and 1 file listing the properties. Prodotype then generates the UI to edit the component and exposes a method to render the component.

Features

  • build components from 1 template file and 1 definition file per component
  • generate a UI to edit each component, which creates a data object
  • render a component given data object
  • manage dependencies for components

Install

Add to your project and build pub/prodotype.js

$ npm install
$ npm run build

Use in your projects

In your HTML page - e.g. see this demo page

  <script type="text/javascript" src="./ejs.min.js"></script>
  <script type="text/javascript" src="./prodotype.js"></script>
  <div id="stage"></div>
  <div id="ui"></div>

In your js file - e.g. see this demo script for a complete / real world example.

// the div where you want your components to be rendered
const stage = document.querySelector('#stage');
// the div where we want the UI to edit the components
const ui = document.querySelector('#ui');
// where prodotype templates are located
const templateFolder = './sample'
// the main Prodotype object
const prodotype = new Prodotype(ui, templateFolder);
prodotype.ready(function(err) {
  // create a slide show in the stage div
  const templateName = 'unslider';
  prodotype.decorate(templateName).then(html => stage.innerHTML = html);
  // display tool boxes to edit the component
  prodotype.edit(data, [{templateName:templateName}], templateName, {
    onChange: function(newData, html) {
      stage.innerHTML = html;
    }
  });
});

Run it with npm start and you should be able to edit the component like this:

sample component edition

create your own templates

Create a folder with a .yaml file and a .ejs file - see the sample/ folder to see examples of templates.

Then build your templates with this command line, which will generate a components.json in the destination folder (pub/sample/ in this example):

$ npm run build:templates

All the types of editors here

Development

Production (uses http-server to serve pub/):

$ npm start

Development (serve, watch, build and live reload):

$ npm run watch
$ npm run reload

Download Details:

Author: silexlabs

Demo: http://projects.silexlabs.org/Prodotype/pub/

Source Code: https://github.com/silexlabs/Prodotype

react reactjs javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

What is ReactJS? | ReactJS Basics | Learn ReactJS | React for Beginners | ReactJS Training

This Edureka video on "What is ReactJS ?" will help you understand the fundamentals of ReactJS and help you in building a strong foundation in React by understanding the advantages of ReactJS along with its features and major aspects.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.