konstrui

easy to use templating engine
for static websites

Under development

Download

How to use

See the Full Example


Simple example:

  • Simple project structure example:
webInput/
    konstruiConfig.json
    index.html
    templates/
        userTemplate.html
        userTemplate.json
  • Simple output project structure example:
webOutput/
        index.html
    
  • Set the html file:
<!DOCTYPE html>
    <html>
    <body>

    <konstrui-template html="templates/userTemplate.html" data="templates/userTemplate.json"></konstrui-template>

    </body>
    </html>
    
  • Set the template file:
<div class="class1">
        <div class="class2">{{username}}</div>
        <div class="class2">{{description}}</div>
        <div class="class2">{{phone}}</div>
    </div>
    
  • Set the template data file:
[{
            "username": "Michaela Doe",
            "description": "Hi, I'm here to code",
            "phone": "456456456"
        },
        {
            "username": "John Doe",
            "description": "Hi, I'm here",
            "phone": "123456789"
        },
        {
            "username": "Myself",
            "description": "How are you",
            "phone": "no phone"
        }
    ]
    
  • Set the configuration file konstruiConfig.json in the webInput directory:
{
        "title": "Web example",
        "author": "arnaucode",
        "github": "github.com/arnaucode",
        "website": "arnaucode.com",
        "files": [
            "index.html",
            "projects.html",
            "app.css"
        ]
    }
    
  • Execute konstrui
./konstrui
  • Output:
<!DOCTYPE html>
<html>

<body>
    <div class="class1">
        <div class="class2">Michaela Doe</div>
        <div class="class2">Hi, I'm here to code</div>
        <div class="class2">456456456</div>
    </div>
    <div class="class1">
        <div class="class2">John Doe</div>
        <div class="class2">Hi, I'm here</div>
        <div class="class2">123456789</div>
    </div>
    <div class="class1">
        <div class="class2">Myself</div>
        <div class="class2">How are you</div>
        <div class="class2">no phone</div>
    </div>
</body>

</html>