diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..7d6ad5f
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+node_modules/*
diff --git a/README.md b/README.md
index b7d2df6..7ece1f5 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,39 @@
-# wc-upgrader
-A JS Module to track HTML elements and change them to custom web components when they are registered.
+# WC-Upgrader
+
+WC-Upgrader is a JS Utility that 'upgrades' elements to the specified custom element when they are defined.
+
+![Example gif](./example.gif)
+1. **Basic Header:** This is just an h1 element
+2. **Flash Header:** This is using the custom element directly. There is just a text node until the custom element is defined so it renders with no styles or semantic meaning.
+3. **Basic Header Upgraded (Delay):** This is an h1 element that gets upgraded to the custom element when it is defined in the browser. In the demo there is a setTimeout to demonstrate how it is less disruptive to upgrade an element rather than have a text node to start.
+
+## Installation
+
+```
+npm install wc-upgrader
+```
+
+## Usage
+
+```javascript
+import wcUpgrader from 'node_modules/wc-upgrader/wc-upgrader.mjs'
+
+const Upgrader = new wcUpgrader();
+
+Upgrader.upgradeOnDefined('custom-element', 'CSSSelector');
+```
+*Technically speaking, this just makes a new element and moves the children from the old tree under it. You could use this to change an arbitrary element into another one and retain it's children.
+
+\**The custom element does not need to be defined immediately but it will need to be at some point or there will just be a hanging async task
+
+## Demo
+To try the demo file yourself do the following steps.
+1. Clone the Repo
+2. Run ```npm install``` to get the sample web component *Flashy-Header*
+3. Use something like [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) to view demo.html (wc-upgrader is a module so you'll get a CORS error if you don't)
+
+## Contributing
+Feedback and pull requests are welcome! Please open issues so we can discuss any feature ideas or bugs found.
+
+## License
+[MIT](https://choosealicense.com/licenses/mit/)
\ No newline at end of file
diff --git a/demo.html b/demo.html
new file mode 100644
index 0000000..ffd4827
--- /dev/null
+++ b/demo.html
@@ -0,0 +1,23 @@
+
+
+
+ Test Upgrader
+
+
+ Basic Header
+ Flashy Header
+ Basic Header Upgrdaed (Delay)
+
+
+
+
+
+
\ No newline at end of file
diff --git a/example.gif b/example.gif
new file mode 100644
index 0000000..72919d8
Binary files /dev/null and b/example.gif differ
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..dcb4c11
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,14 @@
+{
+ "name": "wc-upgrader",
+ "version": "1.0.0",
+ "lockfileVersion": 1,
+ "requires": true,
+ "dependencies": {
+ "flashy-header": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/flashy-header/-/flashy-header-1.0.0.tgz",
+ "integrity": "sha512-0CdMzfpc7xUAbXu+yh97uaQCQ9sGp88YZPbqVqYRdCFwJs5eijPlRUBq1G3KI/WFg8xNl+PguSXzQ1Vp4A1SiQ==",
+ "dev": true
+ }
+ }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..00dff57
--- /dev/null
+++ b/package.json
@@ -0,0 +1,33 @@
+{
+ "name": "wc-upgrader",
+ "version": "1.0.0",
+ "description": "WC-Upgrader is a JS Utility that 'upgrades' elements to the specified custom element when they are defined. ",
+ "main": "wc-upgrader.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/CalebBraaten/wc-upgrader.git"
+ },
+ "keywords": [
+ "Web",
+ "Components",
+ "Custom",
+ "Elements",
+ "Client",
+ "Side",
+ "Vanilla",
+ "JS"
+ ],
+ "author": "Caleb Braaten",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/CalebBraaten/wc-upgrader/issues"
+ },
+ "homepage": "https://github.com/CalebBraaten/wc-upgrader#readme",
+ "dependencies": {},
+ "devDependencies": {
+ "flashy-header": "^1.0.0"
+ }
+}
diff --git a/wc-upgrader.mjs b/wc-upgrader.mjs
new file mode 100644
index 0000000..8c2e782
--- /dev/null
+++ b/wc-upgrader.mjs
@@ -0,0 +1,35 @@
+class wcUpgrader {
+ upgradeOnDefined(elemDef, target){
+ customElements.whenDefined(elemDef)
+ .then( () => {
+ let oldElements = document.querySelectorAll(target);
+ for(let i = 0; i < oldElements.length; i++){
+ this._appendToDOM(elemDef, oldElements[i])
+ }
+ });
+ }
+
+ _appendToDOM(elemDef, targetElement){
+ // Works but elements are added to the DOM multiple times if nested
+ // within other elements that get upgraded - constructors are ran each time
+ // let newElem = document.createElement(elemDef);
+ // newElem.innerHTML = targetElem.innerHTML;
+ // targetElem.parentNode.replaceChild(newElem, targetElem);
+
+ let newElement = document.createElement(elemDef);
+ const parentNode = targetElement.parentNode;
+
+ for(let i=0; i < parentNode.childNodes.length; i++){
+ if(targetElement.isSameNode(parentNode.childNodes[i])){
+ parentNode.insertBefore(newElement, parentNode.childNodes[i]);
+ while(targetElement.firstChild){
+ newElement.appendChild(targetElement.firstChild);
+ }
+ targetElement.parentNode.removeChild(targetElement);
+ break;
+ }
+ }
+ }
+}
+
+export default wcUpgrader;
\ No newline at end of file