{% extends "_template.html" %}

{% set id = 'index' %}
{% set title = 'Tweakpane' %}

{% block content %}
<p>Tweakpane is a JavaScript library that provides a compact user interface for changing/monitoring values. It's originally inspired by the popular library <a href="http://workshop.chromeexperiments.com/examples/gui/" target="_blank">dat.GUI</a>.</p>


<h2>Features</h2>
<ul>
	<li>Super easy to use</li>
	<li>Clean and simple interface</li>
	<li>Mobile-friendly</li>
	<li>Well-documented</li>
</ul>


<h2>Demo</h2>
<div class="codeBlock">
	<div class="codeBlock_section">
		<pre><code class="html">&lt;script src=&quot;tweakpane.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
var pane = Tweakpane();
&lt;/script&gt;</code></pre>
	</div>
</div>
{% endblock %}

{% extends "_template.html" %}

{% set id = 'index' %}
{% set title = 'Tweakpane' %}

{% block content %}
<p>Tweakpane is a JavaScript library that provides a compact user interface for changing/monitoring values. It's originally inspired by the popular library <a href="http://workshop.chromeexperiments.com/examples/gui/" target="_blank">dat.GUI</a>.</p>


<h2>Features</h2>
<ul>
	<li>Super easy to use</li>
	<li>Clean and simple interface</li>
	<li>Mobile-friendly</li>
	<li>Well-documented</li>
</ul>


<h2>Demo</h2>
<div class="codeBlock">
	<div class="codeBlock_section">
		<pre><code class="html">&lt;script src=&quot;tweakpane.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
var pane = Tweakpane();
&lt;/script&gt;</code></pre>
	</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"></script>
{% endblock %}

Add Pixi.js for top sketch
Add Pixi.js for top sketch
