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>

License

MIT