diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
new file mode 100644
index 0000000..9b392dc
--- /dev/null
+++ b/.github/workflows/node.js.yml
@@ -0,0 +1,28 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: yarn install --frozen-lockfile
+      - run: yarn build
+      - run: yarn test
diff --git a/README.md b/README.md
index 1a0dec7..cbb9c5f 100644
--- a/README.md
+++ b/README.md
@@ -13,4 +13,5 @@ The plugin's name is based on Dutch graphic designer [Wim Crouwel](https://en.wi
 - Create an unlimited amount of layout grids with varying dimensions, columns, gutters, and margins
 - Build grids and overlay them upon any object: artboards, rectangles, polygons, text, etc.
 - Use auto-calculations to make sure your grids hold your desired structure while still being valid
-- Construct grids in measurements of decimals or whole numbers
+- Support for grid construction using decimals
+- Produce grids as rectangle fills or gridlines or both
diff --git a/package.json b/package.json
index 601903c..aa05b93 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gridnik",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "main": "dist/main.js",
   "repository": "https://github.com/mattlean/gridnik.git",
   "author": "Matthew Lean <matt@mattlean.com>",
diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
index 06e9f1a..5229c53 100644
--- a/src/components/Panel.jsx
+++ b/src/components/Panel.jsx
@@ -12,6 +12,7 @@ const {
   validateColWidthCalc,
   validateGutterWidthCalc,
   validateInputs,
+  validateStats,
 } = require('../scripts/validate')
 
 /**
@@ -38,6 +39,9 @@ const Panel = ({ selectionAmount, validSelection }) => {
   const [topBottomMarginsSum, setTopBottomMarginsSum] = useState(0)
   const [rightLeftMarginsSum, setRightLeftMarginsSum] = useState(0)
 
+  const [drawFields, setDrawFields] = useState(true)
+  const [drawGridlines, setDrawGridlines] = useState(true)
+
   const [isCalcReady, setIsCalcReady] = useState(false)
 
   const calcState = {
@@ -79,6 +83,8 @@ const Panel = ({ selectionAmount, validSelection }) => {
     setRightMargin(0)
     setBottomMargin(0)
     setLeftMargin(0)
+    setDrawFields(true)
+    setDrawGridlines(true)
     resetStats()
   }
 
@@ -210,13 +216,30 @@ const Panel = ({ selectionAmount, validSelection }) => {
    * Attempt calculations for top bottom margins.
    */
   const attemptGridHeightCalc = () => {
+    // Clean inputs to possible values
+    // May not be enough inputs for calculations though
     validateInputs(calcState)
 
     if (validateColWidthCalc(calcState) || validateGutterWidthCalc(calcState)) {
+      // If calcColWidth or calcGutterWidth is possible, run calcGridHeight
       const result = calcGridHeight(calcState)
 
       setGridHeight(result.gridHeight)
       setTopBottomMarginsSum(result.topBottomMarginsSum)
+
+      if (
+        validateStats({
+          colWidthsSum,
+          gutterWidthsSum,
+          gridWidth,
+          gridHeight: result.gridHeight,
+          rightLeftMarginsSum,
+          topBottomMarginsSum: result.topBottomMarginsSum,
+        })
+      ) {
+        // Previous calculation was valid, so set isCalcReady to true
+        setIsCalcReady(true)
+      }
     }
 
     setForm(calcState)
@@ -325,7 +348,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
               min="1"
               value={canvasWidth}
               onBlur={attemptColWidthCalc}
-              onChange={(evt) => setCanvasWidth(evt.target.value)}
+              onChange={(evt) => {
+                setIsCalcReady(false)
+                setCanvasWidth(evt.target.value)
+              }}
               className="input-lg"
               placeholder="Width"
               disabled={canvasType === 'auto'}
@@ -336,7 +362,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
               min="1"
               value={canvasHeight}
               onBlur={attemptGridHeightCalc}
-              onChange={(evt) => setCanvasHeight(evt.target.value)}
+              onChange={(evt) => {
+                setIsCalcReady(false)
+                setCanvasHeight(evt.target.value)
+              }}
               className="input-lg"
               placeholder="Height"
               disabled={canvasType === 'auto'}
@@ -352,7 +381,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
             max={canvasWidth}
             value={cols}
             onBlur={attemptColWidthCalc}
-            onChange={(evt) => setCols(evt.target.value)}
+            onChange={(evt) => {
+              setIsCalcReady(false)
+              setCols(evt.target.value)
+            }}
             className="input-lg"
             uxp-quiet="true"
           />
@@ -365,7 +397,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
             max={canvasWidth - 1}
             value={gutterWidth}
             onBlur={attemptColWidthCalc}
-            onChange={(evt) => setGutterWidth(evt.target.value)}
+            onChange={(evt) => {
+              setIsCalcReady(false)
+              setGutterWidth(evt.target.value)
+            }}
             className="input-lg"
             uxp-quiet="true"
           />
@@ -378,7 +413,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
             max={canvasWidth}
             value={colWidth}
             onBlur={attemptGutterWidthCalc}
-            onChange={(evt) => setColWidth(evt.target.value)}
+            onChange={(evt) => {
+              setIsCalcReady(false)
+              setColWidth(evt.target.value)
+            }}
             className="input-lg"
             uxp-quiet="true"
           />
@@ -392,7 +430,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
               max={canvasHeight - 1}
               value={topMargin}
               onBlur={attemptGridHeightCalc}
-              onChange={(evt) => setTopMargin(evt.target.value)}
+              onChange={(evt) => {
+                setIsCalcReady(false)
+                setTopMargin(evt.target.value)
+              }}
               uxp-quiet="true"
             />
             <input
@@ -401,7 +442,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
               max={canvasWidth - 1}
               value={rightMargin}
               onBlur={attemptColWidthCalc}
-              onChange={(evt) => setRightMargin(evt.target.value)}
+              onChange={(evt) => {
+                setIsCalcReady(false)
+                setRightMargin(evt.target.value)
+              }}
               uxp-quiet="true"
             />
             <input
@@ -410,7 +454,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
               max={canvasHeight - 1}
               value={bottomMargin}
               onBlur={attemptGridHeightCalc}
-              onChange={(evt) => setBottomMargin(evt.target.value)}
+              onChange={(evt) => {
+                setIsCalcReady(false)
+                setBottomMargin(evt.target.value)
+              }}
               uxp-quiet="true"
             />
             <input
@@ -419,7 +466,10 @@ const Panel = ({ selectionAmount, validSelection }) => {
               max={canvasWidth - 1}
               value={leftMargin}
               onBlur={attemptColWidthCalc}
-              onChange={(evt) => setLeftMargin(evt.target.value)}
+              onChange={(evt) => {
+                setIsCalcReady(false)
+                setLeftMargin(evt.target.value)
+              }}
               uxp-quiet="true"
             />
           </div>
@@ -460,14 +510,40 @@ const Panel = ({ selectionAmount, validSelection }) => {
           </div>
           <hr />
         </div>
+        <label className="text-input-combo">
+          <span>Draw Fields</span>
+          <input
+            type="checkbox"
+            checked={drawFields}
+            onChange={(evt) => {
+              setDrawFields(evt.target.checked)
+            }}
+            uxp-quiet="true"
+          />
+        </label>
+        <label className="text-input-combo">
+          <span>Draw Gridlines</span>
+          <input
+            type="checkbox"
+            checked={drawGridlines}
+            onChange={(evt) => {
+              setDrawGridlines(evt.target.checked)
+            }}
+            uxp-quiet="true"
+          />
+        </label>
         <footer>
           <button onClick={() => resetForm()} uxp-variant="secondary">
             Reset
           </button>
           <button
             id="create"
-            onClick={() => draw(calcState)}
-            disabled={!isCalcReady}
+            onClick={() => {
+              if (isCalcReady) {
+                draw(calcState, { drawFields, drawGridlines })
+              }
+            }}
+            disabled={!isCalcReady || (!drawFields && !drawGridlines)}
             uxp-variant="cta"
           >
             Create
diff --git a/src/scripts/draw.js b/src/scripts/draw.js
index a732efc..edd96b5 100644
--- a/src/scripts/draw.js
+++ b/src/scripts/draw.js
@@ -1,12 +1,13 @@
-const commands = require('commands')
-const { Color, Rectangle } = require('scenegraph')
+const { Color, Line, Rectangle } = require('scenegraph')
 const { editDocument } = require('application')
+const { group } = require('commands')
 
 /**
  * Draw grid.
- * @param {Object} calcState  State for calculations. Should be validated beforehand.
+ * @param {Object} calcState State for calculations. Should be validated beforehand.
+ * @param {Object} drawOptions Options to control what should be drawn
  */
-const draw = (calcState) => {
+const draw = (calcState, drawOptions) => {
   editDocument((selection) => {
     const currSelection = selection.items[0]
     const {
@@ -19,68 +20,109 @@ const draw = (calcState) => {
       topMargin,
       leftMargin,
     } = calcState
-    const color = new Color('#00ffff', 0.5)
+    const { drawFields, drawGridlines } = drawOptions
     const newItems = []
+    const colFills = []
+    const gridlines = []
 
+    // Draw canvas. Used for alignment.
     const canvas = new Rectangle()
     canvas.name = 'Canvas'
     canvas.width = canvasWidth
     canvas.height = canvasHeight
-    canvas.fill = color
+    canvas.fill = new Color('#00ff00', 0.25)
     newItems.push(canvas)
     selection.insertionParent.addChild(canvas)
 
     const pos = { x: leftMargin, y: topMargin }
 
-    for (let i = 0; i < cols; i += 1) {
-      const col = new Rectangle()
-      col.width = colWidth
-      col.height = gridHeight
-      col.fill = color
-      col.name = `Column ${i + 1}`
-      newItems.push(col)
-      selection.insertionParent.addChild(col)
+    if (drawFields || drawGridlines) {
+      for (let i = 0; i < cols; i += 1) {
+        if (drawFields) {
+          // Draw column
+          const col = new Rectangle()
+          col.width = colWidth
+          col.height = gridHeight
+          col.fill = new Color('#00ffff', 0.5)
+          col.name = `Column ${i + 1}`
+          colFills.push(col)
+          selection.insertionParent.addChild(col)
 
-      if (pos.x > 0 || pos.y > 0) {
-        col.moveInParentCoordinates(pos.x, pos.y)
+          if (pos.x > 0 || pos.y > 0) {
+            col.moveInParentCoordinates(pos.x, pos.y)
+          }
+        }
+
+        if (drawGridlines) {
+          // Draw gridlines
+          const gridlineA = new Line()
+          gridlineA.setStartEnd(pos.x, 0, pos.x, canvasHeight)
+          gridlineA.strokeEnabled = true
+          gridlineA.strokeWidth = 1
+          gridlineA.stroke = new Color('#ff4fff')
+          gridlineA.name = 'Gridline'
+          gridlines.push(gridlineA)
+          selection.insertionParent.addChild(gridlineA)
+
+          const gridlineB = new Line()
+          gridlineB.setStartEnd(
+            pos.x + colWidth,
+            0,
+            pos.x + colWidth,
+            canvasHeight
+          )
+          gridlineB.strokeEnabled = true
+          gridlineB.strokeWidth = 1
+          gridlineB.stroke = new Color('#ff4fff')
+          gridlineB.name = 'Gridline'
+          gridlines.push(gridlineB)
+          selection.insertionParent.addChild(gridlineB)
+        }
+
+        pos.x += colWidth + gutterWidth
       }
-      pos.x += colWidth + gutterWidth
-    }
 
-    selection.items = newItems
-    commands.group()
-    const group = selection.items[0]
-    group.name = 'Gridnik Grid'
-    const topLeftGroupPos = { x: group.localBounds.x, y: group.localBounds.y }
+      // Group columns
+      selection.items = colFills
+      group()
+      const colGroup = selection.items[0]
+      colGroup.name = 'Columns'
+      newItems.push(colGroup)
 
-    if (currSelection.constructor.name === 'Artboard') {
-      selection.items[0].placeInParentCoordinates(topLeftGroupPos, {
-        x: 0,
-        y: 0,
-      })
-    } else {
-      selection.items[0].placeInParentCoordinates(
-        topLeftGroupPos,
-        currSelection.boundsInParent
-      )
-    }
+      // Group gridlines
+      selection.items = gridlines
+      group()
+      const gridlineGroup = selection.items[0]
+      gridlineGroup.name = 'Gridlines'
+      newItems.push(gridlineGroup)
 
-    canvas.visible = false
+      // Group canvas, columns group, and gridlines group
+      selection.items = newItems
+      group()
+      const gridGroup = selection.items[0]
+      gridGroup.name = 'Gridnik Grid'
 
-    // commands.alignHorizontalCenter()
-    // commands.alignVerticalCenter()
+      const topLeftGroupPos = {
+        x: gridGroup.localBounds.x,
+        y: gridGroup.localBounds.y,
+      }
+      if (currSelection.constructor.name === 'Artboard') {
+        // Draw at (0,0) because the current selection is an artboard
+        gridGroup.placeInParentCoordinates(topLeftGroupPos, {
+          x: 0,
+          y: 0,
+        })
+      } else {
+        // Draw over the current selection since the current seleciton isn't an artboard
+        gridGroup.placeInParentCoordinates(
+          topLeftGroupPos,
+          currSelection.boundsInParent
+        )
+      }
 
-    // const newLine = new Line()
-    // newLine.setStartEnd(0, 0, 500, 500)
-    // newLine.strokeEnabled = true
-    // newLine.stroke = new Color('#ff00ff')
-    // newLine.strokeWidth = 3
-    // // console.log(selection.items[0])
-    // console.log(selection.editContext)
-    // console.log(selection.editContext.children)
-    // selection.insertionParent.addChild(newLine)
-    // // selection.editContext.addChild(newLine)
-    // selection.items = [newLine]
+      // Canvas no longer needs to be visible
+      canvas.visible = false
+    }
   })
 }
 
diff --git a/src/scripts/validate.js b/src/scripts/validate.js
index 4fd876d..4bae74f 100644
--- a/src/scripts/validate.js
+++ b/src/scripts/validate.js
@@ -196,3 +196,33 @@ const validateGutterWidthCalc = (calcState) => {
 }
 
 module.exports.validateGutterWidthCalc = validateGutterWidthCalc
+
+/**
+ * Check if all calculation stats exist. If they do, assume there is a current valid calculation.
+ * @param {*} calcStats Stats from calculations
+ * @returns {boolean} True if stats exist, false otherwise
+ */
+const validateStats = (calcStats) => {
+  const {
+    colWidthsSum,
+    gutterWidthsSum,
+    gridWidth,
+    gridHeight,
+    rightLeftMarginsSum,
+    topBottomMarginsSum,
+  } = calcStats
+
+  if (
+    typeof colWidthsSum === 'number' &&
+    typeof gutterWidthsSum === 'number' &&
+    typeof gridWidth === 'number' &&
+    typeof gridHeight === 'number' &&
+    typeof rightLeftMarginsSum === 'number' &&
+    typeof topBottomMarginsSum === 'number'
+  ) {
+    return true
+  }
+  return false
+}
+
+module.exports.validateStats = validateStats