Build UI Components From JSON – HyderJS

Preview:

Description:

HyderJS is a modern open-source JavaScript library that allows you to quickly build reusable UI components from JSON.

How to use it:

1. Load the minified version of the HyderJS library in the document.

<script src="./lib/hyder.min.js"></script>

2. Construct your UI components as follows. Supported components:

• heading
• text
• image
• button
• input
• container
• link
• list
• dropdown
• break
• form
• card

// heading
let title = {
    type: "heading",
    data: {
      text: "Text/HTML Here",
      style: {
        textAlign: "center",
        // more CSS styles here
      }
    }
};
// text
let description = {
    type: "text",
    data: {
      text: "Text/HTML Here",
      style: {
        textAlign: "center",
        // more CSS styles here
      }
    }
};
// image
let image = {
    type: "image",
    data: {
        id: "image-id",
        alt: "image-alt",
        src: "path/to/image.png",
        style: {
          width: "100%",
          // more CSS styles here
        }
    }
};
// buttons
let image = {
    "type": "button",
    "data": {
      "text": "Elegant",
      "type": "elegant",
      "style": {
            "color": "black"
      },
      "margin": {
        "x": 2,
        "y": 2
      },
      "padding": 2
    }
};
// input
let input = {
    "type": "input",
    "data": {
      "input": "url",
      "placeholder": "url here",
      "style": {
        "color": "black",
      },
      "margin": {
        "x": 2,
        "y": 2
      },
      "padding": 2
    }
};
// container
let container = {
    "type": "container",
    "data": {
      "arrange": "row",
      "align": "column",
      "items": [],
      "style": {
        "color": "black"
      },
      "margin": {
        "x": 2,
        "y": 2
      },
      "padding": 2
    }
};
// link
let link = {
    "type": "link",
    "data": {
      "href": "URL_LINK",
      "style": {
        "color": "black",
        "backgroundColor": "transparent",
        "textDecoration": "underline"
      },
      "margin": {
        "x": 2,
        "y": 2
      },
      "padding": 2
    }
};
// list
let list = {
    "type": "list",
    "data": {
      "items": [{
        "text": "item1"
      }],
      "style": {
        "color": "black"
      },
      "margin": {
        "x": 2,
        "y": 2
      },
      "padding": 2
    }
};
// dropdown
let dropdown = {
    "type": "dropdown",
    "data": {
      "options": [{
        "text": "Text of option",
        "value": "Value of option",
        "style": {}
      }],
      "style": {
        "color": "black",
        "backgroundColor": "transparent",
        "textDecoration": "underline"
      },
      "margin": {
        "x": 2,
        "y": 2
      },
      "padding": 2
    }
};
// Break
let break = {
    "type": "list",
    "data": {
      "type": "br"
    }
};
// form
let form = {
    "type": "dropdown",
    "data": {
      "action": "",
      "method": "POST",
      "items": [],
      "style": {
        "color": "black",
        "backgroundColor": "transparent"
      },
      "margin": {
        "x": 2,
        "y": 2
      },
      "padding": 2
    }
};
// card
let form = {
    "type": "card",
    "data": {
      "shadow": "large",
      "items": [],
      "margin": {
          "x": 2,
          "y": 2
      },
      "padding": 2
    }
};

3. Add these UI components to a JSON array.

let blocks = [
    {
      type: "container",
      data: {
        margin: {
          y: 4
        },
        arrange: "column",
        align: "center",
        items: [
          image,
          title,
          description,
          ... more components here ...
        ]
      }
    }
];

Initialize the library and render the data into the document.

new HyderJS({
    // your JSON array
    bricks: blocks, 
    // id of the root container for rendering
    wall: "app" 
    
});

Changelog:

v1.0.0 (08/06/2020)

• Supports playground service to create websites online
• Unique key is attached to all the components
• All components are optimized for rendering