index.html

---
layout: home
---

<!-- HERO SECTION -->
<div class="jumbotron text-center Site_hero">
  <div class="container">
    <img src="img/kemal.png" alt="Kemal" class="Site_hero_logo name">
    <h1 class="Site_hero_title name">Kemal</h1>
    <p class="slogan active">
      <span><strong>F</strong>ast, </span>
      <span><strong>E</strong>ffective, </span>
      <span><strong>S</strong>imple. </span>
    </p>
    <p class="desc">Lightning fast, super simple web framework written in<br>Crystal.</p>
    <a href="/guide" class="btn btn-primary">Start Now</a>
  </div>
</div>

<!-- FEATURES AND EXAMPLE -->
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="Block">
        <h2 class="Block_title text-center">SUPER SIMPLE</h2>
        <div class="Block_content">
          {% highlight ruby %}
require "kemal"

# Matches GET "http://host:port/"
get "/" do
  "Hello World!"
end

# Creates a WebSocket handler.
# Matches "ws://host:port/socket"
ws "/socket" do |socket|
  socket.send "Hello from Kemal!"
end

Kemal.run
{% endhighlight %}
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="Block">
        <h2 class="Block_title">FEATURES</h2>
        <div class="Block_content">
          <ul>
            <li>Support all REST verbs</li>
            <li>Websocket support</li>
            <li>Request/Response context, easy parameter handling</li>
            <li>Built-in and easily extensible middleware</li>
            <li>Built-in JSON support</li>
            <li>Built-in static file serving</li>
            <li>Built-in view templating via <a href="https://crystal-lang.org/api/master/ECR.html" target="_blank">ECR</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- BENCHMARKS -->
<div class="jumbotron text-center Site_hero">
  <div class="container">
    <h3>BENCHMARKS</h3>
    <p>Numbers speak louder than words.</p>
    <div class="row">
      <div class="col-sm-12">
        <canvas id="request" class="item"></canvas>
      </div>
    </div>
    <div class="u-mr-top-20">
      <small>These results were achieved with <a href="https://github.com/sdogruyol/kemal-github-api" target="_blank">kemal-github-api benchmark suite</a> </strong></small>
    </div>
  </div>
</div>

<div class="container">
  <div class="Block">
    <div class="h3 Block_title">Companies Using Kemal</div>
    <div class="Block_content">
      <div class="Kemal-users">
        <div><a href="https://nikolamotor.com/" target="_blank"><img src="/img/nikola_motor.png" alt="Nikola Motor"></a></div>
        <div><a href="https://brightsec.com/" target="_blank"><img src="/img/bright_sec.png" alt="Bright Security"></a></div>
        <div><a href="https://www.pingly.com/" target="_blank"><img src="/img/pingly.png" alt="Pingly"></a></div>
        <div><a href="https://www.licor.com/" target="_blank"><img src="/img/licor.png" alt="Licor Bioscience"></a></div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
<script type="text/javascript">
  (function() {
    var ctx, scatterChart;
    ctx = document.getElementById("request");

    scatterChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ["Request Per Second"],
        datasets: [
          {
            label: 'Kemal',
            fill: false,
            lineTension: 0.1,
            borderColor: '#ff4f4f',
            backgroundColor: '#ff4f4f',
            data: ['122697']
          }, {
            label: 'Sinatra',
            fill: false,
            lineTension: 0.1,
            borderColor: '#aca38f',
            backgroundColor: '#aca38f',
            data: ['5268']
          }
        ]
      }
    });
  }).call(this);
</script>