diff --git a/packages/rax-server-renderer/package.json b/packages/rax-server-renderer/package.json
index ff55b355c2..1977bad4dd 100644
--- a/packages/rax-server-renderer/package.json
+++ b/packages/rax-server-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rax-server-renderer",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Rax renderer for server-side render.",
   "license": "BSD-3-Clause",
   "main": "lib/index.js",
diff --git a/packages/rax-server-renderer/src/__tests__/attributes.js b/packages/rax-server-renderer/src/__tests__/attributes.js
new file mode 100644
index 0000000000..210dadc484
--- /dev/null
+++ b/packages/rax-server-renderer/src/__tests__/attributes.js
@@ -0,0 +1,782 @@
+/* @jsx createElement */
+
+import {createElement} from 'rax';
+import {renderToString} from '../index';
+
+describe('renderToString', () => {
+  describe('property to attribute mapping', function() {
+    describe('string properties', function() {
+      it('simple numbers ', () => {
+        function MyComponent() {
+          return <div width={30} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div width="30"></div>');
+      });
+
+      it('simple strings ', () => {
+        function MyComponent() {
+          return <div width={'30'} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div width="30"></div>');
+      });
+
+      it('no string prop with true value', () => {
+        function MyComponent() {
+          return <a href={true} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<a></a>');
+      });
+
+      it('no string prop with false value', () => {
+        function MyComponent() {
+          return <a href={false} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<a></a>');
+      });
+
+      it('no string prop with null value', () => {
+        function MyComponent() {
+          return <div width={null} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div></div>');
+      });
+
+      it('no string prop with function value', () => {
+        let fun = function() {};
+
+        function MyComponent() {
+          return <div width={fun} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div></div>');
+      });
+
+      it('no string prop with symbol value', () => {
+        function MyComponent() {
+          return <div width={Symbol('foo')} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div></div>');
+      });
+    });
+
+    describe('boolean properties', function() {
+      it('boolean prop with true value', () => {
+        function MyComponent() {
+          return <div hidden={true} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div hidden></div>');
+      });
+
+      it('boolean prop with false value', () => {
+        function MyComponent() {
+          return <div hidden={false} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div></div>');
+      });
+
+      it('boolean prop with self value', () => {
+        function MyComponent() {
+          return <div hidden="hidden" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div hidden></div>');
+      });
+
+      it('boolean prop with "" value', () => {
+        function MyComponent() {
+          return <div hidden="" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div></div>');
+      });
+
+      it('boolean prop with string value', () => {
+        function MyComponent() {
+          return <div hidden="foo" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div hidden></div>');
+      });
+
+      it('boolean prop with array value', () => {
+        function MyComponent() {
+          return <div hidden={['foo', 'bar']} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div hidden></div>');
+      });
+
+      it('boolean prop with object value', () => {
+        function MyComponent() {
+          return <div hidden={{foo: 'bar'}} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div hidden></div>');
+      });
+
+      it('boolean prop with non-zero number value', () => {
+        function MyComponent() {
+          return <div hidden={10} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div hidden></div>');
+      });
+
+      it('boolean prop with zero value', () => {
+        function MyComponent() {
+          return <div hidden={0} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div></div>');
+      });
+
+      it('no boolean prop with null value', () => {
+        function MyComponent() {
+          return <div hidden={null} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div></div>');
+      });
+
+      it('no boolean prop with function value', () => {
+        let fun = function() {};
+        function MyComponent() {
+          return <div hidden={fun} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div></div>');
+      });
+
+      it('no boolean prop with symbol value', () => {
+        function MyComponent() {
+          return <div hidden={Symbol('foo')} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div></div>');
+      });
+    });
+
+    describe('download property (combined boolean/string attribute)', function() {
+      it('download prop with true value', () => {
+        function MyComponent() {
+          return <a download={true} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<a download></a>');
+      });
+
+      it('download prop with false value', () => {
+        function MyComponent() {
+          return <a download={false} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<a></a>');
+      });
+
+      it('download prop with string value', () => {
+        function MyComponent() {
+          return <a download="myfile" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<a download="myfile"></a>');
+      });
+
+      it('download prop with string "false" value', () => {
+        function MyComponent() {
+          return <a download="false" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<a download="false"></a>');
+      });
+
+      it('download prop with string "true" value', () => {
+        function MyComponent() {
+          return <a download="true" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<a download="true"></a>');
+      });
+
+      it('download prop with number 0 value', () => {
+        function MyComponent() {
+          return <a download={0} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<a download="0"></a>');
+      });
+
+      it('no download prop with null value', () => {
+        function MyComponent() {
+          return <a download={null} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<a></a>');
+      });
+
+      it('no download prop with undefined value', () => {
+        function MyComponent() {
+          return <a download={undefined} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<a></a>');
+      });
+
+      it('no download prop with function value', () => {
+        let fun = function() {};
+        function MyComponent() {
+          return <a download={fun} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<a></a>');
+      });
+
+      it('no download prop with symbol value', () => {
+        function MyComponent() {
+          return <a download={Symbol('foo')} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<a></a>');
+      });
+    });
+
+    describe('className property', function() {
+      it('className prop with string value', () => {
+        function MyComponent() {
+          return <div className="myClassName" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div class="myClassName"></div>');
+      });
+
+      it('className prop with empty string value', () => {
+        function MyComponent() {
+          return <div className="" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div class=""></div>');
+      });
+
+      it('no className prop with true value', () => {
+        function MyComponent() {
+          return <div className={true} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div></div>');
+      });
+
+      it('no className prop with false value', () => {
+        function MyComponent() {
+          return <div className={false} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div></div>');
+      });
+
+      it('no className prop with null value', () => {
+        function MyComponent() {
+          return <div className={null} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div></div>');
+      });
+
+      it('badly cased className with a warning', () => {
+        function MyComponent() {
+          return <div classname="test" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div classname="test"></div>');
+      });
+
+      it('className prop when given the alias with a warning', () => {
+        function MyComponent() {
+          return <div class="test" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div class="test"></div>');
+      });
+    });
+
+    describe('htmlFor property', function() {
+      // TODO
+    });
+
+    describe('numeric properties', function() {
+      it('positive numeric property with positive value', () => {
+        function MyComponent() {
+          return <input size={2} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<input size="2">');
+      });
+
+      it('numeric property with zero value', () => {
+        function MyComponent() {
+          return <ol start={0} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<ol start="0"></ol>');
+      });
+
+      it('no positive numeric property with zero value', () => {
+        function MyComponent() {
+          return <input size={0} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<input>');
+      });
+
+      it('no numeric prop with function value', () => {
+        let fun = function() {};
+        function MyComponent() {
+          return <ol start={fun} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<ol></ol>');
+      });
+
+      it('no numeric prop with symbol value', () => {
+        function MyComponent() {
+          return <ol start={Symbol('foo')} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<ol></ol>');
+      });
+
+      it('no positive numeric prop with function value', () => {
+        let fun = function() {};
+        function MyComponent() {
+          return <input size={fun} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<input>');
+      });
+
+      it('no positive numeric prop with symbol value', () => {
+        let fun = function() {};
+        function MyComponent() {
+          return <input size={Symbol('foo')} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<input>');
+      });
+    });
+
+    describe('props with special meaning', function() {
+      it('no ref attribute', () => {
+        function MyComponent() {
+          return <div ref="foo" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div></div>');
+      });
+
+      it('no children attribute', () => {
+        function MyComponent() {
+          return createElement('div', {}, 'foo');
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div>foo</div>');
+      });
+
+      it('no key attribute', () => {
+        function MyComponent() {
+          return <div key="foo" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div></div>');
+      });
+
+      it('no dangerouslySetInnerHTML attribute', () => {
+        function MyComponent() {
+          return <div dangerouslySetInnerHTML={{__html: '<foo />'}} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div><foo /></div>');
+      });
+    });
+
+    describe('inline styles', function() {
+      // TODO
+    });
+
+    describe('aria attributes', function() {
+      it('simple strings', () => {
+        function MyComponent() {
+          return <div aria-label="hello" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div aria-label="hello"></div>');
+      });
+
+      it('aria string prop with false value', () => {
+        function MyComponent() {
+          return <div aria-label={false} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div aria-label="false"></div>');
+      });
+
+      it('aria string prop with null value', () => {
+        function MyComponent() {
+          return <div aria-label={null} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div></div>');
+      });
+
+      it('"aria" attribute with a warning', () => {
+        function MyComponent() {
+          return <div aria="hello" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div aria="hello"></div>');
+      });
+    });
+
+    describe('cased attributes', function() {
+      it('badly cased aliased HTML attribute with a warning', () => {
+        function MyComponent() {
+          return <meta httpequiv="refresh" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<meta httpequiv="refresh">');
+      });
+
+      it('badly cased SVG attribute with a warning', () => {
+        function MyComponent() {
+          return <svg>
+            <text textlength="10" />
+          </svg>;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<svg><text textlength="10"></text></svg>');
+      });
+
+      it('no badly cased aliased SVG attribute alias', () => {
+        function MyComponent() {
+          return <svg>
+            <text strokedasharray="10 10" />
+          </svg>;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<svg><text strokedasharray="10 10"></text></svg>');
+      });
+
+      it('no badly cased original SVG attribute that is aliased', () => {
+        function MyComponent() {
+          return <svg>
+            <text stroke-dasharray="10 10" />
+          </svg>;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<svg><text stroke-dasharray="10 10"></text></svg>');
+      });
+    });
+
+    describe('unknown attributes', function() {
+      it('unknown attributes', () => {
+        function MyComponent() {
+          return <div foo="bar" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div foo="bar"></div>');
+      });
+
+      it('unknown data- attributes', () => {
+        function MyComponent() {
+          return <div data-foo="bar" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div data-foo="bar"></div>');
+      });
+
+      it('badly cased reserved attributes', () => {
+        function MyComponent() {
+          return <div CHILDREN="5" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div CHILDREN="5"></div>');
+      });
+
+      it('"data" attribute', () => {
+        function MyComponent() {
+          return <object data="hello" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<object data="hello"></object>');
+      });
+
+      it('no unknown data- attributes with null value', () => {
+        function MyComponent() {
+          return <div data-foo={null} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div></div>');
+      });
+
+      it('unknown data- attributes with casing', () => {
+        function MyComponent() {
+          return <div data-fooBar="true" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div data-fooBar="true"></div>');
+      });
+
+      it('unknown data- attributes with boolean true', () => {
+        function MyComponent() {
+          return <div data-foobar={true} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div data-foobar="true"></div>');
+      });
+
+      it('unknown data- attributes with boolean false', () => {
+        function MyComponent() {
+          return <div data-foobar={false} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div data-foobar="false"></div>');
+      });
+
+      it('no unknown data- attributes with casing and null value', () => {
+        function MyComponent() {
+          return <div data-foobar={null} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div></div>');
+      });
+
+      it('custom attributes for non-standard elements', () => {
+        function MyComponent() {
+          return <nonstandard foo="bar" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<nonstandard foo="bar"></nonstandard>');
+      });
+
+      it('SVG tags with dashes in them', () => {
+        function MyComponent() {
+          return <svg>
+            <font-face accent-height={10} />
+          </svg>;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<svg><font-face accent-height="10"></font-face></svg>');
+      });
+
+      it('cased custom attributes', () => {
+        function MyComponent() {
+          return <div fooBar="test" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div fooBar="test"></div>');
+      });
+    });
+
+    describe('event attributes', function() {
+      it('no HTML events', () => {
+        function MyComponent() {
+          return <div onClick={() => {}} />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div></div>');
+      });
+
+      it('unknown events', () => {
+        function MyComponent() {
+          return <div onunknownevent="alert(&quot;hack&quot;)" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div onunknownevent=\"alert(&quot;hack&quot;)\"></div>');
+      });
+
+      it('custom attribute named `on`', () => {
+        function MyComponent() {
+          return <div on="tap:do-something" />;
+        }
+
+        const str = renderToString(<MyComponent />);
+        expect(str).toBe('<div on="tap:do-something"></div>');
+      });
+    });
+  });
+
+  describe('custom elements', () => {
+    it('class for custom elements', () => {
+      function MyComponent() {
+        return <div is="custom-element" class="test" />;
+      }
+
+      const str = renderToString(<MyComponent />);
+      expect(str).toBe('<div is="custom-element" class="test"></div>');
+    });
+
+    it('className for custom elements', () => {
+      function MyComponent() {
+        return <div is="custom-element" className="test" />;
+      }
+
+      const str = renderToString(<MyComponent />);
+      expect(str).toBe('<div is="custom-element" class="test"></div>');
+    });
+
+    it('htmlFor attribute for custom elements', () => {
+      function MyComponent() {
+        return <div is="custom-element" htmlFor="test" />;
+      }
+
+      const str = renderToString(<MyComponent />);
+      expect(str).toBe('<div is="custom-element" htmlFor="test"></div>');
+    });
+
+    it('for attribute for custom elements', () => {
+      function MyComponent() {
+        return <div is="custom-element" for="test" />;
+      }
+
+      const str = renderToString(<MyComponent />);
+      expect(str).toBe('<div is="custom-element" for="test"></div>');
+    });
+
+    it('unknown attributes for custom elements', () => {
+      function MyComponent() {
+        return <custom-element foo="bar" />;
+      }
+
+      const str = renderToString(<MyComponent />);
+      expect(str).toBe('<custom-element foo="bar"></custom-element>');
+    });
+
+    it('unknown `on*` attributes for custom elements', () => {
+      function MyComponent() {
+        return <custom-element onunknown="bar" />;
+      }
+
+      const str = renderToString(<MyComponent />);
+      expect(str).toBe('<custom-element onunknown="bar"></custom-element>');
+    });
+
+    it('no unknown boolean `true` attributes', () => {
+      function MyComponent() {
+        return <custom-element foo={true} />;
+      }
+
+      const str = renderToString(<MyComponent />);
+      expect(str).toBe('<custom-element></custom-element>');
+    });
+
+    it('no unknown boolean `false` attributes', () => {
+      function MyComponent() {
+        return <custom-element foo={false} />;
+      }
+
+      const str = renderToString(<MyComponent />);
+      expect(str).toBe('<custom-element></custom-element>');
+    });
+
+    it('no unknown attributes for custom elements with null value', () => {
+      function MyComponent() {
+        return <custom-element foo={null} />;
+      }
+
+      const str = renderToString(<MyComponent />);
+      expect(str).toBe('<custom-element></custom-element>');
+    });
+
+    it('unknown attributes for custom elements using is', () => {
+      function MyComponent() {
+        return <div is="custom-element" foo="bar" />;
+      }
+
+      const str = renderToString(<MyComponent />);
+      expect(str).toBe('<div is="custom-element" foo="bar"></div>');
+    });
+
+    it('no unknown attributes for custom elements using is with null value', () => {
+      function MyComponent() {
+        return <div is="custom-element" foo={null} />;
+      }
+
+      const str = renderToString(<MyComponent />);
+      expect(str).toBe('<div is="custom-element"></div>');
+    });
+  });
+});
\ No newline at end of file
diff --git a/packages/rax-server-renderer/src/__tests__/basic.js b/packages/rax-server-renderer/src/__tests__/basic.js
new file mode 100644
index 0000000000..58a0700f3f
--- /dev/null
+++ b/packages/rax-server-renderer/src/__tests__/basic.js
@@ -0,0 +1,114 @@
+/* @jsx createElement */
+
+import {createElement} from 'rax';
+import {renderToString} from '../index';
+
+describe('renderToString', () => {
+  describe('basic rendering', function() {
+    it('a blank div', () => {
+      function MyComponent() {
+        return <div />;
+      }
+
+      let str = renderToString(<MyComponent />);
+      expect(str).toBe('<div></div>');
+    });
+
+    it('a self-closing tag', () => {
+      function MyComponent() {
+        return <br />;
+      }
+
+      let str = renderToString(<MyComponent />);
+      expect(str).toBe('<br>');
+    });
+
+    it('a self-closing tag as a child', () => {
+      function MyComponent() {
+        return (
+          <div>
+            <br />
+          </div>
+        );
+      }
+
+      let str = renderToString(<MyComponent />);
+      expect(str).toBe('<div><br></div>');
+    });
+
+    it('a string', () => {
+      function MyComponent() {
+        return 'Hello';
+      }
+
+      let str = renderToString(<MyComponent />);
+      expect(str).toBe('Hello');
+    });
+
+    it('a number', () => {
+      function MyComponent() {
+        return 42;
+      }
+
+      let str = renderToString(<MyComponent />);
+      expect(str).toBe('42');
+    });
+
+    it('an array with one child', () => {
+      function MyComponent() {
+        return [<div key={1}>text1</div>];
+      }
+
+      let str = renderToString(<MyComponent />);
+      expect(str).toBe('<div>text1</div>');
+    });
+
+    it('an array with several children', () => {
+      let Header = props => {
+        return <p>header</p>;
+      };
+      let Footer = props => {
+        return [<h2 key={1}>footer</h2>, <h3 key={2}>about</h3>];
+      };
+
+      function MyComponent() {
+        return [
+          <div key={1}>text1</div>,
+          <span key={2}>text2</span>,
+          <Header key={3} />,
+          <Footer key={4} />,
+        ];
+      }
+
+      let str = renderToString(<MyComponent />);
+      expect(str).toBe('<div>text1</div><span>text2</span><p>header</p><h2>footer</h2><h3>about</h3>');
+    });
+
+    it('a nested array', () => {
+      function MyComponent() {
+        return [
+          [<div key={1}>text1</div>],
+          <span key={1}>text2</span>,
+          [[[null, <p key={1} />], false]],
+        ];
+      }
+
+      let str = renderToString(<MyComponent />);
+      expect(str).toBe('<div>text1</div><span>text2</span><!-- _ --><p></p><!-- _ -->');
+    });
+
+    // TODO: render an iterable
+    it('an iterable', async() => {
+    });
+
+    it('emptyish value', () => {
+      expect(renderToString(0)).toBe('0');
+      expect(renderToString(<div>{''}</div>)).toBe('<div></div>');
+      expect(renderToString([])).toBe('');
+      expect(renderToString(false)).toBe('<!-- _ -->');
+      expect(renderToString(true)).toBe('<!-- _ -->');
+      expect(renderToString(undefined)).toBe('<!-- _ -->');
+      expect(renderToString([[[false]], undefined])).toBe('<!-- _ --><!-- _ -->');
+    });
+  });
+});
\ No newline at end of file
diff --git a/packages/rax-server-renderer/src/__tests__/renderToString.js b/packages/rax-server-renderer/src/__tests__/renderToString.js
index bef41d1615..c008e60620 100644
--- a/packages/rax-server-renderer/src/__tests__/renderToString.js
+++ b/packages/rax-server-renderer/src/__tests__/renderToString.js
@@ -249,7 +249,7 @@ describe('renderToString', () => {
     }
 
     let str = renderToString(<MyComponent />);
-    expect(str).toBe('<input type="radio" checked="checked">');
+    expect(str).toBe('<input type="radio" checked>');
   });
 
   it('render with state hook', () => {
diff --git a/packages/rax-server-renderer/src/attribute.js b/packages/rax-server-renderer/src/attribute.js
new file mode 100644
index 0000000000..91cc41075a
--- /dev/null
+++ b/packages/rax-server-renderer/src/attribute.js
@@ -0,0 +1,129 @@
+// A simple string attribute.
+// Attributes that aren't in the whitelist are presumed to have this type.
+export const STRING = 1;
+
+// A string attribute that accepts booleans in Rax. In HTML, these are called
+// "enumerated" attributes with "true" and "false" as possible values.
+// When true, it should be set to a "true" string.
+// When false, it should be set to a "false" string.
+export const BOOLEANISH_STRING = 2;
+
+// A real boolean attribute.
+// When true, it should be present (set either to an empty string or its name).
+// When false, it should be omitted.
+export const BOOLEAN = 3;
+
+// An attribute that can be used as a flag as well as with a value.
+// When true, it should be present (set either to an empty string or its name).
+// When false, it should be omitted.
+// For any other value, should be present with that value.
+export const OVERLOADED_BOOLEAN = 4;
+
+// An attribute that must be numeric or parse as a numeric.
+// When falsy, it should be removed.
+export const NUMERIC = 5;
+
+// An attribute that must be positive numeric or parse as a positive numeric.
+// When falsy, it should be removed.
+export const POSITIVE_NUMERIC = 6;
+
+const properties = {};
+
+export function getPropertyInfo(prop) {
+  return properties[prop];
+}
+
+export function shouldRemoveAttribute(prop, value) {
+  const propertyInfo = getPropertyInfo(prop);
+  const propType = propertyInfo ? propertyInfo.type : null;
+  const valueType = typeof value;
+
+  if (value === null || valueType === 'undefined') {
+    return true;
+  }
+
+  switch (valueType) {
+    case 'function':
+    case 'symbol':
+      return true;
+  }
+
+  if (propType !== null) {
+    switch (propType) {
+      case BOOLEAN:
+        return !value;
+      case OVERLOADED_BOOLEAN:
+        return value === false;
+      case NUMERIC:
+        return isNaN(value);
+      case POSITIVE_NUMERIC:
+        return isNaN(value) || value < 1;
+    }
+  }
+
+  return false;
+}
+
+[
+  'contentEditable',
+  'draggable',
+  'spellCheck',
+  'value'
+].forEach((name) => {
+  properties[name] = {
+    type: BOOLEANISH_STRING
+  };
+});
+
+[
+  'allowFullScreen',
+  'async',
+  'autoFocus',
+  'autoPlay',
+  'controls',
+  'default',
+  'defer',
+  'disabled',
+  'disablePictureInPicture',
+  'formNoValidate',
+  'hidden',
+  'loop',
+  'noModule',
+  'noValidate',
+  'open',
+  'playsInline',
+  'readOnly',
+  'required',
+  'reversed',
+  'scoped',
+  'seamless',
+  'itemScope',
+  'checked',
+  'multiple',
+  'muted',
+  'selected',
+].forEach((name) => {
+  properties[name] = {
+    type: BOOLEAN
+  };
+});
+
+[
+  'capture',
+  'download'
+].forEach((name) => {
+  properties[name] = {
+    type: OVERLOADED_BOOLEAN
+  };
+});
+
+[
+  'cols',
+  'rows',
+  'size',
+  'span',
+].forEach((name) => {
+  properties[name] = {
+    type: POSITIVE_NUMERIC
+  };
+});
\ No newline at end of file
diff --git a/packages/rax-server-renderer/src/index.js b/packages/rax-server-renderer/src/index.js
index 328c0535ec..912f487951 100644
--- a/packages/rax-server-renderer/src/index.js
+++ b/packages/rax-server-renderer/src/index.js
@@ -1,4 +1,5 @@
 import { shared } from 'rax';
+import { BOOLEAN, BOOLEANISH_STRING, OVERLOADED_BOOLEAN, shouldRemoveAttribute, getPropertyInfo } from './attribute';
 
 const EMPTY_OBJECT = {};
 const TRUE = true;
@@ -121,37 +122,78 @@ function styleToCSS(style, options = {}) {
   return css;
 }
 
+function createMarkupForProperty(prop, value, options) {
+  if (prop === 'children') {
+    // Ignore children prop
+    return '';
+  }
+
+  if (prop === 'style') {
+    return ` style="${styleToCSS(value, options)}"`;
+  }
+
+  if (prop === 'className') {
+    return typeof value === 'string' ? ` class="${escapeText(value)}"` : '';
+  }
+
+  if (prop === 'dangerouslySetInnerHTML') {
+    // Ignore innerHTML
+    return '';
+  }
+
+  if (shouldRemoveAttribute(prop, value)) {
+    return '';
+  }
+
+  const propInfo = getPropertyInfo(prop);
+  const propType = propInfo ? propInfo.type : null;
+  const valueType = typeof value;
+
+  if (propType === BOOLEAN || propType === OVERLOADED_BOOLEAN && value === true) {
+    return ` ${prop}`;
+  }
+
+  if (valueType === 'string') {
+    return ` ${prop}="${escapeText(value)}"`;
+  }
+
+  if (valueType === 'number') {
+    return ` ${prop}="${String(value)}"`;
+  }
+
+  if (valueType === 'boolean') {
+    if (propType === BOOLEANISH_STRING || prop.indexOf('data-') === 0 || prop.indexOf('aria-') === 0) {
+      return ` ${prop}="${value ? 'true' : 'false'}"`;
+    }
+  }
+
+  return '';
+};
+
 function propsToString(props, options) {
   let html = '';
   for (var prop in props) {
     var value = props[prop];
 
-    if (prop === 'children') {
-      // Ignore children prop
-    } else if (prop === 'style') {
-      html = html + ` style="${styleToCSS(value, options)}"`;
-    } else if (prop === 'className') {
-      html = html + ` class="${escapeText(value)}"`;
-    } else if (prop === 'defaultValue') {
-      if (!props.value) {
-        html = html + ` value="${typeof value === 'string' ? escapeText(value) : value}"`;
-      }
-    } else if (prop === 'defaultChecked') {
+    if (prop === 'defaultValue') {
       if (!props.checked) {
-        html = html + ` checked="${value}"`;
+        prop = 'value';
+      } else {
+        continue;
       }
-    } else if (prop === 'dangerouslySetInnerHTML') {
-      // Ignore innerHTML
-    } else {
-      if (typeof value === 'string') {
-        html = html + ` ${prop}="${escapeText(value)}"`;
-      } else if (typeof value === 'number') {
-        html = html + ` ${prop}="${String(value)}"`;
-      } else if (typeof value === 'boolean') {
-        html = html + ` ${prop}`;
+    }
+
+    if (prop === 'defaultChecked') {
+      if (!props.checked) {
+        prop = 'checked';
+      } else {
+        continue;
       }
     }
+
+    html = html + createMarkupForProperty(prop, value, options);
   }
+
   return html;
 }