Published in


Displaying a field from Database to a Webpage

A non-conmprehensive guide that hopefully fills some gaps.

Go to the API tab of your Bubble App. It’s in the same row as APP PLAN and GENERAL.

Make sure the data type is selected (select the checkbox to the right of the name). Without this checked, API data can’t be transmitted.

Your data API root url will look like this:

Since I used the data type ‘postman’ mine ended up looking like this:

You may want to create an API token to play around with in The token created will be a bearer token that you place into Postman. Create a workspace then place the copied token from Bubble in the Authorization tab.

If doing a POST, the BODY tab will need:

“Bubble field name” : “Any text you want to send”

If the post is successful you should see a success message and the Bubble ID.

To do a GET request, simply select GET instead from the Postman dropdown. A bearer token can be used or not depending on how it’s configured. Play around with it.

Check out the CodePen I made which shows a successful connection between Bubble and CodePen. Theoretically, this should work on any webpage where you can add JavaScript, HTML, and CSS.

Things I learned or did.

JSON Stringify is needed to convert data to display it properly.

The Replace method was needed to get rid of the quotes.

I used version-test ( so that my public data wouldn’t accidentally be modified.

Thanks for reading. My name is Nathan Puls and I enjoy building on the no code tool Recently I made a web app called that lets you save and share links.

Reach out to with any questions or comments!




A web kit designed to make your life easier. Want to be a part of it? Visit

Recommended from Medium

Create an Elegant Login and Register Form on React

Introduce javascript filter && implement your own filter

Node.js Tutorial: Parsing CSV

JavaScript Basic Concepts

5 Key Concepts to Level Up Your JavaScript Skills

The Ultimate Guide To Gatsby

How to create a two-way navigation map

Deployment problem: XC_CRASH (SIGABRT) from React Native to iOS App Store(1)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nathan Puls

Nathan Puls

Voice Over |

More from Medium

Free GST invoice generation tool!

BUILD YOUR OWN WEBSITE WITHOUT CODING — No-code solution for those who want to be digitised!

Louisville Tech Ecosystem Guide

Is Email Still Important in 2022?