Water alternatives and similar shards

Based on the "Template Engine" category.
Alternatively, view Water alternatives based on common mentions on social networks and blogs.

Slang

9.6 2.2 Water VS Slang

Slim-inspired templating language for Crystal
Kilt

9.2 1.5 Water VS Kilt

Generic template interface for Crystal

Scout APM: A developer's best friend. Try free for 14-days

Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.

Promo scoutapm.com

crinja

8.5 5.2 Water VS crinja

Implementation of Jinja2 template language in Crystal
crustache

8.4 0.8 Water VS crustache

{{Mustache}} for Crystal :gem:
temel

8.0 0.0 Water VS temel

Extensible Markup DSL for Crystal
Jbuilder

6.8 1.5 Water VS Jbuilder

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

6.6 0.0 Water VS teeplate

A Crystal library for rendering multiple template files.
crikey

3.5 0.0 Water VS crikey

Data structure view templates for Crystal
Bunny

2.9 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
  def_custom_tag hello_world
end

page = Water.new do
  doctype
  html {
    head {
      meta %|name="viewport" content="width=device-width,initial-scale=1.0"|
      title "This is a tile"
      style %q{
        h1 {
          color: red;
        }

        p {
          color: green;
        }
      }
      script %q{
        alert("Hello");
        system.logger("\n");
      }
      link %|rel="stylesheet" media="screen"|
    }
    body {
      h1 %|class="Hello"|, "This is a water file"
      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"| {
            text "and a hello"
          }
          span %|class="deep_nested"|, "text inside of &lt;p&gt"
          text <<-HTML
          #{Process.pid}
          text node
          other text node
          HTML
        }
      }
      div %|class="row"| {
        div %|class="col-md-9"| {
          users = [1, 2]
          users.each_with_index do |index|
            h2 %|class="right_#{index}"| {
              div {
                span "Hello"
              }
            }
          end
        }
      }
      br
      text "&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>
        14674
        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>14674</span>
  </body>
</html>

Note

Because p and select are used by Crystal. tag p is renamed to para, tag select is renamed to select_tag.

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