Createmeal
HTML generator powered by json
Explore the full documentation »
Table of Contents
About The Project
HTML is the standard way to produce web page content and there are several other options to produce text estructures like markdown, jsml, WackoWiki Markup, AsciiDoc, Contentflow, and others.
Createmeal gives us the advantage of using the same HTML tag names and similar semantic, but using json in its sintax instead of xml. It decreases the need of learn a new language, brings a better way to generate layout content programatically on javascript side, componentize, create templates, serialize text to object, and all the flexibility of using json.
Of course, for many people, HTML is enough, but it is great when you have good alternatives to solve problems, and turn live better.
Built With
The entire library is created using vanilla javascript. All dependencies, HTML, images and other things are used only for Development, testing, and example purpose.
Getting Started
Try to accessing the guide for complete reference: Getting Started
Install
-
NPM
npm i createmeal -
CDN
<script src="https://cdn.jsdelivr.net/npm/createmeal@3.0.3/dist/createmeal-legacy.js"></script>
Loading
-
ES Module Browser (ESM)
<script type="module" src="https://cdn.jsdelivr.net/npm/createmeal@3.0.3/dist/createmeal.js"></script> <script type="module"> import {toHtml} from "createmeal" </script> -
HTML script type='application/javascript'
<script src="https://cdn.jsdelivr.net/npm/createmeal@3.0.3/dist/createmeal-legacy.js"></script> <script type="application/javascript"> createmeal.toHtml(); </script> -
ES Module NodeJs (MJS)
import {toHtml} from 'createmeal'; -
Typescript
import {toHtml} from 'createmeal'; -
CommonJS (CJS)
const {toHtml} = require('createmeal/legacy').createmeal;
Usage
The main metod of createmeal is toHtml({}), so createmeal.toHtml({div:{}}), will return <div></div>.
Base Specification
-
Simple text: Text is represented by string.
createmeal.toHtml("test");\\ "test" -
paragraphe composed by array of strings: Multiple strings compose an unique text.
{"p":["test","Of","Strings"]} \\<p>testOfStrings</p> -
Tag defined by array of strings: is not the default way, but is an available option.
["<h1>Tag h1 generated by text</h1>"] \\<h1>Tag h1 generated by text</h1>
Incorporate in your application
-
CDN
<html> <body> <script src="https://cdn.jsdelivr.net/npm/createmeal@3.0.3/dist/createmeal-legacy.js"></script> <script> let helloWorld = { div: [ { class: "container" }, { h3: "Hello World!" }, { p: "This is a simple way to generate DOM without write HTML." } ] } let html = createmeal.toHtml(helloWorld); let element = new DOMParser().parseFromString(html,"text/html").body.firstChild; document.body.insertBefore(element,document.body.firstChild); </script> </body> </html> -
CDN Result
<html lang="en"> <head> <title>Create App With CDN</title> </head> <body> <div class="container"> <h3>Hello World!</h3> <p>This is a simple way to generate DOM without write HTML.</p> </div> </body> </html>