# Mapping JS components to (Gutenberg) blocks This tutorial lesson presents an example [Preact](https://preactjs.com/) app that queries for block data and maps it into customized JavaScript components.
⚙️ **Configuration alert:** In order to run the Preact app below as a static `.html` file in the browser, the [Schema Configuration](https://gatographql.com/guides/use/creating-a-schema-configuration/) applied to the endpoint needs to have [Response Headers](https://gatographql.com/guides/schema/adding-custom-headers-to-the-graphql-response-cors/) with the following value: ```apacheconf Access-Control-Allow-Origin: null Access-Control-Allow-Headers: content-type,content-length,accept ```
_(The HTML code below is inspired by [the Preact example in `Automattic/vip-block-data-api`](https://github.com/Automattic/vip-block-data-api/#preact-example).)_ The GraphQL query contained in the code below retrieves the post's block data as a JSON object (via field `CustomPost.blockDataItems`), and then the JavaScript code maps each block data item into a custom component: ```html Gato GraphQL - Mapping JS components to (Gutenberg) blocks: Preact example ``` Running the application produces the following HTML code from post data: ```html

Welcome to a single post full of blocks!

When I look back on my past and think how much time I wasted on nothing, how much time has been lost in futilities, errors, laziness, incapacity to live; how little I appreciated it, how many times I sinned against my heart and soul-then my heart bleeds. Life is a gift, life is happiness, every minute can be an eternity of happiness. (Quote by Fyodor Dostoevsky)

This blog post will be transformed...

If you make it a habit not to blame others, you will feel the growth of the ability to love in your soul, and you will see the growth of goodness in your life. (Quote by Leo Tolstoy)

I love these veggies!!!

When going to eat out, I normally go for one of these:

This heading (H3) is boring (Regex test: $1 #1), but these guys are not

```