Given this snippet, how can I insert a new line at the specified position?
<div>
<textarea>{{props value.something}}{{:key}}: {{:prop}} {{/props}}</textarea>
----------------------------------------------------------^
</div>
<br> and \n are printed as text inside textarea
Right now, I'm cheating like this
<div>
<textarea>{{props value.something}}{{:key}}: {{:prop}}
{{/props}}</textarea>
</div>
This also works, but I get two new lines per loop and big indentation per line
<div>
<textarea>
{{props value.something}}
{{:key}}: {{:prop}}
{{/props}}
</textarea>
</div>
I would like to maintain code readability like the first or last example
Your "cheating" method is correct of course, and is not really cheating. It follows the rules of outputting exactly what you want in the template. (You are inserting the newline exactly where you want it). See discussion here.
But yes it may make the template less easy to read, so you can alternatively insert CR and/or LF characters, using HTML character entities, which JsRender supports (see discussion here):
<div>
<textarea>{{props value.something}}{{:key}}: {{:prop}} {{/props}}/textarea>
</div>