diff --git a/php/php_storybook/resources/helpers.php b/php/php_storybook/resources/helpers.php
index e6c30e905..f6e2ed3a0 100644
--- a/php/php_storybook/resources/helpers.php
+++ b/php/php_storybook/resources/helpers.php
@@ -4,7 +4,7 @@
    */
   class storyHelpers {
     // Used to prepend a string in a file.
-    function prepend($string, $orig_filename) {
+    function prependToStory($string, $orig_filename) {
       $context = stream_context_create();
       $orig_file = fopen($orig_filename, 'r', 1, $context);
 
@@ -88,4 +88,64 @@ function baseComponent($variant) {
 
       return $base_component;
     }
+    // Creates a story.js and links the README file in the given folder.
+    function createStoryFiles(
+      $folder,
+      $base_component,
+      $adapted_variant,
+      $variant,
+      $deprecated_component,
+      $component_group,
+      $packages_folder
+    ) {
+      // Not sure why we needed this, but it's the case.
+      if (!is_dir($folder . DIRECTORY_SEPARATOR . 'story')) {
+        mkdir($folder . DIRECTORY_SEPARATOR . 'story');
+      }
+      // Prepare a folder for the js rendered files.
+      if (!is_dir($folder . DIRECTORY_SEPARATOR . 'js')) {
+        mkdir($folder . DIRECTORY_SEPARATOR . 'js');
+      }
+      // Get the story template.
+      $story_template = file_get_contents(__DIR__ . '/../resources/story-template.txt');
+
+      // Replace the content with our variables.
+      $story_content = str_replace(
+        ['#component#', '#componentVariant#', '#phpFileName#', '#deprecated#', '#componentGroup#'],
+        [ucfirst($base_component), $adapted_variant, $variant, $deprecated_component, $component_group]
+        , $story_template
+      );
+      // Here we createthe story file.
+      file_put_contents(
+        $folder . DIRECTORY_SEPARATOR . 'story' . DIRECTORY_SEPARATOR . $base_component . '.story.js',
+        $story_content, FILE_APPEND | LOCK_EX
+      );
+      // Symlink the docs.
+      $link = $folder . DIRECTORY_SEPARATOR . 'README.md';
+      $target = $packages_folder . DIRECTORY_SEPARATOR . 'ec-component-' . $base_component . DIRECTORY_SEPARATOR . 'README.md';
+      if (!file_exists($link) && file_exists($target)) {
+        symlink($target, $link);
+      }
+    }
+    // Code to import a variant for the story file.
+    function setImportCode($adapted_variant, $variant, $result_extension) {
+      $import = "import " . $adapted_variant . " from '../" . $variant . $result_extension . "';\n";
+      $import .= "import " . $adapted_variant . "Js from '../js/" . $variant . ".js.html';\n";
+      return $import;
+    }
+    // Code to export a story.
+    function setExportCode($variant_name, $adapted_variant) {
+      return "export const ". $variant_name . " = () => " . $adapted_variant .";\n\n";
+    }
+    // Code to define the story for a given export.
+    function setStoryCode($variant_name, $adapted_variant) {
+      return $variant_name . ".story = { parameters: { notes: { markdown: docs }, diff: { jsmarkup: " . $adapted_variant . "Js }}};\n\n";
+    }
+    // Update the story file.
+    function updateStoryFile($folder, $base_component, $data_story) {
+      file_put_contents(
+        $folder . DIRECTORY_SEPARATOR . 'story' . DIRECTORY_SEPARATOR . $base_component . '.story.js',
+        $data_story, FILE_APPEND | LOCK_EX
+      );
+    }
   }
diff --git a/php/php_storybook/resources/story-template.txt b/php/php_storybook/resources/story-template.txt
index 7c661021c..5885940b6 100644
--- a/php/php_storybook/resources/story-template.txt
+++ b/php/php_storybook/resources/story-template.txt
@@ -1,25 +1,11 @@
-import { storiesOf } from '@storybook/html';
 import { withNotes } from '@ecl-twig/storybook-addon-notes';
 import withCode from '@ecl-twig/storybook-addon-code';
 import { withDiff } from '@ecl-twig/storybook-addon-diff';
 import { withJsCode } from '@ecl-twig/storybook-addon-jscode';
-import jsCode from '../js/#phpFileName#.js.html';
-
 import docs from '../README.md';
-import #componentVariant# from '../#phpFileName#.php.html';
 
-storiesOf('Components/#deprecated##componentGroup##component#', module)
-.addDecorator(withNotes)
-  .addDecorator(withCode)
-  .addDecorator(withJsCode)
-  .addDecorator(withDiff)
-  .add(
-    '#phpFileName#',
-    () => {
-      return #componentVariant#;
-    },
-    {
-      notes: { markdown: docs },
-      diff: { jsmarkup: jsCode }
-    },
-  )
+export default {
+  title: 'Components/#deprecated##componentGroup##component#',
+  decorators: [withCode, withNotes, withJsCode, withDiff],
+};
+
diff --git a/php/php_storybook/scripts/render.php b/php/php_storybook/scripts/render.php
index 697ea2739..947f0f7dd 100644
--- a/php/php_storybook/scripts/render.php
+++ b/php/php_storybook/scripts/render.php
@@ -43,9 +43,10 @@
     // Get the list of data files.
     // For each data file the renderer will create an HTML file.
     $files = array_slice(scandir($specs_folder), 2);
+    $data_story = $prepend = '';
 
     foreach ($files as $file_name) {
-      $data_html = $base_component = $data_story = $prepend = '';
+      $data_html = $base_component = '';
       try {
         $variant = str_replace(
           '.json',
@@ -60,61 +61,45 @@
         $data_json = json_decode($data_string, TRUE);
 
         if (!empty($data_json)) {
-          // If it's a modifier we demo it in a folder together with the other variants.
           $base_component = $helpers->baseComponent($variant);
-          // Here we render the template with params.
-          $data_html = $twig->render($template, $data_json);
-          // But then we need to fix something...
-          $data_html = $helpers->fixHtml($data_html, $component, $data_json);
-          // Create stories files.
-          $adapted_variant = str_replace('-', '_', $variant);
-          // We try to collect all the variants in the same story, so if we find one and the story file exist we inject
-          // the additional story and we prepend the import of the component.
-          if (file_exists($folder . DIRECTORY_SEPARATOR . 'story' . DIRECTORY_SEPARATOR . $base_component . '.story.js')) {
-            $prepend = "import " . $adapted_variant . " from '../" . $variant . $result_extension . "';\n";
-            $prepend .= "import " . $adapted_variant . "Js from '../js/" . $variant . ".js.html';\n";
-            $data_story = ".add('" . $variant . "', () => { return " . $adapted_variant . "; },";
-            $data_story .= "{ notes: { markdown: docs }, diff: { jsmarkup: " . $adapted_variant . "Js }})";
-          } else {
-            // Not sure why we needed this, but it's the case.
-            if (!is_dir($folder . DIRECTORY_SEPARATOR . 'story')) {
-              mkdir($folder . DIRECTORY_SEPARATOR . 'story');
-            }
-            // Prepare a folder for the js rendered files.
-            if (!is_dir($folder . DIRECTORY_SEPARATOR . 'js')) {
-              mkdir($folder . DIRECTORY_SEPARATOR . 'js');
-            }
-            // Get the story template.
-            $data_story = file_get_contents(__DIR__ . '/../resources/story-template.txt');
-
-            // Replace the content with our variables.
-            $data_story = str_replace(
-              ['#component#', '#componentVariant#', '#phpFileName#', '#deprecated#', '#componentGroup#'],
-              [$base_component, $adapted_variant, $variant, $deprecated_component, $component_group]
-              , $data_story
-            );
-          }
-          // Here we create or update the story file.
-          file_put_contents(
-            $folder . DIRECTORY_SEPARATOR . 'story' . DIRECTORY_SEPARATOR . $base_component . '.story.js',
-            $data_story, FILE_APPEND | LOCK_EX
-          );
-          // Prepending a string in a file is a bit more clumsy in php.
-          if (!empty($prepend)) {
-            $helpers->prepend($prepend, $folder . DIRECTORY_SEPARATOR . 'story' . DIRECTORY_SEPARATOR . $base_component . '.story.js');
-          }
+          $data_html_raw = $twig->render($template, $data_json);
+          $data_html = $helpers->fixHtml($data_html_raw, $component, $data_json);
           // Save the rendered html in a file .php.html
           file_put_contents(
             $folder . DIRECTORY_SEPARATOR . $variant . $result_extension,
             $data_html
           );
-          // Symlink the docs.
-          $link = $folder . DIRECTORY_SEPARATOR . 'README.md';
-          $target = $packages_folder . DIRECTORY_SEPARATOR . 'ec-component-' . $base_component . DIRECTORY_SEPARATOR . 'README.md';
 
-          if (!file_exists($link) && file_exists($target)) {
-            symlink($target, $link);
+          $adapted_variant = str_replace('-', '_', $variant);
+          if ($pos = strpos($adapted_variant, '__')) {
+            $variant_name = ucfirst(substr($adapted_variant, $pos + 2));
+            if (ctype_digit(substr($variant_name, 0, 1))) {
+              $variant_name = substr($variant_name, 2) . '_' . substr($variant_name, 0, 1);
+            }
+          } else {
+            $variant_name = 'Default';
+          }
+          // Create the story file if it doesn't exist yet and links the README file.
+          if (!file_exists($folder . DIRECTORY_SEPARATOR . 'story' . DIRECTORY_SEPARATOR . $base_component . '.story.js')) {
+            $helpers->createStoryFiles(
+              $folder,
+              $base_component,
+              $adapted_variant,
+              $variant,
+              $deprecated_component,
+              $component_group,
+              $packages_folder
+            );
+          }
+          // Prepare the data to be added to the story file.
+          $export_code = $helpers->setExportCode($variant_name, $adapted_variant);
+          $story_code = $helpers->setStoryCode($variant_name, $adapted_variant);
+          if ($variant_name === 'Default') {
+            $data_story = $export_code . $story_code . $data_story;
+          } else {
+            $data_story = $data_story . $export_code . $story_code;
           }
+          $prepend .= $helpers->setImportCode($adapted_variant, $variant, $result_extension);
         }
       } catch (exception $e) {
         // Not throwing facilitates continuation.
@@ -123,5 +108,9 @@
         print($e);
       }
     }
+    // Here we add the import for the rendered files to the story file.
+    $helpers->prependToStory($prepend, $folder . DIRECTORY_SEPARATOR . 'story' . DIRECTORY_SEPARATOR . $base_component . '.story.js');
+    // Here we update the story file with all the variants we've found.
+    $helpers->updateStoryFile($folder, $base_component, $data_story);
   }
 }