diff --git a/Basic-Usage.md b/Basic-Usage.md
new file mode 100644
index 0000000..3236191
--- /dev/null
+++ b/Basic-Usage.md
@@ -0,0 +1,23 @@
+Render a template string with a context:
+
+```javascript
+var Liquid = require('liquidjs');
+var engine = new Liquid();
+
+engine
+ .parseAndRender('{{name | capitalize}}', {name: 'alice'})
+ .then(console.log); // outputs 'Alice'
+```
+
+Parsed template can be cached:
+
+```javascript
+// cache the parsed tpl
+var tpl = engine.parse('{{name | capitalize}}');
+
+engine
+ // render the cached tpl with a scope
+ .render(tpl, {name: 'alice'})
+ .then(console.log); // outputs 'Alice'
+```
+
diff --git a/Get-Started.md b/Get-Started.md
new file mode 100644
index 0000000..e69de29
diff --git a/Operators.md b/Operators.md
index d1ba0fa..fe8098c 100644
--- a/Operators.md
+++ b/Operators.md
@@ -1,6 +1,3 @@
-Documentation:
-
-Operators supported:
+Please refer to the operators document from Shopify: . Operators supported by LiquidJS are:
`==`, `!=`, `>`, `<`, `>=`, `<=`, `or`, `and`, `contains`.
-
diff --git a/Partials-and-Layouts.md b/Partials-and-Layouts.md
new file mode 100644
index 0000000..b6e6024
--- /dev/null
+++ b/Partials-and-Layouts.md
@@ -0,0 +1,44 @@
+## Include Partials
+
+```
+// file: color.liquid
+color: '{{ color }}' shape: '{{ shape }}'
+
+// file: theme.liquid
+{% assign shape = 'circle' %}
+{% include 'color' %}
+{% include 'color' with 'red' %}
+{% include 'color', color: 'yellow', shape: 'square' %}
+```
+
+The output will be:
+
+```
+color: '' shape: 'circle'
+color: 'red' shape: 'circle'
+color: 'yellow' shape: 'square'
+```
+
+## Layout Templates (Extends)
+
+```
+// file: default-layout.liquid
+Header
+{% block content %}My default content{% endblock %}
+Footer
+
+// file: page.liquid
+{% layout "default-layout" %}
+{% block content %}My page content{% endblock %}
+```
+
+The output of `page.liquid`:
+
+```
+Header
+My page content
+Footer
+```
+
+* A layout file can define multiple blocks.
+* Block name is optional when there's only one block.
diff --git a/Register-Filters-Tags.md b/Register-Filters-Tags.md
new file mode 100644
index 0000000..57e42a4
--- /dev/null
+++ b/Register-Filters-Tags.md
@@ -0,0 +1,35 @@
+## Register Filters
+
+```javascript
+// Usage: {{ name | uppper }}
+engine.registerFilter('upper', v => v.toUpperCase())
+```
+
+Filter arguments will be passed to the registered filter function, for example:
+
+```javascript
+// Usage: {{ 1 | add: 2, 3 }}
+engine.registerFilter('add', (initial, arg1, arg2) => initial + arg1 + arg2)
+```
+
+See existing filter implementations here:
+
+## Register Tags
+
+```javascript
+// Usage: {% upper name%}
+engine.registerTag('upper', {
+ parse: function(tagToken, remainTokens) {
+ this.str = tagToken.args; // name
+ },
+ render: async function(scope, hash) {
+ var str = await Liquid.evalValue(this.str, scope); // 'alice'
+ return str.toUpperCase() // 'Alice'
+ }
+});
+```
+
+* `parse`: Read tokens from `remainTokens` until your end token.
+* `render`: Combine scope data with your parsed tokens into HTML string.
+
+See existing tag implementations here:
diff --git a/Render-a-File.md b/Render-a-File.md
new file mode 100644
index 0000000..ad9cc93
--- /dev/null
+++ b/Render-a-File.md
@@ -0,0 +1,11 @@
+To render a file, you need to specify a root directory and call the `renderFile` method:
+
+```javascript
+var engine = new Liquid({
+ root: path.resolve(__dirname, 'views/'), // root for layouts/includes lookup
+ extname: '.liquid' // used for layouts/includes, defaults ""
+});
+engine
+ .renderFile("hello", {name: 'alice'}) // will read and render `views/hello.liquid`
+ .then(console.log) // outputs "Alice"
+```
diff --git a/Truthy-and-Falsy.md b/Truthy-and-Falsy.md
index 8523cdf..9e8e4a6 100644
--- a/Truthy-and-Falsy.md
+++ b/Truthy-and-Falsy.md
@@ -4,19 +4,19 @@ Everything other than `false` and `nil` is truthy in the ruby version, see: x.toUpperCase());
+}
+```
+
+## Introduce a Plugin
+
+Simply pass the plugin function into the `.plugin()` method:
+
+```javascript
+const engine = new Liquid()
+
+engine.plugin(require('./upup.js'));
+engine
+ .parseAndRender('{{ "foo" | upup }}')
+ .then(console.log) // outputs "FOO"
+```
+
+## Plugin List
+
+See .
diff --git a/_Sidebar.md b/_Sidebar.md
index 5e13bce..1f350ba 100644
--- a/_Sidebar.md
+++ b/_Sidebar.md
@@ -1,6 +1,21 @@
-* **[Home](/harttle/liquidjs/wiki)**
-* **[Builtin Filters](/harttle/liquidjs/wiki/Builtin-Filters)**
-* **[Builtin Tags](/harttle/liquidjs/wiki/Builtin-Tags)**
-* **[Operators](/harttle/liquidjs/wiki/Operators)**
-* **[Truthy and Falsy](/harttle/liquidjs/wiki/Truthy-and-Falsy)**
-* **[Whitespace Control](/harttle/liquidjs/wiki/Whitespace-Control)**
\ No newline at end of file
+* [Home](/harttle/liquidjs/wiki)
+* Tutorial
+ * [Basic Usage](/harttle/liquidjs/wiki/Basic-Usage)
+ * [Render a File](/harttle/liquidjs/wiki/Render-a-File)
+ * [Use with Express.js](/harttle/liquidjs/wiki/Use-with-Expressjs)
+ * [Partials and Layouts](/harttle/liquidjs/wiki/Partials-and-Layouts)
+ * [Whitespace Control](/harttle/liquidjs/wiki/Whitespace-Control)
+ * [Register Filters/Tags](/harttle/liquidjs/wiki/Register-Filters-Tags)
+ * [Write a Plugin](/harttle/liquidjs/wiki/Write-a-Plugin)
+* API
+ * [Options](/harttle/liquidjs/blob/master/doc/interfaces/_liquid_options_.liquidoptions.html)
+ * [Builtin Filters](/harttle/liquidjs/wiki/Builtin-Filters)
+ * [Builtin Tags](/harttle/liquidjs/wiki/Builtin-Tags)
+ * [Operators](/harttle/liquidjs/wiki/Operators)
+ * [Truthy and Falsy](/harttle/liquidjs/wiki/Truthy-and-Falsy)
+* Demos
+ * Node.js: [/demo/node/](demo/node/)
+ * Browser: , [/demo/browser/](demo/browser/)
+ * Express.js: [/demo/express/](demo/express/)
+ * TypeScript: [/demo/typescript/](demo/typescript/)
+ * React JS: [/demo/reactjs/](demo/reactjs/)
\ No newline at end of file