react-templates/playground/playground.rt

<!DOCTYPE rt CodeEditor="./aceEditor">
<div>
    <div class="code-area">
        <h2>Template:</h2>
        <CodeEditor class="large-text-area" style="border: {this.validHTML? '1px solid black':'2px solid red'};"

            value="{this.state.templateHTML}"
            mode="html"
            onChange="(evt) => this.setState({'templateHTML':evt.target.value})"
        />
        <br/>
        <h2>Class:</h2>
        <CodeEditor class="large-text-area" style="border: {this.validProps? '1px solid black':'2px solid red'};"
                value="{this.state.templateProps}"
                mode="javascript"
                onChange="(evt) => this.setState({'templateProps':evt.target.value})"
         />
    </div>
    <div key="result-area" class="result-area">
        <h2>Generated code:</h2>
        <CodeEditor class="large-text-area" style="border:1px solid black;"
                    value="{this.templateSource}"
                    mode="javascript"
                    readOnly="{true}"
                />
        <br/>
        <h2>Preview:</h2>
        <div class="sample-view">
            <this.sample key="sample">
            </this.sample>
        </div>

    </div>

</div>