Unleash Creativity: A Guide to Web Storytelling with AMP and Seamless React Integration

Published in

Deutsche Telekom Digital Labs

4 min readApr 17, 2024

Purpose of writing this blog:

· Learn about the modern way of storytelling on the web, which includes sharing information, news, articles, and ads.

· This blog is unique because it shows you how to use web stories in React, something that hasn’t been explored much online.

· It’s like a breath of fresh air!

Use in Organization:

· If your team wants to use web stories, this blog is a great starting point.

· It gives you a clear example to follow.

· Since this is new information, being ahead of the game could give your organization an edge.

Create the Web Story:

Web stories, also known as “visual stories” or “AMP stories,” are a form of digital storytelling designed specifically for mobile devices and web browsers. They typically consist of short, immersive multimedia content presented in a slideshow format, combining images, videos, animations, and text. Web stories are characterized by their visually rich and interactive nature, allowing users to swipe through the content easily. They are often used by publishers, brands, and individuals to create engaging and bite-sized narratives that capture the audience’s attention quickly.

Design of the Page:

These are the following fields we set on the web story. As we say that this is the optimized structure of the web story.

Know About AMP

AMP, which stands for Accelerated Mobile Pages, is an open-source initiative designed to improve the performance of web pages, particularly on mobile devices. It was launched by Google in collaboration with other technology companies and publishers.

Overview & Syntax of AMP

Creating AMP Web Stories involves using a specific syntax based on the Accelerated Mobile Pages (AMP) framework. The syntax includes a combination of HTML, CSS, and JavaScript elements, following a set of rules and components designed for fast and efficient mobile web experiences. Here’s a basic example of the syntax for an AMP Web Story.

AMP Integration with React:

Need to install below package in React:

Integrating dynamic data into the AMP story involves creating a dynamic data object, which looks like this:

const ampStoryData = [
    {
      "id": 1,
      "title": "",
      "content": "",
      "src": "",      
  }
  ]

Integrating dynamic data into an AMP story in React is achieved as follows:

return (
    <div className="App" style={{ textAlign: "center" }}>
      {ampStoryData && (
        <amp-story standalone>
          {ampStoryData.map((data) => (
            <amp-story-page id={data.id} key={data.id}>
              <amp-story-grid-layer template="fill">
                <amp-img
                  src={data.src}
                  width="1080"
                  height="1920"
                  layout="responsive"
                />
              </amp-story-grid-layer>
              <amp-story-grid-layer template="">
                <h1 style={{ color: "gray" }}>{data.title}</h1>
                <p
                  style={{
                    justifyContent: "left",
                    color: "white",
                    fontSize: "16px",
                    fontFamily: "inherit",
                    paddingBottom: "70px",
                  }}
                >
                  {data.content}
                </p>
              </amp-story-grid-layer>

            </amp-story-page>
          ))}
        </amp-story>
      )}
    </div>
  );