react-templates/playground/playground-fiddle.rt

<rt-require dependency="./CodeMirrorEditor" as="CodeEditor"/>
<!--suppress ALL -->
<div class="playground">
    <div class="fiddle-row">
        <div class="code-area">
            <CodeEditor ref="editorRT" id="editor-rt" 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})" />
        </div>
        <div class="code-area">
            <CodeEditor ref="editorCode" id="editor-code" 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>
    <div class="fiddle-row">
        <div class="code-area">
            <CodeEditor id="editor-generated" class="large-text-area" style="border:1px solid black;"
                        value="{this.templateSource}"
                        mode="javascript"
                        readOnly="{true}" />
        </div>
        <div id="result-container" class="result-area">
            <div id="result-area" key="result-area" class="well">
                <h2>Preview:</h2>
                <form class="sample-view" onSubmit="(e) => e.preventDefault();">
                    <this.sample key="sample">
                    </this.sample>
                </form>
            </div>
        </div>
    </div>
    <!--<br style="clear:both">-->
</div>