From 033a5d891bc846e40d4d1e914975fca8c5b919ae Mon Sep 17 00:00:00 2001
From: Evgeniy Polyakov <evgeniy.s.polyakov@gmail.com>
Date: Tue, 19 Feb 2019 12:55:01 +0300
Subject: [PATCH] Update readme

---
 README.md | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 4212ed3..79a7677 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,32 @@
-# pixi-inspector
\ No newline at end of file
+# Pixi Inspector
+
+The tool allowing to map PixiJS display tree to DOM that could be
+inspected and modified in browser development tools.
+
+## Getting Started
+
+Create PixiJS application and initialize default inspector
+```javascript
+var app = new PIXI.Application();
+PIXI.inspector.getDefault(app.stage, app.view);
+//... add display objects to your app
+```
+
+This creates the inspector with default set of element attributes.
+Open the browser DOM inspector and locate an element under your canvas.
+It will be a `px-container` element containing all PixiJS display tree mapped to elements
+like `px-container`, `px-sprite`, `px-text`, `px-yourclassname`.
+Attributes of each element can be modified, the modification reflects the display tree immediately.
+For example changing `x` attribute of an element will change the `x` position of the corresponding
+display object.
+
+## Browsing Elements
+
+1. The elements can be selected in browser DOM inspector like it's usually done for regular html.
+2. The elements can be selected by mouse with `Ctrl` key pressed. When the key is down the elements
+are highlighted by white rectangle. Selecting an element in this mode sets variable `$pixi`
+to the corresponding display object that can be used in the console.
+
+## Configuration
+### Configuring Attributes
+### Using Decorators
\ No newline at end of file