qomponent
diff --git a/‎.gitignore‎
Lines changed: 1 addition & 0 deletions b/‎.gitignore‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎README.md‎
Lines changed: 50 additions & 1 deletion b/‎README.md‎
Lines changed: 50 additions & 1 deletion
diff --git a/‎example/index.html‎
Lines changed: 19 additions & 0 deletions b/‎example/index.html‎
Lines changed: 19 additions & 0 deletions
@@ -0,0 +1 @@
+node_modules/
@@ -1,2 +1,51 @@
 # qui-dot
-Render dot files
+A Lit-based web component to show dot files
+
+## Installation
+
+```bash
+npm i @qomponent/qui-dot
+```
+
+## Usage
+
+```javascript
+
+
+import { LitElement, html, css } from 'lit';
+import '@qomponent/qui-dot';
+
+class MyMainComponent extends LitElement {
+
+  constructor() {
+    super();
+  }
+
+  render() {
+    return html`<qui-dot dot="digraph { Hello -> World }"></qui-dot>
+    `;
+  }
+}
+
+customElements.define('my-main-component', MyMainComponent);
+
+
+```
+
+## Example
+
+To run the example:
+
+```bash
+npm install
+npm start
+```
+
+## Contributing
+
+Pull requests are welcome. For major changes, please open an issue first
+to discuss what you would like to change.
+
+## License
+
+[Apache 2](http://www.apache.org/licenses/LICENSE-2.0)
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dot Web Component Demo</title>
+    <script type="module" src="./qui-dot.js"></script>
+    <style>
+      
+    </style>
+  </head>
+  <body>
+    <h1>Dot</h1>
+    
+    <!-- Use the directory tree component -->
+    <qui-dot dot='digraph { Hello -> World }'></qui-dot>
+
+  </body>
+</html>