Speculative JSX API for form layouts using http://kumailht.com/gridforms/

GridLayout.xml

<Form form={ProductForm} ref="productForm">
  <GridLayout>
    <Row span="4">
      <Field name="productName" span="3"/>
      <Field name="tags"/>
    </Row>
    <Row>
      <Field name="vendor"/>
      <Field name="productType"/>
    </Row>
    <Row>
      <Field name="productDescription"/>
    </Row>
    <Row>
      <Field name="sku"/>
      <Field name="initialStock"/>
      <Field name="costPrice"/>
      <Field name="wholesalePrice"/>
      <Field name="retailPrice"/>
    </Row>
  </GridLayout>
</Form>

NOTES.md

Implied in the example:

var Form = forms.RenderForm

RenderForm already handles creatinng a form instance from its form prop.

It currently doesn't expect or do anything with props.children.

Could check for props.children and use current basic rendering if empty. Otherwise, defer rendering by returning props.children from render().

Introduction to Contexts in React.js

The form instance could be set on the context by ReactElement via getChildContext()/childContextTypes.

Any child component of RenderForm could pick this up via contextTypes.

The form instance will already have been set up to re-render RenderForm on any change, so the custom renderer doesn't need to worry about that.