SkillAgentSearch skills...

Slim

Slim is a template language whose goal is to reduce the syntax to the essential parts without becoming cryptic.

Install / Use

/learn @slim-template/Slim
About this skill

Quality Score

0/100

Supported Platforms

Universal

README

Slim

Gem Version Build Status GitHub Sponsors

Slim is a template language whose goal is to reduce the view syntax to the essential parts without becoming cryptic. It started as an exercise to see how much could be removed from a standard html template (<, >, closing tags, etc...). As more people took an interest in Slim, the functionality grew and so did the flexibility of the syntax.

A short list of the features...

  • Elegant syntax
    • Short syntax without closing tags (Using indentation instead)
    • HTML style mode with closing tags
    • Configurable shortcut tags (# for <div id="..."> and . for <div class="..."> in the default configuration)
  • Safety
    • Automatic HTML escaping by default
    • Support for Rails' html_safe?
  • Highly configurable
  • Extensible via the following plugins:
    • Logic less mode similar to Mustache
    • Includes
    • Translator/I18n
  • High performance
    • Comparable speed to ERB/Erubis
    • Streaming support in Rails
  • Supported by all major frameworks (Rails, Sinatra, ...)
  • Full Unicode support for tags and attributes
  • Embedded engines like Markdown and Textile

Links

Introduction

What is Slim?

Slim is a fast, lightweight templating engine with support for Rails 5 and later. It has been heavily tested on all major ruby implementations. We use continuous integration (GitHub actions).

Slim's core syntax is guided by one thought: "What's the minimum required to make this work".

As more people have contributed to Slim, there have been syntax additions influenced from their use of Haml and Jade. The Slim team is open to these additions because we know beauty is in the eye of the beholder.

Slim uses Temple for parsing/compilation and is also integrated into Tilt, so it can be used together with Sinatra or plain Rack.

The architecture of Temple is very flexible and allows the extension of the parsing and compilation process without monkey-patching. This is used by the logic less plugin and the translator plugin which provides I18n. In logic-less mode you can use Slim if you like the Slim syntax to build your HTML but don't want to write Ruby in your templates.

Why use Slim?

  • Slim allows you to write very minimal templates which are easy to maintain and pretty much guarantees that you write well-formed HTML and XML
  • The Slim syntax is aesthetic and makes it more fun to write templates. Since you can use Slim as a drop-in replacement in all the major frameworks it is easy to adopt.
  • The Slim architecture is very flexible and allows you to write syntax extensions and plugins.

Yes, Slim is speedy! Slim was developed right from the start with performance in mind. Don't trust the numbers? That's as it should be. Please try the benchmark rake task yourself!

However in our opinion you should use Slim because of its features and syntax. We just ensure that Slim doesn't have a negative impact on the performance of your application.

How to start?

Install Slim as a gem:

gem install slim

Include Slim in your Gemfile with gem 'slim' or require it with require 'slim'. That's it! Now, just use the .slim extension and you're good to go.

Syntax example

Here's a quick example to demonstrate what a Slim template looks like:

doctype html
html
  head
    title Slim Examples
    meta name="keywords" content="template language"
    meta name="author" content=author
    link rel="icon" type="image/png" href=file_path("favicon.png")
    javascript:
      alert('Slim supports embedded javascript!')

  body
    h1 Markup examples

    #content
      p This example shows you how a basic Slim file looks.

    == yield

    - if items.any?
      table#items
        - for item in items
          tr
            td.name = item.name
            td.price = item.price
    - else
      p No items found. Please add some inventory.
        Thank you!

    div id="footer"
      == render 'footer'
      | Copyright &copy; #{@year} #{@author}

Indentation matters, but the indentation depth can be chosen as you like. If you want to first indent 2 spaces, then 5 spaces, it's your choice. To nest markup you only need to indent by one space, the rest is gravy.

Line indicators

Verbatim text |

The pipe tells Slim to just copy the line. It essentially escapes any processing. Each following line that is indented greater than the pipe is copied over.

body
  p
    |
      This is a test of the text block.

The parsed result of the above:

<body><p>This is a test of the text block.</p></body>

If the text starts on the same line, the left margin is set at the indent of the pipe + one space. Any additional spaces will be copied over.

body
  p
    | This line is on the left margin.
       This line will have one space in front of it.
         This line will have two spaces in front of it.
           And so on...

You can also embed html in the text line

- articles.each do |a|
  | <tr><td>#{a.name}</td><td>#{a.description}</td></tr>

Verbatim text with leading and/or trailing white space |< |> |<>

You can add white space around verbatim text in the same way as for = output:

| This line will not have any extra white space.
|  This line will have a leading space, but it is difficult to see.
|< This line will have a leading white space.
|> This line will have a trailing white space.
|<> This line will have both leading and trailing white space.

Verbatim text with trailing white space '

The single quote tells Slim to copy the line (similar to |), but makes sure that a single trailing white space is appended.

Inline html <

You can write html tags directly in Slim which allows you to write your templates in a more html like style with closing tags or mix html and Slim style. The leading < works like an implicit |:

<html>
  head
    title Example
  <body>
    - if articles.empty?
    - else
      table
        - articles.each do |a|
          <tr><td>#{a.name}</td><td>#{a.description}</td></tr>
  </body>
</html>

Control code -

The dash denotes control code. Examples of control code are loops and conditionals. end is forbidden behind -. Blocks are defined only by indentation. If your ruby code needs to use multiple lines, append a backslash \ at the end of the lines. If your line ends with comma , (e.g because of a method call) you don't need the additional backslash before the linebreak.

body
  - if articles.empty?
    | No inventory

Output =

The equals sign tells Slim it's a Ruby call that produces output to add to the buffer. If your ruby code needs to use multiple lines, append a backslash \ at the end of the lines. For example:

= javascript_include_tag \
   "jquery",
   "application"

If your line ends with comma , (e.g because of a method call) you don't need the additional backslash before the linebreak. For trailing or leading whitespace the modifiers > and < are supported.

  • Output with trailing white space =>. Same as the single equals sign (=), except that it adds a trailing white space.
  • Output with leading white space =<. Same as the single equals sign (=), except that it adds a leading white space.

Output without HTML escaping ==

Same as the single equals sign (=), but does not go through the escape_html method. For trailing or leading whitespace the modifiers > and < are supported.

  • Output without HTML escaping and trailing white space ==>. Same as the double equals sign (==), except that it adds a trailing white space.
  • Output without HTML escaping and leading white space ==<. Same as the double equals sign (==), except that it adds a leading white space.

Code comment /

Use the forward slash for code comments - anything after it won't get displayed in the final render. Use / for code comments and /! for html comments

body
  p
    / This line won't get displayed.
      Neither does this line.
    /! This will get displayed as html comments.

The parsed result of the above:

<body><p><!--This will get displayed as html comments.--></p></body>

HTML comment /!

Use the forward slash immediately followed by an exclamation mark for html comments (<!-- ... -->).

IE conditional comment /[...]

/[if IE]
    p Get a better browser.

This renders as:

<!--[if IE]><p>Get a better browser.</p><![endif]-->

HTML tags

<!DOCTYPE> declaration

The doctype keyword can be used to generate the complex doctypes in a very simple manner.

XML VERSION

doctype xml
  <?xml version="1.0" encoding="utf-8" ?>

doctype xml ISO-8859-1
  <?xml version="1.0" encoding="iso-8859-1" ?>

XHTML DOCTYPES

doctype html
  <!DOCTYPE html>

doctype 5
  <!DOCTYPE html>

doctype 1.1
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

doctype strict
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

doctype frameset
  <!DOCTYPE html PUBLIC "-
View on GitHub
GitHub Stars5.4k
CategoryDevelopment
Updated2d ago
Forks498

Languages

Ruby

Security Score

100/100

Audited on Mar 21, 2026

No findings