Prodotype is used in [Silex website builder]( as a component creation tool. Use it to create components and the UI to edit them out of html templates and yaml files.

Downloads in past


1.0.28a year ago5 years agoMinified + gzip package size for prodotype in KB


Prodotype is used in Silex website builder as a component creation tool. Use it to create components and the UI to edit them out of html templates and yaml files.

  • 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


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


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

Development (serve, watch, build and live reload):
$ npm run watch
$ npm run reload

Create a new version
$ npm version patch
$ git push origin master --follow-tags
$ npm publish