Water Alternatives - Crystal Template Engine

Popularity

1.6

Growing

Activity

3.3

Growing

Stars 6

Watchers 0

Forks 0

Last Commit 15 days ago

Programming language: Crystal

Tags: Template Engine

Latest version: v0.1.0

Water alternatives and similar shards

Based on the "Template Engine" category

Slang

9.5 0.0 Water VS Slang

Lightweight, terse, templating language inspired by Ruby's Slim
Kilt

9.0 1.5 Water VS Kilt

Abstraction layer for template engines
crustache

8.2 2.0 Water VS crustache

{{Mustache}} for Crystal
crinja

7.8 6.7 Water VS crinja

An implementation of the Jinja2 template engine in Crystal
temel

7.7 0.0 Water VS temel

Extensible HTML::Builder alternative for Crystal, supports custom tag definitions
Jbuilder

5.9 4.7 Water VS Jbuilder

Generate JSON objects with a Builder-style DSL, inspired by jbuilder
teeplate

5.7 2.4 Water VS teeplate

A library for rendering multiple template files
crikey

3.7 0.0 Water VS crikey

Templating engine inspired by Hiccup
Bunny

3.5 0.0 Water VS Bunny

A simple HTML templating language for Crystal, same syntax as erb
ECR (Embedded Crystal)

- - Water VS ECR (Embedded Crystal)

compile time template language which uses plain crystal expressions (Crystal stdlib)

Do you think we are missing an alternative of Water or a related project?

Add another 'Template Engine' Shard

Popular Comparisons

README

Water : HTML in plain Crystal

A library for writing HTML in plain Crystal.

Installation

Add the dependency to your shard.yml:

   dependencies:
     water:
       github: shootingfly/water

Run shards install

Usage

require "water"

class Water::Page
  def_custom_tag hello_world
end

page = Water::Page.new do
  doctype
  html {
    head {
      meta %(name="viewport" content="width=device-width,initial-scale=1.0")
      title "This is a tile"
      style {
        lm <<-CSS
          h1 { color: red; }
          p { color: green; }
        CSS
      }
      script {
        lm <<-'JAVASCRIPT'
          alert("Hello");
          system.logger("\n");
        JAVASCRIPT
      }
      link %(rel="stylesheet" media="screen")
    }
    body {
      h1 "This is a water file", with: %(class="Hello")
      h2 "This is blue"
      input %(type="checkbox" checked=false)
      input %(type="checkbox" checked=true)
      input %(type="checkbox" checked="checked")
      span %(id="some-id" class="classname") {
        div %(id="Hello" class="world world2") {
          some_var = "hello world haha"
          span %(data-some-var="some_var" two-attr="fun") {
            l "and a hello"
          }
          span "text inside of &lt;p&gt", with: %(class="deep_nested")
          lm <<-HTML
            #{Process.pid}
            text node
            other text node
          HTML
        }
      }
      div %(class="row") {
        div %(class="col-md-9") {
          numbers = [1, 2]
          numbers.each do |index|
            h2 %(class="right_#{index}") {
              div {
                span "Hello"
              }
            }
          end
        }
      }
      br
      l "&nbsp;" * 4
      hello_world "Hello"
      span Process.pid
    }
  }
end
puts page

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>This is a tile</title>
    <style>
      h1 { color: red; }
      p { color: green; }
    </style>
    <script>
      alert("Hello");
      system.logger("\n");
    </script>
    <link rel="stylesheet" media="screen">
  </head>
  <body>
    <h1 class="Hello">This is a water file</h1>
    <h2>This is blue</h2>
    <input type="checkbox" checked=false>
    <input type="checkbox" checked=true>
    <input type="checkbox" checked="checked">
    <span id="some-id" class="classname">
      <div id="Hello" class="world world2">
        <span data-some-var="some_var" two-attr="fun">
          and a hello
        </span>
        <span class="deep_nested">text inside of &amp;lt;p&amp;gt</span>
        17925
        text node
        other text node
      </div>
    </span>
    <div class="row">
      <div class="col-md-9">
        <h2 class="right_1">
          <div>
            <span>Hello</span>
          </div>
        </h2>
        <h2 class="right_2">
          <div>
            <span>Hello</span>
          </div>
        </h2>
      </div>
    </div>
    <br>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <hello-world>Hello</hello-world>
    <span>17925</span>
  </body>
</html>

Contributing

Fork it (https://github.com/shootingfly/water/fork)
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create a new Pull Request

Contributors

Shootingfly - creator and maintainer