diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..03e00cf
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,61 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+package-lock.json
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+public/app.js
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..7fa7cf7
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Leon Sorokin, John Long, Fred Daoud, Graham Dixon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/lib/el.jsx b/lib/el.jsx
new file mode 100644
index 0000000..453d5bd
--- /dev/null
+++ b/lib/el.jsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2018 Leon Sorokin, John Long, Fred Daoud, Graham Dixon
+ * All rights reserved. (MIT Licensed)
+ *
+ * domvm-jsx(.jsx) - el.jsx
+ * this package supplies the el function defined in the using JSX with domvm wiki (https://github.com/domvm/domvm/wiki/JSX)
+ * @preserve https://github.com/gdixon/domvm-jsx
+ */
+
+// include domvm
+const domvm = require('domvm/dist/full/domvm.full');
+
+// jsx entry function
+let el = (...args) => {
+
+ // read the compiled jsx defintion into a defineView call when type is function
+ const type = typeof args[0];
+
+ // when the given is a func call
+ if (type === 'function') {
+ // hydrate the view data and children from the ...args
+ const view = args[0];
+ const data = args[1] || {};
+ // all children except the view and data
+ data.children = args.filter(function(arg, key) {
+
+ // not the view or the data definition
+ return (key > 1);
+ });
+
+ // define the component view
+ return domvm.defineView(view, data, data.key);
+ }
+
+ // define compiled jsx as spread
+ return domvm.defineElementSpread(...args);
+}
+
+// returns the el
+module.exports = el;
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..d327a3d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,16 @@
+{
+ "name": "domvm-jsx",
+ "version": "1.0.1",
+ "description": "This package supplies the el function defined in the [Using JSX with domvm wiki](https://github.com/domvm/domvm/wiki/JSX).",
+ "keywords": [
+ "domvm",
+ "jsx"
+ ],
+ "author": "GDixon",
+ "repository": "github:gdixon/domvm-jsx",
+ "main": "lib/el.jsx",
+ "license": "MIT",
+ "dependencies": {
+ "domvm": "^3.3.3"
+ }
+}
diff --git a/readme.md b/readme.md
new file mode 100644
index 0000000..c91fed2
--- /dev/null
+++ b/readme.md
@@ -0,0 +1,129 @@
+# domvm-jsx
+
+ > This package supplies the el function defined in the [using JSX with domvm wiki](https://github.com/domvm/domvm/wiki/JSX).
+
+--------
+
+## Using domvm and JSX
+While not all of domvm's features can be accommodated by JSX syntax, it's possible to cover a fairly large subset via a defineElementSpread pragma. Please refer to demos and examples in the [JSX wiki](https://github.com/domvm/domvm/wiki/JSX).
+
+## Quick start
+
+- install via npm/yarn
+ ```
+ npm install domvm-jsx --save
+ ```
+
+## Combining domvm and JSX with webpack and babel
+
+- package.json
+ ```
+ ...
+
+ "devDependencies": {
+ "webpack": "^3.8.1",
+ "babel-core": "^6.26.0",
+ "babel-loader": "^7.1.2",
+ "babel-preset-env": "^1.6.1",
+ "babel-plugin-transform-react-jsx": "^6.24.1"
+ },
+ "dependencies": {
+ "domvm": "^3.3.3",
+ "domvm-jsx": "^1.0.0"
+ }
+
+ ...
+ ```
+- webpack.config.js
+ ```
+ ...
+
+ module: {
+ loaders: [
+ {
+ test: /\.(jsx|js)$/,
+ loader: ['babel-loader']
+ }
+ ]
+ }
+
+ ...
+ ```
+- babel.rc
+ ```
+ {
+ "presets": [
+ "env"
+ ],
+ "plugins": [
+ [
+ "transform-react-jsx",
+ {
+ "pragma": "el"
+ }
+ ]
+ ]
+ }
+ ```
+- your-project-file.js
+ ```
+ ...
+
+ // jsx entry function
+ const el = require('domvm-jsx');
+
+ // define a component to be included via JSX (*note that components must start with a capital to differentiate them from element tags)
+ const Component = (vm) => {
+
+ return (vm) => {
+
+ return (
+ {vm.data.step}{vm.data.children}
+ );
+ };
+ };
+
+ // create a view using JSX and bind component
+ const view = function (vm) {
+ let step = 0;
+
+ setInterval(() => {
+ step = step +1;
+ vm.redraw();
+ }, 1000);
+
+ return function() {
+
+ /* has own content */
+ return (
+
+ {/* includes the component as a child */}
+
+ I'm a child
+