Twig Playground

by Andrew Stilliard

I've been playing around with Twig templating alot lately, we're implementing it in one of our core projects at work.

Twig a great language for templating, with filters and the ability to extend blocks of other templates it works perfectly for our development flow.

It's easy enough to download with composer and get started with it, but I think I've been spoiled by alot of langauges with REPLs / interactive shells.

So i build a little web interface that allows me to enter some test variables (via JSON), multiple files (to test out includes and extending) and a fast way to render the results.

It's called Twig playground:

http://twig.stapps.io/

Plus it's open source:

https://github.com/stilliard/twig-playground

It's not perfect, but it works for now.

(To edit file names btw, just double click on the name, you can then also delete the file)

Give me an example:

Ok, try it out creating the following 4 files as a simple demo:

index.html.twig:

{% extends "layout.html.twig" %}

{% block main %}
<h1>{{ text | title }}</h1>  
<ul>  
{% for item in items %}
    <li>{{ item.name }}</li>
{% endfor %}
</ul>  
{% endblock %}

layout.html.twig:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>Demo</title>  
</head>  
<body>

<header>{% include 'header.html.twig' %}</header>

<div class="main">  
{% block main %}{% endblock %}
</div>

<footer>{% include 'footer.html.twig' %}</footer>

</body>  
</html>

header.html.twig:

... header ...

footer.html.twig:

... footer ...

It also supports css output, just rename the first file as .css.twig

E.g. Try the following in the playground:

JSON variables:

{ "header_color": "blue" }

index.css.twig:

{% include 'base.css' %}

.body { background: {{ header_color }}; }

base.css:

body { font: 13px/1.4 sans-serif; }  
.header { ...}
.footer { ... }