JSFiddle - React, Tailwind, and code Playground

by Kathleen Tuite

HTML

<script src="https://cdn.rawgit.com/galaxykate/tracery/master/js/tracery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.js"></script>

<div class="col-lg-12">
    
    <h3>Stories: Perceived As You Like<br />
        <small>A story grammar ripped from Kate Compton's <a href="http://www.crystalcodepalace.com/traceryTut.html" target="_blank">Tracery Tutorial</a></small>
    </h3>
    
<!-- Put your tracery grammar inside this #source textarea!-->    
<textarea id="source">
{
    "name": ["Cheri","Fox","Morgana"],   
    
    "story": ["This is the story of a great person, known as #hero.capitalize#, a #occupation#.  As it begins, #battle#. The End."],
    
    "setOccupation": [
        "[occupation:baker][conflict: visited with another bakery, under a whole competition with bakers from all over the world, in desperate need of pastries][tool:baking pan, wooden spoon, egg beater, spatula, cookie sheet][action:be the best baker like no one ever was, make the best damn cake anyone has tasted][encounter: with your cake in hand, with the pastries ready for the consumers, as the sun shines down on a good day][counter: things start taking too long and the pastries start losing their freshness, your buyers aren’t coming as often as they would before, the hour draws late and customers aren’t coming as often][battle: #hero.capitalize#’s pastries start selling to the market, the pastries catches the attention of the consumers, people come to #hero.capitalize# for some of #heroTheir# products][effort: #friend.capitalize# brings back the customers with some cupcakes, #friend.capitalize# saves the day with top notch pound cake, #friend.capitalize# pulls out some fresh bread that brings in the crowds]"],

    
    
    "origin": ["#[hero:#name#][#setOccupation#]story#"]
}
</textarea>
    
    <br />
    <h4>
        <div class="btn btn-default" id="generate">
            Generate Expansion 
            <span class="glyphicon...

CSS

@import url("https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.css");

.CodeMirror {
    border: 1px solid #888;
    height: auto;
}

JavaScript

var editor = CodeMirror.fromTextArea($('#source')[0], {
    lineNumbers: true,
    mode: {
        name: "javascript",
        json: true
    }
});

// tracery in action"
function generate() {
    var source_text = editor.getValue();
    var grammar = tracery.createGrammar(JSON.parse(source_text));
    var example = grammar.flatten('#origin#');
    $('#example').text(example);
}

// when text changes, generate expansion
editor.on('change', generate);

// when button clicked, generate expansion
$("#generate").on('click', generate);

// Tracery takes some time to load. Wait a second, then try to generate
setTimeout(generate, 1000);