> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Lab - See it in Action!

Plan: Developer Foundations

Lesson 4 of 28 · 5 min

To see the GraphQL Storefront API in action, check out the Bootstrap + Vanilla JS Storefront API Example hosted on GitHub. This example shows how a static HTML site can be used to render dynamic product information via the GraphQL Storefront API.

### **In this lab, you will:**

* View the GraphQL Storefront API Example with sample data

### View the Example with Sample Data

1. **Go** to [https://bigcommerce.github.io/storefront-api-examples/html-bootstrap-vanillajs/](https://bigcommerce.github.io/storefront-api-examples/html-bootstrap-vanillajs/)
2. **Click** the "Submit" button
3. **View** web page (view page source to view comments in the HTML and queries)

![Image](/_fern-files/bigcommerce.docs.buildwithfern.com/730041f2f006ffba3dca0b48e913ae686250dde5a8a8ecdf9ce3b7924b6ba6ad/assets/learn/graphql-storefront-api/BuyButtonExample.gif)

## Resources

* [Vanilla JS Storefront API Example Source Code](https://github.com/bigcommerce/storefront-api-examples/blob/master/html-bootstrap-vanillajs/index.html)