HTML generator powered by json
Explore the full documentation »
Table of Contents
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.
The entire library is created using vanilla javascript. All dependencies, HTML, images and other things are used only for Development, testing, and example purpose.
Try to accessing the guide for complete reference: Getting Started
- NPM
npm i createmeal
- CDN
<script src="https://cdn.jsdelivr.net/npm/createmeal@3.0.3/dist/createmeal-legacy.js"></script>
- 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;
The main metod of createmeal is toHtml({}), so createmeal.toHtml({div:{}}), will return <div></div>.
- 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>
- 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>