react-kup is a simple, nonintrusive alternative to JSX for coffeescript


react-kup is a simple, nonintrusive alternative to JSX for coffeescript

the newest version 0.5 introduces breaking changes !
see the changelog

  • use all coffeescript features naturally when building a react component's virtual-DOM in render
  • tiny single file with just under 100 lines of simple, readable, maintainable code in a single file
  • huge test suite passing with code coverage
  • continously tested in Node.js (0.12, 4.0), io.js (2, 3) and all relevant browsers:
  • supports CommonJS, AMD and browser globals
  • used in production
  • npm package: npm install react-kup
  • bower package: bower install react-kup
  • no additional build step required
  • no react mixin
  • same concept as kup (kup is an html builder for nodejs) but builds up nested react elements instead of html strings.
  • supports all tags supported by react
npm install react-kup
bower install react-kup
> var reactKup = require('react-kup');

lib/react-kup.js supports AMD.
when used in the browser and AMD is not available it sets the global variable reactKup.

TodoList = React.createClass
  render: ->
    that = this
    createItem = (itemText) ->
      reactKup (k) -> itemText
    reactKup (k) ->
      k.ul createItem
TodoApp = React.createClass
  getInitialState: ->
    items: ['Buy Milk''Buy Sugar']
    text: 'Add #3'
  onChange: (e) ->
  handleSubmit: (e) ->
    nextItems = this.state.items.concat([this.state.text])
    nextText = ''
    this.setState({items: nextItemstext: nextText})
  render: ->
    that = this
    reactKup (k) ->
      k.div ->
        k.h3 'TODO' TodoList,
          items: that.state.items
        k.form {
          onSubmit: that.handleSubmit
            onChange: that.onChange
            value: that.state.text
          k.button "Add ##{that.state.items.length + 1}"

look at the tests for additional examples


bugfixes, issues and discussion are always welcome.
kindly ask before implementing new features.

i will happily merge pull requests that fix bugs with reasonable code.

i will only merge pull requests that modify/add functionality if the changes align with my goals for this package, are well written, documented and tested.

communicate !
write an issue to start a discussion before writing code that may or may not get merged.

This project adheres to the Contributor Covenant 1.2. By participating, you are expected to uphold this code. Please report unacceptable behavior to

license: MIT