diff --git a/.gitignore b/.gitignore
index d103455..0ccc27a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,9 @@ upload-experiment.sh
 
 # Ignore the key used for testing purposes
 key.txt
+
+# node
+node_modules
+
+#vs code
+.vscode
diff --git a/README.md b/README.md
index 5d8c4df..9d18609 100644
--- a/README.md
+++ b/README.md
@@ -45,58 +45,66 @@ conditions, you'd need to create four lists.
 
 ### Presenting multiple words as one group
 
-By defaut, the boilerplate experiment treats every word in the stimuli as a
-group of its own containing one word. Note, in some papers, the terminology for
-a group is a segment. Sometimes it is handy to group multiple words together,
-to shorten the time it takes to complete the experiment for example. This is
-possible, but must be enabled. The file `globals.js` contains another variable:
+Previously, when the spr was presenting multiple words as one group/simultaneous, you
+needed to separate them by inserting e.g. a `/`, as of now, you have to
+specifically create groups yourself and grouping of words is always on. On
+the. There are two kinds of groups `{{A group of words that is not recorded}}`
+`{{#A group of words that is NOT recorded.}}`. Recorded means that the
+RT of this group is logged. Of course it is fine to have just one `{{word}}`
+in a {{#group}}. the curly braces and # are stripped from the rendered
+output. You should not put word letters etc outside of a group.
+
+All the words of your spr need to be enclosed in **{{**double curly braces**}}**
+so the phrase "double curly braces" is presented together. If you want the to
+be presented individually, you'll need to make three groups such as
 
-```javascript
-const GROUPING_STRING = null;
+```
+{{double}} {{curly}} {{braces}}
 ```
 
-To enable grouping you must define a useful delimiter between groups.
-A little bit further in the file there's a commented version of this:
+#### White space issues
+
+In the example with three groups above, the " " are put outside of the group
+as that might be more readable than e.g.
 
-```javascript
-const GROUPING_STRING = "/";
+```
+{{double }}{{curly }}{{braces}}
 ```
 
-So in order to enable grouping, comment the first version and uncomment
-the latter. In theory you can fill out any string instead of the `"/"`
-(useful in case you need to use / in a stimulus).
-Notice the string is turned into a regular expression in order to split
-the stimulus into parts and to remove the `/` in the case described here.
+In this example the spaces are embedded inside the groups, both methods are
+fine, but the author finds the first method better readable. If you put
+none white space characters outside of a group it will be considered a syntax error.
+
+#### Presenting **bold** and *italic* words or ***both***
+
+Like HTML you can render words in bold or italic like this:
 
-```javascript
-re = RegExp(GROUPING_STRING,'gu');
+```
+{{a word in <b>bold</b> or some words <i>in italic</i>}}
 ```
 
-So make sure if you are going to be creative, that the expression is valid.
+or even both.
 
-### Warning the grouping string is going to be removed as it shouldn't be displayed
+```
+{{<b><i>Bold and italic</i></b>}}
+```
 
-In the stimulus file you should take care that the grouping string is removed
-from the stimulus. So you should take in mind how the stimulus would appear
-after the grouping string is removed.
+However, the syntax for this is more strict than HTML, forgetting to close a bold
+or italic tag will result in an error. The bold or you'll have to close the
+innermost group first and then the outermost group. So the following are errors:
 
-#### Example
+1.
 
-```javascript
-{
-    stimulus : "This is/my fantasic stimlus./Don't you think!"
-}
-```
+        {{<b><i>Oops close i first</b></i>}}
 
-The "/" will be removed, essentially gluing "is" and "my" together, just like
-"stimulus." and "Word".
+2.
 
-#### Example improved
+        {{<b>Oops forgot to close b}}
 
-```javascript
-{
-    stimulus : "This is/ my fantasic stimlus./ Don't you think"
-}
+If you want then to be partially overlapping you should open a new group
+
+```
+{{<b>Bold <i> and italic</i></b> <i>, only italic</i>
 ```
 
 ## Output
diff --git a/build.bash b/build.bash
new file mode 100755
index 0000000..7b0fff4
--- /dev/null
+++ b/build.bash
@@ -0,0 +1,7 @@
+#!/bin/bash
+
+# "Compile" grammar.js, from grammar.ne
+npx nearleyc -o ./plugins/grammar.js ./plugins/grammar.ne -e spr_grammar
+
+# package it using esbuild
+node ./build.mjs
diff --git a/build.mjs b/build.mjs
new file mode 100644
index 0000000..572d385
--- /dev/null
+++ b/build.mjs
@@ -0,0 +1,13 @@
+import * as esbuild from 'esbuild'
+
+await esbuild.build({
+    entryPoints: [
+        './plugins/jspsych-spr-moving-window.js',
+    ],
+    bundle:true,
+    outdir: 'dist',
+    minify: false,
+    sourcemap: true,
+    format: "esm"
+})
+
diff --git a/globals.js b/globals.js
index 653e2c4..7c19756 100644
--- a/globals.js
+++ b/globals.js
@@ -42,12 +42,3 @@ const FIX_CHOICES = [' '];
 // is on screen.
 const FINISH_TEXT_DUR = 3000;
 
-// If no grouping character is selected or if it is null as in this example
-// every word is a group of its own: sentences are split on whitespace.
-// each word will be a one word group
-const GROUPING_STRING = null;
-// Or create word groups based on a splitting string
-// Create groups using a "/". Note that every occurrence
-// of a "/" will lead to presentation as a word group and the a "/" itself
-// will not be displayed in the stimulus
-//const GROUPING_STRING = "/";
diff --git a/index.html b/index.html
index 73d37b5..df44a8f 100644
--- a/index.html
+++ b/index.html
@@ -28,9 +28,8 @@
 
         <!--maybe one day this plugin will be put in the mainline jsPsych
              repository.-->
-        <script src="plugins/jspsych-spr-moving-window.js"></script>
 
-        <script src="main.js"></script>
+        <script type="module" src="main.js"></script>
         <style>
             .jspsych-survey-multi-choice-text {
                 text-align: left !important;
@@ -40,8 +39,4 @@
 
     </head>
     <body></body>
-    <script>
-        // see main.js for the main function and experiment timeline
-        window.addEventListener('load', main);
-    </script>
 </html>
diff --git a/main.js b/main.js
index 5e9eb8c..19a44c3 100644
--- a/main.js
+++ b/main.js
@@ -1,3 +1,8 @@
+import {
+    sprMovingWindow,
+    checkStimuliSyntax
+} from './dist/jspsych-spr-moving-window.js'
+
 let jsPsych = initJsPsych({
     exclusions: {
         min_width : MIN_WIDTH,
@@ -5,6 +10,10 @@ let jsPsych = initJsPsych({
     }
 });
 
+// export jsPsych globally because this is a module now...
+// or export jsPsych and import it from the other files.
+window.jsPsych = jsPsych
+
  // I liked RandomError too :-)
 class SprRandomizationError extends Error {
     constructor(message) {
@@ -38,7 +47,7 @@ let instruction_screen_practice = {
 
 let fixcross = {
     type : sprMovingWindow,
-    stimulus : '+',
+    stimulus : '{{+}}',
     choices : FIX_CHOICES,
     font_family : "Times New Roman",
     font_size : 36,
@@ -62,7 +71,6 @@ let present_text = {
     width : MIN_WIDTH,
     height : MIN_HEIGHT,
     post_trial_gap : ISI,
-    grouping_string : GROUPING_STRING,
     data : {
         id : jsPsych.timelineVariable('id'),
         item_type : jsPsych.timelineVariable('item_type'),
@@ -135,16 +143,16 @@ let end_experiment = {
 function randomizeStimuli(table) {
     let shuffled = uil.randomization.randomizeStimuli(
         table,
-        max_same_type=MAX_SUCCEEDING_ITEMS_OF_TYPE
+        MAX_SUCCEEDING_ITEMS_OF_TYPE
     );
 
     if (shuffled !== null)
         table = shuffled;
     else {
-            console.error('Unable to shuffle stimuli according constraints.');
-            let msg = "Unable to shuffle the stimuli, perhaps loosen the " +
-                      "constraints, or check the item_types on the stimuli.";
-            throw new SprRandomizationError(msg);
+        console.error('Unable to shuffle stimuli according constraints.');
+        let msg = "Unable to shuffle the stimuli, perhaps loosen the " +
+                  "constraints, or check the item_types on the stimuli.";
+        throw new SprRandomizationError(msg);
     }
 
     return table; // shuffled table if possible original otherwise
@@ -209,6 +217,8 @@ function main() {
 
     // Option 1: client side randomization:
     let stimuli = pickRandomList();
+    checkStimuliSyntax(PRACTICE_ITEMS);
+    checkStimuliSyntax(stimuli.table);
     kickOffExperiment(getTimeline(stimuli.table), stimuli.list_name);
 
     // Option 2: server side balancing:
@@ -280,3 +290,6 @@ function findList(name) {
     }
     return list;
 }
+
+// start the experiment
+window.addEventListener('load', main);
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..58d59ed
--- /dev/null
+++ b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "jspsych-spr-mw",
+  "version": "1.0.0",
+  "description": "## A self paced reading with moving window experiment using jsPsych",
+  "main": "main.js",
+  "scripts": {
+    "test": "./build.bash && node ./dist/test.js",
+    "build": "./build.bash"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "moo": "^0.5.2",
+    "nearley": "^2.20.1"
+  },
+  "devDependencies": {
+    "esbuild": "0.24.0"
+  }
+}
diff --git a/plugins/.gitignore b/plugins/.gitignore
new file mode 100644
index 0000000..54cf31d
--- /dev/null
+++ b/plugins/.gitignore
@@ -0,0 +1,6 @@
+
+# ignore grammar.js as it is generated from grammar.ne using nearley
+grammar.js
+
+# a test script
+test.js
diff --git a/plugins/grammar.ne b/plugins/grammar.ne
new file mode 100644
index 0000000..c692c26
--- /dev/null
+++ b/plugins/grammar.ne
@@ -0,0 +1,181 @@
+
+@{%
+    const parts = require("./parts.js");
+    const moo = require("moo");
+
+    const lexer = moo.compile({
+        rec_group_start : "{{#"                 ,
+        group_start     : "{{"                  ,
+        group_end       : "}}"                  ,
+        bold_start      : /<[ ]*b[ ]*>/u        ,
+        bold_end        : /<[ ]*[/]b[ ]*>/u     ,
+        italic_start    : /<[ ]*i[ ]*>/u        ,
+        italic_end      : /<[ ]*[/]i[ ]*>/u     ,
+        word            : /\p{L}+|\p{P}|\p{S}+/u ,
+        ws              : /[ \r\t]+/u           ,
+        newline         : {match : "\n", lineBreaks: true},
+    })
+%}
+
+@lexer lexer
+
+# We parse a number of groups to present to the user.
+# We allow white space between the groups. The white space is
+# now made significant. So you don't have to embed the whitespace inside
+# the groups in order to have them "rendered"/appear.
+group_list ->
+      group                 # a single group can be a group_list
+            {%
+                function (data) {
+                    let list = new parts.GroupList(data[0].text_position)
+                    list.push(data[0])
+                    return list;
+                }
+            %}
+    | WS                    # white space is part of the group list.
+                            # as this makes writing the stimuli easier.
+            {%
+                function (data) {
+                    let list = new parts.GroupList(data[0].text_position);
+                    list.push(data[0]);
+                }
+            %}
+    | group_list group      # a group list may be followed by more groups
+            {%
+                function (data) {
+                    data[0].push(data[1])
+                    return data[0];
+                }
+            %}
+    | group_list WS         # allow white space between groups
+            {%
+                function (data) {
+                    data[0].push(data[1])
+                    return data[0];
+                }
+            %}
+
+# A group starts with {{ or {{# and ends with a}} we don't allow empty groups
+# {{}} or {{#}}
+group ->
+	  %group_start sentence %group_end
+        {%
+            function (data) {
+                let group = new parts.Group(data[0], false, data[1]);
+                return group;
+            }
+        %}
+	| %rec_group_start sentence %group_end
+        {%
+            function(data) {
+                let group = new parts.Group(data[0], true, data[1]);
+                return group;
+            }
+        %}
+
+
+sentence ->
+	  Word                          {%
+                                        function(data) {
+                                            let sentence = new parts.SentenceList(
+                                                data[0].text_position,
+                                            );
+                                            sentence.push(data[0]);
+                                            return sentence;
+                                        }
+                                    %}
+	| WS                            {%
+                                        function(data) {
+                                            let sentence = new parts.SentenceList(
+                                                data[0].text_position,
+                                            );
+                                            sentence.push(data[0]);
+                                            return sentence;
+                                        }
+                                    %}
+    | special_sentence              {% id %}
+
+	| sentence Word                 {%
+                                        function(data) {
+                                            let sentence = data[0];
+                                            sentence.push(data[1]);
+                                            return sentence;
+                                        }
+                                    %}
+    | sentence WS                   {%
+                                        function(data) {
+                                            let sentence = data[0];
+                                            sentence.push(data[1]);
+                                            return sentence;
+                                        }
+                                    %}
+    | sentence special_sentence     {%
+                                        function(data) {
+                                            let sentence = data[0];
+                                            let special_sentence = data[1];
+
+                                            function append_to_sentence(part)
+                                            {
+                                                sentence.parts.push(part);
+                                            }
+
+                                            special_sentence.parts.forEach(
+                                                append_to_sentence
+                                            )
+                                            return sentence;
+                                        }
+                                    %}
+
+special_sentence ->  # sentences in bold/italics
+      bold_sentence                 {% id %} # id just returns the first element.
+    | italic_sentence               {% id %}
+
+bold_sentence -> %bold_start sentence %bold_end {%
+                                        // drop italic_start and italic_end, return
+                                        // the sentence with all word marked bold.
+                                        function(data) {
+                                            let sentence_fragment = data[1];
+                                            sentence_fragment.mark_bold();
+                                            return data[1]; // strip start and end
+                                        }
+                                    %}
+
+italic_sentence -> %italic_start sentence %italic_end {%
+                                        // drop italic_start and italic_end, return
+                                        // the sentence with all word marked italic.
+                                        function(data) {
+                                            let sentence_fragment = data[1];
+                                            sentence_fragment.mark_italic();
+                                            return data[1]; // strip start and end
+                                        }
+                                    %}
+
+Word -> %word                       {%
+                                        function(data, pos) {
+                                            let word = new parts.Word(
+                                                data[0],
+                                                data[0].toString()
+                                            );
+                                            return word;
+                                        }
+                                    %}
+
+WS ->
+      %ws                           {%
+                                        function(data, pos) {
+                                            let ws = new parts.WhiteSpace(
+                                                data[0],
+                                                data[0].toString()
+                                            );
+                                            return ws;
+                                        }
+                                    %}
+    | %newline                      {%
+                                        function(data, pos) {
+                                            let nl = new parts.WhiteSpace(
+                                                data[0],
+                                                data[0].toString()
+                                            );
+                                            return nl;
+                                        }
+                                    %}
diff --git a/plugins/jspsych-spr-moving-window.js b/plugins/jspsych-spr-moving-window.js
index 3ce0d5b..2aeaabe 100644
--- a/plugins/jspsych-spr-moving-window.js
+++ b/plugins/jspsych-spr-moving-window.js
@@ -1,4 +1,9 @@
-var sprMovingWindow = (function(jspsych) {
+
+import * as spr_grammar from "./grammar.js";
+import * as nearley from "nearley";
+import * as parts from "./parts.js"
+
+export var sprMovingWindow = (function(jspsych) {
 
     const SPR_MW_PLUGIN_NAME = 'spr-moving-window';
 
@@ -65,18 +70,6 @@ var sprMovingWindow = (function(jspsych) {
                 default :       600,
                 description :   "The height of the canvas in which the spr moving window is presented"
             },
-            grouping_string : {
-                type :          jspsych.ParameterType.STRING,
-                pretty_name :   "grouping string",
-                default :       null,
-                description :   "The string used to split the string in to parts. The parts are "  +
-                    "presented together. This allows to present multiple words as "    +
-                    "group if the argument isn't specified every single word is "      +
-                    "treated as group. You should make sure that the used argument "   +
-                    "doesn't appear at other locations than at boundaries of groups, " +
-                    "because the grouping character is removed from the string. a "    +
-                    "'/' can be used quite handy for example."
-            },
             line_height_multiplier : {
                 type :          jspsych.ParameterType.FLOAT,
                 pretty_name :   "line_height_multiplier",
@@ -91,31 +84,6 @@ var sprMovingWindow = (function(jspsych) {
     // Reused names
     const SPR_CANVAS = "SprCanvas";
 
-    // Reused regular expressions.
-    //
-    // \p{} is for a unicode property
-    // \p{L} matches a "alfabetic" character throughout languages.
-    // see https://javascript.info/regexp-unicode
-    const CAP_WORD = '(\\p{L}+)';
-
-    // Caputure as word if it is precisely a word.
-    const WORD = '^\\p{L}+$';
-    const NUMBER = '^[0-9]+$';
-    const NEWLINE = '\n';
-    const WHITE_SPACE = '\\s';
-    const CAP_WHITE_SPACE = '(\\s)';
-    const INTERPUNCTION = "\\p{P}";
-    const WORD_INTERPUNCTION= "^\\p{L}+\\p{P}$";
-
-    const RE_CAP_WORD = RegExp(CAP_WORD, 'u');
-    const RE_WORD = RegExp(WORD, 'u');
-    const RE_NUMBER = RegExp(NUMBER, 'u');
-    const RE_NEWLINE = RegExp(NEWLINE, 'u');
-    const RE_WHITE_SPACE = RegExp(WHITE_SPACE, 'u');
-    const RE_CAP_WHITE_SPACE = RegExp(CAP_WHITE_SPACE, 'u');
-    const RE_INTERPUNCTION = RegExp(INTERPUNCTION, 'u');
-    const RE_WORD_INTERPUNCTION= RegExp(WORD_INTERPUNCTION, 'u');
-
     /**
      * Creates a range between [start, end).
      *
@@ -161,28 +129,28 @@ var sprMovingWindow = (function(jspsych) {
     class TextInfo {
 
         /**
-         * @param {string} txt, the text to draw at ctx
+         * @param {parts.SentencePart} text, the text to draw at ctx
          * @param {Pos} position the position at which to draw text.
          * @param {CanvasRenderingContext2D} ctx the 2d drawing position.
          * @param {string} font_family, the family of the font
          */
         constructor(text, position, ctx, font_family, font_size) {
-            if (typeof(text) !== "string")
-                console.error("TextInfo constructor text was not a String");
-            if (!position instanceof Pos)
+            if (!(text instanceof parts.SentencePart))
+                console.error("TextInfo constructor text was not a parts.SentencePart");
+            if (!(position instanceof Pos))
                 console.error("TextInfo constructor position was not a Pos");
-            if (!ctx instanceof CanvasRenderingContext2D)
+            if (!(ctx instanceof CanvasRenderingContext2D))
                 console.error("TextInfo constructor cts was not a valid "+
                               "CanvasRenderingContext2D");
             if (typeof(font_family) !== "string")
                 console.error("TextInfo constructor font_family was not a String");
-            this.bold = false;
-            this.italic = false;
+            this.bold = text.bold;
+            this.italic = text.italic;
             this.pos = position;
             this.ctx = ctx
             this.font_family = font_family;
             this.font_size = font_size;
-            this.text = this.parseFontSpecials(text);
+            this.text = text.get_content();
             this.metrics = this.getTextMetrics();
         }
 
@@ -207,20 +175,6 @@ var sprMovingWindow = (function(jspsych) {
             return font_desc;
         }
 
-        parseFontSpecials(text) {
-            let m = text.match(/^<b>(.+?)<\/b>$/)
-            if (m) { // capture bold string
-                this.bold = true
-                return this.parseFontSpecials(m[1]);
-            }
-            m = text.match(/^<i>(.+?)<\/i>$/)
-            if (m) { // capture italic string
-                this.italic = true
-                return this.parseFontSpecials(m[1]);
-            }
-            return text;
-        }
-
         drawUnderline() {
             this.ctx.beginPath();
             this.ctx.moveTo(this.pos.x, this.pos.y);
@@ -228,22 +182,6 @@ var sprMovingWindow = (function(jspsych) {
             this.ctx.stroke();
         }
 
-        isWhiteSpace() {
-            return this.text.match(/^\s+$/u) !== null;
-        }
-
-        isWord() {
-            return this.text.match(RE_WORD) !== null;
-        }
-
-        isNumber() {
-            return this.text.match(RE_NUMBER) !== null;
-        }
-
-        isWordPlusInterpunction() {
-            return this.text.match(RE_WORD_INTERPUNCTION) !== null;
-        }
-
         width() {
             return this.metrics.width;
         }
@@ -269,7 +207,7 @@ var sprMovingWindow = (function(jspsych) {
 
     // private variables
 
-    let group_index = 0;        // the nth_word that should be presented.
+    let group_index = 0;        // the nth group of words that should be presented.
     let words = [];             // array of TextInfo.
     let old_html = "";          // the current display html, in order to
                                 // restore it when finished.
@@ -308,66 +246,47 @@ var sprMovingWindow = (function(jspsych) {
         createCanvas(display_element, trial_pars);
         ctx.font = font;
         let stimulus = trial_pars.stimulus;
-        if (trial_pars.grouping_string) {
-            grouping_re = RegExp(trial_pars.grouping_string, 'ug');
-            groups = createGroups(stimulus, grouping_re);
-            stimulus = stimulus.replace(grouping_re, "");
-        }
-        else {
-            groups = createGroups(stimulus, RE_WHITE_SPACE);
-        }
-        stimulus = stimulus.replace(RegExp("#", 'gu'), "");
-        let lines = stimulus.split(RE_NEWLINE);
-        gatherWordInfo(lines, trial_pars);
+        let parsed_stimulus = parseSpr(stimulus);
+        groups = createGroups(parsed_stimulus);
+        gatherWordInfo(parsed_stimulus, trial_pars);
     }
 
     /**
-     * Create groups of words that are presented together
-     * @param {String} stim the stimulus to be presented
-     * @param {RegExp} split_re
+     * @param {<Array>.<parts.GroupList>} parsed_stim
+     *
+     * @returns {GroupInfo[]}
      */
-    function createGroups(stim, split_re) {
+    function createGroups(parsed_stim) {
+        let groups = parsed_stim.groups;
 
-        /**
-         * Splits text into tokens and discards empty strings. The
-         * tokens are defined by the regular expression used to
-         * split the string.
-         *
-         * @param {String} text The text to splint into tokens
-         * @param {RegExp} re   The regular expression used to split the string
-         *
-         * @return An array of strings as tokens.
-         */
-        function splitIntoTokens(text, re) {
-            return text.split(re).filter (
-                function(word) {
-                    return word != "";
-                }
-            );
+        let context = {
+            groups : [],
+            index : 0
         };
 
-        let nwordstotal = splitIntoTokens(stim, RE_WHITE_SPACE).length;
-        let word_indices = range(0, nwordstotal);
-        let groups = splitIntoTokens(stim, split_re);
-        let group_indices = [];
-
-        for (let nthgroup = 0; nthgroup < groups.length; nthgroup++) {
-            let record = groups[nthgroup].trim()[0] == "#";
-            let nwordsgroup = splitIntoTokens(
-                groups[nthgroup],
-                RE_WHITE_SPACE
-            ).length;
-            let indices = word_indices.slice(0, nwordsgroup);
-            word_indices = word_indices.slice(nwordsgroup);
-            group_indices.push(new GroupInfo(indices, record));
-        }
-        console.assert(
-            word_indices.length == 0,
-            "Oops it was expected that word_indices was empty by now."
+        groups.forEach(
+            function (group) { // A group might be WhiteSpace here
+                if (group.get_type() == "WhiteSpace")
+                    return;
+                let group_indices = [];
+                let record = group.record;
+                let sentence_parts = group.sentence_parts.parts;
+                sentence_parts.forEach(
+                    function(part) {
+                        if (part.get_type() == "Word") {
+                            group_indices.push(context.index);
+                            context.index++;
+                        }
+                    }
+                );
+
+                context.groups.push(new GroupInfo(group_indices, record));
+            }
         );
-        return group_indices;
+        return context.groups
     }
 
+
     /**
      * Setup the canvas for use with this plugin
      *
@@ -387,7 +306,7 @@ var sprMovingWindow = (function(jspsych) {
      * Processes the lines, it "measures" where each word should be.
      * the output is stored in the global plugin variable words.
      */
-    function gatherWordInfo(lines, trial_pars) {
+    function gatherWordInfo(parsed_stimulus, trial_pars) {
 
         let delta_y = determineLineHeight(
             trial_pars.font_family,
@@ -399,26 +318,82 @@ var sprMovingWindow = (function(jspsych) {
         const BASE_Y = delta_y; // The height on which lines begin.
         const BASE_X = determineLineHeight(trial_pars.font_family, trial_pars.font_size);
 
-        for (let line = 0; line < lines.length; line++) {
-            liney = BASE_Y + line * delta_y;
-            fragments = lines[line].split(RE_CAP_WHITE_SPACE);
-            fragments = fragments.filter( word => {return word != "";});
-            let runningx = BASE_X;
-            for (let fragment = 0; fragment < fragments.length; fragment++) {
-                let current_fragment = fragments[fragment];
-                let pos = new Pos(runningx, liney);
-                let current_word = new TextInfo(
-                    current_fragment,
-                    pos,
+        let context = {
+            pos : new Pos(BASE_X, BASE_Y),
+        };
+
+        function advanceWhiteSpace(context, ws) {
+            if (ws.get_content() == "\n") {
+                context.pos.x = BASE_X;
+                context.pos.y = context.pos.y + delta_y;
+            }
+            else {
+                let info = new TextInfo(
+                    ws,
+                    new Pos(context.pos.x, context.pos.y),
                     ctx,
                     trial_pars.font_family,
-                    trial_pars.font_size
+                    trial_pars.font_size,
                 );
-                if (!current_word.isWhiteSpace())
-                    words.push(current_word);
-                runningx += current_word.width();
+                context.pos.x += info.width();
             }
         }
+
+        function advanceWord(context, word) {
+            let info = new TextInfo(
+                word,
+                new Pos(context.pos.x, context.pos.y),
+                ctx,
+                trial_pars.font_family,
+                trial_pars.font_size
+            );
+            words.push(info)
+            context.pos.x += info.width();
+        }
+
+        let groups = parsed_stimulus.groups;
+        groups.forEach( // A group can be a whitespace
+            group => {
+                let type = group.get_type();
+                if (type == "WhiteSpace") {
+                    advanceWhiteSpace(context, group);
+                }
+                else if (type == "Group") {
+                    let parts = group.sentence_parts.parts;
+                    parts.forEach(
+                        part => {
+                            if (part.get_type() == "WhiteSpace") {
+                                advanceWhiteSpace(context, part);
+                            }
+                            else if (part.get_type() == "Word") {
+                                advanceWord(context, part);
+                            }
+                        }
+                    );
+                }
+            }
+        );
+
+//        for (let line = 0; line < lines.length; line++) {
+//            let liney = BASE_Y + line * delta_y;
+//            let fragments = lines[line].split(RE_CAP_WHITE_SPACE);
+//            fragments = fragments.filter( word => {return word != "";});
+//            let runningx = BASE_X;
+//            for (let fragment = 0; fragment < fragments.length; fragment++) {
+//                let current_fragment = fragments[fragment];
+//                let pos = new Pos(runningx, liney);
+//                let current_word = new TextInfo(
+//                    current_fragment,
+//                    pos,
+//                    ctx,
+//                    trial_pars.font_family,
+//                    trial_pars.font_size
+//                );
+//                if (!current_word.isWhiteSpace())
+//                    words.push(current_word);
+//                runningx += current_word.width();
+//            }
+//        }
     }
 
     /**
@@ -581,3 +556,44 @@ var sprMovingWindow = (function(jspsych) {
     return SprMovingWindowPlugin;
 
 })(jsPsychModule);
+
+/**
+ * Parses a stimulus and returns a GroupList that contains the
+ * groups of words that should be presented simultaneously in the spr.
+ *
+ */
+function parseSpr(stimulus) {
+    const parser = new nearley.Parser(nearley.Grammar.fromCompiled(spr_grammar))
+    parser.feed(stimulus)
+    let tree = parser.results
+    if (tree.length > 1) {
+        console.error("The grammar is ambigious for this stimulus");
+    }
+    else if (tree.length == 0) {
+        console.log("stimulus: \"" + stimulus +
+            "\"seems incomplete, parsing didn't finish");
+    }
+    return tree[0];
+}
+
+/**
+ * 
+ * @param {Array.<object>} trials is a list of trials
+ * @param {Array.<object>.stimulus} stimulus a stimulus for this trial
+ * 
+ */
+export function checkStimuliSyntax(list)
+{
+    list.forEach(trial => {
+        const parser = new nearley.Parser(nearley.Grammar.fromCompiled(spr_grammar))
+        parser.feed(trial.stimulus)
+        let tree = parser.results
+        if (tree.length > 1) {
+            console.error("Oops, grammar is ambiguous.");
+        }
+        else if (tree.length == 0) {
+            console.error("Oops parsing didn't complete: " + trial +
+                "did you feed an entire string?\n");
+        }
+    });
+}
diff --git a/plugins/parts.js b/plugins/parts.js
new file mode 100644
index 0000000..4f033a5
--- /dev/null
+++ b/plugins/parts.js
@@ -0,0 +1,222 @@
+
+/**
+ * Class representing the position of a portion of the grammar
+ */
+export class PositionInfo {
+
+    /**
+     * 
+     * @param {object} tokenised Where the token is found by the lexer
+     * @param {number} tokenised.col
+     * @param {number} tokenised.line
+     * @param {number} tokenised.lineBreaks
+     * @param {number} tokenised.offset
+     */
+    constructor(tokenised) {
+        try {
+            if (typeof tokenised.col !== "number") {
+                throw new TypeError("tokenised.column should be a number");
+            }
+            if (typeof tokenised.line !== "number") {
+                throw new TypeError("tokenised.line should be a number");
+            }
+            if (typeof tokenised.lineBreaks !== "number") {
+                throw new TypeError("tokenised.lineBreaks should be a number");
+            }
+            if (typeof tokenised.offset !== "number") {
+                throw new TypeError("tokenised.offset should be a number");
+            }
+        } catch (e) {
+            let breakpoint = e;
+        }
+
+        this.col = tokenised.col;
+        this.line = tokenised.line;
+        this.lineBreaks = tokenised.lineBreaks;
+        this.offset = tokenised.offset;
+    }
+}
+
+/**
+ * A grammar part is one symbol inside of the parsed text.
+ * It can be a terminal or non terminal part of the grammar.
+ */
+export class GrammarPart {
+
+    /**
+     * @constructor
+     * @param {string} type_name What constinuent of the grammar this object is
+     * @param {PositionInfo} text_position Where is the constinuent in the parsed string
+     */
+    constructor(type_name, text_position) {
+        if (typeof type_name !== "string") {
+            throw new TypeError("type_name should be a string");
+        }
+        if (typeof text_position !== "object") {
+            throw new TypeError("type_name should be an object");
+        }
+        this.grammar_type_name = type_name;
+        this.text_position = new PositionInfo(text_position);
+    }
+
+    /**
+     * 
+     * @returns {string} What kind of symbol of the grammar this is
+     */
+    get_type () {
+        return this.grammar_type_name;
+    }
+
+    /**
+     * 
+     * @returns {PositionInfo} Information about where this grammar symol
+     *                         is inside the text.
+     */
+    get_position() {
+        return this.text_position;
+    }
+}
+
+export class SentenceList extends GrammarPart {
+
+    /**
+     * @constructor
+     * @param {PositionInfo} position 
+     */
+    constructor(position) {
+        super("SentenceList", position)
+        this.parts = [];
+    }
+
+    /**
+     * 
+     * @param {SentencePart} part 
+     */
+    push(part) {
+        if (part instanceof SentencePart)
+            this.parts.push(part);
+        else
+            throw new TypeError("Part was expected to be a SentencePart")
+    }
+
+    mark_bold() {
+        this.parts.forEach(
+            function(value) {
+                value.mark_bold();
+            }
+        );
+    }
+    
+    mark_italic() {
+        this.parts.forEach(
+            function(value) {
+                value.mark_italic();
+            }
+        );
+    }
+}
+
+export class SentencePart extends GrammarPart {
+
+    bold = false;
+    italic = false;
+
+    /**
+     * 
+     * @param {string} type 
+     * @param {PositionInfo} position 
+     * @param {string} content 
+     */
+    constructor(type, position, content) {
+        super(type, position);
+        if (typeof(content) !== "string")
+            throw TypeError("text is not a string.");
+        this.content = content;
+        this.bold = false;
+        this.italic = false
+    }
+
+    get_content() {
+        return this.content;
+    }
+    
+    mark_bold() {this.bold = true;}
+    mark_italic() {this.italic = true;}
+}
+
+
+// Words are different from WhiteSpace in terms of
+// how they are used by the self paced reading.
+// That explains the code duplication.
+export class Word extends SentencePart {
+
+    /**
+     * @param {PositionInfo} position 
+     * @param {string} text 
+     */
+    constructor (position, text) {
+        super("Word", position, text);
+    }
+
+}
+
+export class WhiteSpace extends SentencePart {
+
+    /**
+     * @constructor
+     * @param {PositionInfo} position 
+     * @param {string} text 
+     */
+    constructor (position, text) {
+        super("WhiteSpace", position, text);
+    }
+};
+
+export class NewLine extends SentencePart {
+    /**
+     * @constructor
+     * @param {PositionInfo} position
+     * @param {string} text
+     */
+    constructor (position, text) {
+        super("NewLine", position, text);
+    }
+};
+
+
+export class Group extends GrammarPart {
+
+    /**
+     * @param {PositionInfo} position 
+     * @param {boolean} record 
+     * @param {SentenceList} sentence_parts 
+     */
+    constructor(position, record, sentence_parts) {
+        super("Group", position);
+        if (typeof record !== "boolean")
+            throw new TypeError("Record was expected to be boolean")
+        this.record = record
+        this.sentence_parts = sentence_parts;
+    }
+}
+
+export class GroupList extends GrammarPart {
+    /**
+     * 
+     * @param {PositionInfo} position 
+     */
+    constructor (position) {
+        super("GroupList", position);
+        this.groups = []
+    }
+
+    /**
+     * Push a single group to the list of groups
+     * 
+     * @param {Group} group 
+     */
+    push(group) {
+        this.groups.push(group)
+    }
+};
+
diff --git a/stimuli.js b/stimuli.js
index f4114fc..6194c29 100644
--- a/stimuli.js
+++ b/stimuli.js
@@ -23,16 +23,24 @@ const PRACTICE_ITEMS = [
     {
         id : 1,
         item_type : PRAC,
-
-        stimulus :                                                // Single "/" delimit boundaries between words presented
-                                                                  // together. Boundaries must be activated by setting "/" as
-                                                                  // GROUPING_STRING in globals.js. The default is null
-                                                                  // which means every word is a group of in its own.
-                                                                  // If the grouping string isn't set or null,
-                                                                  // the "/" will be displayed instead of used for grouping.
-            "The teacher took the car instead of the express"   + // The '+' adds strings together or concatenates them.
-            "train \ndue to the previously announced public\n"  + // A "\n" makes the string jump to the next line.
-            "transport strike.\n",                                // use a comma here.
+        //Every word, space "enter" between a pair of {{ and }} is presented
+        //together as one group of words. If a group starts with a {{#, the reaction
+        //will be recorded. Don't put any characters outside of the {{}}} characters
+        //as the grammar for shaping the self paced reading doesn't like that.
+        //
+        //You can go to the next line in this file by adding (+) to strings
+        //together.
+        //
+        //You are allowed to present words in html style bold and italic tags
+        //You can use bold and italic together, but an entire
+        //<b>this is <i>correct</i></b>,
+        //<b><i>but<b/> this isn't</i> as the entire italic phrase must be captured
+        //inside the bold tag. Open a new tag when the overlap partially.
+        //<b><i>but</i></b><i>this is</i> valid.
+        stimulus :
+            "{{The <b>teacher took <i>the car</i></b><i> instead</i> of}} {{the}} {{express}} {{train}}\n"    + // string1
+            "{{due to the previously announced public\n"                                                      + // string2
+            "transport strike.}}", // use a comma here on the final line of your stimulus.             // final string
         question : "",                                            // An empty string means no question for this trial.
         qanswer : undefined                                       // We can't define a answer if there ain't no question.
     },
@@ -40,9 +48,9 @@ const PRACTICE_ITEMS = [
         id : 2,
         item_type : PRAC,
         stimulus :
-            "The researcher presented his most recent work\n"   +
-            "to the commission and obtained very positive\n"    +
-            "comments regarding the experimental design.\n"     ,
+            "{{The researcher presented his most recent work}}\n"   +
+            "{{to}} {{the}} {{commission}} {{and obtained very positive\n"    + // Line endings inside a group are fine
+            "comments regarding the experimental design.}}"     ,
         question : "The researcher presented old work.",
         qanswer : FALSE_BUTTON_TEXT                               // Use TRUE_BUTTON_TEXT if the answer is true,
                                                                   // FALSE_BUTTON_TEXT otherwise
@@ -50,17 +58,19 @@ const PRACTICE_ITEMS = [
 ];
 
 /*
- * In this list there is a stimulus, if a word or group of words starts with a
- * '#' it's reaction time will be recorded. So don't put any '#" elsewhere...
+ * In this list there is a stimulus, if a group of words starts with a
+ * '{{#' it's reaction time will be recorded. In the list for group 1
+ * the space is moved outside of a group. I think this make it easier to
+ * read the stimulus.
  */
 const LIST_GROUP1 = [
     {
         id : 1,
         item_type : PASSIVE,
         stimulus :
-            "The guitarist was rejected by #the #attractive #and\n"     +
-            "#talented #singer #in #the #concert #hall #next #to\n"     +
-            "#the #Irish #pub.\n"                                       ,
+            "{{The guitarist was rejected by}} {{#the}} {{#attractive}} {{#and}}\n"                 +
+            "{{#talented}} {{#singer}} {{#in}} {{#the}} {{#concert}} {{#hall}} {{#next}} {{#to}}\n" +
+            "{{#the}} {{#Irish}} {{#pub.}}\n",
         question : "The singer was attractive.",
         qanswer : TRUE_BUTTON_TEXT
     },
@@ -68,9 +78,9 @@ const LIST_GROUP1 = [
         id : 2,
         item_type : ACTIVE,
         stimulus :
-            "The sculptor mugged #the #strange #and\n"                  +
-            "#temperamental #photographer #in #the #art #gallery\n"     +
-            "#next #to #the #book #shop.\n"                             ,
+            "{{The sculptor mugged}} {{#the}} {{#strange}} {{#and}}\n"                      +
+            "{{#temperamental}} {{#photographer}} {{#in}} {{#the}} {{#art}} {{#gallery}}\n" +
+            "{{#next}} {{#to}} {{#the}} {{#book}} {{#shop.}}"                               ,
         question : "",
         qanswer : undefined
     },
@@ -78,9 +88,9 @@ const LIST_GROUP1 = [
         id : 3,
         item_type : FILLER,
         stimulus :
-            "The beautiful princess married her young and\n"            +
-            "handsome chauffeur and shocked the royal\n"                +
-            "family and the press.\n"                                   ,
+            "{{The beautiful princess married her young and}}\n"                +
+            "{{handsome}} {{chauffeur}} {{and}} {{shocked}} {{the royal\n"      +
+            "family and the press.}}",
         question : "The chauffeur was an old man.",
         qanswer : FALSE_BUTTON_TEXT
     },
@@ -88,26 +98,28 @@ const LIST_GROUP1 = [
         id : 4,
         item_type : FILLER,
         stimulus :
-            "The little girl did not play with her brother\n"           +
-            "in the colourful playground next to their weedy\n"         +
-            "garden.\n"                                                 ,
+            "{{The little girl did not play with her brother}}\n"                               +
+            "{{in}} {{the}} {{colourful}} {{playground}} {{next}} {{to}} {{their}} {{weedy}}\n" +
+            "{{garden.}}",
         question : "",
         qanswer : undefined
     }
 ];
 
 /*
- * In this list there is a stimulus, if a word starts with a '#' its
- * reaction time will be recorded. So don't put any '#" elsewhere...
+ * This list puts all the white space inside of a group, this is also possible
+ * but I find it less readable. You are allowed to mix it, where necessary. If
+ * you want a group of words that spans multiple lines, it's fine to put a \n
+ * inside the group.
  */
 const LIST_GROUP2 = [
     {
         id : 1,
         item_type : ACTIVE,
         stimulus :
-            "The guitarist rejected #the #attractive #and\n"            +
-            "#talented #singer #in #the #concert #hall #next #to\n"     +
-            "#the #Irish #pub.\n"                                       ,
+            "{{The guitarist rejected }}{{#the }}{{#attractive }}{{#and\n}}"                        +
+            "{{#talented }}{{#singer }}{{#in }}{{#the }}{{#concert }}{{#hall }}{{#next }}{{#to\n}}" +
+            "{{#the }}{{#Irish }}{{#pub.\n}}",
         question : "The singer was attractive.",
         qanswer : TRUE_BUTTON_TEXT
     },
@@ -115,9 +127,9 @@ const LIST_GROUP2 = [
         id : 2,
         item_type : PASSIVE,
         stimulus :
-            "The sculptor was mugged by #the #strange #and\n"           +
-            "#temperamental #photographer #in #the #art #gallery\n"     +
-            "#next #to #the #book #shop.\n"                             ,
+            "{{The sculptor was mugged by }}{{#the }}{{#strange }}{{#and\n}}"               +
+            "{{#temperamental }}{{#photographer }}{{#in }}{{#the }}{{#art }}{{#gallery\n}}" +
+            "{{#next }}{{#to }}{{#the }}{{#book }}{{#shop.\n}}",
         question : "",
         qanswer : undefined
     },
@@ -125,9 +137,9 @@ const LIST_GROUP2 = [
         id : 3,
         item_type : FILLER,
         stimulus :
-            "The beautiful princess married her young and\n"            +
-            "handsome chauffeur and shocked the royal\n"                +
-            "family and the press.\n"                                   ,
+            "{{The beautiful princess married her young and\n}}"                    +
+            "{{handsome }}{{chauffeur }}{{and }}{{shocked }}{{the }}{{royal\n}}"    +
+            "{{family and the press.\n}}",
         question : "The chauffeur was an old man.",
         qanswer : FALSE_BUTTON_TEXT
     },
@@ -135,9 +147,9 @@ const LIST_GROUP2 = [
         id : 4,
         item_type : FILLER,
         stimulus :
-            "The little girl did not play with her brother\n"           +
-            "in the colourful playground next to their weedy\n"         +
-            "garden.\n"                                                 ,
+            "{{The little girl did not play with her brother\n}}"           +
+            "{{in }}{{the }}{{colourful }}{{playground }}{{next }}{{to their weedy\n"         +
+            "garden.\n}}"                                                 ,
         question : "",
         qanswer : undefined
     }
@@ -158,4 +170,3 @@ const TEST_ITEMS = [
     // {list_name: LISTS[1], table: LIST_GROUP3}
 ];
 
-