For many years, I've been developing web applications using the web platform as is.

Recently, as many others, I've looked at what possibilities would be to use AI to help generate templates, components and even whole apps.

In this post, I've decided to let Google's Gemini generate everything for a small web demo, using web components and see how it goes.

A simple data set

For data, I decided to ask Gemini to generate a JSON file containing a structured JSON of the top 100 classic novels:

Prompt: "Create a structured JSON file, containing a list of the top 100 classic novels, including author, title, release year and a short synopsis"

Within seconds, I received a JSON containing the following:

{

  "classic_novels": [

    {

      "author": "Homer",

      "title": "The Odyssey",

      "release_year": -800,

      "synopsis": "The epic tale of Odysseus, king of Ithaca, and his ten-year journey home after the Trojan War, facing mythical creatures and wrathful gods."

    },

    {

      "author": "Mary Shelley",

      "title": "Frankenstein",

      "release_year": 1818,

      "synopsis": "A young scientist, Victor Frankenstein, creates a sapient creature in an unorthodox scientific experiment, leading to tragic consequences for both."

    },

    {

      "author": "Jane Austen",

      "title": "Pride and Prejudice",

      "release_year": 1813,

      "synopsis": "The story of Elizabeth Bennet, who navigates issues of manners, upbringing, morality, education, and marriage in the society of the landed gentry of early 19th-century England."

    },

    {

      "author": "George Orwell",

      "title": "1984",

      "release_year": 1949,

      "synopsis": "In a dystopian superstate ruled by the totalitarian Party, Winston Smith secretly defies the regime, an act that leads him to question everything he knows."

    },

    {

      "author": "Harper Lee",

      "title": "To Kill a Mockingbird",

      "release_year": 1960,

      "synopsis": "Narrated by a young girl named Scout Finch, this novel explores themes of racial injustice and the loss of innocence in the American South during the Great Depression."

    },

...

Making it visible

Then Asking Gemini to generate a standalone HTML page, where it's possible to load the JSON and show it using only web standards, again within seconds, the output was presented:

Prompt: "now make a standalone web page (HTML), where it's possible to load this file and display it in a table, where it's possible for the user to sort by author, title or release year. No external dependencies should be used and the items should be shown as a card, rendered like an old school library card - using web components but only using pure web standards"

The web view:

Sorting works as expected - very cool :)

I then asked Gemini to modify the HTML to add a view transition on clicking a card to bring it into focus and again, within seconds the result was there:

Prompt: "can you change the html, so when a card is clicked, it will make a view transition to fill the screen and when clicked again, it will go back in the list"

Looking at the code

When looking through the produced HTML, it's nice to see how comments explain the reasoning behind functionality that I didn't explicitly ask for, but makes sense in the context of - in this case - visualization of publishing year:

// Helper to format year (e.g., -800 -> 800 BCE)

formatYear(year) {

    if (year < 0) {

        return `${Math.abs(year)} BCE`;

    }

    return year;

}

It's also nice to see how Gemini has chosen to make a sort function to handle both text (title and author) and numbers (publishing year):

function sortData(key) {

    if (!novelsData || novelsData.length === 0) return;



    novelsData.sort((a, b) => {

        if (typeof a[key] === 'string') {

            // Case-insensitive string comparison

            return a[key].localeCompare(b[key]);

        } else if (typeof a[key] === 'number') {

            // Numeric comparison

            return a[key] - b[key];

        }

        return 0;

    });

}

For browsers not supporting the View Transition API, there is even a fallback:

cardContainer.addEventListener('click', (event) => {

    const clickedCard = event.target.closest('library-card');

    if (!clickedCard) return;



    const isFocused = clickedCard.classList.contains('focused');



    // Use the View Transitions API

    if (document.startViewTransition) {

        document.startViewTransition(() => {

            toggleFocus(clickedCard, !isFocused);

        });

    } else {

        toggleFocus(clickedCard, !isFocused);

    }

});

In general, the produced JavaScript, CSS and HTML gets the job done and I am impressed.

Making a game

After seeing how well Gemini handled the task, I wanted to give it a slightly harder challenge: To create a small game with keyboard input, audio and all.

Prompt: "Using pure web standards, create a small game in a standalone HTML file, where it's possible to control a car seen from above, using the arrow keys on the keyboard. Also include realistic generated sound effects using web audio. It should be possible to "drive" the car around on the screen, collecting coins randomly placed. There should be a score number accumulated in the top right corner"

Within seconds, it delivered:

NOTE: Sound was not captured in the video, but you can try out the game here

Conclusion

It was quite fun and impressive to see how easy it was to create these fully functional web demos with a few simple requests to Gemini. Even if the output may not be exactly what was intended, the code is well structured and easy to read and modify.

The code produced can be found here

Enjoy :)