diff --git a/.babelrc b/.babelrc
index b4de84f..b95de9f 100644
--- a/.babelrc
+++ b/.babelrc
@@ -10,7 +10,7 @@
     "transform-runtime",
     "transform-object-rest-spread",
     ["transform-react-jsx", {
-      "pragma": "renderElement"
+      "pragma": "HEML.renderElement"
     }]
   ]
 }
diff --git a/packages/heml/element.js b/packages/heml/element.js
new file mode 100644
index 0000000..161c6f7
--- /dev/null
+++ b/packages/heml/element.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./build/element')
diff --git a/packages/heml/package-lock.json b/packages/heml/package-lock.json
index 879b2ff..c3822d0 100644
--- a/packages/heml/package-lock.json
+++ b/packages/heml/package-lock.json
@@ -871,12 +871,34 @@
     "@heml/render": {
       "version": "1.0.0",
       "requires": {
-        "lodash": "4.17.4"
+        "html-tags": "2.0.0",
+        "is-promise": "2.1.0",
+        "lodash": "4.17.4",
+        "stringify-attributes": "1.0.0"
       },
       "dependencies": {
+        "escape-goat": {
+          "version": "1.3.0",
+          "bundled": true
+        },
+        "html-tags": {
+          "version": "2.0.0",
+          "bundled": true
+        },
+        "is-promise": {
+          "version": "2.1.0",
+          "bundled": true
+        },
         "lodash": {
           "version": "4.17.4",
           "bundled": true
+        },
+        "stringify-attributes": {
+          "version": "1.0.0",
+          "bundled": true,
+          "requires": {
+            "escape-goat": "1.3.0"
+          }
         }
       }
     },
@@ -909,6 +931,11 @@
         "proto-list": "1.2.4"
       }
     },
+    "css-groups": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/css-groups/-/css-groups-0.1.1.tgz",
+      "integrity": "sha1-UyvG3LId3Mps1BCdAkmPyY/7BO8="
+    },
     "editorconfig": {
       "version": "0.13.3",
       "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.13.3.tgz",
diff --git a/packages/heml/package.json b/packages/heml/package.json
index 2a86c28..2e56632 100644
--- a/packages/heml/package.json
+++ b/packages/heml/package.json
@@ -6,10 +6,12 @@
   "author": "SparkPost <dev-relations@sparkpost.com> (https://sparkpost.com)",
   "license": "MIT",
   "dependencies": {
+    "@heml/elements": "1.0.0",
     "@heml/inline": "1.0.0",
     "@heml/parse": "1.0.0",
     "@heml/render": "1.0.0",
     "byte-length": "^0.1.1",
+    "css-groups": "^0.1.1",
     "js-beautify": "^1.7.4",
     "lodash": "^4.17.4"
   }
diff --git a/packages/heml/src/createElement.js b/packages/heml/src/createElement.js
new file mode 100644
index 0000000..5edd28f
--- /dev/null
+++ b/packages/heml/src/createElement.js
@@ -0,0 +1,20 @@
+import { defaults, isFunction } from 'lodash'
+
+export default function (name, element) {
+  if (isFunction(element)) {
+    element = { render: element }
+  }
+
+  element = defaults({}, element, {
+    tagName: name,
+    children: [],
+    defaultAttrs: {},
+    preRender () {},
+    render () { return false },
+    postRender () {}
+  })
+
+  element.defaultAttrs.class = element.defaultAttrs.class || ''
+
+  return element
+}
diff --git a/packages/heml/src/element.js b/packages/heml/src/element.js
new file mode 100644
index 0000000..877324c
--- /dev/null
+++ b/packages/heml/src/element.js
@@ -0,0 +1,6 @@
+
+import { renderElement } from '@heml/render'
+import createElement from './createElement'
+import utils from './utils'
+
+module.exports = { createElement, renderElement, utils }
diff --git a/packages/heml/src/utils.js b/packages/heml/src/utils.js
new file mode 100644
index 0000000..e386b3c
--- /dev/null
+++ b/packages/heml/src/utils.js
@@ -0,0 +1,5 @@
+import cssGroups from 'css-groups'
+
+export default {
+  cssGroups
+}